Archive for the 'Favorites' Category

kindaPong // ver c

Monday, April 7th, 2008

run the sketch—view the code

How do you use it?
In one-player mode, move the mouse left and right. In two-player mode, mouse X controls the bottom paddle, mouse Y controls the top paddle. The “2″ key toggles between one- and two-player mode.

What is it?
The final test version of the Pong game. The next step is to port it back to Mobile Processing.

Why is it cool?
Come on… it’s Pong!

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!

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

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.

3deeLine // ver B

Monday, March 3rd, 2008

run the sketch—view the code

How do you use it?
Click-and-drag to scribble a drawing. Then move the mouse around to rotate it in 3-D space.
z/a = zoom in/out
x = toggle the coordinate axes
d = toggle the (not quite right) depth cueing
r = resets zoom factor and re-initializes the arrays with that cool spiral

What is it?
The final (for now) version of Saturday’s post.

Why is it cool?
(I’ll update this with all the links soon.)
Graffiti Research Labs were in town this past week as part of the Spark Festival at the University of Minnesota. They demonstrated their L.A.S.E.R. Tag system. This, of course, reminded me of fi5e’s Graffiti Analysis project from a few years back, which made me think, “Hey, I want to draw in 3-D space.” So here it is.

Quilt Pattern Generator // step 5.1

Sunday, January 13th, 2008

Quilt Pattern Generator // step 5.1
run the sketch—view the code

How do you use it?
Type 3 or 4 to select between triangles and quadrilaterals. Click in different locations to define the corners of your shape. You can keep clicking to to make new shapes and patterns. The UP and DOWN cursor keys change the number shapes rotated into a patch.
You get the most quilt-like results if you make a small shape in the upper-left quadrant of the sketch window. But, by all means, play around.


Tuesday, December 11th, 2007

run the sketch—view the code—download the sketch

How do you use it?
Hit any key to start or stop cycling through the array of names.

What is it?
A revision of randomStudent from December 6th. This time the names are read from a file in the data directory called Students.csv (exported from Excel). Currently it scans back and forth through an array. The randomness is not in the code, but in the reaction time of the person at the keyboard. I would like to further revise it so it keeps track of who has already been selected.

I’ve included a link to the sketch folder which contains the font and data files.