//////////Keyboard Cat//////////
/*
Creator: Andy Dang
Intro to Media Computation
Sept 12, 2017
Instructor: Nicolas Hesler
Here you have a simple cartoon cat has you click the cat with bang on the keys of a keyboard, causing the color to change on the keys. I had to change my idea due
to the some of the limitations. On my sketches I originally used a bongo instead of keyboard but the keyboard was executed better.
*/
//Set the size of the canvas
void setup(){
size( 400, 400);
}
void draw(){
//change the framerate
frameRate(60);
//change the background
background(255);
//Stroke of the entire drawing
strokeWeight(3);
//desk
line(60, 208, 0, 189);
line(300, 282, 400, 310);
noFill();
//Left Paw with some simple parallax to move all the points with the mouse
curve(100, 190, 105, 220, 80 + (mouseX * 0.03), 160 + (mouseY * 0.03), 100, 160);
curve(90, 200, 80 + (mouseX * 0.03), 160 + (mouseY * 0.03), 100 + (mouseX * 0.03), 140 + (mouseY * 0.03), 180, 140);
curve(50, 160, 100 + (mouseX * 0.03), 140 + (mouseY * 0.03), 125 + (mouseX * 0.03), 160 + (mouseY * 0.03), 105, 200);
noStroke();
fill(255, 182, 193);
rect(96 + (mouseX * 0.03), 150 + (mouseY * 0.03), 6, 6, 5, 5, 2, 2);
rect(87 + (mouseX * 0.03), 160 + (mouseY * 0.03), 6, 6, 5, 5, 2, 2);
rect(107 + (mouseX * 0.03), 160 + (mouseY * 0.03), 6, 6, 5, 5, 2, 2);
rect(95 + (mouseX * 0.03), 158 + (mouseY * 0.03), 10, 10 , 5, 5, 5, 4);
//Right paw. Parallax
noFill();
stroke(0);
curve(270, 232, 271 , 272, 250 + (mouseX * 0.03), 210+ (mouseY * 0.03), 270, 250);
curve(260, 280, 250 + (mouseX * 0.03), 210 + (mouseY * 0.03), 265 + (mouseX * 0.03), 190 + (mouseY * 0.03), 330, 190);
curve(205, 210, 265 + (mouseX * 0.03), 190 + (mouseY * 0.03), 300 + (mouseX * 0.03), 210 + (mouseY * 0.03), 280, 250);
noStroke();
fill(255, 182, 193);
rect(262 + (mouseX * 0.03), 197 + (mouseY * 0.03), 6, 6, 5, 5, 2, 2);
rect(255 + (mouseX * 0.03), 207 + (mouseY * 0.03), 6, 6, 5, 5, 2, 2);
rect(275 + (mouseX * 0.03), 208 + (mouseY * 0.03), 6, 6, 5, 5, 2, 2);
rect(263 + (mouseX * 0.03), 205 + (mouseY * 0.03), 10, 10 , 5, 5, 5, 4);
//Same with the right and left eye. Simple parallax.
//Right Eye
stroke(0);
fill(0);
ellipse(240 - (mouseX * 0.03), 210 - (mouseY * 0.02) , 5, 5);
//Left Eye
ellipse(150 - (mouseX * 0.03), 180 - (mouseY * 0.02), 5, 5);
//Applied the same parallax
//Head
noFill();
curve(70, 250, 120 + (mouseX * 0.03), 148 + (mouseY * 0.03), 160 + (mouseX * 0.03), 120 + (mouseY * 0.03), 200, 130);
line(160 + (mouseX * 0.03), 120 + (mouseY * 0.03), 180 + (mouseX * 0.03), 100 + (mouseY * 0.03));
line(180 + (mouseX * 0.03), 100 + (mouseY * 0.03), 200 + (mouseX * 0.03), 120 + (mouseY * 0.03));
curve(0, 120, 200+ (mouseX * 0.03), 120+ (mouseY * 0.03), 280 + (mouseX * 0.03), 160 + (mouseY * 0.03),360, 280);
line(280 + (mouseX * 0.03), 160 + (mouseY * 0.03), 320 + (mouseX * 0.03), 140 + (mouseY * 0.03));
line(320 + (mouseX * 0.03), 140 + (mouseY * 0.03), 320 + (mouseX * 0.03), 180 + (mouseY * 0.03));
line(320 + (mouseX * 0.03), 180 + (mouseY * 0.03), 330 + (mouseX * 0.03), 210 + (mouseY * 0.03));
curve(260, 200, 330 + (mouseX * 0.03), 210 + (mouseY * 0.03), 360, 298, 250, 400);
//Mouth
arc(180, 195, 20, 20, 0, PI+QUARTER_PI-0.6);
arc(200, 200, 21, 21, 0.6, PI+QUARTER_PI-0.4);
//Keyboard
quad(60, 208, 120, 226, 80, 336, 20, 317);
quad(120, 226, 80, 336, 140, 355, 180, 245);
quad(180, 245, 140, 355, 200, 375, 240, 264);
quad(200, 375, 240, 264, 300, 282, 260, 394);
line(300, 282, 300, 320);
line(300, 320, 270, 400);
line(260, 394, 260, 400);
line(20, 317, 20, 340);
line(20, 340, 200, 400);
fill(0);
quad(24, 305, 265, 380, 260, 394, 20, 317);
}
/* This is where things got kind of tricky. In order for me to have the very still animation of the cat pressing the keyboard I needed to clear the canvas on
key press and redraw a lot of the lines while removing and redrawing some of the lines necessary*/
void mousePressed(){
//Changed the frame rate to 5 to have a longer frame of pressing the keys
frameRate(5);
//Defining the background again so it it clears the canvas and the lines I need it to remove
background(255);
stroke(0);
fill(0);
strokeWeight(3);
noFill();
//Head. No parallax
curve(70, 250, 120, 148, 160, 120, 200, 130);
line(160,120, 180, 100);
line(180, 100, 200, 120);
curve(0, 120, 200, 120, 280, 160,360, 280);
line(280, 160, 320, 140);
line(320, 140, 320, 180);
line(320, 180, 330, 210);
curve(260, 200, 330, 210, 360, 298, 250, 400);
//Desk. Redrawn Lines
line(66, 210, 0, 189);
line(318, 287, 400, 310);
//Left and right eye with the same parallax to not having jumping
//Right Eye
stroke(0);
fill(0);
ellipse(240 - (mouseX * 0.05), 210 - (mouseY * 0.02) , 5, 5);
//Left Eye
ellipse(150 - (mouseX * 0.05), 180 - (mouseY * 0.02), 5, 5);
//Mouth
noFill();
arc(180, 195, 20, 20, 0, PI+QUARTER_PI-0.6);
arc(200, 200, 21, 21, 0.6, PI+QUARTER_PI-0.4);
//Keyboard. Redrawn. Also added colour to the quads when the mouse is clicked.
fill(255, 145, 133);
quad(60, 208, 120, 226, 80, 336, 20, 317);
fill(168, 94, 139);
quad(120, 226, 80, 336, 140, 355, 180, 245);
fill(245,222, 80);
quad(180, 245, 140, 355, 200, 375, 240, 264);
fill(173, 216, 230);
quad(200, 375, 240, 264, 300, 282, 260, 394);
noFill();
line(300, 282, 300, 320);
line(300, 320, 270, 400);
line(260, 394, 260, 400);
line(20, 317, 20, 340);
line(20, 340, 200, 400);
fill(0);
quad(24, 305, 265, 380, 260, 394, 20, 317);
//Left and right paw. Used ellipse and triangle as a sort of cheat method to color the paws white so that the keyboard wouldn't show through
//Left paw. Redrawn
fill(255);
curve(220, 110, 120, 148, 60, 240, 180, 260);
curve(60, 180, 60, 240, 120, 225, 220, 140);
stroke(255);
ellipse(98, 210, 45, 42);
noStroke();
triangle(61, 240, 80, 200, 100, 235);
//Right paw. Redrawn
fill(255);
stroke(0);
curve(400, 200, 275, 240, 230, 300, 300, 250);
curve(300, 160, 230, 300, 320, 285, 400, 200);
stroke(255);
ellipse(279, 275, 52, 42);
noStroke();
triangle(231, 300, 255, 260, 280, 295);
}
