RectsRectsRects

var tiltAngleP = 14;

var speedP = 0.07;

​

var tiltAngleR = 5;

var speedR = 0.04;

​

var tiltAngleY = 6;

var speedY = 0.03;

​

var w = 1920/5*4;

var h = 1080/5*4;

​

function setup() {

  createCanvas(w, h);

  rectMode(CENTER);

  angleMode(DEGREES);

  imageMode(CENTER);

}

​

​

function draw() {

  background(0);

  rotatingRects(30,width/4,height/2,tiltAngleP,8,0.03,random(110, 130),93,random(130,190),30);

  tiltAngleP += speedP;

  rotatingRects(40,width*2/3,height/3,tiltAngleY,8,0.01,random(240,255),random(200,225),random(60,80),30);

  tiltAngleY += speedY;

  rotatingRects(50,width/2,height*2/3,tiltAngleR,8,0.02,random(220, 255),96,67,30);

  tiltAngleR += speedR;

  fill(200);

  textSize(18);

  textFont('Georgia');

  text("By Alex Yixuan Xu", width*9/10, height*11/12,);

}

​

function rotatingRects(numRect,x,y,tiltAngle,minLen,strokeOverLen,r,g,b,a){

  for (i=0; i<=numRect; i++){

    push();

    translate(x, y);

    if (i%2 == 0){

      rotate(-tiltAngle*(i+1));

    }

    else{

      rotate(tiltAngle*(i+1));

    }

    fill(0);

    strokeWeight(minLen*(numRect-i)*strokeOverLen);

    stroke(r, g, b, a*(i+1));

    rect(0, 0, minLen*(numRect-i), minLen*(numRect-i));

    pop();

  }

}