Close Show/hide page

Video Projector Effect

May 26th, 2009
Thumbnail - Click me

My general goal for this was to approximate the look of a video projection hitting a ‘non-planar surface’ or otherwise intersecting objects in a 3d scene.

The underlying logic wasn’t too painful. The UV coordinates of each vertex are all that need to be solved for. There’s a linear relationship between the position and orientation of the ‘projector’, and the world space position and UV coordinates of each vertex in the scene — requiring just algebra, which is nice, because that’s about all the math I know. JiglibFlash is being used for the physics action.

In its current implementation, the projector is limited to looking straight down the z-axis. I have a feeling that the most elegant approach for all this would be to extend Camera3D or to piggyback on top of the plumbing of the Papervision framework in some other way (apologies for the mixed metaphor). Should I develop the ‘Projection Manager’ to handle arbitrary projector orientation, I’ll post the source along with an updated example.

An SEO implementation for Flash

April 23rd, 2009

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:

(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.

Read the rest of this entry »

Processing – Tentacle Bouquet

April 7th, 2009
Thumbnail - Click me

Cylinders shaped with randomized 3D cubic Bezier splines and sine waves. Later it would be nice to develop on the tentacle movement a good deal more with kinematics and possibly springs… And I agree, Robert Hodgins’ work is the shit (e.g.).

Coded in Java with the Processing library.

Update 8/25/2010: Alternate version


 

 

 

 

 

Faceted Crystal Ball

March 3rd, 2009
Thumbnail - Click me

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 few ideas for augmented reality

February 27th, 2009

Now that I’ve finally allowed myself to look at couple online examples of so-called augmented reality, I’ve become quite excited by its possibilities. (Eg, why the hell did I not see this sooner?) But I’m hoping that I can partially purge myself of feeling torn between wanting to play with 36 different ideas going through my head that I don’t have time to or shouldn’t act on by publishing the following notes I’ve compiled over the last couple days…

(Expand all)


[+] Large-scale art installation idea
A giant ‘AR square’ (not sure of the right terminology here…) is painted on the side of a building. People come by to view it thru the web application – an AIR app, possibly. Because the ‘geometry’ of the landscape around the painted square is known in advance (eg, city streets, adjacent buildings, etc), and can be assumed to remain ‘constant’, that information could be ‘hardcoded’ into the 3d scene for the dynamic 3d elements to interact with in a visually convincing manner. The 3d parts could also be properly occluded behind other buildings or certain street obstacles. The dynamic elements wouldn’t even have to specifically interact with the location of the square itself; the square simply situates the camera in relation to the entire 3d space… A feature to save footage locally to be uploaded to a central repository later. Also, it wouldn’t necessarily have to be a large-scale context. The same treatment could be done within a room-sized scene.
[+] An interactive setup-phase to define scene geometry
With the square remaining in a fixed position, the user uses a few simple tools to draw 3d planes and rectangles on top of the video to describe the physical space around them. Eg, user draws 4 connecting line segments to describe a plane which represents a room’s wall. (And then defines a few more planes that describe the other walls, floor, and ceiling). Actually, you might just be able to pinpoint the 8 corners of the inside box which makes up the room… Maybe the user can also ‘overlay’ a 3d cube over a coffee table or desk. Etc. The program could even draw from a library of furniture-like 3d objects for the user to translate, rotate, and scale to overlay onto the scene. These 3d elements then constitute solid objects which the dynamic 3d elements can interact with. The camera is free to move around within the scene as long as the square remains fixed.

(a) 3d rain falling and hitting indoor furniture in interesting, ‘convincing’ ways. Or snowflakes falling, and collecting on various surfaces. Or a room getting slowly flooded with water, starting from the floor up to the ceiling… The supplied room geometry forming the basis for a platform game…

(b) Actually, if the user-supplied data and the positioning information from the AR Toolkit are accurate enough, there’s no reason why you couldn’t take snapshots from the video imagery, dynamically snip out the various quadrilaterals corresponding to the scene geometry, correct for perspective, and then skin the 3d geometry with that video texture information… !

(c) A 3d box is positioned over a real-world rectangle-shaped table or something. The top of that box is then used as a playing surface for something like pong pong or air hockey, which uses normal 3d game mechanics and assets but which is of course overlayed on top of live video. Imagine a replay feature where the winning shot is replayed in slow motion, but the user views it from different angles by moving the webcam. Virtual indoor handball by using AR in combination with motion detection.

(d) A square is stuck on a person’s chest. If the person’s height is supplied, we have enough information for a gross bounding box. This is enough information to go on to do a number of potentially interesting things. If we make the assumption that the subject remains generally upright and standing, we know the general position of the floor as well.

Update: Of course all these questions have already been dreamed up, and solved. This page from chronotext.org looks useful…

[+] Use of ‘physics’; use of a physics engine (eg, Jiglib)
As the AR square describes a plane, it of course lends itself to being acted upon as a solid surface. If we introduce extra scene geometry as described in points 1 or 2 above, even more could be done. Cubes or spheres falling from the ceiling to fill up a room (of course). Apply that sweet-ass Jiglib rally car example to a scene where the AR square is placed on the floor…

Update: Cloth demo by Saqoosha. (I guess I should do more ‘research’ before clicking ‘Publish’ ;)

[+] A specific visual piece: Tentacles
The AR square, placed on the body. Multiple tentacles coming out of the square in anime/sci-fi style. A fun exercise to play with for… inverse kinematics; 3d bezier curve animation; animating bezier patches to generate mesh geometry (Away3D 2.3); tree-like branching of tentacles; ‘generative art’ generally; crazy, lurid motions. Assuming a fixed camera, various ‘motion behaviors’ based on the movement of the square on the body; tentacles reacting fluidly to translation and rotation of the square.
[+] Interaction of dynamic 3d elements between two or more squares
Particles coming out of one square and going into another; gravity-based motion between squares; arcs of electricity going from one to the other; tentacles (from point 4) coming out of one body and ‘attacking’ another body to which another square is attached, for some reason.
[+] Interaction of the video bitmap information with the 3d elements
(a) The video image used as an environment map applied to the dynamic 3d elements, to make it look reflective and vaguely chrome-like (with a little cleverness and finesse).

(b) Pixelbender-like effects applied to the areas of the video that are ‘underneath’ or adjacent to the 3d elements. A 3d ‘fire’ coming out of the square, and the video imagery around the fire shimmering from the ‘heat’ of it. Wind-like motion-blur effect emanating from a virtual fan or something, and taking account of perspective. Pixel-dissolve-y action?

(c) Real-time chroma-keying to mask out background video imagery. Dynamic 3d elements can then be made to appear to be circling around the subject by appearing both in front of or ‘behind’ the video.

(d) The idea of treating the entire video with various video filters momentarily/sporadically to put the artificial content in bolder relief appeals to me…

[+] Intelligent video color sampling
(a) Application polls the color information of the incoming video to try to mimic, vaguely, the scene’s lighting as applied to the 3d elements. Again, with some clever hand-wavery and finesse.

(b) The dynamic 3d elements attempt to ‘mimic’ the colors of the video pixels around it. An animated lizard character or something. Maybe the colors of the faces of a mesh are assigned by averaging the colors of the area of the video image that the face normals are pointing at.

(c) Random ‘remixing’ of nearby patches of video imagery applied to a 3d mesh to create its texture. Another Pixel Bender possibility. The invisible suit in the movie ‘A Scanner Darkly’…

[+] Save video to disk from within application
Add built-in feature to easily save composited output to disk (eg, using SimpleFlvWriter).
[+] Science museum-style interactive art installation
As many AR ideas might require specific rules, setups, or optimal conditions, set them up in an expressedly controlled setting…
[+] Use of augmented reality + head-mounted display/webcam + geotagging + wireless internet = William Gibson’s Spook Country
The composited output fed into a head-mounted display/’VR goggles’, with a lightweight webcam mounted on it pointing outward. When combined with GPS tagging, “locative art” a la Spook Country. (Actually, the GPS tagging wouldn’t even be necessary, just nice to have). Ie: Users view 3d sculpures and whatnot (pushed via wireless) associated with AR squares (made to various scales) that are ‘tagged’ around the (real-world) landscape by other users.

Webcam Green Screen Effect w/ Pixel Bender

February 17th, 2009
Thumbnail - Click me

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.

Webcam image compositor, creating PNG48’s

February 9th, 2009

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

Example - single frame Example - composited version
Example - movement...

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…

Read the rest of this entry »

Using AMF3 for the cool shit

January 19th, 2009

(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.

:P

Read the rest of this entry »

Mesh Slicer v1.9 (Cube Steak Edition)

December 21st, 2008

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:

Adding extra faces to the cut-up meshes to make them closed shapes again would make the whole thing feel more “physical” and less abstract-graphics-demoey…

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 [C] 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.






Cutting up a mesh (into tiny little pieces)

December 19th, 2008
Thumbnail - Click me

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–

  • Making a more advanced intersection test using rectangles (which are bounded) instead of planes (which are infinite). The additional control would open up all sorts of fun possibilities. Projectiles or edge weapons hitting targets that get cleaved in half…
  • Adding extra faces to the cut-up meshes to make them closed shapes again would make the whole thing feel more “physical” and less abstract-graphics-demoey. And make it more useful for practical applications.
  • Maybe adding the ability to cut along an arbitrary path made up of connected line segments (like a cookie cutter)…
  • 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.