Saturday
Nov222008
Yay Math! Joys and hardships of basic trig
posted on:
2008-Nov-22 19:38
2008-Nov-22 19:38
Moments after I completed my last Processing sketch, I wanted to explore other variations on the theme. The simplest one being drawing a shape on the canvas rather than a simple line.
This couldn't be simpler!
rect (0,0, 50, 50);
Yup, that's that. Well, how about a bit more in the way of the motion of the shape. We covered simple rotation about an axis, so let's try a different model. The Processing documentation details a number of possibilities, and one that caught my eye is sinusoidal motion.
Motion on curves is a classic technique to achieve smooth animations such as easing. So let's take a look:
float singraph(float sa) {
sa = (sa - 0.5) * 1.0; //scale from -1 to 1
sa = sin(sa*PI)/2 + 0.5;
return sa;
}
Now, you can easily read lots of technical descriptions of this concept, some with exquisite detail.
My favorite has been reading about Simple Harmonic Motion. This concept takes a fairly esoteric notion and applies it to describe interesting behaviors like uniform circular motion or the motion of a mass on a spring.
In practical application, the sine function allows you to achieve a fairly smooth and organic motion without a lot of overhead (fewer lines of code, fewer minutes of thinking). I pass our increment value through this function to give me the rotation value.
sa = (sa - 0.5) * 1.0; //scale from -1 to 1
sa = sin(sa*PI)/2 + 0.5;
return sa;
}
void draw() {
background(247,247,247);
smooth();
pushMatrix();
translate (width/2,height/2);
radVal+=.1;
float sinVal = (singraph(radVal));
rotate (sinVal);
stroke(90,90,90);
fill(sinVal*100,100,0);
rect (0,0, 50, 50);
rectMode(CENTER);
popMatrix();
}
The result is a hypnotic, springy motion. I added a bit of spice by having the fill color pass through the same sine-based alteration.
Give it a shot, and show me any other trig based transforms you've seen in the wild.
background(247,247,247);
smooth();
pushMatrix();
translate (width/2,height/2);
radVal+=.1;
float sinVal = (singraph(radVal));
rotate (sinVal);
stroke(90,90,90);
fill(sinVal*100,100,0);
rect (0,0, 50, 50);
rectMode(CENTER);
popMatrix();
}


Reader Comments