Magnetic Beardy




(This barcode is used with a QR reader. If you don't know what a QR reader is, you should definitely find out!)

Do you remember playing this game when you were a kid?  Drag the magnetic particles around to give Mr. Beardy a new hairdo. This is a simple game that is great for kids.  Try it out!

What I plan to do next
  • Add more magnetic particles!
  • Add multi-touch support. This is going to be tricky, since I would like to do it in a backward compatible way.
  • Add accelerometer support, so that you can shake it, or let all the particles fall to one side.
  • Allow users to select a background image.
  • Share pictures with friends via. email or facebook.


How I did it
The particles use a circle vs. circle intersection test to determine collisions. Intersecting circles are pushed apart along the line that connects the centers of the circles.

Before performing intersections, particles are sorted into grid cells. Particles only intersect with other particles that are in the same or neighboring cells.

If the grid cell represents a boundary with the wall, particles in this cell are also constrained, so that they don't leave the playing area.

The force from the touch point uses a magnetic-like 1/r2 distribution. The force does not extend beyond an outer threshold.

There is also an inner threshold where the particles are rigidly attached to the touch point. This prevents diverging forces near the point, as well as easier dragging of particles.

Each particle sprite has a directional bias. (They are longer in one direction.) I try to orient this bias along the force lines, in order to make the particles appear like they are being influenced by a magnetic field.