Exploring matrices and context

index.html

<canvas id="canvas" width="700px" height="400px"></canvas>
<script src="./index.js"></script>

index.js

let quadW = quadH = 20;
let center = quadW / 2;
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let width = 700;
let height = 400;
let radians = Math.PI / 180;
let rt = 0;

let fillStyle = [];
let colors = [];
let delays = [];
let factor = 0.02, factors = [], factorSpeed = [], state = [];

let iteration = 1;
let getBigger = [];
let getBiggerFactor = [];

for (let i = 0; i < 1300; i++) {
    delays[i] = i / 5; // delay rotation
    factors[i] = factor;
    factorSpeed[i] = factor;
    getBigger[i] = 0;
    getBiggerFactor[i] = 0.075;
}


function draw() {
    let ct = 0;
    iteration++;
    if (iteration % 10 === 0) {
        let theChosenOne = Math.floor(Math.random() * 1300);
        getBigger[theChosenOne] = 1.0000001;
        getBiggerFactor[ct] = 0.05;
    }
    ctx.clearRect(0, 0, width, height);
    for (let i = 0, k = 0; i < height - quadH; i += quadH, k++) {
        ctx.save();
        ctx.translate(0, quadH * k);
        for (let j = 0; j < width - quadW; j += quadW, ct++) {
            if (!colors[ct]) {
                colors[ct] = `rgba(${Math.floor(Math.random() * (255 - k / 5 ))}, 
                ${Math.floor(Math.random() * (255 - k * (k / 10)))}, 
                ${Math.floor(Math.random() * (255 - k * (k / 5)))}, 0.75)`;
            }
            ctx.fillStyle = colors[ct];
            ctx.translate(j === 0 ? 0 : quadW, 0);
            if (iteration > delays[ct]) {
                factors[ct] = factors[ct] + factorSpeed[ct];
                factors[ct] = factors[ct] > 5 ? 5 : factors[ct];
                rt = iteration * factors[ct];
                ctx.save();
                ctx.translate(center, center);
                ctx.rotate(radians * rt);

                if (getBigger[ct] > 1) {
                    getBigger[ct] = getBigger[ct] + getBiggerFactor[ct];
                    if (getBigger[ct] > 10 ) {
                        getBiggerFactor[ct] = getBiggerFactor[ct] * -1;
                    }
                    ctx.scale(getBigger[ct], getBigger[ct]);
                }
                ctx.translate(-center, -center);
                ctx.fillRect(0, 0, quadW, quadH);
                ctx.restore();
                // ctx. restore is equivalent to
                /*
                ctx.translate(center, center);
                ctx.rotate(-radians * rt);
                ctx.translate(-center, -center);
                */

            } else {
                ctx.fillRect(0, 0, quadW, quadH);
            }
            ct++;
        }
        ctx.restore();
    }
    window.requestAnimationFrame(draw);
}
draw();