HTML5 Canvas

Profile photo of Jessica

I have been playing around with animation in Javascript/Canvas off and on for a while. Given that whatever programming I get to do at work is typically some kind of system script or automation tool, it’s nice to do something with a bit of visual feedback. It is also very frustrating because the interactions between actual real world things that I can see and touch often confound me.

Anyway, this is what I have managed thus far.

Boundary detection. The circles change direction when they hit the container boundary and fade when they cross each other’s area. The line between the two was just to help me verify the distance was being calculated from the center.
New window.
[iframe src=”http://noconceptoftime.net/ballvas.html” width=”630″ height=”610″]

Reverse direction on collision. Added a visible border for the container boundary too.
New window.
[iframe src=”http://noconceptoftime.net/ballvas2.html” width=”630″ height=”610″]

Every time the circles collides, the larger one steals a bit of mass from the smaller one.
New window.
[iframe src=”http://noconceptoftime.net/ballvas3.html” width=”630″ height=”610″]

The larger on steals mass and color on collision.
New window.
[iframe src=”http://noconceptoftime.net/ballvas4.html” width=”630″ height=”610″]