Timelapse + Snowman Face Tutorial

I made a timelapse for Snowball Juggling Olympio my LD31 Entry :

I had to reboot my project 6h after the start. My initial idea was some sort of shooter arena with a very small ship and a very big arena 😀
The black screen sequences are my actual sleep time, it was pretty short on this jam… Not sure if it was a good thing or not.

Snowman face animation

snowmanBecause some people asked me to, I also made a small tutorial to explain the snowman face animation. I’m not very good at making tutorial, but I’ll try.

The syntax used is haxe.

In this exemple the face will follow the mouse position in the screen.

WIDTH and HEIGHT are the game size.
RAY is the head ray.
mx and my are the mouse screen position transformed into a value from -1 to 1.
elements is a list of the face elements such as the eyes, nose, mouth etc. They all have a dx & dy offset between -1 and 1 to represent their position on the face.


var mx = (mouseX / WIDTH) * 2 - 1;
var my = (mouseY / HEIGHT) * 2 - 1;

for ( e in elements ) {
var cx = mx + e.dx;
var cy = my + e.dy;
var ddx = Math.cos( 1.57 * cx - 1.57 );
var ddy = Math.cos( 1.57 * cy - 1.57 );
e.x = ddx * RAY;
e.y = ddy * RAY;
}

var angle = Math.atan2(my, mx);
var dist = Math.sqrt(mx * mx + my * my);
nose.rotation = angle / 0.0174;
nose.scaleX = dist;

tuto_2The nose element have a specific code to change his shape depending on the angle and the distance of the mouse to the center of the screen.
On the image you can see the nose also have a base element with no transformation so it can keep a round shape at the base. this element also add a small shadow using the DARKEN flash blendmode.

The use of the cosinus function make the linear values of mx and my become curved values. ddx and ddy are still between -1 and 1 but their value tends to stick to -1 and 1 more quickly. This is where the fake round face feeling happen.

This is not a 3D projection and, therefore, far from accurate especially with diagonals. In my case I had to mask my face elements so they dont leave the face area. You can see more details in the source code of my game.