Yujian Yao

Software Engineer

Canvas Experiments

24March2012

So I started learning the html5 canvas feature, and here are the three projects I coded.

  1. 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.
  2. 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.
  3. 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.