Project 03 – Dynamic Drawing

let angle = 0;
var size = 100

function setup() {
    createCanvas(700, 500);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(50);

    //circle in the center
    push();
        translate(width/2,height/2);
            rotate(angle);
            fill(mouseX,43,172);
            stroke('black');
            strokeWeight(5);
        rectMode(CENTER);
            square(0,0,300);
        pop();

    //inner ring of circles
        for(let a=0; a<radians(360); a+=radians(30)){
            
            push();
            translate(width/2,height/2);
            rotate(a);
            translate(0,size);
                rotate(angle);
            rectMode(CENTER);
            blendMode(MULTIPLY);
            fill(mouseY,43,100);
            square(0,0,200);
            pop();
        }

    //outer row of circles
        for(let a=0; a<radians(360); a+=radians(30)){
            
            push();
            translate(width/2,height/2);
            rotate(a);
            translate(0,size+100);
                rotate(angle);
            rectMode(CENTER);
            blendMode(MULTIPLY);
            fill(mouseY,43,172);
            square(0,0,200);
            pop();
        }

        //makes it so that the squares don't disappear when mouseX goes to 700
        size = max(mouseX/2, 100);



    angle += radians(1);

}