Spinning top

Watch Jon McCormack outline another basic approach to developing rule-based sketches: start with a simple physical process and derive a set of rules that capture what is interesting to you about that process. For this example, we used a spinning top moving over a surface. The top traces out a curved pattern as it moves across the paper.Open and run the w3_04 sketch. This sketch simulates the drawing motion of the top using sin() and cos() functions. Let’s look at some important parts of the code.The position of the top is stored in two float variables, x and y. At each frame the position of the top is incremented by a small amount (dx and dy – representing the instantaneous velocity of the top). The top always starts in the middle of the screen, moving in a randomly chosen direction.If the top gets close to the edge of the window the direction is reversed and the velocity is changed. Here’s the code section that checks in x:

if (x > width-100 || x < 100) {
 dx = dx > 0 ? -random(min, max) : random(min, max);
}

You should already be familiar with this if statement, it’s saying that if the x location of the top is closer than 100 pixels to the edge of the window then change the value of dx.The statement inside the if is an operator we haven’t encountered before: the conditional operator, ?. This is a really a shortcut way of writing an if statement. It is a ternary operator because it takes three arguments. The general form is:

result = test ? expression1 : expression2;

This is a shorthand way of saying:

if (test) {
 result = expression1;
} else { 
 result = expression2 
}

As you can see it saves a lot of space.The movement of the top is linear (in a straight line). To see this you can modify the code to draw the position of the top (x, y) using point() or ellipse(). To get the smooth motion of the top, we rotate a point about (x,y) fixed at 100 units:

float bx = x + 100 * sin(rad);
float by = y + 100 * cos(rad);

The code goes on to calculate the position of a rotating ‘hand’ that is spinning around this position. For a little more interest we made the distance from the length of the ‘hand’ oscillate slowly:

float radius = 100 * sin(rad*0.1);
float handX = bx + radius * sin(rad*3);
float handY = by + radius * cos(rad*3);

This combination of two different oscillations is enough to give the path a kinetic sense of “spinning-top-ness” without having to simulate all the physics of a real spinning top.Can you devise a set of rules (in plain English) that describes what this sketch is doing? Post your answer in the comments. Please take time to read though some of the posts and try to comment on at least one.One final thing of note. What is this code doing?

blendMode(BLEND);
fill(0, 5);
rect(0, 0, width, height);

Here’s a hint: there is no call to background() in draw() – this code is doing a special kind of erasing of the screen. Experiment with the alpha value passed to fill() to get a better idea of what’s going on.

---