![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2020/08/stop-banner.png)
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.