Learn creative coding writing simple programs
113. Array of objects: hypnotic animation part II
This is the continuation of episode 112. We are building a hypnotic animation using an array of objects. Our objects are instances of a class called Bug. This bug is a simple animated circle.
The first thing we do in this video is to change how the circle grows and shrinks. Originally we had properties to keep track of the maximum and minimum allowed sizes for the circle. This technique required 4 properties: the current, maximum and minimum sizes, and the current growth step size, which could be a positive or a negative number. This technique is probably easy to understand, but we can write less code by using the sin() function.
The sin() function returns numbers between -1 and 1 in a cyclical way. That means that it goes from 1 to -1, then back to 1, then again to -1, and so on, forever. So the sin() function is perfect for cases where we want something to move smoothly between two values (two sizes, two positions or two colors).
Since sin() returns numbers between -1 and 1, and those values are too small to be used as sizes, we need to map() those small values to larger values more suitable for sizes.
sin() takes one parameter, which I will call t, because in this program it reminds me of time. We need to keep increasing t. The faster t increases, the faster sin() will cycle between -1 and 1. If all the bugs increased t at the same rate, for example, if t increased 0.1 on each frame, all bugs would then animate at the same exact rate. That would be slightly boring. It's more interesting if each bug animates at a different rate. That's why we use a property called speed, which defines the speed of the animation of each bug.
There are many ways we can place the bugs on the screen. We could place them in random positions, we can place them all in the center (which is kind of silly), we can place them in a grid, and we can do what we do in this episode: place them in a spiral that starts at the center of the screen and move away from the center while it rotates around it. To achieve this we use the formula of the circular motion. This formula includes a center, an angle of rotation around the center, and a distance from the center. This is also known as polar coordinate system.
Code editor
background
class
cos
draw
ellipse
fill
float
for
height
int
map
new
noStroke
setup
sin
size
smooth
void
width
Try to stay close to the topic of this episode. Use the Processing forums for help with unrelated Processing projects (or hire me for help ;-)
To indicate that a word in your comment is code, use the `backtick`. Example
Do `float` and `int` smell similar?
To highlight code blocks, surround it with ``` code-fences ``` like this:``` void setup() { size(600, 600); } ```