Project 3: Dynamic Drawing

var size = 100;
var diam = 50;
var dir = 1;
var speed = 2;

function setup() {
    createCanvas(450, 600);
}

function draw() {
    //color-changing background and stroke
    background(10, 10, mouseX/2);
    stroke(255-mouseX/2, 255-mouseY/2, 255-mouseX/2);
    
    //center of canvas
    var x = width/2;
    var y = height/2;

    //constrain mouse position on canvas
    mouseX = constrain(mouseX, 0, width);
    mouseY = constrain(mouseY, 0, height);

    //inner flower circles rotate depending on mouseX
    strokeWeight(1.5);
    fill(255-mouseX, 255-mouseY/2, 255-mouseX/2, 50);
    for (var i = 0; i < 5; i += 1) {
        push();
        translate(x, y);
        rotate((mouseX / 400) + radians(360 * i / 5));
        ellipse(50, 0, 100, 100);
        pop();
    }

    //outer flower circles rotate depending on mouseX
    strokeWeight(1);
    fill(255-mouseX, 255-mouseY/2, 255-mouseX/2, 30);
    for (var i = 0; i < 8; i += 1) {
        push();
        translate(x, y);
        rotate((-mouseX / 400) + radians(360 * i / 8));
        ellipse(50, 0, 250, 250);
        pop();
    }

    //outermost circles rotate and change size depending on mouseY
    strokeWeight(1);
    noFill();
    var m = max(min(mouseY, 600), 0);
    var size = m * 180 / 600 + 30;
    for (var o = 0; o < 50; o += 1) {
        push();
        translate(x, y);
        rotate((mouseY / 500) + radians(360 * o / 50));
        ellipse(300, 0, size, size);
        pop();
    }

    //center expanding contracting circle
    strokeWeight(3);
    noFill();
    ellipse(x, y, diam, diam);
    diam += dir * speed;
    if (diam > 400) {
        dir = -dir;
        diam = 400;
    } else if (diam < 0) {
        dir = -dir;
        diam = 0;
    }

    //converging lines that follow the mouse position
    //converging lines right
    strokeWeight(1);
    line(450, 0, mouseX, mouseY);
    line(450, 50, mouseX, mouseY);
    line(450, 100, mouseX, mouseY);
    line(450, 150, mouseX, mouseY);
    line(450, 200, mouseX, mouseY);
    line(450, 250, mouseX, mouseY);
    line(450, 300, mouseX, mouseY);
    line(450, 350, mouseX, mouseY);
    line(450, 400, mouseX, mouseY);
    line(450, 450, mouseX, mouseY);
    line(450, 500, mouseX, mouseY);
    line(450, 550, mouseX, mouseY);
    line(450, 600, mouseX, mouseY);

    //converging lines left
    strokeWeight(1);
    line(0, 0, mouseX, mouseY);
    line(0, 50, mouseX, mouseY);
    line(0, 100, mouseX, mouseY);
    line(0, 150, mouseX, mouseY);
    line(0, 200, mouseX, mouseY);
    line(0, 250, mouseX, mouseY);
    line(0, 300, mouseX, mouseY);
    line(0, 350, mouseX, mouseY);
    line(0, 400, mouseX, mouseY);
    line(0, 450, mouseX, mouseY);
    line(0, 500, mouseX, mouseY);
    line(0, 550, mouseX, mouseY);
    line(0, 600, mouseX, mouseY);

}