Francois Laberge has created some cool 3D lighting effects by using normal mapping on photos using the canvas element. All lighting calculations are performed per pixel using getImageData/setImageData then the lighting and regular photo are combined together to create the 3D lighting effect.
Normal Mapped Photos
Each photo shows a different effect – the first shows lighting from left to right; the second shows lighting from any direction. The “Raisin Bran” photo shows a glow effect; the globe shows multiple coloured lighting effects whilst the final three show lighting on 3D models.
Lucas has written a useful tutorial for those of you who want to start creating canvas HTML5 games right here, right now. The tutorial describes how to create a Sokoban game.
Make your own Sokoban game
In his tutorial, Lucas describes the structure of a typical game class in JavaScript, drawing to the canvas, double buffering, map/tile representation and player movement.
Canvas Rider is an addictive game where you ride a bike on thousands of tracks drawn by other players. The game is written using the canvas element.
Ouch.
To control the bike, you use the up key to accelerate, left and right to keep your balance and Z to turn. If you fall off your bike, you can always press Enter to restart or Backspace to cancel checkpoint(s).
Almer Thie has created a realtime interactive water ripple effect using the canvas element. All pixels are read out from the canvas, the water ripple effect is applied and all altered pixels are inserted back into the canvas.
Touch the water
Comments from the Author:
The water ripple effect mimics a top view on water with water rippling and refraction of light through the water. On my implementation you can use your mouse like it’s your finger that touches the water. Pressing the mouse button gives you a bigger ‘finger’.
3D Planet Viewer by Chris Adams renders flat images of our planet from the NASA WorldWind WMS servers onto a sphere, allows for rotation/panning and zooming. Raytracing computes the colour of each pixel, the canvas is used to set each pixel colour accordingly.
3D Planet Viewer
Drag the mouse cursor on the planet to rotate, and use the mouse up/down wheel to zoom in and out.
Hunter has produced some simple game physics tutorials to help budding canvas game developers.
With HTML5 gaming initiatives popping up all over the place, many web developers will soon build their first game. One of the most common pain points for new game developers is physics, which is demonstrated here with very minimal JavaScript.
Hunter's already done the math
Hunter provides examples of velocity, acceleration, collisions, rotation and particle effects.
There’s also a couple of impressive, more complex examples.
Home to applications, games, tools and tutorials that use the HTML 5 <canvas> element - which allows for dynamic scriptable rendering of bitmap images.
