Trigonometry for Designers (Don't Panic!)

Download this episode

Download Video

Description

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();
  }
}

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      rapuke

      Is it possible to bring data from within the Java Script say from a db into Processing?

    • User profile image
      mrpaulb

      That was perfect refresher, great example and top quality presentation. 

      Many thanks

      Paul

    • User profile image
      mk1234

      Enjoying the series but have a question - why do you pronounce
      height the way you do (with a 'th' on the end) as opposed to 'hite'?

      I'm curious.

    • User profile image
      rbarraza

      LOL. Never even noticed that. I DO always say "width and heigh(th)". Totally understand how that could be annoying. Like hearing people say "nuculer", right? I'll try and work on it Wink

    • User profile image
      tomkirbygre​en

      Terrific series. I like to see more coverage of the fundamental maths for 2D graphics.

    • User profile image
      pavan

      Great series.. I would like to see more series.. Thanks for this series..!

    • User profile image
      Zapp

      I totally agree. Enjoyed this alot. Please do another :D

    • User profile image
      Craig

      Really nice presentation!

      Thanks!

    • User profile image
      Nicolas Carlo

      Again, thanks a lot for these videos. One of the best, if not the best, presentations of what the deal is with cos and sin functions.

      Processing comes with a radians() function by the way that helps you convert degrees to radians. And a degrees() function that does the opposite.

    • User profile image
      John Montgomery

      A stimulating tutorial - made me fire up Processing again.
      Much thanks.

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.