All change is not growth, as all movement is not forward.. [Ellen Glasgow]
Linear movement is the most basic movement type we can have. There are however several ways to program linear movement.
Now if we want to move linearly in the direction of some angle, let's call it "angle" then we need to update the xPos and yPos coordinate variables (for whatever shape we're moving) using the cos and sin of the "angle" angle variable.
What about using a data source like the mouse position to generate the angle? It's still linear movement, but much more interesting.
We can use a simple integer as a timer for any motion (or in any object). We don't have to time only motion, we can time a fill, an animation, practically anything.
Wavy movement is usually performed by using sin and cos for the direction to travel but in a slightly different way.
If we combine cos and sin to effect the x and y positions at the same time, using the same angle, we will get a circular movement.
Notice the number 40 in there? That's a chosen number, it could be anything. Since sin and cos are two functions that return numbers oscillating between ( -1, 1 ), that number becomes the radius of the circular motion in this example.
Also note that the angle is always increasing at a constant rate. We could say the angle is increasing linearly with time. Why 0.04? It's a nice number that makes the movement smooth... That's all. Changing this number would simply make the circles faster or slower.
So what if we can move back and forth or in a circle? Well things become more interesting when we start changing the location and adding in a little bit of random behavior.
Two things to notice here:
The use of an integer to remember which way we should be increasing our angle. The "dir" variable is simply 1 or -1 and that will control how our angle is updated.
The other is the use of the random function. Notice it's usage here: if (random(0, 16) < 1) This use will give a 1 / 16 chance of the dir variable getting changed. That's what gives this dot it's random walk.
So how would we give our little vehicle a lifespan. Eventually it walks completely offscreen, but what if we wanted to control how long it would be until that happened? Well we'd need to time it somehow using an integer.
Notice how when the timer reaches 255, we reset the xPos and yPos to the center, and reset the timer to 0 so the whole loop will happen again with this object.
We've seen a basic attraction equation before, but let's take another look:
Notice what makes the attraction happen? It's the vector (distance and direction) to the mouse position divided by some number (30). So what we are adding to the xPos and yPos is a piece of that vector to the mouse. The more we divide this vector, the slower the object will move towards the mouse?
How about repulsion?
Notice that instead of adding the vector in the direction of the mouse, we're subtracting it from the xPos and yPos variables. Also, we had to increase the divisor (30) to 300 in this case, because otherwise our object would move too fast and would leave the screen before we had a chance to find out what happened.
There is another way to do repulsion and it has to do with how we calculate the vector:
xPos += (xPos - mouseX)/300;
yPos += (yPos - mouseY)/300;
Now the vector faces the opposite direction. When we add this to our object (not subtracting) we're actually adding a vector facing
away from the mouse.
Attraction can be physics based, including a mass and force.
Perlin noise is a smooth random noise function. Have you ever used the "clouds" filter in photoshop? Then you've seen Perlin noise.
Now imagine if we controlled the angle of some object based on the brightness of the noise where the object's position was?