Spinning top
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.Our purpose is to transform access to education.
We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.
We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.
Learn more about how FutureLearn is transforming access to education