回転

function setup() {
  createCanvas(400, 400);
    colorMode(HSB,360,100,100,100);
}

function draw() {
  background(220);
    push();
    translate(width/2,height/2);
    fill((frameCount+180)%360,100,100,random(100));
    rotate(radians(-(frameCount+random(50))%360));
    rectMode(CENTER);
    rect(0,0,50,50);
    pop();
    
    push();
    translate(width/2,height/2);
    rotate(radians(0 + frameCount));
    fill(frameCount % 360, 100, 100,random(100));
    triangle(50,50, -width / 2, -height / 2, -width / 2, height / 2);
    pop();
}

rotateってどこで回転してるの？というもねの疑問に答えながら自分で整理したやつがeditorの方に残ってたのを発見したのでここにも残しておく。

rotateによって回転するのは原点が中心になる。
中心を変えようとしたらpush/translate/popによって原点を変更。
そこを中心に回転することを考えつつ図形を作る。