Spin Grid

￩ Previous     ￪Up to portfolio     Next ￫

We start with a grid of squares, minding their own business. Then we add in some circles. Each circle pushes the square tiles out of its way, which also makes them shrink, spin, and change color. You start with a bunch of computer-controlled circles, and one circle under your own control. Just click and drag the mouse to control your circle. You can turn either kind of circle on and off, and you can affect lots of other things using the keyboard.

To control this animation, first click your mouse on the picture and then use the following keys:

  • a   turn the computer-controlled balls on and off
  • –   remove one computer-controlled ball
  • +   add one computer-controlled ball
  • r   toggle rotation of the tiles
  • s   toggle scaling of the tiles
  • u   turn the user’s ball on and off
  • b   make the user’s ball smaller
  • B   make the user’s ball bigger
  • p   decrease how much the balls push away the tiles
  • P   increase how much the balls push away the tiles

Remember that the speed and smoothness of the animation is dependent on your computer and what else it’s doing at the moment!

Download the source code here.