Calypso88

Hey readers - I want to apologize to anyone who tried to get to my last post and got a bunch of spam for cheap foreign pharmaceuticals instead. That certainly wasn't my intention (when I sell out, it won't be for gasex pills) and I'm taking steps to guard against this sort of thing in the future. If you want specifics on the hack, the best thread I've seen so far is here.

Sincerely,
-Rob

Here's a quick optimization for people making grids of things. The traditional method is a pair of loops, nested to make rows and columns:

const ROWS:int = 30;
const COLUMNS:int = 88;
 
for(var row:int = 0; row < ROWS; row++){
	for(var column:int = 0; column < COLUMNS; column++){
		var s:Shape = new Shape();
		s.x = column * 5;
		s.y = row * 5;
 
		s.graphics.beginFill(0x666666);
		s.graphics.drawRect(0, 0, 4, 4);
		addChild(s);
	}
}

This can be simplified and sped up by taking advantage of the relationship between division and modulus to generate the row and column dynamically:

const ROWS:int = 30;
const COLUMNS:int = 88;
const ITEMS:int = ROWS * COLUMNS;
 
for(var i:int = 0; i < ITEMS; i++){
	var s:Shape = new Shape();
	s.x = int(i / ROWS) * 5;		//  this is the same as Math.floor(i / ROWS), just faster
	s.y = (i % ROWS) * 5;
 
	s.graphics.beginFill(0x666666);
	s.graphics.drawRect(0, 0, 4, 4);
	addChild(s);
}

By upgrading to loop-invariants, we can cut the nested for-loop for a nice boost. And, as a bonus, this new code can work with sets that don't end squarely at the end of a column.

It's not often that my experimental projects line up with my day job, but a couple months ago I talked the higher-ups into letting me do some crossover work with 3D terrain rendering.

The obvious issue with Flash and 3D is performance. The maps we wanted to show we're rectilinear height-maps, 256 vertices to a side. I already knew there was no way to do this in a photo-realistic way (256² is just over 65,000 squares, which would be 130,050 triangles to render...last I checked, Papervision gets unusable around 2000) so I decided to go with a wireframe style instead.

Since I didn't need camera's or any of the weight of the bigger engines, I opted to use Mathieu Badimon's very lightweight and (imo) thoughtfully laid out FIVe3D library as my starting point. From there I got a quick proof of concept up and realized there was still no way I could get away with the full 256² grid so I started cutting down the resolution. Using every third node (64²) struck a good compromise with the fidelity of the original mesh, and the performance limitations I needed to stay in to work for the majority of our users.

Off the shelf, FIVe3D was giving me roughly 12fps and consuming a pretty weighty chunk of system memory, so I started digging in and looking for optimizations I could make. To start with, I created a specific class for my model to eliminate all the cross-class calls between Shape3D and Graphics3D. I also decided the Point3D class had to go since every render pass would create tens of thousands of throwaway objects in order to calculate the z-translations for my nodes. After internalizing those, I brought in the Matrix3D class as well and started combining some of the heavy-use functions so the AVM could stay within one scope for the majority of the calculation and drawing.

That gave me a boost of about 50% but I still needed a little more oomph. Finally, I took the dive and flattened my arrays and ended up restructuring the core FIVe3D engine so it was operating a little more specifically to my needs (mostly hard typing some things and taking out optional calls to the flat-fill shader and the like). At this point, the code is fairly incomprehensible and some of the extensibility of the engine was lost, but it did put my frame rate just under 30fps so I can't complain.

Here is a standalone copy showing the final mesh, and if you want to melt your processor, click for a version with the original full-detail grid.

I'm iterating on my first test and some of the results are turning out pretty cool. The mxml is coming easier now, but I'm still pretty confounded by what's going on in the API.

For starters, trying to figure out a slider solution took me on a tour of s:Slider, s:HSlider, and finally (past mx:Slider) to mx:HSlider. I haven't kept up on the Flex news that well in the past months so I get the feeling there's some big paradigm shift that's catching me by surprise (something about shifting from the mx package to the new s package for the Spark theme?). I'm guessing that half of these classes will get culled out by launch time, so I guess that's what I get for learning on the beta.

One thing I'm excited about is how quickly you can prototype ideas in here. Getting a webcam up took all of 5 minutes, and throwing out three color pickers was instant. I did spend some time fussing with the width bindings between the slider and the palettes but in a real project I'd probably take the time to design and write a true component for that functionality so I can't complain too much.

UPDATE: This thing seems to be crashing some peoples browsers. I haven't looked into it too far but I think there are some circular references in the bindings that are getting into a loop or something (I knew that idea was too good to be true!). For now I've moved the offending swf to it's own page: enter if you dare.

With the big Flash Builder/Catalyst thing going on right now, it seemed like a good time to get myself up to speed on the Flex framework. At the moment, I'm at that stage where everything takes about six times longer to get working than if I just knocked it together in Flash. I keep getting this suspicion that Flex is just VBasic written in ActionScript with some xml in there to gum up the works, but I'm determined to stick it out. (By the way, if anyone has the link to download a copy of the langref, please let me know - waiting for the livedocs is killing me!)

So, for Flex Experiment 0.01, I recreated an old demo I wrote for a paint bucket/magic wand tool. The actual Flex components went together pretty easily - the big issue for me was deciphering which of the 1000+ components in the framework I needed to use. Once that was figured out, the real chore became negotiating the inputs and outputs of the components (s:BitmapImage takes an Object for source and doesn't output a BitmapData anywhere? Really?) - somehow it all seems to work, but the components really are black boxes that developers are not meant to get into.

Anywho - click and drag around to see it in action, and (I'll grudgingly give Flex a gold star here) right click for the source.