This was a demo I did for the advent calendar Create a number of snowballs and put them together to a snowman. The trail is created by drawing into a canvas which is sent into the ground-shader as a height-map. In the vertex shader the vertices is displaced along the y-axis and. In the fragment-shader it is used for bump-mapping. The snow also becomes a bit darker when it’s below a threshold height. The shape of the track is defined by the radial gradient used when drawing to the canvas. I like that you can run over the existing tracks and leave a bit of a trail of the current direction. That adds more depths than just a static layer painted on top.

In a earlier version the ball geometry was affected by actually touching the snow, extruding vertices once per rotation if vertex was below the snow. But when it became more focused on creating a snowman, it made more sense to make perfectly round snowballs. I’m not so happy about the material on the snowballs. The UV-wrapping and the spherical texture creates familiar artefacts in the poles, pinching the texture. But there was not enough time to look into this at that time. A procedural approach would have been nice to avoid it. Or not use UV-coordinated, but calculate them in a shader. Like these guys (@thespite@claudioguglieri@Sejnulla) who did a nice site about the same time with a much better snow-shader: That shader can also be seen here.

Collision detection is just a simple distance-test between the spheres and the bounding-box.

Try it out here.

View the source at github.

Plus & Minus


This is a small game that my oldest daughter Hilda helped me out with. We made this so she could practice basic math numbers, addition and subtraction, in a fun and simple way. When you answer correctly the guard let you into the gate and another track is added to the soundtrack, evolving the music as you go. The country-inspired music is a 8 bar loop with multiple tracks made in Logic. Every track is added to the WebAudioAPI-powered sound controller and starts to play at the same time to keep sync. I found this neat helper to quickly put it together. Each track gets it’s own volume-control.  The drawings is captured with an iPhone camera, a really quick way to getting the graphics in. Animations and transitions is managed with CSS3/SASS and a little bit of Javascript to trigger them and add some logic. The game also have support for touch-input and various screen-sizes, so you can practice on the school-bus.

Play now