If you have not tried it yet, I suggest you play with the toy (click here) before you continue to read on.


Simple mouse gestures
Compound mouse gestures

Click - drag - release (draw a line) cuts the grid (canvas). Sit back and watch the canvas evolve.

Click - release (draw a point) "tickles" the canvas. A second click after a short pause will "tickle" the canvas even more.

Double clicking mends the cut(s) on the canvas. If the canvas does not have a cut, double clicking will reset the grid to its starting state.

Also try the following:

Point - line

Line - point - line

and so on ....

OK, what is going on?
So what?

What you see is a simple simulation of a grid, where each node is connected to its 4 neighbors by a spring.  During certain phases of the simulation (e.g. while the grid deforms and inflates, following a cut), the springs also resist being bent at the node points; i.e. the springstry to stay aligned.  Or at least this is what I tried to do.

Drawing a line trough this grid cuts open the springs under the line.  Drawing lines is the main way of communicating with the program. The resulting grid deformations are the focus of the "So what" comments to the right.

As a diversion, clicking a point creates a temporary disturbance under the mouse pointer while at the same time the elastic constant of the springs are pushed to near instability.  Note that in this particular part of the simulation the springs are not subject to bending forces.

What I find interesting is the fact that the internal representation of the grid is fully restricted to 2D (not 3D projected to 2D!). However, the perception is that the grid deformations are happening in 3D.

The state of each grid node is completely defined by its [x,y] position on a plane.  There is no third dimension [z].  The grid is always "flat"; e.g. it is always constrained to a single plane, even while severely deformed.  A creature who has always lived in a flat world, and who also happens to be familiar with the java programming language, might be able to pore over the source code (available below) and visualize the outcome.

However, when we (or at least those of us who live in 3 dimensions) watch the representation of the grid on the computer screen, we are fooled that the grid is being deformed in 3 dimensions.  Not true.  By the way, the coloring and shading of the grid "cells" is solely drivenby the symmetry and orientation of these cells on the [x,y] plane.

Other 2D simulations provide the illusion of 3D. Still, you might find the 3D illusion provided by cutNwatch interesting.

Programming / tools / thanks / resources
Source code
Written in Java and Processing using the Eclipse IDE.  The Applet code uses the processing.core library. Applet jar built using Toxi's original ant script and tutorial, updated by Reas and wmli.  Font is 04B_03_ copyright Yuji Oshimoto.





By downloading the source code from this page you agree that the software is provided "as is", that I make no warranties, express or implied, with respect to its functionality, operability or use, and that I expressly disclaim any liability whatsoever.

Click here to dowload the source code.


Questions comments?
Comments and questions are welcome. You may post them here.