Project 03 – Dynamic Drawing

var squares = [];

function setup() {
    createCanvas(600, 450);
    for (var x = -280; x < 1000; x += 40) {
    	for (var y = -320; y < 1000; y += 40) {
    		squares.push(new Rect(x, y, 20, 20));
    	}
    }

}

function draw() {
    translate(300, 225);
	background(56, 63, 81);
	for (var y = 0; y < squares.length; y++) {
		squares[y].show();
	}
}


var Rect = class {
    constructor(pX, pY, w, h) {
        this.pX = pX;
        this.pY = pY;
        this.w = w;
        this.h = h;
    }

    show() {
        rectMode(CENTER);
        noStroke();
        var scale = Math.pow(mouseX - this.pX - 300, 2) + Math.pow(mouseY - this.pY - 225, 2);
        scale = min(40*225/scale, 1);
        fill(200*scale, 120/scale, 150*scale);
        rotate(scale/100);
        rect(this.pX, this.pY, this.w * scale, this.h * scale);
    }
}