Hamster Wheel threejs example

Some times I end up experiencing a kind of burn out because I spend a great deal of time doing what I think I need to do, rather than what I want to do. Sadly often I end up spending all day writing these posts, and simple source code examples for such posts. As such there often is no time and energy left over for working on any kind of real project that I truly would like to work on when it comes to making things that are useful, or at least mildly amusing in some way. So I thought that some kind of threejs example would be a nice break from the usual kind of post where I am just writing about some kind of method in a framework, or some kind of native javaScript feature.

With that said this post will be on an example where I have a simple little guy model that is walking inside a human sized hamster wheel. So this is a a fun little project that has to do with something that is often used as an analogy for being stuck in a loop in real life where I keep doing the same things over and over again, and never really get anywhere which of course results in a kind of burn out. In other words getting stuck on a hamster wheel of life sort of speak, which then raises the question how does one get off this hamster wheel. The solution is simple, it just means trying something new to see if things work out better, and if not just keep changing until something is found that works out well.

Anyway when it comes to starting to make something that is starting to look like an actual project of one kind or another I have found that I like to just make very simple basic models that are just groups of mesh objects that are using the built in geometries in threejs. There is taking the time to look into how to go about making models in a more professional way, but when it comes to making animations with threejs I think the most important thing to get solid is to just to work out a certain style, and make sure that the frames come out the way that I want them to when it comes to that style. With that said todays post will be yet another one of those kinds of examples where I am just having a little fun with threejs.

Read More

javaScript angles module example

When working on various javaScript examples I often run into problems that have to do with angles. I often find or make solutions for these problems, but they ended up littered all over various collections of examples, and I can not always remember where a certain method that solves a given problem with angles can be found. So I thought it would be a good idea to start a javaScript example that is a stand alone module that can be used to work with angles, and various problems that have to do with angles.

There are two general problems that I think many javaScript developers will run into when starting to make canvas games from the ground up without a framework. One of which is to find out how to go about getting an angle from point point in the canvas to another. This problem can be result by making use of the Math.atan2 method in core javaScript, the use of it is a little weird tough so it make a little sense at least to have an abstraction of sorts for it, which would make a good additional to a library like this. The other general problem that comes to mind has to do with finding out what direction to rotate an object in order to face the direction of another object, so another method of interest is a kind of get shortest angle direction method.

Many of the methods that I have in this module are based off of angles.js up on npmjs, which is still a great module for many of these kinds of tasks. Still the module seems to no longer be support, but still seems to work just find in many situations. I really wanted to just make my own module for this sort of thing though, so I started putting something together of my own that just contains the methods that I seem to use the most often, with just a few slight changes here and there.

Read More

Basic javaScript game example called just simply Egg Eater

For today I want to go in a new direction with these javaScript example posts by starting the first of what might be a bunch of basic games using javaScript and canvas elements. This game is a simple idea where there are a bunch of display objects that spawn at the upper right corner of the canvas, and move to an object that represents a guy at the lower left corner of the canvas that likes to eat a whole lot of eggs. The good news is that most of these objects are eggs, the bad news is that now and then one of them is a bomb. When the player clicks the canvas and holds down onto the canvas the guy will start eating whatever it is that is hitting him. For each egg the player gains score, however if even one bomb is eaten the game is over.

The idea is simple enough and it should prove to be the kind of game to which I can get the basic idea working in less than a day. There are a lot of little things to cover when it comes to this though, and as silly as the idea might seem a lof of the ideas might carry over well into other projects. For example there is moving one display object to another over time, that alone is a topic that will come up over and over again in all kinds of other types of games.

Read More

Share code between nodejs and the browser with this javaScript module example

I am continuing to expand my collection of javaScript example type posts this week, and today I think I will be covering a simple module design pattern for sharing code between nodejs and a browser environment. There are a number of popular user space projects that make use of this kind of pattern so that a single from of the file will work great in nodejs, or a browser, one great example of this world be the mark down parser know as marked.

One of the cool things about nodejs is that I can use the programing language of the open web to create scripts that will run in my operating system environment. However it would be nice to make modules for nodejs that will also work in a browser environment also without hacking over the code a little first. This sort of thing might not be a good idea for all situations might you, but with something like a parser, or a library that I want to use as part of a game mode that might run in the browser or a node environment this sort of thing can prove to be useful. Thankfully the process of doing so is not so hard, and can be done with just a few basic core javaScript features.

Read More