Let's Animate Parametric Lines
Our final sketch involves layering parametric equations to plot coordinates connected by lines to create mesmerizing animations.
Rather than using polar coordinates like John Whitney did, we will be using parametric equations because our equipment is much different. These equations can draw illustrations similar to our roses, but today we're exploring how to animate with them.
A standard trig function consists of one equation like 'y = 3x'.
But parametric equations consist of two equations to find a point for x and a point for y, using a third variable t (the parameter).
y = 5t
x = 5t
By plugging in values of t, we receive values of x and y, which we then plot onto our screen. When layered, these equations create more abstract curves than the standard sine wave.
Each parametric equations in my Pen is defined within its own JavaScript function:
function x (t) {
return 0;
}
function y (t) {
return 0;
}
Later I will call x, y and t in my draw function to plot them on our screen.
I’ve coded a circle to start us off (I’m using e as the parameter since t is already taken):
function x5 (e) {
return sin(e / 10) * 300;
}
function y5 (e) {
return cos(e / 10) * 300;
}
What number does what?
sin(e / 10 [coefficient inside the wave = frequency]) * 300 [coefficient outside the wave = amplitude]
This is a parametric equation without layering, so we get a basic circle.
Now let’s look at one of the layered parametric equation I have created:
function x2(t) {
return sin(t / 10) * 150 + sin(t) * 2;
}
function y2(t) {
return cos(t / 20) * 150 + cos(t / 12) * 20;
}
I layer two sine waves and two cosine waves to create a dynamic wave. We can continue to layer as many times as we like to create varying results.
The lines are created by drawing a line from one of our parametric coordinates to another. In the drawing function we are plotting two equations at a time to create a line. The animation prints line by line, so we have to increment our parameter t or e by 1 for it to have motion. You can replace NUM_LINES or NUM_DOTS with any number of lines you would like to print. Whatever number you choose, the animation will loop. The ‘t = n’ equation after each for loop impacts the speed of our animation.
And there you have it! Your first computational animation.