sketch

```
//Christine Kim
//Section A (9:00)
//haewannk@andrew.cmu.edu
//Project-03
// Note: there appears to be a bug in the p5-embed code, and
// Christine's original code could not be displayed correctly.
// I modified the code by putting spaces around <, >, and &
// operators. -Roger Dannenberg
var speed = 1000;
var speedc = 1000;
var speed2 = 1;
var speed3 = 2;
var speed4 = 1.5;
var r = 50;
var s = 200;
var t = 350;
var p = 100;
var q = 300;
var z = 500;
var u = 60;
var i = 260;
var o = 430;
var j = 30;
var k = 270;
var l = 510;
var a = 340;
var b = 0;
var w1 = 300;
var h1 = 480;
var c = 490;
var d = 190;
var e = 290;
var w2 = 50;
var h2 = 50;
var x = 320;
var y = 240;
var diffx = 0;
var diffy = 0;
var targetX = 320;
var targetY = 320;
function setup() {
createCanvas(640, 480);
}
function draw() {
background(167,184,251);
//clicking mouse to change from circles to squares
push();
fill('pink');
ellipse(505,90,30,30);
if (mouseIsPressed)
if (mouseButton==LEFT) {
rect(490,75,30,30);
}
ellipse(575,90,30,30);
if (mouseIsPressed)
if (mouseButton==LEFT) {
rect(560,75,30,30);
}
ellipse(435,90,30,30);
if (mouseIsPressed)
if (mouseButton==LEFT) {
rect(420,75,30,30);
}
ellipse(505,390,30,30);
if (mouseIsPressed)
if (mouseButton==LEFT) {
rect(490,375,30,30);
}
ellipse(575,390,30,30);
if (mouseIsPressed)
if (mouseButton==LEFT) {
rect(560,375,30,30);
}
ellipse(435,390,30,30);
if (mouseIsPressed)
if (mouseButton==LEFT) {
rect(420,375,30,30);
}
pop();
//rain falling
push();
fill(0);
rect(50,r,2,15);
r+=speed2;
if (r > height+25) {
r=-25;
}
rect(50,s,2,15);
s+=speed2;
if (s > height+25) {
s=-25;
}
rect(50,t,2,15);
t+=speed4;
if (t > height+25) {
t=-25;
}
rect(100,p,2,15);
p+=speed3;
if (p > height+25) {
p=-25;
}
rect(100,q,2,15);
q+=speed2;
if (q > height+25) {
q=-25;
}
rect(100,z,2,15);
z+=speed3;
if (z > height+25) {
z=-25;
}
rect(250,u,2,15);
u+=speed4;
if (u > height+25) {
u=-25;
}
rect(250,i,2,15);
i+=speed2;
if (i > height+25) {
i=-25;
}
rect(250,o,2,15);
o+=speed4;
if (o > height+25) {
o=-25;
}
rect(200,j,2,15);
j+=speed2;
if (j > height+25) {
j=-25;
}
rect(200,k,2,15);
k+=speed4;
if (k > height+25) {
k=-25;
}
rect(200,l,2,15);
l+=speed3;
if (l > height+25) {
l=-25;
}
pop();
//5 joined ellipses or flower
rect(143,150,15,height);//stem
push(); //1
translate(150,150);
rotate(millis()/speedc);
translate(-150,-150);
push(); //2
noStroke();
ellipse(150,100,30,100);
push(); //3
translate(110,129);
rotate(radians(288));
ellipse(0,0,30,100);
pop(); //2
push(); //3
translate(126,180);
rotate(radians(216));
ellipse(0,0,30,100);
pop(); //2
push(); //3
translate(175,180);
rotate(radians(144));
ellipse(0,0,30,100);
pop(); //2
push(); //3
translate(191,129);
rotate(radians(72));
ellipse(0,0,30,100);
pop(); //2
pop(); //1
pop(); //0
//changing flower color by pressing certain keys
if (keyIsPressed) {
if ((key=='p')||(key=='P')) {
fill(239,92,120); //pink
rect(145,150,15,height);
}
}
if (keyIsPressed) {
if ((key=='y')||(key=='Y')) {
fill(255,255,115); //yellow
rect(145,150,15,height);
}
}
if (keyIsPressed) {
if ((key=='g')||(key=='G')) {
fill(100); //gray
rect(145,150,15,height);
}
}
//four circles
//only appears when mouse is on the right half of canvas
//red rotating circle
if ((mouseX > a) & (mouseX < a+w1) &&
(mouseY > b) && (mouseY < b+h1)) {
fill(237,58,53);
} else {
fill(167,184,251);
}
push();
translate(c,height/2);
rotate(millis()/(speed/2));
translate(0,-50);
ellipse(0,0,w2,h2);
pop();
//pink rotating circle
if ((mouseX > a) & (mouseX < a+w1) &&
(mouseY > b) && (mouseY < b+h1)) {
fill(246,139,235);
} else {
fill(167,184,251);
}
push();
translate(c,height/2);
rotate(millis()/(speed/2));
translate(0,50);
ellipse(0,0,w2,h2);
pop();
//blue rotating circle
if ((mouseX > a) & (mouseX < a+w1) &&
(mouseY > b) && (mouseY < b+h1)) {
fill(15,113,255);
} else {
fill(167,184,251);
}
push();
translate(c,height/2);
rotate(-millis()/(speed/2));
translate(-50,0);
ellipse(0,0,w2,h2);
pop();
//yellow rotating circle
if ((mouseX > a) & (mouseX < a+w1) &&
(mouseY > b) && (mouseY < b+h1)) {
fill(245,250,132);
} else {
fill(167,184,251);
}
push();
translate(c,height/2);
rotate(-millis()/(speed/2));
translate(50,0);
ellipse(0,0,w2,h2);
pop();
//colored circles spinning gradually faster and faster when mouse is above middle and slower and slower below the middle
if (mouseY > height/2) {
speed+=(speed+10) > 500;
} else {
speed-=(speed-50) > 100;
}
//mouse pointer
diffx = mouseX-x;
x=x+diffx;
diffy = mouseY-y;
y=y+diffy;
noStroke();
fill(158,236,181);
rect(x-10,y-10,20,20);
}
```

My process in this project was looking for ways to try many functions such as rotation, translation, mouse click, key click, and etc. My left side of canvas is of a flower with falling rain while my right side of canvas contains geometric shapes.