I’ve been playing with the Raphaël JavaScript library this weekend quite a bit, and I really like it. Raphaël lets you programmatically draw and animate vector graphics on the web.
What I really want to do with it is to dynamically generate avatars to be used on the Fake Name Generator. For example, the code would pick a skin color from a predetermined range of skin tones, a hair style, a hair color, lip style, lip color, eye shape, eye color, etc etc. It would then layer all these items together into an SVG graphic. Using a bit of JavaScript, I could even make the eyes blink every few seconds. If needed/desired, this SVG graphic could then be converted to a PNG image.
But that is a bigger task than I’m ready to really start at the moment, so instead I’m playing around making a simple matching game. The goal is to create a mix of PHP and Raphaël to allow the developer to define a list of images that are used to automatically create a matching game. Unlike most matching games available online, mine will allow the developer to specify two different images that match. For example, a picture of a person and an image with the person’s name would be a matching set. Or a picture of state and a picture of the state’s flag. Things like that.
I haven’t gotten very far yet. As of this writing, all it can do is generate 3 pairs of cards. Each pair of cards has a different color. The game lets you click cards and try to match them. Very basic.
Once it is finished, I plan on releasing the source code under a friendly license and then using it on an LDS gaming site I’m working on.
Anyways, check out the matching game or the demos at Raphaël.
