Christine Kim – Project-03

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.