Navigation
Powered by Squarespace
« Vite,Vite! Squid Reverse Proxy ... | Main | Processing Exploration: Rotating a sprite... »
Saturday
Nov222008

Yay Math! Joys and hardships of basic trig

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.
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.

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>