## Miranda Luong-Project-03-Dynamic Drawing

``````/* 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

``````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);
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

``````// 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

``````/*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);
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);
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

``````// 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

``````//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);
ellipse(0, 0, a*30, a*20);
pop();
push();
translate(x + 20, y - 5);
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);
ellipse(0, 0, b*30, b*20);
pop();
push();
translate(x + 20, y + 5);
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);
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

``````/*
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

``````/* 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.