EtchaPhysics by Matt Pelham is a gesture-enabled physics game using HTML5 Canvas.
Solve each level by drawing, moving and pinning objects you create. You can draw lines and shapes such as triangles, rectangles, circles, stars and spirals (by pressing the D key); move objects already on the playing field (by pressing M) and pin objects together (by pressing the P key).
Hint: the MOVE tool is your friend.
Comments from the Author:
Classic Etcha-Like functions like “Shake-To-Clear” and “Dial-To-Draw” coupled with a touch and gesture-enabled drawing interface create an addictive and classically fun environment. Sound Effects, Rotation-Based Gravity, and Snapshots round out the fun-factor. Now with 15+ addicting levels, 10 unique game-modes, and iPod Touch / iPhone support!
Kevin Pickell has produced this comprehensive Fractal Viewer that can display fractals such as Mandelbrots, Multibrots and Julia Sets. Left click on the fractal to zoom in, right click to zoom out.
Zooming in on the beautiful patterns created
As well as chosing the Fractal you would like to display, the demo allows you to customise colours, the shades per colour and the size of the canvas.
Jonas Wagner has created this clever light source canvas demo using a technique used for faking the lighting of bumps and dents called Normal Mapping, and phong shading – a model for the reflection of light from surfaces.
Inspect the dragon head with the light source
Comments from the Author:
The 3D effect is basically created using 2 textures. One contains the color of each pixel and the other the surface normal. The color image is rendered using only indirect lighting (ambient occlusion in that case). The direct light is then calculated in real time using phong shading without the diffuse part.
Eric Reedy from Madcap Studios has been busy creating even more user interfaces with the canvas element with this Digital Comics App website built for the forthcoming iPhone and iPad application. Most of the website’s UI is built using canvas – including the nav bar, content window (the white thing), and all inset grey areas.
The app looks impressive too!
Comments from the Author:
Having previously created our company website using nothing but canvas for the UI, logo, and animations, when I sought out to make a website for our new app I found it quite natural to do the same. This approach allowed for fluid animations while toggling around, it speeds up load time due to a lack of images, allows for infinite scalability, and maximizes cross-browser consistency. And of course, it works fine on the iPhone as well.
Frequent canvas developer and pepper guru Kevin Roast has been busy working on his own 3D engine written entirely in JavaScript and HTML5 canvas using the pixel, line and polygon drawing APIs.
Funky 3D Icosahedrons FTW!
Comments from the Author:
All 3D maths is hand cranked and rendering performed using the nifty Canvas APIs – no 3D plugins or Canvas3D extensions required. Objects can be displayed as points, wireframe, solid polygons and shaded using depthcued (z-order) or light sourced – things can be rotated around and moved about to make cool demos. A simple linear-additive lighting model with any number of coloured lights can be applied to solid objects.
There are a bunch of different demos to be viewed on Kevin’s site, click on each demo to start (or stop) them.
Hakim El Hattab has created this water themed canvas demo. The demo consists of a wave which bubbles to the surface tweets that mention the word “water”. The waves movement is affected by movement of the mouse cursor.
Surf the wave of tweet bubbles
Click the bubbles to pop them and reveal the tweets contained within!
