Category: Project-03-Dynamic-Drawing

Miranda Luong-Project-03-Dynamic Drawing

sketch

/* Miranda Luong
Section E
mluong@andrew.cmu.edu
Project-03-Dynamic Drawing
*/


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

function draw() {
    background(170, 190, 200);
    noStroke();

    // Translate the origin point to the center of the screen
	translate(width/2, height/2);

    // Size of circles 
    var size = 60
    //position of circles 
    var pos = 1
    //color of all shapes
    var color = 0
	

	// Restrict mouseX and mouse Y within a 400 x 400 square 
	// positioned at center of canvas
    var mX = max(min(mouseX, 520), 120);
    var mY = max(min(mouseY, 440),40);

    // Change attributes of circles according to distance
    // of mouse from center
	size = dist(320,240,mX,mY) * 60/200;
	pos = dist(320,240,mX,mY) / 250;
	color = dist(320,240,mX,mY);

    // North circle
	var northY= -150*pos;

    fill(color,100,100);
    ellipse(0,-150*pos,size,size);

    // Northeast circle
 
    var northeastX = 150/sqrt(2)*pos;
	var northeastY = -150/sqrt(2)*pos;

	fill(color,100,100);
	ellipse(northeastX,northeastY,size,size);

	// East circle

	var eastX = 150*pos;

	fill(color,100,100);
	ellipse(eastX,0,size,size);

	// Southeast circle
	var southeastX = 150/sqrt(2)*pos;
	var southeastY = 150/sqrt(2)*pos;

	fill(color,100,100);
	ellipse(southeastX,southeastY,size,size);

	// South circle

	var southY = 150*pos;

	fill(color,100,100);
	ellipse(0,southY,size,size);

	// Southwest circle

	var southwestX = -150/sqrt(2)*pos;
	var southwestY = 150/sqrt(2)*pos;

	fill(color,100,100);
	ellipse(southwestX,southwestY,size,size);

	// West circle

	var westX = -150*pos;

	fill(color,100,100);
	ellipse(westX,0,size,size);

	// Northwest circle

	var northwestX = -(150/sqrt(2))*pos;
	var northwestY = -(150/sqrt(2))*pos;

	fill(color,100,100);
	ellipse(northwestX,northwestY,size,size);

	// Center square

	// Change angle of square's rotation according to distance
    // of mouse from center
	angle = dist(320,240,mX,mY)*.01;
    
    // Use cosine to get a smooth CW and CCW motion
  	var c = cos(angle);

    fill(color,100,100);
    rectMode(CENTER);
    rotate(c);
    rect(0,0,60,60);
	
}

I tried to challenge myself but coding movements that radiated from the center. After changing the origin of the canvas to the center, I wonder if it’s possible to set the canvas to a normal cartesian grid. I also wonder as to why mouseX and mouseY do not follow my new grid system even after I changed the origin.

Jacky Tian’s Project 03

sketch

var unit = 50
var angle = 0
function setup() {
    createCanvas(640, 480);
    
}


function draw() {
    background(mouseX * 0.5, 70, 120);

    var len = 480 - mouseX
    var sta = 640 - mouseY 
    
    strokeWeight(4)
    stroke(170, mouseX * 0.1, 50);
    line(unit, sta * 0.1, unit, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.2, 50);
    line(unit * 2, sta * 0.2, unit * 2, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.3, 50);
    line(unit * 3, sta * 0.3, unit * 3, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.4, 50);
    line(unit * 4, sta * 0.4, unit * 4, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.5, 50);
    line(unit * 5, sta * 0.5, unit * 5, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.6, 50);
    line(unit * 6, sta * 0.6, unit * 6, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.7, 50);
    line(unit * 7, sta * 0.7, unit * 7, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.8, 50);
    line(unit * 8, sta * 0.8, unit * 8, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.9, 50);
    line(unit * 9, sta * 0.9, unit * 9, len);

    strokeWeight(4)
    stroke(170, mouseX, 50);
    line(unit * 10, sta, unit * 10, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.1, 50);
    line(unit * 11, sta * 1.1, unit * 11, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.2, 50);
    line(unit * 12, sta * 1.2, unit * 12, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.3, 50);
    line(unit * 13, sta * 1.3, unit * 13, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.1, mouseY* 0.1);
    line(unit + 25, sta * 0.1, unit, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.2, mouseY* 0.15);
    line(unit * 2 + 25, sta * 0.2, unit * 2, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.3, mouseY* 0.2);
    line(unit * 3 + 25, sta * 0.3, unit * 3, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.4, mouseY* 0.25);
    line(unit * 4 + 25, sta * 0.4, unit * 4, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.5, mouseY* 0.3);
    line(unit * 5 + 25, sta * 0.5, unit * 5, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.6, mouseY* 0.35);
    line(unit * 6 + 25, sta * 0.6, unit * 6, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.7, mouseY* 0.4);
    line(unit * 7 + 25, sta * 0.7, unit * 7, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.8, mouseY* 0.45);
    line(unit * 8 + 25, sta * 0.8, unit * 8, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.9, mouseY* 0.5);
    line(unit * 9 + 25, sta * 0.9, unit * 9, len);

    strokeWeight(2)
    stroke(70, mouseX, mouseY* 0.55);
    line(unit * 10 + 25, sta, unit * 10, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.1, mouseY* 0.6);
    line(unit * 11 + 25, sta * 1.1, unit * 11, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.2, mouseY* 0.65);
    line(unit * 12 + 25, sta * 1.2, unit * 12, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.3, mouseY* 0.7);
    line(unit * 13 + 25, sta * 1.3, unit * 13, len);

    fill(120, 80, mouseX * 0.5); // control rect color explicitly
    stroke(0);
    push();
    translate(mouseX, mouseY);
    rotate(radians(angle));
    rectMode(CENTER); // center rect around 0,0
    rect(0, 0, 50, 50);
    pop();
    angle = angle + mouseX * 0.05;


}

For this project, the 4 dynamic aspects of image elements include size, position, angle and color. The lines changes its position and length based on the mouse’s position. Also, there is a square rotating around the mouse and it spins faster as it move towards the right side.

Han Yu Project 3 Dynamic Drawing

sketch

// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project-03


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

function draw() {
	noStroke();
	var newx = 1000;
	var newy = 1000;

	background(0);
// changing colors of background
	fill(255,mouseX/3,mouseY/3)
	rect(0,0,1000,1000)
	
// spinning background
	push();
	translate(mouseX,mouseY);
	fill(255,255,255,70)
	rotate(mouseX);
	triangle(0,0,newx-350,newy,newy,newx-350);
	triangle(0,0,-newx+350,-newy,-newy,-newx+350);
	triangle(0,0,-newx/2,newy,newy,newx+90000000);
	triangle(0,0,-newx,newy-150,-150000000,-newx);
	triangle(0,0,newx/2,-newy,-newy,-newx-90000000);
	triangle(0,0,newx,-newy+150,150000000,newx);
	pop();

// the moving pin
	distance=int(dist(width/2,height/2,mouseX,mouseY))
	push();
	translate(mouseX,mouseY)
	rotate((mouseX+mouseY)/50)
	fill(150+distance*2,254,220+distance,90);
	rectMode(CENTER);
	ellipse(0,0,350-distance,350-distance,30);
	rect(0,0,100-distance*2,250-distance*2);
	rect(0,0,250-distance*2,100-distance*2);
	pop();

}

I started out this project trying to make something hypnotizing. I also want my project to be more interactive so I added another element to make the whole picture following the mouse. The pin that follows the mouse was inspired by the kaleidoscope. Overall I think this project is very challenging but I learned a lot from working on it.

Alexandra Kaplan -Project 3

/* Alexandra Kaplan
Section C
aekaplan@andrew.cmu.edu
Project 03 */


var bigCircleR = 150; //gold part of pocket watch radius
var smallCircleR = 140; // face part of pocket watch radius
var centerCircleR = 7; //center of hands radius
var topEllipseW = 20; //width of top ellipse
var topEllipseH = 15; //height of top ellipse
var minuteHand = smallCircleR / 4; // starting location of minute hand


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

function draw(){
	background(30, 20, 80);
	
	//text
    var boundedTextSize = min(mouseX / 5, width);
    fill(mouseX / 3, mouseX / 2, mouseX + 150);
    textSize(boundedTextSize);
    textAlign(CENTER);
    text('you are getting sleepy', width / 2, height / 2 + 100);


	var circleX = 0; //x starting position of pocket watch
    var circleY = height / 1.3; // y starting position of pocket watch
    var swing = mouseX; // when mouse x is positive, swings left, when mouseX is negative, swings right

    if (mouseX > 90){
        swing = -swing - 180; //watch changes direction so it doesn't go off the canvas
    }
    if (mouseX > 270){
        swing = mouseX + 360; //watch changes direction so it doesn't go off the canvas
    }
    if (mouseX > 450){
        swing = -mouseX - 540; //watch changes direction so it doesn't go off the canvas
    }
    if (mouseX > 630){
        swing = mouseX + 720; //watch changes direction so it doesn't go off the canvas
    }
    
    print(mouseX); //to help me debug
    
	push();

    translate(width / 2, 0); //translates origin to center of width

	rotate(radians(-swing)); //rotates everything around translated origin (0,0)

	strokeWeight(5);
    stroke(200, 150, 30);
	line(0, 0, circleX, circleY);//line connecting watch to origin

	strokeWeight(0);

	fill(200, 150, 30);
	ellipse(circleX, circleY, bigCircleR, bigCircleR); //draws outside of watch
    
  
	fill(200, 150, 30);
	ellipse(circleX , circleY - bigCircleR / 2, topEllipseW, topEllipseH);//draws top nubbin of watch
	
	
	fill(255);
	ellipse(circleX, circleY, smallCircleR, smallCircleR); //draws face of watch
	
	fill(0);
	ellipse(circleX, circleY, centerCircleR, centerCircleR); // draws center of watch

    strokeWeight(4);
    stroke(0);
	line(circleX, circleY, 30, circleY - 30); //hour hand

	push();
	translate(circleX, circleY); //translates origin to center of watch
	line(0, 0, minuteHand, minuteHand); //draws minute hand
	pop();

  
    pop();


}

This project has definitely been the most challenging for me so far. I enjoyed the premise of it, things just got really difficult when I ran into the problem of how to make the pendulum stop spinning and change directions to swing the other way. Thank you so much to the TA’s who helped me on how I could think through the problem!

Julie Choi – Project 03 – Dynamic Drawing

installation drawing

/*Julie Choi
15-104 Section C
jjchoi@andrew.cmu.edu
Project-03
*/

// declare necessary variables
var ballSizeB = 10
var ballX = 320;
var ballY = 240;
var x = 50
var angle = 0;
var angle2 = 0;
var starColor = 255;



function setup() {
	// setup canvas
    createCanvas(640, 480);
    // draw background in setup so that stars leave marks
    background(0);
}

function draw() {
	//background(0);
    var ballSizeA = 80;
    ballSizeA = constrain(ballSizeA, 1, 400);
    
    //cover the background of the inside of the planets black
    fill(0);
    noStroke();
    ellipse(width / 2, height / 2, 300, 300);
    
    //drawing yellow installation
    push();
    translate(width / 2, height / 2);
    rotate(radians(angle2));
    noStroke();
    fill(starColor);
    ellipse(x, x, 5, 5);
    pop();
    angle2 = angle2 + 5; 
    x = mouseY - 120;

    strokeWeight(3);
    stroke(255);
    fill(253, 255, 55);
    ellipse(ballX, ballY, ballSizeA, ballSizeA);

 	// draw colored planets
    push();
    noStroke();
    translate(width/2, height/2);
    rotate(radians(angle));
    fill(55, 255, 210);
    ellipse(0, -150, ballSizeB, ballSizeB);
    fill(55, 130, 255);
    ellipse(-150, 0, ballSizeB, ballSizeB);
    fill(255, 182, 55);
    ellipse(150, 0, ballSizeB, ballSizeB);
    fill(255, 55, 79);
    ellipse(0, 150, ballSizeB, ballSizeB);
    pop();
    angle = angle + 1.5;
    
    //text in the moon
    fill(0);
    noStroke();
	textSize(25);
	textFont('didot');
	text('moon', width / 2.22, height / 1.95);
}

My third project is an installation drawing that users can interact with. When you move the mouse, the rotating stars change radius and starting point to draw stars in space. Although I experienced some obstacles while using the rotation function, I enjoyed doing this project because I also learned a lot.

Project-03 Sophia Kim – Sec C

sketch

// Sophia S Kim
// Section C 1:30
// sophiaki@andrew.cmu.edu 
// Project-03: Dynamic Drawing

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

    var bR = 140 + mouseX * .6; 
    var bG = 255 + mouseX * .2;
    var bB = 100 + mouseX * .3;
    //variables for background color change

    background(bR, bG, bB);

    var size1 = mouseX * .4; 
        //changes size of text for mortal/immortal
    var size2 = mouseX * .15; 
        //changes size of text for forever/dead
    var size3 = mouseX * .1;
        //change size of text for talk/silent
    var size4 = mouseX * .17;    
        //change size of text for fake/real
    var textColor = 255-(mouseX*255/640); 
        //change of for any RGB color value 

    fill(0);
    noStroke();
    ellipse(mouseX-50, mouseY-100, 140, 140);
    /*changes position by following the mouseX and Y
    (image element)*/

    fill(0);
    noStroke();
    ellipse(mouseX+100, mouseY, 70, 70);
    /*changes position by following the mouseX and Y
    (image element)*/

    fill(0);
    noStroke();
    ellipse(mouseX+200, mouseY-40, 100, 100);
    /*changes position by following the mouseX and Y
    (image element)*/

    fill(0);
    noStroke();
    ellipse(mouseX+240, mouseY-180, 120, 120);
    /*changes position by following the mouseX and Y
    (image element)*/

    fill(6, textColor, mouseX*255 / 640);
        //changes color of texts (image element)  
    textFont('old english'); 
    textSize(size1); //changes text size (image element)
    if (mouseX < 200)
        text("MORTAL", mouseX, mouseY);
    else
        text("IMMORTAL", mouseX, mouseY); 
        //changes text when mouseX < 200 (image element)
        /*changes position by following the mouseX and Y
        (image element)*/

    fill(255, textColor, mouseX*255 / 640); 
        //changes color of texts (image element)
    textFont('old english'); 
    textSize(size2); //changes text size (image element)
    if (mouseX < 320)
        text("FOREVER", mouseX - 100, mouseY - 100);
    else
        text("DEAD", mouseX - 100, mouseY - 100); 
        //changes text when mouseX < 320 (image element)
        /*changes position by following the mouseX and Y 
        (image element)*/


    fill(textColor, mouseX*255 / 640, 140);
        //changes color of texts (image element)
    textFont('old english');
    textSize(size3);//changes text size (image element)
    if (mouseX < 300)
        text("TALK", mouseX - 150, mouseY - 50);
    else 
        text ("SILENT", mouseX - 150, mouseY - 50);
        //changes text when mouseX < 300 (image element)
        /*changes position by following the mouseX and Y
        (image element)*/

    fill(160, mouseX*255 / 640, textColor);
        //changes color of texts (image element)
    textFont('old english');
    textSize(size4);//changes text size (image element)
    if (mouseX < 200)
        text("FAKE", mouseX + 200, mouseY - 140);
    else
        text("REAL", mouseX + 200, mouseY - 140);
        //changes text when mouseX < 200 (image element)
        /*changes position by following the mouseX and Y
        (image element)*/
}

I was inspired by one of the links that were offered in the Deliverables (Moving Art at SmaPhoArt.com-Floating Figures). I had a really hard time with conditions, but after awhile, I was able to make the text change using different conditions.

Robert Oh Project-03-Dynamic-Drawing

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-03-Dynamic-Drawing

//assigning variables
var i = 0;
var eyes_dir = 0;
var a = 0;
var b = 0;
var col = 0;

//function to make the panda figures
function panda(x, y, eyes, a) {

    //ears
    fill(0);
    ellipse(x - a*25, y - a*30, a*40, a*30);
    ellipse(x + a*25, y - a*30, a*40, a*30);

    //body
    fill(0);
    ellipse(x, y + a*60, a*100, a*100);
    fill(255);
    ellipse(x, y, a*90, a*80);
    ellipse(x, y + a*60, a*80, a*80);
    fill(0);
    strokeWeight(5);
    quad(x - a*5, y + a*55, x - a*3, y + a*55, x + a*5, y + a*65, x + a*3, y + a*65);
    quad(x + a*5, y + a*55, x + a*3, y + a*55, x - a*5, y + a*65, x - a*3, y + a*65);

    //eyes
    noStroke();
    push();
    translate(x - 20, y - 5);
    rotate(radians(-60))
    ellipse(0, 0, a*30, a*20);
    pop();
    push();
    translate(x + 20, y - 5);
    rotate(radians(60))
    ellipse(0, 0, a*30, a*20);
    pop();
    fill(255);
    ellipse(x - 15 + eyes, y - 10, a*5, a*5);
    ellipse(x + 15 + eyes, y - 10, a*5, a*5);

    //nose + mouth
    fill(0);
    ellipse(x, y + 7, a*5, a*5);

    //what happens when the mouse hovers over a panda face
    if (dist(mouseX, mouseY, x, y) <= a*40){
        fill(255, 147, 147);
        arc(x, y+15, a*20, a*20, 0, PI);
        fill(255, 53, 53);
        ellipse(x - 30, y + 15, a*15, a*15);
        ellipse(x + 30, y + 15, a*15, a*15);
    }
    else{
    quad(x - a*1, y + a*7, x + a*1, y + a*7, x + a*1, y + a*15, x - a*1, y + a*15);
    quad(x - a*1, y + a*15, x , y + a*16, x - a*7, y + a*20, x - a*8, y + a*20)
    quad(x + a*1, y + a*15, x , y + a*16, x + a*7, y + a*20, x + a*8, y + a*20)
    }
}

//function to make the panda figures upside down
function panda_down(x, y, eyes, b) {

    //ears
    fill(0);
    ellipse(x - b*25, y + b*30, b*40, b*30);
    ellipse(x + b*25, y + b*30, b*40, b*30);

    //body
    fill(0);
    ellipse(x, y - b*60, b*100, b*100);
    fill(255);
    ellipse(x, y, b*90, b*80);
    ellipse(x, y - b*60, b*80, b*80);
    fill(0);
    strokeWeight(5);
    quad(x - b*5, y - b*55, x - b*3, y - b*55, x + b*5, y - b*65, x + b*3, y - b*65);
    quad(x + b*5, y - b*55, x + b*3, y - b*55, x - b*5, y - b*65, x - b*3, y - b*65);

    //eyes
    noStroke();
    push();
    translate(x - 20, y + 5);
    rotate(radians(60))
    ellipse(0, 0, b*30, b*20);
    pop();
    push();
    translate(x + 20, y + 5);
    rotate(radians(-60))
    ellipse(0, 0, b*30, b*20);
    pop();
    fill(255);
    ellipse(x - 15 + eyes, y + 10, b*5, b*5);
    ellipse(x + 15 + eyes, y + 10, b*5, b*5);

    //nose + mouth
    fill(0);
    ellipse(x, y - 7, b*5, b*5);
    
    //what happens when the mouse hovers over a panda face
    if (dist(mouseX, mouseY, x, y) <= b*40){
        fill(255, 147, 147);
        arc(x, y - 15, b*20, b*20, PI, 0)
        fill(255, 53, 53);
        ellipse(x - 30, y - 15, b*15, b*15);
        ellipse(x + 30, y - 15, b*15, b*15);
    }
    else{
    quad(x - b*1, y - b*7, x + b*1, y - b*7, x + b*1, y - b*15, x - b*1, y - b*15);
    quad(x - b*1, y - b*15, x , y - b*16, x - b*7, y - b*20, x - b*8, y - b*20)
    quad(x + b*1, y - b*15, x , y - b*16, x + b*7, y - b*20, x + b*8, y - b*20)
    }
}

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


function draw() {
    background(146, col, 171);
    noStroke();
    //drawing all the pandas
    for (i = 0; i < 4; i++) {
        //how to make eyse look at the bamboo!
        eyes_dir = (mouseX - (175*i + 60))/100;
        
        //these are the factors I'm multiplying all my values by
        a = mouseY / 300;
        b = (480 - mouseY) / 300;

        if (mouseY >= 300){
            b = 0;
        }
        if (mouseY <= 180){
            a = 0;
        }
        
        panda(175*i + 60, 400, eyes_dir, a);
        panda_down(175*i + 60, 80, eyes_dir, b);
    }

    //drawing the bamboo
    fill(48, 153, 84);
    rect(mouseX - 6, mouseY - 30, 12, 19);
    rect(mouseX - 6, mouseY - 10, 12, 19);
    rect(mouseX - 6, mouseY + 10, 12, 19);
    push();
    fill(97, 255, 76);
    translate(mouseX + 18, mouseY - 25);
    rotate(radians(-30));
    ellipse(0, 0, 20, 8);
    pop();

    //changing the color of the background
    col = mouseY / 2;
}

When I read the prompt for this project, I knew right away that I wanted to do something with eyes. I felt that having a group of eyes staring at your mouse would add some excitement and personality to my project. After figuring that out, I figured I would just add some lovely pandas, and based the rest of the project off of that!

Yingying Yan Project 3 Dynamic Drawing

sketch

/*
Yingying Yan
Waitlist for Section E
yingyiny@andrew.cmu.edu
Assignment-02-A
*/

//this code allow you do draw flowers! hold you mouse
//still and see what you get!

var k =4;
var R = 255;

//setup background and allow drawing to show
function setup() {
  createCanvas(480, 640);
  background(230);
}

function draw() {
  //the graphic of the lower right eraser box
  push();
  strokeWeight(0);
  fill(255);
  rect(340, 480, 140,160);
  pop();
  text("erase", 360,520);

  //color of the stokes of the flower
  stroke(R,100,100);
  // position of the drawing = position of the mouse
  translate(mouseX, mouseY);
  // the mouse controls how fast you can draw the flower
  //e.g. smaller x = draw faster
  var speed = frameCount / mouseX;
  // rose formula from Wekipedia and allow the computer
  //to draw the flower
  var x = cos(k*speed) * sin(speed);
  var y = cos(k*speed) * cos(speed); 
  // how big the drawing depends on the Y coordinate of the mouse
  scale(mouseY / 5, mouseY / 5);

  
  // controls the color of the drawing 0f the flower
  R -= .5;
  if (R < 0) {
    R = 255;
  }

  //the circles that draw the flower
  ellipse(x , y,.001,.001);

  //lower right corner of the canvas and clear the 
  //background of the canvas = erase
  if (mouseX > 340 & mouseY > 480) {
    background (230);
  }
}

I wanted to draw something geometrical, so I went online and search for a flower formula. This drawing is based on the rose formula. It took me forever to figure everything out but I am glad that I somehow finished it. I think this project is very interesting, and I wish I have more time and know more code for this.

Adam He – Project 03 – Dynamic Drawing

sketch

/* Adam He
Section A
xiaotiah@andrew.cmu.edu
Project-03 */

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

function draw() {
    // background color changes based on mouse position
    var bckX = mouseX / width * 150;
    var bckY = mouseY / height * 150;
    background(bckX, 0, bckY);
    noStroke();

    var sqSize = 80;
    var sqPosX = 20;
    fill(255);

    // bigger circle, bigger, clockwise
    push();
    translate(width / 2, height / 2);
    rotate(mouseX / 400);
    rect(sqPosX + 20, sqPosX + 20, mouseX + 20, mouseX + 20);
    pop();

    // smaller square, bigger, counter-clockwise
    push();
    translate(width / 2, height / 2);
    rotate(mouseX / -400);
    rect(sqPosX - 20, sqPosX + 20, mouseX + 10, mouseX + 10);
    pop();

    // circle appears in the middle
    push();
    translate(width / 2, height / 2);
    ellipse(sqPosX - 20, sqPosX - 20, mouseX / 5, mouseX / 5);
    pop();

    // black circlr appears in the circle
    push();
    fill(0);
    translate(width / 2, height / 2);
    ellipse(sqPosX - 20, sqPosX - 20, mouseX / 40, mouseX / 40);
    pop();

    // non-rotating enlarging rect
    var move = max(min(mouseX, 700), 0);
    var big = move * 4;
    fill(200, bckY, bckX);
    rect(300 + move, 180 + move, big, big);
}

I was randomly playing with the rotation and translations of simple geometries. I found out that it would be really interesting if I played around with the depth and perspective in this animation. I programmed the colors and sizes of the shapes to transform so to achieve the dynamic and interactive animation that I wanted to make.