Generate

Made this thing about two weeks ago while I was learning about SVGs and SVG animations, and haven’t actually posted about it on here. Type in a name, and the site will “randomly” generate a character from several different parts (i.e. hair, shirt, pants, etc) and have a different color for each part type. Well when I say “randomly”, I mean it’ll use the name as half of the seed to the pseudo-random number generator. The other half of the seed is the current date, which makes it so that the character changes every day.

So how does this work? SVGs are essentially XML files where each tag specifies a shape or group of shapes, and the tag attributes control the properties of the shape such as the line thickness and color. Each character part has its own SVG tag, so it’s simply a matter of combining different SVGs and overlapping them.

Colors are chosen randomly within a certain range (light colors), but sometimes a character part shares the same color as another part! For example, there’s a lot of different hair parts, but each of them has to be the same color or it’d look weird. One way to address this is to use CSS and assign a CSS class to each character part, and set a style for that class so they’ll all be the same color. I did this originally but decided I wanted the SVG to work without needing external stylesheets. I assigned each character part a class, and every time a character part was added to the SVG, the php script checks if the class already exists in the SVG. If so, it just reuses the color of the existing part. If not, it assigns a random color based on the seed.

The idea isn’t very complicated, but I thought it was a pretty cool way to learn how to use/generate SVG files on the fly. I also got to reuse the simple random name generator I wrote a long time ago.

Advertisement

Binary Tree Generator

Binary tree generator. No, not the data structure, but an artistic representation of a binary tree (edit: I have learned that this kind of thing is called an L-system). The swf can be found here or embedded in the full post. Click the button on the bottom left to randomly generate a new tree. I’ve also uploaded the source FLA file here. I didn’t really bother to optimize the code, so there are probably a lot of improvements that could be made.

Note: The FLA file is saved in Macromedia Flash Professional 8 format, with Actionscript 2.0. It’s a pretty old version of Flash, so it should be openable by any of the Adobe versions of Flash as well.

Arrow

Made this short platformer game awhile ago. It is a game in which you shoot arrows at things. Previous versions of the game can be found here.

Image mirroring (improved)

Mirrored Miku

An improved version of that image mirroring program I made awhile back. This one allows you to select the line of symmetry, rather than always having it be at the center of the image. Left-clicking sets the line of symmetry. Right-clicking changes the location of the zoom-box and the left/right keys nudge the line of symmetry one pixel to the left or right, if you want more precision.

It gets kinda slow if you try using it on larger images, so smaller images will yield quicker results.

A java applet and Processing source code can be found here.

Technika-based Flash game

Spent the past few hours making this flash game based on DJ Max Technika. Specifically, the song “In My Heart“. It was originally just fanart, then I decided to make it interactive by having her look at your mouse cursor, then I wanted a thing that dynamically generated bubbles (I based it on the code found here), but then I thought it’d be cool if the bubbles were notes instead. Then I was all “Hey, let’s make them clickable!” and then after that “Might as well make it a game.”

Instructions can be found by clicking the button at the bottom. SWF can be found here, and embedded in the full post.

Edit: Updated to include a sound and an star-explosion effect upon a successful click, also the ability to press T to toggle outfits. The previous version can be found here.

Arduino KS0108 touchscreen Marisa program

I edited the touchscreen Neko program to include Marisa sprites based on her sprites from “Patchcon: Defend the Library!”, except in monochrome. She can also be controlled by serial port if connected through USB: send a header byte of 255 to the Arduino, followed by the X and Y coordinates, and she will move there (assuming the previous command was a valid one). This allows her to also be controlled by, say, Ustream/IRC chat commands.

Source code and bitmaps can be found here.

Update: Had an interactive stream on Ustream where viewers could type “!mari” followed by two integers, and she would move to the coordinate (unless it’s too large or small, then she moves to wherever she can). Here‘s a recording of the stream; cooler stuff happens at about 13 mins onward (fire and snow effects). It doesn’t record the chat messages though, but they were definitely there.

GLCD with touchscreen

I took one of those Sony Ericsson touchscreens I got from DealExtreme, along with a SparkFun Nintendo DS touchscreen breakout board (it works with this touchscreen too), and put it on my KS0108 MONOCHRON GLCD screen after a lot of messing around with wires. The touchscreen is actually a really good size for this screen, it’s just slightly larger but it’s a very good fit. I knew it was a good idea to buy two of them though, because I ended up breaking one of them (the wires are very fragile and it got torn off), which is why I decided to use twenty layers of tape to protect the wires on the second one. The only downside to using this touchscreen with the GLCD is that now I only have one analog input pin left.

Animations on KS0108 GLCD

The source code for Running Marisa can be found here.

Included with the Arduino GLCD library is a Processing program by Michael Margolis that converts an image into a header file that you can include in your Arduino sketch to display bitmaps using GLCD.DrawBitmap(). It’s pretty convenient, but what if I wanted to include lots of bitmaps, to be used as frames of an animation? I’d have to generate the header files one by one and include all of them, then define some arrays to point to the different frames.

I decided to modify the program to accept a folder as an input, and the output would be a single file containing the headers for all of the files in the array. In addition, at the very end of the file, a pointer array is declared, with each entry in the array pointing to the address of each image. The length of the array is also stored as a variable.

The lines appended to the end of the file.

You can download the Processing file and java applet here.