Our team has made a lot of progress on the virtual interface and interactive controls for our project in Processing. We converted Alvin’s original sketch from 2D to 3D using OpenGL (Open Graphics Library), which allows us to draw a 3 dimensional scene from our 2D primitive graphics. This effect works fairly well, especially if you use PNG images rather than drawing shapes in code because they load faster.

Each of us researched various objects that we wanted to use in our nature scene (lily pads, rocks, birds, cattails, clouds, fish, trees, and a bridge), and used Photoshop to render the images with transparent backgrounds so that we could import them into our Processing sketch. Alvin also added fireflies that appear to glow and float around in the air, which look really nice and add a magical touch to the scene.

screen shot of Channels scene

The most difficult part of this process proved to be the color scheme. When we tried making our scene in color, rather than in grayscale, the objects looked more like 2D cut outs, and the blue water showed the inaccuracies of 3D object placement. We decided to keep the water the color black for smoothness, and to apply color tints to some of the other objects, such as the lily pads and the bridge.

For my final project in Introduction to Computational Media class, I would like to build and expand upon our team’s original sketch to make it more robust with an objects-colliding algorithm, animation details, and even more responsive to the user’s interaction with the water.

For example, I found an antiquated bridge made of stones with beautiful arches that I would like to use in our scene. Like the fireflies, this old bridge adds an enchanting and fantastical element to the scene, which I think has a similar “look and feel” to the objects in the Xbox 306 “Fable II” video game that I love!!! I want the user to paddle around and through the arches of the bridge. And I would like the bridge pillars to represent realistic obstacles, or blocks in the user’s movement, so that the user cannot paddle through the pillars, but he/she must paddle around the pillars and under the arches.

long bridge edited

Danny Rozin suggested that a way to do this might be to tell Processing to read the pixel color in the center of the screen, which is the user’s central viewpoint, and if the color pixel is black, then move forward, but if the color pixel is not black (like green lily pads or brown bridge), then do not move forward. This logic would apply to the bridge asset, but could also be applied to many of our objects, such as the rocks or trees.


I also want to make schools of fish that look like they are swimming through the water. Every once in a while, a school of fish will appear in the water and move from the left to right side of the screen, just as the birds fly across the sky.

fish school

So, to sum up my next steps in the code:

1) Code a “colliding” algorithm for objects such as the bridge, rocks, trees, and logs.
2) Animate a school of fish in AfterEffects and make them move under the water in our 3D world.

Our team also made a lot of progress on the physical construction and building materials for our project. Read about our physical computing work in this week’s blog post.

Read more about the background for this project in last week’s blog post.

No Responses to “Channels – Virtual Interface”  

  1. No Comments

Leave a Reply