zero point nine

I recently added SEO to my current (Flash-based) portfolio site, which I did as an experiment more than for any particular 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 multi-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 image? 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 (just cropped).

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…)

view at full size >

Sooner than expected (thanks no doubt to my first snow storm in two years giving me all the excuse I needed to stay in all day), this version covers bullet-point 2 of the previous post:

I’m using Adobe’s Kuler service to generate the color scheme, which I find quite exciting. Because it saves this particular demo from a world of red and black — which are basically the only colors I use when left to my own devices. (Press

to cycle through colors) Many thanks to Aden Forshaw for the AS3/Kuler example.

Finally worth noting is that the ‘physics’ have improved a little. I was previously using vertex count as a proxy for mass. Using the volume of the axis-aligned bounding box ends up being a better way of faking it.

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.

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.

This is a slideshow viewer, utilizing the robot arm from this previous post done with Papervision 3D. I created it on the occasion of a presentation I’m preparing for the Flash user group, San Flashcisco. In typical fashion, I’ve spent more time creating the slideshow program than preparing the presentation itself, or the slides for it. :P The slides themselves (dealing with Papervision3D) aren’t of too much value outside of the context of the presentation, but you can choose your own if you like (see below).

The program uses hotkeys only –

  [SPACE/BACKSPACE]  Next/previous slide
  [BRACKET KEYS]     Next/previous slide without transition
  [COMMA]            Zoom in and out of slide, for the fun of it

   Also:             [1/Q, 2/W, 3/E, 4/R, 5/T, 6/Y, and 7/U] - Rotate joints
                     [Z,X,C,V] - Moves robot arm to various keyframes/poses

How to use this with your own images, from the Desktop…

(more…)

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.

Kind-of just for the hell of it as much as for any potential use value, I’ve converted all my notes related to programming, Flash, etc. – which used to live in various text files as various versions on various computers – into a wiki format. And have made it publicly viewable. Because, I figure, why not?

Much thanks to Adam Smith for the idea. Have fun in L.A.

Webcam DVR has been updated for compatibility with the release version of Adobe AIR. I didn’t introduce any serious changes with this version. I don’t have the time to self-QA this in the way it deserves, so if you run across any bugs – big or small – please let me know!

Download (Adobe AIR file, 291K)

Requires the Adobe AIR runtime.

See the original post for more info and usage notes.

Apologies for the cobwebs on this site. I’ve been pretty busy with .. work.