2.5D Dungeon Exploration in WebGL

About two months ago I created this little WebGL game (and a smaller version here) for a graphics course at school. The code can be found here on GitHub and the documentation here.

The course was mostly OpenGL, and I figured I should try making a project in WebGL, since it’s similar but more easily accessible (i.e., anyone with a capable web browser can play it). Decided it’d be cool to try a 2.5D game, and while brainstorming ideas, stumbled upon Bitworld, which seemed like the kind of environment I wanted to try making. So after looking up a bunch of tutorials on WebGL, javascript libraries, lighting methods, and billboarding, I came up with this.

Advertisement

Gyazaux

The short story: I wrote a custom Gyazo client and server script that lets you name your screenshots, save as PNG or JPG (the original allows only PNG), and an option to save the file locally.

I decided to call it Gyazaux. You can find the source code for the client here and the server here. If you want an executable file, you can find it (along with the PHP script) in a zip file here.

Tumblr Sidebar Sideblog Expander

This was a while ago (I really do need to update this site more often, whoops), but back in early September, Tumblr decided to change its layout. Sideblogs, which used to be clickable links at the top of the page, are now on a right sidebar, and what’s annoying is that you have to click twice to get to a sideblog, whereas before it only took one click. Might just be a minor issue, but it kinda bothered me.

I figured that since I know a decent amount of javascript by now, I’d write a greasemonkey script to automatically expand the sideblog list on the right. So on September 8th I decided to give it a shot: here it is (or here). It will probably stop working when Tumblr changes its layout again though.

Update: Doesn’t work so well anymore.

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.

NicoNico box robot

Woah hey I haven’t updated since last year. Well here’s a post. Here’s some backstory behind this one: Last time SparkFun had a Free Day, I won $100 after entering a ton of Captchas for several hours and getting lucky. One of the things I spent it on was continuous-rotation servos because I felt like trying to make a robot of some sort. I once tried modifying some regular servos to be continuous-rotation but I pretty much just ruined them, so I don’t want to try doing that again.

In any case, here’s a quick attempt at a simple robot that just moves forward slowly. The wheels were made from parts of a VHS case which were then taped to the servos. I guess the main issue is that it’s USB-powered so it has a really limited range. I tried using a 9V battery to power the Arduino but apparently that isn’t enough to power two servos (I could hear them clicking, but not moving), so I’ll need an extra power source specifically for the servos. The problem is my lack of battery holders.

Cubey the TF2 kill tracker

Today I was bored and I remembered this video I saw awhile back that had a TF2 kill counter using an Arduino. I’ve been playing TF2 a lot recently (since it became free to play, I’ve been doing a lot better in comparison) so I figured it would be cool to implement something like that. I could’ve done it with LEDs or even GLCD screens (actually it might be cool to do something with the LoLShield), but since Cubey’s been sitting on my desk unused for the past few months, I thought I’d put him to use. Cubey gradually turns around as I get more kills, and after a certain point, he starts moving his ears. He turns back around in disappointment when I die, though.

I used Python to read the config.log file located in the tf folder (on mine, it’s “C:¥Program Files (x86)¥Steam¥steamapps¥your_username_here¥team fortress 2¥tf”). It reads the latest lines and looks for “A killed B” or “A suicided” and sends either a + to the Arduino when A kills someone or it sends a 0 when A is killed by someone else or kills themself. The Arduino then reads from the serial port one character at a time and makes the Cubey servos move accordingly.

Python and Arduino code are in this zip file.

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.

Touchscreen Music

Made this back in May but never actually made a post on here about it. I used the “Touch Screen/Digitizer for NDSi LL” I got from DealExtreme and a speaker to generate sound based on where you press on the screen.

Miditones & Playtune

In my search for some more awesome music-related Arduino things, I found Miditones and Playtune. Miditones takes a MIDI file as input and outputs a C array that you can copy/paste into your Arduino code and play it using the Playtune library. I just used the example code for an Arduino Nano, with pins 10, 11, and 12 going to three different speakers.

I didn’t realize until just now that the comment in the code says that you can wire all three pins to a terminal of one speaker, but I guess having three speakers makes it kinda surround-sound-ish. Maybe I’ll upload some more videos with a single-speaker setup or with a piezo buzzer. Anyway, here are some videos of Vocaloid songs being played with the Arduino.