mmiller5_Project-03

sketch

var bg = 0;
var angle = 30;

function setup() {
    createCanvas(640, 480);
}

function draw() {
    //constrain mouse values to be within canvas limits
    var mX = constrain(mouseX, 0, width);
    var mY = constrain(mouseY, 0, height);
    
    //positional variables for circles and squares
    var h1 = height/6;
    var h2 = height/2;
    var h3 = 5 * height/6;
    var w1 = width/8;
    var w2 = 3 * width/8;
    var w3 = 5 * width/8;
    var w4 = 7 * width/8;
    var maxD = 3 * width/8;
    var minD = width/8;
    var diag = dist(w1, h1, w2, h2);
    
    //background gets brighter as mouse moves right
    bg = 255 * (mX/width);
    background(bg);
    
    fill(255 - bg); //opposite color of background
    //enlarge circles as mouse moves near them  //row 1
    var d1 = constrain(maxD - dist(mX, mY, w1, h1), minD, maxD);
    var d2 = constrain(maxD - dist(mX, mY, w2, h1), minD, maxD);
    var d3 = constrain(maxD - dist(mX, mY, w3, h1), minD, maxD);
    var d4 = constrain(maxD - dist(mX, mY, w4, h1), minD, maxD);
    //row 2
    var d5 = constrain(maxD - dist(mX, mY, w1, h2), minD, maxD);
    var d6 = constrain(maxD - dist(mX, mY, w2, h2), minD, maxD);
    var d7 = constrain(maxD - dist(mX, mY, w3, h2), minD, maxD);
    var d8 = constrain(maxD - dist(mX, mY, w4, h2), minD, maxD);
    //row 3
    var d9 = constrain(maxD - dist(mX, mY, w1, h3), minD, maxD);
    var d10 = constrain(maxD - dist(mX, mY, w2, h3), minD, maxD);
    var d11 = constrain(maxD - dist(mX, mY, w3, h3), minD, maxD);
    var d12 = constrain(maxD - dist(mX, mY, w4, h3), minD, maxD);
    //circles //row 1
    ellipse(w1, h1, d1, d1);
    ellipse(w2, h1, d2, d2);
    ellipse(w3, h1, d3, d3);
    ellipse(w4, h1, d4, d4);
    //row 2
    ellipse(w1, h2, d5, d5);
    ellipse(w2, h2, d6, d6);
    ellipse(w3, h2, d7, d7);
    ellipse(w4, h2, d8, d8);
    //row 3
    ellipse(w1, h3, d9, d9);
    ellipse(w2, h3, d10, d10);
    ellipse(w3, h3, d11, d11);
    ellipse(w4, h3, d12, d12);

    //square setup
    noFill();
    strokeWeight(3);
    stroke(255 - bg);
    rectMode(CENTER);   
    //squares rotate when mouse moves up and down
    angle = (mY / height) * 360;  
    //left outside column (of squares)
    push();
    translate(-w1, -h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();  
    push();
    translate(-w1, h2);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    push();
    translate(-w1, height + h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    //first column
    push();
    translate(w1, h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();   
    push();
    translate(w1, h3);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    //second column
    push();
    translate(w2, -h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();   
    push();
    translate(w2, h2);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();   
    push();
    translate(w2, height + h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    //third column
    push();
    translate(w3, h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    push();
    translate(w3, h3);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    //fourth column
    push();
    translate(w4, -h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    
    push();
    translate(w4, h2);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();

    push();
    translate(w4, height + h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    //right outside column
    push();
    translate(width + w1, h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    push();
    translate(width + w1, h3);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    
    //center ellipse setup
    fill(bg);
    noStroke();
    var dInner = 30;
    //positional variables, use map to restrict center ellipse to inside circle //row 1
    var x1 = map(mX, 0, width, w1 - d1/2 + dInner, w1 + d1/2 - dInner);
    var y1 = map(mY, 0, height, h1 - d1/2 + dInner, h1 + d1/2 - dInner);
    var x2 = map(mX, 0, width, w2 - d2/2 + dInner, w2 + d2/2 - dInner);
    var y2 = map(mY, 0, height, h1 - d2/2 + dInner, h1 + d2/2 - dInner);
    var x3 = map(mX, 0, width, w3 - d3/2 + dInner, w3 + d3/2 - dInner);
    var y3 = map(mY, 0, height, h1 - d3/2 + dInner, h1 + d3/2 - dInner);
    var x4 = map(mX, 0, width, w4 - d4/2 + dInner, w4 + d4/2 - dInner);
    var y4 = map(mY, 0, height, h1 - d4/2 + dInner, h1 + d4/2 - dInner);
    //row 2
    var x5 = map(mX, 0, width, w1 - d5/2 + dInner, w1 + d5/2 - dInner);
    var y5 = map(mY, 0, height, h2 - d5/2 + dInner, h2 + d5/2 - dInner);
    var x6 = map(mX, 0, width, w2 - d6/2 + dInner, w2 + d6/2 - dInner);
    var y6 = map(mY, 0, height, h2 - d6/2 + dInner, h2 + d6/2 - dInner);
    var x7 = map(mX, 0, width, w3 - d7/2 + dInner, w3 + d7/2 - dInner);
    var y7 = map(mY, 0, height, h2 - d7/2 + dInner, h2 + d7/2 - dInner);
    var x8 = map(mX, 0, width, w4 - d8/2 + dInner, w4 + d8/2 - dInner);
    var y8 = map(mY, 0, height, h2 - d8/2 + dInner, h2 + d8/2 - dInner);
    //row 3
    var x9 = map(mX, 0, width, w1 - d9/2 + dInner, w1 + d9/2 - dInner);
    var y9 = map(mY, 0, height, h3 - d9/2 + dInner, h3 + d9/2 - dInner);
    var x10 = map(mX, 0, width, w2 - d10/2 + dInner, w2 + d10/2 - dInner);
    var y10 = map(mY, 0, height, h3 - d10/2 + dInner, h3 + d10/2 - dInner);
    var x11 = map(mX, 0, width, w3 - d11/2 + dInner, w3 + d11/2 - dInner);
    var y11 = map(mY, 0, height, h3 - d11/2 + dInner, h3 + d11/2 - dInner);
    var x12 = map(mX, 0, width, w4 - d12/2 + dInner, w4 + d12/2 - dInner);
    var y12 = map(mY, 0, height, h3 - d12/2 + dInner, h3 + d12/2 - dInner);
    //center ellipses move corresponding to where mouse is //row 1
    ellipse(x1, y1, dInner, dInner);
    ellipse(x2, y2, dInner, dInner);
    ellipse(x3, y3, dInner, dInner);
    ellipse(x4, y4, dInner, dInner);
    //row 2
    ellipse(x5, y5, dInner, dInner);
    ellipse(x6, y6, dInner, dInner);
    ellipse(x7, y7, dInner, dInner);
    ellipse(x8, y8, dInner, dInner);
    //row 3
    ellipse(x9, y9, dInner, dInner);
    ellipse(x10, y10, dInner, dInner);
    ellipse(x11, y11, dInner, dInner);
    ellipse(x12, y12, dInner, dInner);
}

Oh boy, this took some time, mainly because I was trying to get something to work which never did.  I wanted to focus on basic geometric changes, and I’m excited about how it turned out.

Leave a Reply