Trigonometry for Designers (Don't Panic!)

See trig sketch in action

Trigonometry is the secret weapon of many top creative coders. Unfortunately for many designers, though, it was never taught in a visual or interactive way. We try and fix that with this whirlwind tour of the key concepts of SIN and COS and how we can use them to generate circles, spirals and patterns. We also introduce more advanced rendering concepts by introducing pushMatrix() and popMatrix() for handling rotation and scale of our visual elements. We finish off the lesson with an sketch that explores the Golden Ratio.

To follow along in Visual Studio, please download the Processing Sketchbook projection.

The finished sketch for this lesson can be found below:

float ToRadians = PI / 180.0;
float gAngle = 137.5077640844293;
float rotation = 0.0;
float initialRotation = 0.0;
int width, height;
int totalPetals = 300;
Petal[] petals = new Petal[totalPetals];
float radiusGrowth = 1.0049;
float radius = 60;
 
void setup() {
    width = 500;
    height = 550;
    size(width, height);
    noStroke();
    smooth();
    background(0);
    for (int i = 0; i < totalPetals; i++) {
        rotation += gAngle;
        radius *= radiusGrowth;
        Petal petal = new Petal();
        petal.x = width / 2 + cos(rotation * ToRadians) * radius;
        petal.y = height / 2 + sin(rotation * ToRadians) * radius;
        petal.rotation = rotation * ToRadians;
        petal.scale += (i * 2) / totalPetals;
        petal.render();
        petals[i] = petal;
    }
};
 
class Petal {
  float x = 0.0;
  float y = 0.0;
  float rotation = 0.0;
  float scaleVar = 1;
  color baseColor = color(0, 255, 255, 150);   
  color detailColor = color(255, 255, 255, 160);
  color trimColor = color(0, 0, 0);
  void render (){
      pushMatrix();
      translate(this.x, this.y);
      fill(this.baseColor);
      rotate(this.rotation);
      scale(this.scaleVar, this.scaleVar);
      rect(-10, -1, 20, 2);
      ellipse(0, 0, 10, 10);
      fill(this.detailColor);
      ellipse(0, 0, 8, 8);
      fill(this.trimColor);
      ellipse(0, 0, 5, 5);
      popMatrix();
  }
}