blog.omine.net

LG WOW is the latest website we developed at colmeia featuring Papervision3D, webcam interactivity, Flash Media Server streaming, and integration with a Django application using remoting (PyAMF). It is a product showcase for LG Electronics.

To enter the website, choose between webcam and keyboard modes. After the countdown, shout “wow” to the camera (or simply type it if you chose keyboard mode) and 3D particles will explode according to your voice loudness. The camera feed will be recorded to Flash Media Server, but it will only be published if you choose to do so later.

Navigate the website through the floating objects or the menu (at the top).
Check the Gallery (to watch other people’s reactions) and the Stats section too.

This website doesn’t push the boundaries of Flash and PV3D (we just used Planes with MovieMaterials), but I think we were still able to build something unique for the client.

Concept and product pages by Sinc (advertising agency).
PV3D design and development by Colmeia:

• Design: Caio Sartori, Gustavo Sonoda.
• Backend development: Eduardo Silva, Arthur Lima.
• Flash development: Flavio Ensiki, Eduardo Omine, Edgar Akiyama.

A beta version of Flash Player 10 (codename Astro) was released this week, along with a new build of the free Flex SDK 3 that allows developers to test the new Flash Player capabilities.

The following demo is a simple implementation of Cover Flow that takes advantage of the 2.5D API — all DisplayObjects now have x, y, and z properties (position, rotation, scale).

Use the arrow keys to navigate:

I developed a Cover Flow clone with Papervision3D 1.5 for the Quatro Arquitetura website a few months ago, and adapting it to the new FP10 API was really easy. Download the source code. You’ll also need Tweener.

Playing with computeSpectrum() and PV3D 2.0 alpha (Great White). The mesh reacts to sound by having its vertices moved along the Z axis (X and Y coordinates are fixed). Had a problem with FlatShadeMaterial failing to render on regions of coplanar faces; small creases were made in the mesh to fix it.

Sound analysis was made with SoundMixer.computeSpectrum(), FFTMode set to true (a frequency spectrum results in a more interesting visualization) and stretchFactor set to 4. Increasing the stretchFactor value means analyzing a smaller frequency range of the sound —thus ignoring non-audible high frequencies. The 16×16 vertex grid represents the average values of left and right channels.

Music Is Music As Devices Are Kisses Is Everything (5:20) by 65daysofstatic (from the 2007 album The Destruction Of Small Ideas) is the song; a nice fit for this visualization because of the contrasting quiet and loud parts —the visualization of the piano notes in the quiet sections is very clear.

View SWF (5MB, move mouse on X direction to change rotation, music plays 10 times)

Update: comments closed because of spam.

Update #2: this experiment was featured on PV3D blog — 9 Cool Experiments in 3D.

This week I worked on converting last week’s Particles and trails code to 3 dimensions, using the Effects branch of Papervision3D.

The final SWF runs smoothly at 30fps on my computer, and initially uses about 5MB of memory as measured by System.totalMemory. The biggest challenge in this project was fixing a memory leak that occurred whenever a ribbon was removed from the scene. If you run into this problem when removing a DisplayObject3D, remember to:

• reset the geometry.faces and geometry.vertices arrays;
• unregister the object from its material.

public function destroy():void
{
    geometry.faces = [];
    geometry.vertices = [];
    material.unregisterObject(this);
}

Each ribbon has 3 life phases:

1. Growth: the ribbon grows until it reaches 120 vertices;
2. Stability: the ribbon keeps moving but older faces and vertices are removed, keeping vertex count equal to 120;
3. Removal: the ribbon stops moving and 2 vertices and 2 faces are removed frame by frame until it reaches zero vertices and zero faces.

The applied material is a simple FlatShadeMaterial with a moving light source. Finally, a BitmapLayerEffect with BlurFilter was applied and the viewport.blendMode was set to BlendMode.ADD.

View animation (move mouse to change camera rotation)

This is a remake of one of the first programmatic animations I did with Flash (AS2 at that time). I decided to translate it to AS3, looking for a better performance.

The pseudo swarm behaviour of the particles is obtained by combining the movement of the visible particles with the movement of a non-visible, reference particle.

Interestingly, the animation performed much better when I unified all Event.ENTER_FRAME handlers in one single place. Originally I made each particle and each trail listen to Event.ENTER_FRAME, removing the event listeners when destroying the particle. Now I only listen to Event.ENTER_FRAME in the Main class, and then loop through all instances to call each instance’s update() method.

The background color changes with time; one cycle should take 1 minute to complete. You can also click the background to toggle full screen mode.

View SWF