Gear

What

それぞれ回転する歯車を、かみ合わせるように描いています。歯車の回転はrotate関数を使うことで簡単に実装することができます。
画面をクリックすると回転が止まったり再度動いたりします。

rotate関数は原点中心の回転なので、歯車たちは描かれた時点では原点中心です。translate関数によって表示位置まで移動しています。
原点中心で描画 + rotate + translateは、任意の場所で回転させる際のテクニックです。

How

var w = 400;
var h = 400;
var loopStatus = true;
function setup() {
  createCanvas(w, h);
  background(100);//white
  frameRate(5);
}

function draw() {
  background(100);
  push();
  stroke(color(200, 0, 0));
  translate(200, 200);
  rotate(frameCount / 10);
  drawGear(20, 50);
  pop();

  push();
  stroke(color(0, 200, 0));
  translate(92, 200);
  rotate(-frameCount / 10 + 120);
  drawGear(20, 50);
  pop();

  push();
  stroke(color(0, 0, 200));
  translate(200, 92);
  rotate(-frameCount / 10);
  drawGear(20, 50);
  pop();

  push();
  stroke(color(0, 255, 255));
  translate(277, 277);
  rotate(-frameCount / 10 + 44);
  drawGear(20, 50);
  pop();
}

function drawGear(n, r){
  var rad = TWO_PI / n;

  for(i = 0; i < TWO_PI; i += 0.01){
    var y1 = 0;
    var y2 = 0;
    if(sin(i * n) >= 0){
      y1 = r;
    }else{
      y1 = r * 1.1;
    }
    line(y1 * cos(i), y1 * sin(i), 0, 0);
  }
  ellipse(0, 0, 10);
}

function mousePressed(){
  if(loopStatus){
    noLoop();
    loopStatus = false;
  }else{
    loop();
    loopStatus = true;
  }
}
        

Where

関連するチュートリアル・リファレンスへのリンクです。