Archive for March, 2008

bounceGame Mobile

Tuesday, March 25th, 2008

[image coming soon]
run the sketch—view the code—download files for phone

How do you use it?
The direction keys on your phone change the speed of the ball. Vertical and horizontal motion are independent of one another. The effect is relative to the ball’s current direction of travel. Press in the opposite direction to slow it down, and in the same direction to speed it up. E.g. While the ball is moving to the left, it will speed up each time you press the left-arrow, and slow down with each press of the right-arrow. While the ball is moving to the right, the left-arrow slows it down and the right-arrow speeds it up. The up- and down-arrows have the same effects on the vertical component. (NOTE: If it’s going crazy fast and you can’t get it under control, restart the app. The speed is set randomly when the program launches.)

What is it?
A mobile app! A game of sorts. Can you get the ball to stop?

Why is it cool?
I’ve begun tinkering with Mobile Processing. This lets you use your knowledge of Processing to develop software that runs on Java enabled mobile phones (running J2ME). Very cool. I’ll be posting my Mobile Processing projects here. To install them, use your phone’s browser to go to Let me know what you think!

kindaPong // ver a

Monday, March 24th, 2008

run the sketch—view the code

How do you use it?
Move the mouse left and right.

What is it?
Actually, this was inspired by my Bounce Game. I’m prototyping it in Processing with hopes of bringing it back to Mobile Processing so you can play it on your phone, too.

Why is it cool?
You tell me…

Type Wheel Windmill

Sunday, March 16th, 2008

run the sketch—view the code

How do you use it?
Move the mouse around. The “x” key toggles the axes.

What is it?
Based on Letter Wheel.

Why is it cool?
To day I introduced one of my students, Frank, to Processing. This is what we came up with.

pictureTube // actual tube version

Saturday, March 15th, 2008

pictureTube_e2 pictureTube_e1
run the sketch—view the code

How do you use it?
Move the mouse left and right to spin the cylinder. Move the mouse up and down to adjust the pitch. Zoom in and out with “z” and “x”.

What is it?
This is what I was trying to do yesterday. It reconstructs the image by drawing small squares filled with the color of each pixel. Nested for loops parse the 1-D pixel array into rows and columns.

Why is it cool?
It’s nice to have solved the problem I set out for myself, but I’m more intrigued by the “failures” than this one.

pictureTube trials

Friday, March 14th, 2008

pictureTube_0 _pictureTube_a _pictureTube_b _pictureTube_c
_pictureTube_d1 pictureTube_d2 pictureTube_d3 pictureTube_d4
(click each image to run the sketch that generated it)
How do you use them?
Move the mouse around to change the orientation of the structures.

What are they?
Attempts at constructing a cylinder out of a JPG. They are presented chronologically, left to right, top to bottom.

Why are they cool?
I don’t remember where the idea came from, but I thought it would be pretty quick and easy to turn an image into a cylinder. Just grab a pixel’s color from the image array, translate out, draw a square, translate back in, rotate and repeat. Well… it took a few more attempts than I expected. But along the way—as frustrating as it was—the program generated some pretty interesting results. I decided to save the “failures” because they A) look pretty cool, and B) reveal a lot about the program’s flow through loops and moving about in 3D space.

This is the source image:
pictureTube image

Image Array Grid

Thursday, March 13th, 2008

run the sketch—view the code
How do you use it?
Move the mouse around.

What is it?
The interactivity is just a frill in this one; It’s really about the code structures. I created this as a teaching example. It demonstrates how to automatically load multiple images into a PImage array. It also shows a technique for tiling multiple images.

digiLog Clock // ver B

Wednesday, March 12th, 2008

run the sketch—view the code—watch the video

How do you use it?
Move the mouse left and right to switch between digital and analog.
The “d” toggles a superimposed digital time display. (I built this in for debugging but decided to leave it.)

What is it?
It’s a whole new way to see time. There are advantages and disadvantages to both analog and digital timepieces. Here you have them both at your fingertips.

Why is it cool?
I’ll admit my bias. I think there are only disadvantages to clocks with digital time displays. They stress the moment rather than the continuum of time. If it’s 8:45 and I need to be somewhere at 9:00, looking at the numbers in this hh:mm format doesn’t really say anything to me. Digits may be useful inline with text—like this sentence—but on a clock they’re just numbers. On a digital clock, fifteen minutes is an abstract concept that has little impact on my actions. However, analog clocks allow you to visually quantify time. As the hands sweep around the face of the clock, they define physical areas. This turns time into something visible; something my senses can directly and immediately perceive without doing any math or other cognitive interpretation (read “distraction”). On an analog clock face, you can see that fifteen minutes is one-quarter of the circle. And as the minute hand progresses around the circle, you can watch this slice of the pie becoming physically smaller. I find this to be a much more useful way of representing time.

Imagine that the three-dimensional space of the room you are sitting in represents two hours of time. In a digital clock world, sixty minutes from now your room will instantly be reduced to half of its current volume. The ceiling and walls will suddenly rush in on you, shoving everything together. You’ll watch your new laptop get smashed against the wall, your framed Ride the Lightning LP autographed by Cliff Burton will crash to the floor, and you’ll spill coffee all over the thumbnails you’ve been drawing for the past two days.

Now consider an analog clock world where the room gradually becomes smaller. As those same sixty minutes pass, the walls slowly and continually move in around you. You will notice the objects in the room being pushed together and you will have a chance to adapt to these changes as they happen. You will be able to move the bookshelf closer to the desk, you will have a chance to take that framed LP off the wall, and when you notice that extra chair start pressing against your arm, you will get to set your coffee down and move the chair out of the room. In this analog clock world you have the opportunity to work with the passage time instead of being suddenly informed that it is already gone.