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…

This is really designed to run from the standalone Flash player or from a projector file (rather than inside the browser), where it can run in full screen mode with hotkeys enabled, and where it runs 2-3x faster (seriously). Download the necessary files here (ZIP file) to run this off your desktop (either by running the projector file executable for Windows or by running the SWF in the Flash standalone player). Then, you can also use your own images by editing the included xml file… It’s not the most user friendly system, but it does the job. (Ideally, it should probably be wrapped into an AIR application).

The robot arm animations were created by arranging the model in various poses, storing the rotation values of the joints for each pose (in effect, creating keyframes), and then creating a tweening system to animate the arm from one keyframe to another. And lastly, creating a mini-sequencer to coordinate animations requiring multiple keyframes.

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.

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.

A forward kinematics experiment using Papervision3D v2.0 alpha and a Collada 3D model of a robotic arm.

Hope you enjoy it.

I don’t want to release any source from this yet, as I want to do some more work on it, relating to the following items…

• As you’ll see, the range of rotation of each joint is constrained, but there isn’t enough program logic to keep consecutive joints from being rotated in such a way that the model folds in on itself unrealistically. Incidentally, the kind of model used here is ideal for playing with kinematics, as each joint rotates around only one axis, and each segment is connected on each end by no more than one other segment, except for the ‘pincers’. (Next up: bipeds . . . ?!)
• There’s some ‘Z-popup’ which could be mitigated by modifying the source model just a little. By the way, the model comes from Learning 3ds Max 2008 Foundation.
• The user interface to this piece is bare-bones functional. But I’m glad to have discovered that it’s possible to detect overlapping key-down events in Flash, which is kind of interesting. (If anyone has ideas for an easier-to-use interface that stills allows you to control multiple joints simultaneously, please let me know)
• Lastly, it makes sense at this point to (learn how to) do some basic inverse kinematics. If and when I figure something out, I’ll post an update…
]]> http://www.zeropointnine.com/blog/testing-kinematics-with-papervision3d-collada/feed http://www.zeropointnine.com/blog/papervision3d-training-in-san-francisco-at-evb http://www.zeropointnine.com/blog/papervision3d-training-in-san-francisco-at-evb#comments Wed, 16 Jan 2008 01:55:14 +0000 admin http://www.zeropointnine.com/blog/papervision3d-training-in-san-francisco-at-evb Just wanted to let anyone in or around the Bay Area know that there’s going to be a Papervision3D training with John Grden on the weekend of February 3-4 in San Francisco. It’s being held at EVB, which is where I work.

Here’s the link: http://pv3d.eventbrite.com/

If you’re going, look me up, as I’ll be there…

]]> http://www.zeropointnine.com/blog/papervision3d-training-in-san-francisco-at-evb/feed http://www.zeropointnine.com/blog/a-papervision-20-alpha-example http://www.zeropointnine.com/blog/a-papervision-20-alpha-example#comments Tue, 08 Jan 2008 06:43:22 +0000 admin http://www.zeropointnine.com/blog/a-papervision-20-alpha-example


I drew up this example a few weeks ago to learn about the new features in Papervision 2.0 alpha. If you’re thinking of looking into the new version, then hopefully you’ll find the supplied source code below of some use. I used the code from this screencast on unitzeroone.com as a starting point.

The source code has example usage of the following things…

• Setting up and rendering a simple 3d scene
• Materials that take a light source, found in the org.papervision3d.materials.shadematerials package (GouraudMaterial, PhongMaterial, CellMaterial, FlatShadeMaterial, EnvMapMaterial). And CompositeMaterial, too, which is pretty useful as well.
• Shaders (EnvMapShader)
• Multiple viewports (used here to create the reflection on the floor)
• Simple user interaction using InteractiveSceneManager (clicking on a ball makes it bounce)

I wanted to throw all the example materials into the scene at the same time in order to compare their appearance, etc., so you may find the demo to run quite slowly…

Source code

Licensed under a Creative Commons Attribution 3.0 License.

]]> http://www.zeropointnine.com/blog/a-papervision-20-alpha-example/feed http://www.zeropointnine.com/blog/collision-detection-between-particles-and-polygons http://www.zeropointnine.com/blog/collision-detection-between-particles-and-polygons#comments Sat, 05 Jan 2008 22:39:32 +0000 admin http://www.zeropointnine.com/blog/collision-detection-between-particles-and-polygons


A basic example of collision detection in 3D, where moving particles bounce off a static terrain.

[By the way, my apologies for the cobwebs that have accumulated on this site; I’ve been busy over the past few months dealing with moving back to the Bay Area from Detroit :) ]

A couple things on it which could be of use …

(A) To find out where a moving particle hits a polygon boils down to asking the question, “Where does a ray intersects a plane?” One or two Google searches will give you some math and some code examples… The gist is that the particle plus its velocity vector gives you the “ray” in question; the plane that it does or does not intersect is the one created by the triangle of the polygon you’re testing against.

In this case, with the polygon which makes up the ‘terrain’, the triangles are set at regular intervals on the X/Z plane (in the parlance of Papervision3D, an instance of “Plane3D”), so it was relatively straightforward to find the right triangle to do a “hit test” on. If it’s a more irregularly shaped polygon, you’ll have to iterate thru all the triangles testing for the occurrence of an intersection, or find clever ways of minimizing the number of tests you have to perform on the polygon).

(B) When a collision has been detected, you have to figure out the direction of the bounce. The solution I arrived at comes from asking the question, “How do you rotate a point or vector around an arbitrary axis?” (Again, Google is your friend). In this case, that arbitrary axis is the normal of the triangle that the particle has hit. The velocity vector of the particle is reversed (since, after all, the particle has to “bounce”) and rotated 180 degrees. The result of this is that the angle between the new vector and the triangle normal equals the angle between the original vector and the triangle normal. I’m not sure if this makes sense in terms of real physics but it seems to make intuitive sense to me, and “looks” correct enough… If someone can comment on this, I’d appreciate it.

Source code: Main class file | Full project (Flex Builder 3)

Licensed under a Creative Commons Attribution 3.0 License.

]]> http://www.zeropointnine.com/blog/collision-detection-between-particles-and-polygons/feed http://www.zeropointnine.com/blog/particle-field http://www.zeropointnine.com/blog/particle-field#comments Mon, 24 Sep 2007 14:28:57 +0000 admin http://www.zeropointnine.com/blog/particle-field


A matrix of vectors acting upon a field of particles. Reminiscent of falling water or snow, slightly. Click and drag to ‘draw’ vectors on the field to influence the movement of particles.

For me, the idea comes from Charles Forman’s blog post in Setpixel from 2004, “Snow is fun.” Which is incredibly great. And done in Processing.

Source code:

- Actionscript 3 class

- Full project (Flash 9/AS3)



Licensed under a Creative Commons Attribution 3.0 License.

]]> http://www.zeropointnine.com/blog/particle-field/feed