• Original code

different translate shifts the center

translating based on mouseX creates 3D effect

move rect to center of screen so we can see it better

let w = 400;

function setup() {
  createCanvas(600, 600);
  background(0);
  //noLoop();
}

function draw() {
  background(0);
  drawrect(w);
}

function drawrect(w) {
  stroke(255);
  noFill();
  rect(100,100, w, w);
  randomSeed(0.2);
  translate(mouseX/40, -0.05*w);
  rotate(sin(0.05 / 0.95));
  w *= 0.95;
  
  if (w > 1) drawrect(w);
}

2. 象鼻 copy.mov

Change rotation creates different effect, too

translate(-mouseX/80, 0.05*w);
  rotate(-sin(0.05 / 0.95));
  w *= 0.98;

3. 象鼻 2.mov

Let’s make “r” a parameter so I can pass in different values.

It no longer rotates! Except the first one

—> recursive function need to maintain same parameters

let w = 400;

function setup() {
  createCanvas(600, 600);
  background(0);
  //noLoop();
}

function draw() {
  background(0);
  drawrect(w, 0.02);
}

function drawrect(w, r) {
  stroke(255);
  noFill();
  rect(100,100, w, w);
  randomSeed(0.2);
  translate(mouseX/40, -0.05*w);
  rotate(r);
  w *= 0.98;
  
  if (w > 1) drawrect(w);
}

added r to parameter

make a grid so I can later on alter rotation for each grid

reset translate (removing mouseX)

it only created one set

function setup() {
  createCanvas(600, 600);
  background(0);
  //noLoop();
}

function draw() {
  background(0);
  for(let i = 0; i < 3; i++){
    for(let j = 0; j < 3; j++){
      translate(i*200, j*200);
      drawrect(200, -0.1);
    }
  }
  push();
}

function drawrect(w, r) {
  stroke(255);
  noFill();
  rect(0, 0, w, w);
  translate(0, 0.05*w);
  rotate(r);
  w *= 0.95;
  
  if (w > 1) drawrect(w, r);
}

console.log(w, r); —> it is being drawn, just can’t see

translate(i*200+400, j*200+400);

one of them is rotated

translate is cumulative in draw()