/*
Interactive Drawing project - "Monkey Jam"
 Put on some of your favorite music, slide the headphones onto Monkey, plug him in, and let him listen along!
 Done by: Nicholas Yee
 */

void setup() { //void setup() initializes properties such as the screen size in pixels, as well as constant functions such as noStroke(); and the program framerate.
  size(400, 400);
  noStroke();
  frameRate(60);
}


//Called to continiously execute any code inside of the block until it's terminated.
void draw() {
  background(150, 150, mouseY);  // Background - Simple cross hatch to fill some empty space. Background color on the Y coordinates of the mouse.

  rectMode(CENTER);
  fill(255, 255, 255, 200);
  rect(200, 200, 400, 400);

  fill(255, 255, 255);
  rect(30, 200, 20, 400);

  fill(255, 255, 255);
  rect(200, 370, 400, 20);

  // Music Notes: mouseY-[Value] changes the Y coordinates based on the mouse's Y axis, minus or plus whatever value is there in px. sin(frameCount*X) function to give the notes some movement and life.

  fill(150, 150, 255);
  ellipse(130, mouseY-330+sin(frameCount*0.25), 30+sin(frameCount*0.2), 30+sin(frameCount*0.2));
  rect(140, mouseY-360+sin(frameCount*0.25), 10+sin(frameCount*0.2), 60+sin(frameCount*0.2));

  fill(150, 150, 255);
  ellipse(60, mouseY-300+sin(frameCount*0.25), 30+sin(frameCount*0.2), 30+sin(frameCount*0.2));
  rect(70, mouseY-330+sin(frameCount*0.25), 10+sin(frameCount*0.2), 60+sin(frameCount*0.090));

  fill(150, 150, 255);
  ellipse(190, mouseY-300+sin(frameCount*0.25), 30+sin(frameCount*0.2), 30+sin(frameCount*0.2));
  rect(200, mouseY-330+sin(frameCount*0.25), 10+sin(frameCount*0.2), 60+sin(frameCount*0.2));
  fill(150, 150, 255);
  ellipse(250, mouseY-300+sin(frameCount*0.25), 30+sin(frameCount*0.2), 30+sin(frameCount*0.2));
  rect(260, mouseY-330+sin(frameCount*0.25), 10+sin(frameCount*0.2), 60+sin(frameCount*0.2));
  rect(230, mouseY-355+sin(frameCount*0.25), 60+sin(frameCount*0.2), 10+sin(frameCount*0.2));

  fill(150, 150, 255);
  ellipse(290, mouseY-250+sin(frameCount*0.25), 30+sin(frameCount*0.2), 30+sin(frameCount*0.2));
  rect(300, mouseY-280+sin(frameCount*0.25), 10+sin(frameCount*0.2), 60+sin(frameCount*0.2));
  fill(150, 150, 255);
  ellipse(350, mouseY-250+sin(frameCount*0.25), 30+sin(frameCount*0.2), 30+sin(frameCount*0.2));
  rect(360, mouseY-280+sin(frameCount*0.25), 10+sin(frameCount*0.2), 60+sin(frameCount*0.2));
  rect(330, mouseY-305+sin(frameCount*0.25), 60+sin(frameCount*0.2), 10+sin(frameCount*0.2));


  //Used the sin(frameCount*X) function here as well to breathe some life into the character.
  //Body
  fill(80, 20, 0);
  ellipse(200, 500+sin(frameCount*0.070), 200, 400);

  //Ears
  fill(255, 190, 100);
  ellipse(100, 240+sin(frameCount*0.085), 60, 70);

  fill(255, 190, 100);
  ellipse(300, 240+sin(frameCount*0.085), 60, 70);

  //Monkey Head
  fill(160, 30, 0);
  ellipse(200, 240+sin(frameCount*0.090), 200, 200);

  fill(255, 190, 100);
  ellipse(140, 240+sin(frameCount*0.090), 40, 40);

  fill(255, 190, 100);
  ellipse(260, 240+sin(frameCount*0.090), 40, 40);

  fill(255, 190, 100);
  ellipse(200, 265+sin(frameCount*0.090), 100, 90);

  rectMode(CENTER);
  rect(200, 240+sin(frameCount*0.090), 120, 40);

  //Mouth - Using the arc function to create a round shape with a flat edge. With some basic math equasions to adjust the amount of proportional movement the shape has when the mouse's Y axis changes.
  fill(255, 255, 255);
  arc(200, mouseY/50+265+sin(frameCount*0.092), 70, mouseY/10+20, 0, PI);

  //nose
  fill(0, 0, 0);
  ellipse(200, mouseY/70+250+sin(frameCount*0.090), 30, 8);

  //eyes
  fill(0, 0, 0);
  ellipse(260, 240+sin(frameCount*0.090), 30, 30);
  fill(255, 255, 255);
  ellipse(252, 232+sin(frameCount*0.090), 5, 5);
  ellipse(258, 238+sin(frameCount*0.090), 8, 8);

  fill(0, 0, 0);
  ellipse(140, 240+sin(frameCount*0.090), 30, 30);
  fill(255, 255, 255);
  ellipse(132, 232+sin(frameCount*0.090), 5, 5);
  ellipse(138, 238+sin(frameCount*0.090), 8, 8);


  //Headphones
  rectMode(CENTER);
  fill(60, 60, 60);
  rect(60, mouseY/5+160, 20, 70);

  fill(100, 100, 100);
  rect(80, mouseY/5+160, 30, 90);

  fill(60, 60, 60);
  rect(340, mouseY/5+160, 20, 70);

  fill(100, 100, 100);
  rect(320, mouseY/5+160, 30, 90);

  fill(180, 180, 180);
  rect(80, mouseY/5+100, 15, 100);

  fill(180, 180, 180);
  rect(320, mouseY/5+100, 15, 100);
  fill(40, 40, 40);
  ellipse(320, mouseY/5+185, 10, 10);

  //Headphone cable
  fill(120, 120, 120);
  rect(320, mouseY/5+260, 5, 153);
  fill(255, 255, 150);
  rect(320, mouseY/5+340, 3, 10);
  fill(200, 200, 150);
  rect(320, mouseY/5+345, 3, 3);

  fill(180, 180, 180);
  rect(200, mouseY/5+57, 250, 15);

  //Border
  fill(0, 0, 0, 200);
  rect(200, 0, 400, 10);
  rect(400, 200, 10, 400);
  rect(200, 400, 400, 10);
  rect(0, 200, 10, 400);
}



void mousePressed() { //The monkey will wink whenever the mouse is either right, or left clicked. With the tools I had, frameRate was the only way I could figure out how to allow the shape to appear longer than the setup constant. (1 frame, out of 60 was basically invisible),
  frameRate(4);
  fill(255, 190, 100);
  ellipse(260, 240, 40, 40);

  fill(0);
  ellipse(260, 240, 35, 3);
  fill(255);
  arc(200, 265, 80, 80, 0, PI);
}



void mouseReleased() { //Function to allow the program to return to its previous framerate once the mouse button is released.
  frameRate(60);
}