Oscillation amplitude and period
xlocation) as a function of time, with the following two elements:
- Amplitude: The distance from the center of motion to either extreme
- Period: The amount of time it takes for one complete cycle of motion
TWO_PI; the output of sine never rises above 1 or below -1; and every
TWO_PIradians (or 360 degrees) the wave pattern repeats.
// Our amplitude measured in pixels var amplitude = 100;
millis()) and come up with an elaborate algorithm for oscillating an object according to real-world time.
frameCountvariable to find out what frame we're currently on, and the
frameRate()function to change the preferred frames per second. 30 FPS is the default frame rate, as that's a good rate to produce a smooth animation to trick the human brain, but it can sometimes be helpful to slow down that frame rate, like when debugging.
// Our period is measured in frames (our unit of time for animation) var period = 120;
var x = amplitude * sin(TWO_PI * frameCount / period);
map()function to map the output of sine to a custom range.)
frameCountis at 120 frames, 240 frames, 360 frames, etc.
frameCountis really the only variable; it starts at 0 and counts upward. Let’s take a look at what the formula yields with those values.
|frameCount||frameCount / period||TWO_PI * frameCount / period|
|240||2||2 * TWO_PI (or 4* PI)|
frameCountdivided by period tells us how many cycles we’ve completed—are we halfway through the first cycle? Have we completed two cycles? By multiplying that number by
TWO_PI, we get the result we want, since
TWO_PIis the number of radians required for one sine to complete one cycle.
sin()in ProcessingJS), but the same ideas apply to using the cosine function. The period is the same for both, and the main difference is just whether the beginning amplitude starts at 1 or at 0.