September 2019 – Page 34 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

SooA Kim: Project-03-Dynamic-Drawing

/* 
   SooA Kim
   Section D
   sookim
   Project 3 - Dynamic Drawing 
*/

var c1 = 100;
var c2 = 120;
var c3 = 210;
var angle = 0;

function setup() {
    createCanvas(640, 460);
    rectMode(CENTER);
}

function draw() {
    background(c1, c2, c3);
    noStroke();

    //background color
    if (mouseX > width/3) {
        background(0);
    }
    
    //pink circles and rectangles with symmetry
    fill(255, 100, 100);
    var m = max(min(mouseX, 640),0);
    var size = m * 320.0 / 640.0;
    rect(10 + m * 100.0 / 640.0, 230, size, size);
    rect(width - m * 100.0 / 640.0, 230, size, size);
    ellipse(10 + m * 320.0 / 640.0, 100, size + 50, size);
    ellipse(width - m * 320.0 / 640.0, 100, size + 50, size);

    //blue rectangle with rotation in the middle
    fill(0, 0, 255);
    var x1 = max(min(mouseX, 100), 0);
    push();
    translate (340, 230);
    rotate(radians(angle));
    rect(x1, m , 100, 100);
    pop();
    angle = angle + 1

    //circle green
    fill(100, 255, c3);
    var y = min(100, mouseY); 
    ellipse (mouseX, y + 100, 50, 200);
}

The assignment was pretty challenging for me this week. I wish that I had more time to understand and be comfortable using min()/max ()and constraint(). I mainly focused on understanding how each shape is made by different application of motion functions.

Hyejo Seo – Project-03: Dynamic Art

sketch

/* 
Hyejo Seo
Section A
hyejos@andrew.cmu.edu
Project-03- Dynamic Art
*/ 

var circleY = 250;  
var cSpeed = 1; 
var sunDia = 350;

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

function draw() {
    background(180, mouseY + 70, mouseY + 100);
//sun
fill(255, 100, 147);
noStroke();

if(mouseY >= 150){
  sunDia = 350; 
} else {
  sunDia = mouseY /2;
}
circle(225, 290, sunDia); 
  
//smoke 
    circleY = circleY - cSpeed; 
    fill(198, 207, 220);
    noStroke();
    circle(220, circleY, 100);
    if(circleY >= height){
      circleY = -cSpeed;
     } 
    circle(250, circleY, 90);
    if(circleY > height){  
      cSpeed = cSpeed;
     }
    circle(200, circleY + 70, 80);
    if(circleY + 70 > height){    
      cSpeed = cSpeed;
    }
    circle(250, circleY + 60, 100);
    if(circleY + 50 > height){    
      cSpeed = cSpeed;
    }
    circle(210, circleY - 50, 90);
    circle(260, circleY - 50, 100);
    if(circleY - 50 > height){
      cSpeed = cSpeed;
    } 
    circle(210, circleY - 100, 80);
    circle(250, circleY - 100, 90);
    if(circleY - 100 > height){
      cSpeed = cSpeed;
    } 
    circle(210, circleY - 80, 100);
    if(circleY - 50 > height){
      cSpeed = cSpeed;
    } 

    if(circleY <= -100){
      circleY = height;
    }
//Volcano
fill(234, 51, 28);
if(mouseY <= 150){
  beginShape();
  curveVertex(170, 500);
  curveVertex(170, 500);
  curveVertex(170, 280);
  curveVertex(90, 150);
  curveVertex(130, 150);
  curveVertex(150, 120);
  curveVertex(180, 145);
  curveVertex(220, 80);
  curveVertex(250, 150);
  curveVertex(280, 130);
  curveVertex(280, 170);
  curveVertex(290, 165);
  curveVertex(320, 150);
  curveVertex(380, 145);
  curveVertex(310, 250);
  curveVertex(330, 500);
  curveVertex(330, 500);
  endShape();
} else {
  endShape();
    beginShape();
    curveVertex(170, 500);
    curveVertex(170, 500);
    curveVertex(170, 280);
    curveVertex(310, 280);
    curveVertex(200, 500);
    curveVertex(200, 500);
    endShape();
}
// mountain
    fill (170, 140, 99);
    noStroke();
    quad(0, 500, 450, 500, 350, 350, 100, 350); 
    
// mountain peak
    fill(170, 140, 99);
    beginShape();
    curveVertex(100, 350);
    curveVertex(100, 350);
    curveVertex(140, 280);
    curveVertex(170, 250);
    curveVertex(210, 270);
    curveVertex(240, 260);
    curveVertex(270, 290);
    curveVertex(310, 250);
    curveVertex(350, 350);
    curveVertex(350, 350);
    endShape();

// mountain body detail 
    stroke(67,42, 29);
    strokeWeight(3);
    line(50, 500, 150, 300);
    line(140, 450, 190, 310);
    line(200, 490, 230, 300);
    line(250, 450, 245, 300);
    line(300, 500, 280, 320);
    line(350, 500, 300, 300);
}

For this project, I have created an interactive piece of a volcano explosion – from the moment of the lava boiling, which was depicted by the smoke to the explosion. I had fun and learned a lot experimenting with interactive/conditional functions.

Claire Yoon – Project 03 – Dynamic Drawing

sketch

/*Claire Yoon
  Section E
  claireyo@andrew.cmu.edu
  Assignment-03
  */

function setup() {
    createCanvas(480, 640);
}
function draw() {
    // sky from night to day
    background (138 - mouseY, 225 - mouseY, 255 - mouseY)

// pulling up blinds
    push();
    noStroke ();
    fill(237,236, 230);
    rect(0, 60 - mouseY, 480, 50 + mouseY / 50);
    rect(0, 120 - mouseY, 480, 50 + mouseY / 50);
    rect(0, 180 - mouseY, 480, 50 + mouseY / 50);
    rect(0, 240 - mouseY, 480, 50 + mouseY / 50);
    rect(0, 300 - mouseY, 480, 50 + mouseY / 50);
    rect(0, 360 - mouseY, 480, 50 + mouseY / 50);
    rect(0, 420 - mouseY, 480, 50 + mouseY / 50);
    rect(0, 480 - mouseY, 480, 50 + mouseY / 50);
    fill(216,213, 195);
    rect(0, 0, 480, 55);
// counter
    fill(166,124,82);
    noStroke();
    rect(0,560,480,80);
    pop();
}

I really enjoyed playing around with all the different types of elements we learned so far such as position, translating, rotating, and use of color.

Mari Kubota- Project- 03- Dynamic-Drawing

sketch

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 3
*/
var x = 300;
var y = 300;
var diameter = 8;
var diffx = 0;
var diffy = 0;
var targetX = 300;
var targetY = 300;
var angle = 0;

function setup() {
    createCanvas(640, 480);
    
}
//following mouse
let value = 0;
function mouseMoved() {
    value = value + 5;
    if (value > 255) {
    value = 0;
}
}

function draw(){
    background (200-mouseY,220-mouseY,250);
//trees

    translate(100 - mouseX/2, 0);
    fill(0);
    rect (-100, 400,1050,80);

    rect (30,200,20,200);
    triangle (40,150,80,350,0,350);

    rect (180,200,20,200);
    triangle (190,150,100,350,280,350);

    rect (330,200,20,200);
    triangle (340,150,380,350,300,350);

    rect (530,200,20,200);
    triangle (530,100,640,350,440,350);

    rect (750,200,20,200);
    triangle (750,100,860,350,660,350);

//firefly
    fill(value-100, value, value-200);
    diffx = mouseX - x;
    diffy = mouseY - y;
    x = x + 0.1*diffx;
    y = y + 0.1*diffy;
    noStroke();
    ellipse(x, y, diameter, diameter);

}

In this project, I created a drawing of a firefly flying through the forest. The color of the sky, the movement of the trees, and the movement of the firefly are all controlled by the mouse.

Project 03 – Dynamic Drawing

sketch

// Deklin Versace Section E
var eyeX = 700;
var eyeY = 250;
var diameter = 75;
var r = 100;
var g = 50;
var b = 50;
var handY = 500;
var handX = 375;

function setup() {
    createCanvas(900, 900);
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
}

function draw() {
  background(r, g, b);
  noStroke();
  fill(r - 60, g - 60, b - 60);
  quad(width / 2 - 150, eyeY, width / 2 + 150, eyeY, 485, 900, 415, 900);
  fill(r - 60, g - 60 ,b - 60);
  ellipseMode(CENTER);
  ellipse(width / 2, eyeY, eyeX + abs(700 - eyeX), abs(450 - eyeX / 3));
  headH = abs(450 - eyeX / 3);
  headW = eyeX + abs(700 - eyeX);
  fill(240);
  ellipse(eyeX, eyeY, diameter, diameter);
  ellipse(width - eyeX, eyeY, diameter, diameter);
  if(mouseX > 650 || mouseX < 250 || (mouseX > 400 & mouseX < 500)){
    eyeX = eyeX;
  }   else{
      eyeX = mouseX;
  }

  fill(r - 100, g - 100, b - 100);
  bezier((width / 2) - (headW / 5), eyeY + 50, (width / 2) - (headW / 5), eyeY + (headH / 2) - 50, (width / 2) + (headW / 5), eyeY + (headH / 2) - 50, (width / 2) + (headW / 5), eyeY + 50);


  strokeWeight(60);
  stroke(r - 50, g - 50, b - 50);
  line(width / 2 - 100, 420, width / 2 - 250, 420 + ((handY - 420) / 2));
  line(width / 2 + 100, 420, width / 2 + 250, 420 + ((handY - 420) / 2));
  stroke(r - 40, g - 40, b - 40);
  line(width / 2 - 250, 420 + ((handY - 420) / 2), handX, handY);
  line(width / 2 + 250, 420 + ((handY - 420) / 2), 900 - handX, handY);
  if(mouseX > 100 & mouseX < 410)
  handX = mouseX;
  else{
  handX = handX;
  }
  if(mouseY < 700){
    handY = mouseY;
  } else{
  handY = 700;
}
}
function mousePressed() {
  r = random(0, 255);
  g = random(0, 255);
  b = random(0, 255);
}

Assignment 03-A Two Circles

sketch

function setup() {
  createCanvas(600,300);
  noStroke();
  background(220);
}
function draw() {
  background(220);
  fixme = 600 - mouseX;
  fill(255);
  ellipse(mouseX, 50, 50, 50);
  fill(0);
  ellipse(fixme, 250, 50, 50);
}

Looking Outwards – 03

A piece of digital fabrication that interests me is the FIBERBOTS program at MIT. Given that I am new to the world of coding and have had little exposure to it prior to this year, my view of its possibilities were more limited to the digital scale. As this semester first challenged what I thought code was possible of doing in the 2D scale, reading about FIBERBOTS. What this tool is capable of is shocking to me, and seeing the artful, yet practical forms they are designed to create opens me up to possibilities and functions in programming that I had never applied to art or design before.

Minjae Jeong – Project 03 – Dynamic Drawing

sketch

// Minjae Jeong
// Section B
// minjaej@andrew.cmu.edu
// Project -03

var angleX = 0;
var angleY = 0;

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

function draw() {
    background((mouseX - mouseY) / 2, mouseX - mouseY, mouseY + 17); // change colors
    r = mouseX - 300;
    g = mouseY - 200;
    b = mouseX - mouseY;

    fill(mouseX / 3, 163, 223);
    push();
    translate(mouseX / 3, mouseY / 2);
    rotate(radians(angleX));
    rect(130, 30, mouseX / 3, 50);
    angleX = angleX + 1;
    pop();

    fill(r, g, b);
    push();
    translate(mouseX / 3, mouseY / 2);
    rect(140, 50, mouseX - 200, mouseY / 3);
    pop();

    fill(81, mouseX / 2, 223);
    push();
    translate(mouseX, mouseY);
    rotate(radians(angleY));
    ellipse(300, 250, 50, mouseY / 2);
    angleY = angleY - 1;
    pop();

    fill(81, mouseX / 2, 223);
    push();
    translate(mouseX / 6, mouseY / 4);
    ellipse(300, 250, 50, mouseY);
    pop();
}

This project, I wanted to create what randomness in order would look like. It started from a thought that what if what we see everyday that seems random is actually not random?

CJ Walsh – Project 3 – Dynamic Drawing

sketch

var radLarge = 37.797;
var radSmall = 20.643;

function setup() {
	createCanvas(640, 480);
	noStroke();
	colorMode(HSB, 480);
}

function draw() {
	// color changes as mouse moves in vertical directions
	background(mouseY);
	//controls the reverse of my mouse movement
	var reverseX = width - mouseX

// background circles to create changing backdrop
	fill('#71BCFF');
	ellipse(320, 240, mouseX, mouseY);
	ellipse(480, 240, mouseX, mouseY);
	ellipse(150, 240, mouseX, mouseY);

// left larger circles
	fill('#E83F63');
	ellipse(mouseX, 33, radLarge, radLarge);
	ellipse(mouseX, 108, radLarge, radLarge);
	ellipse(mouseX, 184, radLarge, radLarge);
	ellipse(mouseX, 260, radLarge, radLarge);
	ellipse(mouseX, 335, radLarge, radLarge);
	ellipse(mouseX, 410, radLarge, radLarge);

// left small circles 
	fill('#6171E5');
	ellipse(mouseX, 449, radSmall, radSmall);
	ellipse(mouseX, 373, radSmall, radSmall);
	ellipse(mouseX, 298, radSmall, radSmall);
	ellipse(mouseX, 222, radSmall, radSmall);
	ellipse(mouseX, 146, radSmall, radSmall);
	ellipse(mouseX, 70, radSmall, radSmall);

// right large circles
	fill('#E83F63');
	ellipse(reverseX, 449, radLarge, radLarge);
	ellipse(reverseX, 373, radLarge, radLarge);
	ellipse(reverseX, 298, radLarge, radLarge);
	ellipse(reverseX, 222, radLarge, radLarge);
	ellipse(reverseX, 146, radLarge, radLarge);
	ellipse(reverseX, 70, radLarge, radLarge);

// right smaller circles 
	fill('#6171E5');
	ellipse(reverseX, 33, radSmall, radSmall);
	ellipse(reverseX, 108, radSmall, radSmall);
	ellipse(reverseX, 184, radSmall, radSmall);
	ellipse(reverseX, 260, radSmall, radSmall);
	ellipse(reverseX, 335, radSmall, radSmall);
	ellipse(reverseX, 410, radSmall, radSmall);

// far left larger 
	fill('#E83F63');
	ellipse(mouseX - 100, 33, radLarge, radLarge);
	ellipse(mouseX - 100, 108, radLarge, radLarge);
	ellipse(mouseX - 100, 184, radLarge, radLarge);
	ellipse(mouseX - 100, 260, radLarge, radLarge);
	ellipse(mouseX - 100, 335, radLarge, radLarge);
	ellipse(mouseX - 100, 410, radLarge, radLarge);

	ellipse(mouseX - 300, 33, radLarge, radLarge);
	ellipse(mouseX - 300, 108, radLarge, radLarge);
	ellipse(mouseX - 300, 184, radLarge, radLarge);
	ellipse(mouseX - 300, 260, radLarge, radLarge);
	ellipse(mouseX - 300, 335, radLarge, radLarge);
	ellipse(mouseX - 300, 410, radLarge, radLarge);

// far left smaller
	fill('#6171E5');
	ellipse(mouseX - 200, 449, radSmall, radSmall);
	ellipse(mouseX - 200, 373, radSmall, radSmall);
	ellipse(mouseX - 200, 298, radSmall, radSmall);
	ellipse(mouseX - 200, 222, radSmall, radSmall);
	ellipse(mouseX - 200, 146, radSmall, radSmall);
	ellipse(mouseX - 200, 70, radSmall, radSmall);

	ellipse(mouseX - 400, 449, radSmall, radSmall);
	ellipse(mouseX - 400, 373, radSmall, radSmall);
	ellipse(mouseX - 400, 298, radSmall, radSmall);
	ellipse(mouseX - 400, 222, radSmall, radSmall);
	ellipse(mouseX - 400, 146, radSmall, radSmall);
	ellipse(mouseX - 400, 70, radSmall, radSmall);

// far right larger 
	fill('#E83F63');
	ellipse(reverseX + 100, 449, radLarge, radLarge);
	ellipse(reverseX + 100, 373, radLarge, radLarge);
	ellipse(reverseX + 100, 298, radLarge, radLarge);
	ellipse(reverseX + 100, 222, radLarge, radLarge);
	ellipse(reverseX + 100, 146, radLarge, radLarge);
	ellipse(reverseX + 100, 70, radLarge, radLarge);

	ellipse(reverseX + 300, 449, radLarge, radLarge);
	ellipse(reverseX + 300, 373, radLarge, radLarge);
	ellipse(reverseX + 300, 298, radLarge, radLarge);
	ellipse(reverseX + 300, 222, radLarge, radLarge);
	ellipse(reverseX + 300, 146, radLarge, radLarge);
	ellipse(reverseX + 300, 70, radLarge, radLarge);

// far right smaller
	fill('#6171E5');
	ellipse(reverseX + 200, 33, radSmall, radSmall);
	ellipse(reverseX + 200, 108, radSmall, radSmall);
	ellipse(reverseX + 200, 184, radSmall, radSmall);
	ellipse(reverseX + 200, 260, radSmall, radSmall);
	ellipse(reverseX + 200, 335, radSmall, radSmall);
	ellipse(reverseX + 200, 410, radSmall, radSmall);

	ellipse(reverseX + 400, 33, radSmall, radSmall);
	ellipse(reverseX + 400, 108, radSmall, radSmall);
	ellipse(reverseX + 400, 184, radSmall, radSmall);
	ellipse(reverseX + 400, 260, radSmall, radSmall);
	ellipse(reverseX + 400, 335, radSmall, radSmall);
	ellipse(reverseX + 400, 410, radSmall, radSmall);

// more right large
	fill('#E83F63');
	ellipse(reverseX - 100, 449, radLarge, radLarge);
	ellipse(reverseX - 100, 373, radLarge, radLarge);
	ellipse(reverseX - 100, 298, radLarge, radLarge);
	ellipse(reverseX - 100, 222, radLarge, radLarge);
	ellipse(reverseX - 100, 146, radLarge, radLarge);
	ellipse(reverseX - 100, 70, radLarge, radLarge);

	ellipse(reverseX - 300, 449, radLarge, radLarge);
	ellipse(reverseX - 300, 373, radLarge, radLarge);
	ellipse(reverseX - 300, 298, radLarge, radLarge);
	ellipse(reverseX - 300, 222, radLarge, radLarge);
	ellipse(reverseX - 300, 146, radLarge, radLarge);
	ellipse(reverseX - 300, 70, radLarge, radLarge);

// more right small 
	fill('#6171E5');
	ellipse(reverseX - 200, 33, radSmall, radSmall);
	ellipse(reverseX - 200, 108, radSmall, radSmall);
	ellipse(reverseX - 200, 184, radSmall, radSmall);
	ellipse(reverseX - 200, 260, radSmall, radSmall);
	ellipse(reverseX - 200, 335, radSmall, radSmall);
	ellipse(reverseX - 200, 410, radSmall, radSmall);

	ellipse(reverseX - 400, 33, radSmall, radSmall);
	ellipse(reverseX - 400, 108, radSmall, radSmall);
	ellipse(reverseX - 400, 184, radSmall, radSmall);
	ellipse(reverseX - 400, 260, radSmall, radSmall);
	ellipse(reverseX - 400, 335, radSmall, radSmall);
	ellipse(reverseX - 400, 410, radSmall, radSmall);

// more left larger 
	fill('#E83F63');
	ellipse(mouseX + 100, 33, radLarge, radLarge);
	ellipse(mouseX + 100, 108, radLarge, radLarge);
	ellipse(mouseX + 100, 184, radLarge, radLarge);
	ellipse(mouseX + 100, 260, radLarge, radLarge);
	ellipse(mouseX + 100, 335, radLarge, radLarge);
	ellipse(mouseX + 100, 410, radLarge, radLarge);

	ellipse(mouseX + 300, 33, radLarge, radLarge);
	ellipse(mouseX + 300, 108, radLarge, radLarge);
	ellipse(mouseX + 300, 184, radLarge, radLarge);
	ellipse(mouseX + 300, 260, radLarge, radLarge);
	ellipse(mouseX + 300, 335, radLarge, radLarge);
	ellipse(mouseX + 300, 410, radLarge, radLarge);

// more left smaller
	fill('#6171E5'); 
	ellipse(mouseX + 200, 449, radSmall, radSmall);
	ellipse(mouseX + 200, 373, radSmall, radSmall);
	ellipse(mouseX + 200, 298, radSmall, radSmall);
	ellipse(mouseX + 200, 222, radSmall, radSmall);
	ellipse(mouseX + 200, 146, radSmall, radSmall);
	ellipse(mouseX + 200, 70, radSmall, radSmall);

	ellipse(mouseX + 400, 449, radSmall, radSmall);
	ellipse(mouseX + 400, 373, radSmall, radSmall);
	ellipse(mouseX + 400, 298, radSmall, radSmall);
	ellipse(mouseX + 400, 222, radSmall, radSmall);
	ellipse(mouseX + 400, 146, radSmall, radSmall);
	ellipse(mouseX + 400, 70, radSmall, radSmall);
}

For my dynamic drawing I wanted to play with the creation of patterns. As you move the mouse in the x plane you can create different textures by positioning the circles. Additionally, you can use both x and y mouse movements to change the background circles, which I though added a nice element to help create more combinations of the image. This assignment was a little difficult to figure out at first, and I definitely want to keep playing with my code on this image to see what else I could do.

Angela Lee – Project – 03

angela-dynamic-drawing

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Assignment-03
 */

// variables for x & y position of circle following cursor
var x = 300;
var y = 300;
var diffx = 0;
var diffy = 0;


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

function draw(){
    // defining variable for distance from mouse position to center
    mouseDist = dist(mouseX, mouseY, width/2, height/2);
    // width and height of the circles
    circle = 80 + mouseDist/6;
	background(0);
    noStroke();

    // small white circle following the mouse
    diffx = mouseX - x;
    diffy = mouseY - y;
    x = x + 0.2 * diffx;
    y = y + 0.2 * diffy;
    fill ("white");
    ellipse(x, y, 20, 20);

    // middle square
    push();
    translate(320, 240);
    rectMode (CENTER);
    rotate(radians(mouseDist));
    fill(mouseX, mouseY, 100);
    rect(0, 0, 15, 15);
    pop();

    // TOP CIRCLE
    // red, yellow values change based on mouse's x and y position
    fill(mouseX, mouseY, 150);
    // ellipse goes top based on mouse's distance from center
    ellipse(320, 114 - mouseDist/2, circle,
     circle);

    // RIGHT CIRCLE
    // green, blue values change based on mouse's x and y position
    fill(242, mouseX, mouseY);
    // ellipse goes right based on mouse's distance from center
    // ellipse gets bigger as mouseDist gets bigger
    ellipse(445 + mouseDist/2, 240, circle,
     circle);

    // LOWER CIRCLE
    // red, green values change based on mouse's x and y position
    fill(mouseX, mouseY, 40);
    // ellipse goes bottom based on mouse's distance from center
    // ellipse gets bigger as mouseDist gets bigger
    ellipse(320, 365 + mouseDist/2, circle,
     circle);

    // LEFT CIRCLE
    // red value changes based on mouse's x position
    fill(mouseX, 13, 174);
    // ellipse goes left based on mouse's distance from center
    // ellipse gets bigger as mouseDist gets bigger
    ellipse(195 - mouseDist/2, 240, circle,
     circle);

    // TOP RIGHT SQUARE
    push();
    // translate origin to where the square is, based on mouseDist
    translate(407.5 + mouseDist/5, 151 - mouseDist/5);
    // rotate the square from its center as it moves
    rectMode(CENTER);
    rotate(radians(mouseDist));
    fill(23, 250, 255);
    rect(0, 0, 50, 50);
    pop();

    // BOTTOM RIGHT SQUARE
    push();
    // translate origin to where the square is, based on mouseDist
    translate(407.5 + mouseDist/5, 328.5 + mouseDist/5);
    // rotate the square from its center as it moves
    rectMode(CENTER);
    rotate(radians(-mouseDist));
    fill(141, 29, 221);
    rect(0, 0, 50, 50);
    pop();

    // BOTTOM LEFT SQUARE
    push();
    // translate origin to where the square is, based on mouseDist
    translate(231 - mouseDist/5, 328.5 + mouseDist/5);
    // rotate the square from its center as it moves
    rectMode(CENTER);
    rotate(radians(mouseDist));
    fill(255, 169, 210);
    rect(0, 0, 50, 50);
    pop();

    // TOP LEFT SQUARE
    push();
    // translate origin to where the square is, based on mouseDist
    translate(231 - mouseDist/5, 151 - mouseDist/5);
    // rotate the square from its center as it moves
    rectMode(CENTER);
    rotate(radians(-mouseDist));
    fill(7, 57, 239);
    rect(0, 0, 50, 50);
    pop();
}

This project helped me really understand the mechanisms of push, pop, and translation in the context of rotation. I think it was tricky to figure out how to make things rotate a certain place (e.g. rotate on its center while the position of the object changed places depending on the user). I also think that proportion was especially important for me in this exercise. While most of my user interaction was based on how far the cursor was from the center of the canvas, determining how fast something was moving or big something got depended on a fraction of that distance.