Tweetcoding: Round 1 Winners

Hooray, I’m a runner-up in the first Tweetcoding contest. My entry “Ghost Marquee” placed in the top 4. The code extracts certain bits from a string of jibberish, 6 bits at a time; when arranged on a grid, the bits form a message.

Also I had 2 notable mentions with Sea Sphere and 3D Sketch. I figured my entry The w00t Quilt would have placed, but perhaps I’m just easily hypnotized…

I think the strongest entry was Diagonal Snake by @tomee6, which is (not coincidentally) also one of the winners. Move the mouse to attract the snake; you lose when the snake crosses itself or touches you. There’s even a death animation. Amazing.

Here’s looking forward to round 2…

Fractal Transform, made with Pixel Bender

I made a Pixel Bender filter that performs Julia Set transformations on images. It looks great when it animates, the colors morph and twist like mathematical slime. Try it (Flash Player 10 required): JuliaTile.swf

Source code: Pixel Bender code is in src/shader/.

The default image is Seattle’s Space Needle. You can upload custom images. Very large images may set your processor on fire.

Continue reading

Tile engine is go!

Homemade tile engine!


Click to play.

  • Move: Arrow keys, or WASD
  • Shoot: Mouse button, or IJKL

Make sure you grab a weapon in room #2, so you can shoot the orcs. Currently, there are 9 rooms for romping.

Not one pixel of the art should be considered “final”. Most sprites & tiles have a ColorMatrixFilter that “skins” them with four particular colors (see my post detailing this technique). In some respects, this is wonderful, as the colors can be randomized, and it’s easy to change the palette of an entire room. Unfortunately, to maintain retro look & feel, I chose the Atari 2600 palette. The dark colors are over-saturated, the pastels are unexciting, and the hue distribution is completely wrong (nearly half the colors could be considered “green”). This will be dealt with.

An earlier screenshot shows some vector art. Unfortunately, the vectors currently require Flash 10. I’ve disabled this feature… for now.

Reactions to Horacio Salinas

I’m talking about

The electrical static was very disturbing. I don’t think it adds to the photography, but it did add to my anxiety about my own computer enough that I bailed even though I knew it was something on the site. HTH” — Zani

(There is a glitchless version of the site at

Also… They say imitation is the sincerest form of flattery, so I’m amused that copied the site in its entirety (even the images!) but changed the copyright. I’m glad you appreciate our hard work, Yeni. I feel like I’ve finally arrived, ya know?

Understanding the ColorMatrixFilter class!

I haven’t seen many people explore the ColorMatrixFilter class, probably because it appears daunting. I’m happy to report that I comprehend the mysteries of ColorMatrixFilter now, and I thought I’d share a technique we used in our new game, Space Kitty.

Before we jump into ColorMatrixFilter, let’s ponder a different, and more commonly-used, class first: ColorTransform . Using a ColorTransform, you can “tint” any DisplayObject with color. But there’s something sneaky you can do, as well — Notice that ColorTransform gives you two parameters for each of the four color channels: Red, Green, Blue, and Alpha. One parameter is the “multiplier,” which takes the input value and (predictably) multiplies this value by a constant. The other is the “offset,” which works like addition: adding (or subtracting) another constant from the value. These two functions are applied to all four color channels of each individual pixel. That’s how the magic works.

Continue reading

How to Crash Flash

Miles and I submitted our new Flash game to the 4th Jay Is Games competition. In Space Kitteh (pronounced something like “Space Kitty”), the object is to rescue cats in an outer space environment. The physics are a real treat — it’s impossible to “fall” off the landscape. If you get lost, just wait for the solar system’s gravitational pull to drag you home.

It’s a lot of fun, but I need to warn you about a serious problem in Space Kitteh. This is a heads-up for users of Windows Flash Player —

Our game will crash your browser.

Continue reading

3D Interface

I read relevant chapters of 3D Graphics Programming, and felt my knowledge expanding; I was able to fix the foreshortening bugs in my 3D engine. Then I added solid surfaces, but added some components to the stage that I wasn’t completely happy with. Try the swf.

Today I thought about interface design, and performance issues (the sluggishness this early in development irks me) so I thought about simplifying the design a bit. Here’s where I’m at:

Play with the swf. The button has a rollover state, but doesn’t react when clicked.

MUST … INCREASE … PERFORMANCE. Somehow. I have some approaches in mind, but I was hoping to escape the long process of experimentation & optimization. Oh well, stay tuned.

Music of the Spheres

I took a couple weeks off, played a booty bass show and did some other things. Onward!

Play with the swf. Move the camera with the mouse; Click the mouse to summon a new message.

Creating this graphic demo was not a huge ordeal. I probably spent more time futzing with Subversion than writing code; and by the way, this project may evolve into my personal website, so it has its own SVN repository now.

I’ve pinpointed two interesting problems with my 3D engine: 2D Symbols (such as the letters) do not exhibit foreshortening, yet 3D symbols do. (This is almost a good effect; like a low-fi hack that ends up being more stylistic than a hi-fi equivalent. Maybe I’ll conveniently forget about this issue for now…)

And, my Matrix3D class has a buggy method: either multiply() or rotate(). An early version of tonight’s .swf turned the cube in space, but it would also re-apply the camera angle to the cube, turning it in crazy unexpected ways. … TODO.

I just looked at the PaperVision API (.pdf), they have a Matrix3D object that is much more advanced than mine. I’m still glad I wrote my own engine, it was fun and I feel more competent with 3D math and matrix operations now.

I removed the glow effects in an attempt to boost performance. I should have whipped up a little FPS counter several posts ago, of course… The performance on my G5 (dual-core 1.8ghz PowerPC) is already less-than-optimal, and there’s not a ton of stuff happening on the screen. This worries me a bit.

Intermission in the Third Dimension

I spent yesterday and today building a 3D engine for my Vector classes. This turned out to be some of the most difficult math I’ve ever wrapped my brain around. Here’s a screenshot:

Play with the .swf. Click the mouse; type some letters; move the mouse for beefy, savory 3D taste. Backspace to clear.

You’ll notice that the letters flicker; this is intentional. It’s a step towards simulating the “old cathode ray tube” look and feel that I desire.

I’m creating the flicker using one of my favorite tricks: flash.geom.ColorTransform . The line segments (and the glow) are being drawn using random shades of grey (including black and white). The ColorTransform maps black to a new color, and white to another color; in doing so, shades of grey are automatically mapped to color values ranging between the two.

The 3D action is, in a word, complicated. Many websites were consulted; many mathematical formulas were borrowed.

One of the biggest challenges was extending flash.geom.Point to a new class: “Point3D”. Also (especially) difficult was extending flash.geom.Matrix to “Matrix3D”. Of course, I wanted all my Vector drawing methods to support both 2D and 3D geometry, so there were issues with inheritance and casting. ActionScript 2.0 can’t tell you what class an object belongs to (all the classes mentioned in this paragraph evaluate to “Object”. Not helpful!) so I had to improvise. The 3D classes return true if you evaluate myObject[‘is3D’].

Also I added static create() methods to the 3D objects: these accept a Point/Point3D, or a Matrix/Matrix3D, and verifiably return a 3D equivalent of whatever you passed in.

I did this because I had issues with casting. This cast did not work for me, and I don’t yet understand why:

var myMatrix3D:Matrix3D = Matrix3D( myMatrix2D );

The 3D algorithm took a day and a half to get right. I relearned matrix multiplication along the way. I was giddy and cheering when it finally worked. This is a major step forward.