p5.centered.rect.js

var rects = [];
var SQPI = (PI/64);
var xq = 0.01;
  
function r(x,y,w,h){
  var self = this;
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;
  this.xc = -w/2;
  this.yc = -h/2;
  this.r = 0;
  this.tx = 0;
  this.ty = 0;
  this.draw = function(){
    self.tx = self.x-self.xc;
    self.ty = self.y-self.yc;
    self.r = SQPI * sin(self.x);
    stroke('rgba(0,125,255,0.6)');
    fill('rgba(0,125,255,0.6)');
    translate(self.tx,self.ty);
    rotate(self.r);
    rect(self.xc,self.yc,self.w,self.h);
    rotate(-self.r);
    translate(-self.tx,-self.ty);
  }
}

function nr(x,y,w,h){
  rects.push(new r(x,y,w,h));
}
  
function setup() {
  createCanvas(680, 580);
  nr(68,186,38,298);
  nr(108,187,102,40);
  nr(210,227,40,89);
  nr(107,317,103,40);
  nr(291,187,88,40);
  nr(379,227,40,90);
  nr(250,317,130,40);
  nr(251,79,40,147);
  nr(291,80,106,40);
}
function draw(){
  background('#fff');
  for(var i = rects.length-1; i >= 0; i--){
    rects[i].x += xq;
    rects[i].draw();
  }
  if(typeof rects[0] != 'undefined'){
    if(rects[0].x > 308 || rects[0].x < 68)xq=-xq;
  }
}