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.
![[del.icio.us]](http://blog.zacharcher.com/wp-content/plugins/bookmarkify/delicious.png)
![[Digg]](http://blog.zacharcher.com/wp-content/plugins/bookmarkify/digg.png)
![[Reddit]](http://blog.zacharcher.com/wp-content/plugins/bookmarkify/reddit.png)
![[Twitter]](http://blog.zacharcher.com/wp-content/plugins/bookmarkify/twitter.png)
![[Email]](http://blog.zacharcher.com/wp-content/plugins/bookmarkify/email.png)
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.
Subversion is open!
A couple of ya'll wanted to see my code, so I made the repository public! Here:
http://dev.zacharcher.com/svn/as2/
Have fun, give me feedback, but for the love of all that is holy, use this code at your own peril... This codebase is growing rapidly, and some classes that work today might have a different interface tomorrow.
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.
Vector Fonts in Flash
I've always liked the visual style of old vector games. I may integrate this style into my site, so I experimented with this tonight.
I borrowed the font used in Major Havoc and created several new classes to support this. First, here's how it looks:
Play with the .swf . Click the screen to set the keyboard focus (I'll debug Selection.setFocus() later.) Type letters. Press backspace to clear the screen.
Each letter is placed randomly, and has a GlowFilter applied (an attempt to simulate the look of old CRTs) with random colors and settings therein.
Here are the classes being used:
- vector.ShapeSegment (either a single line segment, or a bezier curve)
- vector.Shape (a continuous path of several ShapeSegments)
- vector.Symbol (a collection of Shapes)
- vector.font.Havoc defines the Symbols for each letter of the Havoc font, using delimited strings. Here's the string for the "A" character: "0,1; 0,0.5; 0.5,0; 1,0; 1,1 / 0,0.5; 1,0.5 ". Note that each letter is drawn on a coordinate space ranging from (0,0) to (1,1). The "/" character divides the coordinates into two Shapes (a separate Shape is needed to draw the bar through the center of the "A").
- vector.font.BaseVectorFont parses the strings contained in Havoc, and returns Symbols.
Symbol, Shape, and ShapeSegment each have a draw() method that requires a MovieClip (to draw in), and a flash.geom.Matrix (to govern the position/size of each vector entity).
Currently this code is all locked down, not for any malicious reason... But I'd let my framework & libraries mature a bit before I start accepting feedback. If you'd like to poke through my code, then I can open up my SubVersion repository; let me know if there's interest.
Up next: 3D