Canvas Experiments
24March2012
So I started learning the html5 canvas feature, and here are the three projects I coded.
- Crazy Paint makes the computer paint
randomly on the canvas with a random brush. The brush draws random shapes, some
filled, some unfilled, around the point being painted. If you are patient enough,
you can try leaving the computer to draw on itself until it makes a nice wallpaper,
like the one shown below.
- Simple Paint uses a lot of codes from Crazy Paint, and the only difference is that it allows the user to draw instead of letting the computer draw randomly. Since this is a really simple project, there’s not much control, just move the mouse around and shapes will be drawn.
- Dots is quite different because it has
animations! I also apply so physics dynamics law so you can see the dots bounced around
realistically. The game play is simple: all the dots are attracted to the mouse,
and repelled when the mouse is pressed down. Hover on the top left corner
to go into settings, which allows you to add/remove dots, change the friction, and change
the mode to “let’s paint” which turns all the dots to brushes - and this is really
fun. Below is a picture drawn during the “let’s paint” mode.