thlai-Project-03-Dynamic-Drawing

I had a lot of fun making this, although a large part of it was guess and check for the code I was not familiar with. I wanted it to look something like a kaleidoscope with 8 reflective sides, so I created a symmetrical and radial composition.

thlai-project-03

// Tiffany Lai
// 15-104, Section !
// thlai@andrew.cmu.edu
// Project 03 - Dynamic Drawing

var r; // RED
var g; // GREEN
var b; // BLUE

function setup() {
    createCanvas(640, 480);
    rectMode(CENTER);
    noStroke();
    fill(255, 150);
    sq1 = { // CENTER
        x: 0,
        y: 0,
        w: 100,
        h: 100,
    }
    sq2 = { // MIDDLE CIRCLE
        x: 150,
        y: 0,
        w: 100,
        h: 100,
    }
    sq3 = { // BG LINES
        x: 250,
        y: 0,
        w: 10,
        h: 10,
    }
}

function draw() {
    background(r, g, b);

    r = map(mouseX, 0, width, 100, 230); // BG (change colors)
    g = map(mouseY, 0, width, 150, 200);
    b = map(mouseX, 0, height, 200, 255);

    sq1.w = map(mouseX, 0, width, 20, 200); // CENTER SQUARE (change size with mouseX)
    sq1.h = map(mouseX, 0, width, 20, 200); 

    sq2.w = map(mouseX, 0, width, 100, 20); // CIRCLE OF SQUARES (change size with mouseX)
    sq2.h = map(mouseX, 0, width, 100, 20);

    sq3.w = map(mouseY, 0, height, 1, 200); // BACKGROUND LINES (change size with mouseX)
    sq3.h = map(mouseY, 0, height, 1, 500);


    translate(width/2, height/2);

    for (var i = 0; i < 16; i++) { // BACKGROUND LINES
        push();
        fill(r-10, g-10, b-10); // vertical lines
        rotate(TWO_PI * i / 16);
        rotate(radians(mouseX/50)); // rotation speed
        rect(sq3.x, 0, 5, sq3.h);

        rotate(TWO_PI * i / 16); // horizonal lines
        rotate(radians(mouseX/50)); // rotation speed
        rect(sq3.x, 0, sq3.w, 5);
        pop();
    }

    push(); // CORNER LINES
    strokeWeight(1);
    translate(-width/2, -height/2);
    stroke(r-30, g-30, b-30);
    line(0, 0, mouseX, mouseY); // line point follows mouse
    line(0, height, mouseX, mouseY);
    line(width, 0, mouseX, mouseY);
    line(width, height, mouseX, mouseY);
    pop();

    rotate(radians(mouseX/7)); // CENTER SQUARE
    rect(sq1.x, sq1.y, sq1.w, sq1.h);

    for (var i = 0; i < 8; i++) { // CIRCLE OF SQUARES is eight
        push();
        rotate(TWO_PI * i / 8);
        rotate(radians(mouseX/10)); // rotation speed
        rect(sq2.x, sq2.y, sq2.w, sq2.h);
        pop();
    }
}