zero point nine

This one’s pretty niche: A small Windows utility that emulates the left and right mousebuttons using the keyboard. Specifically, using the right Windows key and the right Alt key.

Why? Because I use a MacBook Pro running exclusively in PC-mode, and I can’t stand how the mouseclick is implemented with its button-less trackpad. So yeah, pretty niche…

Sorry, no UI to change the hotkey assignments. If you’re comfortable with C#.NET, the source code is included in the zip file. It may be useful to examine if you’re interested in learning (1) how to capture keystrokes globally in Windows or (2) how to generate mouse operations programmatically, using some dreadful-looking Windows API interop code that I tried to learn as little as possible about in order to get to work.

Download (source included)

Simulates the projection of shadows coming from a spotlight light source onto irregular surfaces. In the supplied example, an animated MD2 model (from Quake 2) is casting a shadow onto the inside of a sphere. Supported parameters include shadow color, alpha, blur, falloff and texture map size, as well as position, rotation and field of view. This evolves out of the projection work posted previously.

Source:

SpotlightShadowCasterManager.as

Usage:

After instantiating the manager –

	_shadowCaster = new SpotlightShadowCasterManager();

– assign one or more DisplayObject3D’s that will block the light from the spotlight:

	_shadowCaster.registerShadowCasterObject(myMesh);

Then register one or more meshes that can have shadows cast upon it with registerShadowCasterObject. As the second argument, you must supply a BitmapMaterial utilized by the mesh on which the manager will draw the shadows. Usually, you’ll want to create a CompositeMaterial, with the BitmapMaterial most likely at the top of the stack. It might look something like this:

	var compositeMaterial = new CompositeMaterial();
	compositeMaterial.addMaterial( new ColorMaterial(0x888888) );
	var mat:BitmapMaterial = new BitmapMaterial( new BitmapData(1,1) );
	// .. the bitmapdata will get overwritten,
	//    but must contain _something_
	var sphere:TriangleMesh3D = new Sphere(compositeMaterial, 1000);

	_shadowCaster.registerShadowReceiverObject(sphere, mat);

To update the shadow textures, call

	_shadowCaster.update();

– probably in your onEnterFrame or onRenderTick function.

That’s enough to get going. From there, it’s just a matter of adjusting the projector’s position and orientation in relation to the objects in your scene with the properties projectorPosition, projectorPitch, and projectorRoll. Check the source for the various configurable properties like blur, alpha, color, etc.

Limitations, bugs:

(more…)

I recently added SEO to my current (Flash-based) portfolio site, which I did as an experiment more than for any actual use value. You can navigate the HTML ‘back-end’ pages starting from here, if interested. I figured I should jot down my findings on how it can be done, for the record.

I. Client Side

On the Flash end, two requirements:

Original page view, in Flash

SEO-friendly HTML page, drawing on the same data

(A) Your site must implement deeplinking, presumably using SWFAddress, such that every page view has its own URL path. And your shell class must be intelligent enough to go directly to any given deeplinkable page view on startup via the URL deeplink.

(Sidenote: While not strictly necessary from an SEO standpoint, having gone that far, you’ll probably want all changes to the page view to be driven by the SWFAddress URL-change event, rather than directly by user events like mouse clicks, etc. Which will force you to throw your familiar, tried-and-true coding patterns out the window. And potentially, your laptop thereafter. But is beyond the scope of this entry. ;)

(B) Your site should use an external data source that describes the site structure and contains the site’s text content, as well as, typically, image and/or video URL’s and the like. Usually, this would be a well structured, static XML file whose node structure corresponds to the site’s actual page structure. The deeplink ‘crumbs’ should be included therein as well – as an attribute of each node, for example. (Extra points for using a database or a CMS instead). And it goes without saying that your Flash should be building its site structure, nav, and page content dynamically using all of the above.

(more…)

Or at least, that’s the best easy analogy to describe it.

Gist: The color of each triangle in the mesh is obtained by averaging the pixel colors of the underlying image at the screen positions under each vertex as well as at the triangles’ center point. Some FlatShader-like lighting is used to add a little more three-dimensionality. Finally, a BlurFilter is applied to the source image to keep the transitions between colors from feeling too abrupt.

Source code: PvColorFacets.as

Licensed under a Creative Commons Attribution 3.0 License.

A green-screen/chroma key effect utilizing Pixel Bender. With this version, the live video is compared against a reference image rather than a static color. Additionally, the alpha of the output is graduated based on the color difference between the base image and the incoming video (rather than just being either ‘on’ or ‘off’). Both of these differences may or may not be good for practical use, but can create interesting imagery.

Use the sliders to adjust the cutoff/falloff curve for the alpha. Click “Reset base image” to set the base image with which to compare any further changes in the video against. You can also choose your own background image (click “Browse…” at the bottom). Works best against a plain background and presumably best of all with proper lighting against a green background…

When I wrote the image processing routine in pure Actionscript, it ran like a slideshow. The Pixel Bender version on a 4-core system runs about 30x faster.

Pixel Bender kernel: GreenScreenEffect.pbk

Licensed under a Creative Commons Attribution 3.0 License.

view at full size >

How it would look if you took a webcam or camera, and captured several frames of the same scene in quick succession, and then essentially averaged them out and composited them into one? My guess was that the resulting image would retain most of its sharpness but lose most of the ‘noise’. I made this quick mini-app with that thought in mind.

Here is an example of my results (before and after). The images were captured with a Logitech Quickcam Pro 9000 at a resolution of 1600×1200 (averaged from 128 (!) still images), and were not scaled or retouched.

As a side benefit, if the camera — or something in the foreground of the scene — moves during the image capturing process, you can get photography-like effects that look like a long exposure…

A PNG48 encoder class…

(more…)

(A more descriptive but less catchy title would’ve been “Serializing and deserializing value objects with ByteArrays using AMFPHP, PHP, and MySQL.” But that’s ok.)

As we are now in the year 2009, for some reason you feel like there ought to be a way to take your cool shit, send it over the wire and get it back again, without having to resort to 99 searches on Google, a trip to Barnes & Noble for a stack of books with ugly green covers and stupid illustrations of birds and salamanders, and a spare weekend you’d be doing nothing better with anyway. Your cool shit’s in Flash, most likely, and it’s not just text data, presumably, so by a process of elimination we conclude that your shit — not of a lukewarm nature by any means — is most appropriately represented by a series of ones and zeros — in binary format. And that you want to get it on the database. ‘Cuz you can’t create the next viral sensation if you can’t get your cool shit to the database, now can you?

And while many prosaic and generally annoying 3-to-4-letter acronyms exist for the transmission of information across the proverbial ’series of tubes,’ unfortunately, most of them are founded on that most old school of information encoding conventions: the alphabet. (But if it’s in UTF format, maybe we can be a little more forgiving and call it “Alphabet 2.0″). Sure, you could do something like MyCoolAssStaticUtilitiesClass.convertMyCoolShitToBase64($o:Object), but nah, fuckit, it’s the year 2009 damnit, and you’d think there’d be an easy way to take your data – made on a computer – and store it – again, on another computer, without having to first convert it into “human-readable text,” whatever the fuck that means.

Furthermore, if your shit’s actually as cool as you say it is, we must be talking about something that’s not just a single block of binary data like an bitmap, oh no, but a complex data object, full of mixed primitive types, maybe some untyped objects and an array or two, other value objects nested inside of them, and _then_ maybe an image or two. But the main thing is, it’s stuff that you want to just dump into a field in a database record, and get back, without the extra drama of converting to and from XML with a couple extra hundred lines of code…

Anyway, presented here are the important points I learned about using AMFPHP with ByteArrays and VO’s while starting on a new project/experiment thing involving user-generated character animations of 3D models, which naturally involves lots of binary data and complex data types.

(more…)

A demonstration of splitting a mesh in two along an arbitrary plane. With some faux-physics for added value. I was thinking about the ‘laser room scene’ in Resident Evil, LOL.

I’ve included the source code of a minimal example showing how to cut up the faces of a mesh along a plane:

PlaneSplitMinimalExample.as | compiled swf

This is the foundation for everything in this demo, and for the following ideas which I think would be nice to see executed in Flash–

Make sure to try resetting the scene, pausing (with spacebar), clicking through a mesh several times, and then unpausing..

Oh yeah, and the usual disclaimer/apologies about how much this demo hates your CPU, and how unoptimized it is (e.g., right now every face in the scene is tested against the plane with every click (ouch!)). Built with the most recent revision of Papervision 3D.

Also, apologies for the long hiatus. I’ve been busy moving to the NYC. And working a lot. But y’know, whatever..

UPDATE: John Lindquist has kindly pointed out there’s already a helper function in the Papervision framework for cutting meshes with planes! – MeshUtil.cutTriangleMesh().

Licensed under a Creative Commons Attribution 3.0 License.

Recently I’ve been thinking on ways of programmatically creating curvy and strange, organic-looking shapes in 3D. And reflecting on the fact that I can think of no particular ‘practical’ application for such an endeavor. And concluding that that’s part of what makes it interesting…

Here’s the high-level recipe:

Start with a cylinder or sphere-shaped mesh, where the vertices are evenly spaced . The vertices of the mesh can be thought of as a matrix or grid, where the left and right edges are curved 360 degrees until they meet.

Take an interesting bitmap with varying light and dark areas, whose height and width match the number of rows and columns in the mesh.

Use brightness (or some other color-derived property) from the pixels of the bitmap as a multiplier value to dictate the distance of the corresponding vertices from the z-axis (center) of the shape.

That’s basically it. In Flash, the built-in BitmapData.perlinNoise method is perfect for generating interesting gradients. The kicker is that the last parameter of the method allows you to change the x & y offset for each ‘octave’ (think semi-transparent layer), allowing for gradual, random-looking changes over time.

So on each update, change the offset of each octave of the perlin noise image and recalculate the vertices accordingly. The behavior and properties of Perlin noise does the rest.

Licensed under a Creative Commons Attribution 3.0 License.

I’ve been getting comfortable with Processing over the last few days by experimenting with what else but … particles. The three-dimensional patterns that emerge by moving the sliders to change the internal parameters can be quite complex and unexpected, and sometimes strange attractor-like.

The algorithm governing the particle motion is very straightforward. New particles are created with a starting orientation which rotates linearly on 2 axes over time. On each frame, a given amount of x, y, and z rotation is added to each particle and then the particle is translated according to its orientation by a steadily increasing distance.

Click on the buttons in the bottom right corner to change the order that the x, y, and z rotations are applied (which creates very different results from each other). The 3 sliders on top-left control the amount of rotation added per frame; the two sliders in the middle control the rate of ’spin’ for the initial orientation of new particles; and the slider on the right controls the ’speed’ that particles move away from the point of origin.

Licensed under a Creative Commons Attribution 3.0 License.