/*
Interactive Drawing designed and created by Francesca Ramirez
Class: Into to Media Comp PROG14498, Section P04
PROGRAM DESCRIPTION:
This program will create an interactive drawing of Miku Hatsune (from Vocaloid) performing at her concert!
Please play a song while interacting with Miku!
Created with about 103 shapes (I lost count somewhere lol)
INSTRUCTIONS
Move the mouse up and down to move her arms
Move the mouse left and right to move her hips
Press the right mouse button to get the crowd cheering
Press any key to get Miku singing
Move the mouse faster to change the lights colours
*/
void setup()
{
//window size 400x400 pixels
size(400,400);
//hide the mouse cursor
//noCursor();
println("Play 'World is Mine' - https://www.youtube.com/watch?v=KMHXgUr7gYM on youtube to get Miku dancing to some music!"
+ "\nOther songs:\nMiku vs NND - https://www.youtube.com/watch?v=zXsrRLT2ijs\nElectric Angel - https://www.youtube.com/watch?v=BHkTR4pe7uQ");
}//end setup
void draw()
{
//make framerate 60fps
frameRate(60);
//set background to dark grey colour
background(50);
//remove stroke on shapes
noStroke();
//===================
//STAGE
//===================
//possibly add more smaller lights like circles or squares
//circle lights
fill(255, 195, 45);
ellipse(45, 18, 40, 40);
ellipse(182, 13, 40, 40);
ellipse(279, 18, 40, 40);
ellipse(358, 0, 40, 40);
ellipse(6, 106, 40, 40);
ellipse(64, 120, 40, 40);
ellipse(324, 106, 40, 40);
ellipse(22, 204, 40, 40);
ellipse(216, 223, 40, 40);
ellipse(88, 186, 40, 40);
ellipse(280, 180, 40, 40);
ellipse(380, 220, 40, 40);
ellipse(100, 60, 40, 40);
ellipse(380, 150, 40, 40);
ellipse(390, 75, 40, 40);
ellipse(216, 68, 40, 40);
//glow on circle lights
fill(255, 195, 45, (float)(100+Math.sin(frameCount*.02-1.6)*70));
ellipse(45, 18, 60, 60);
ellipse(182, 13, 60, 60);
ellipse(279, 18, 60, 60);
ellipse(358, 0, 60, 60);
ellipse(6, 106, 60, 60);
ellipse(64, 120, 60, 60);
ellipse(324, 106, 60, 60);
ellipse(22, 204, 60, 60);
ellipse(216, 223, 60, 60);
ellipse(88, 186, 60, 60);
ellipse(280, 180, 60, 60);
ellipse(380, 220, 60, 60);
ellipse(100, 60, 60, 60);
ellipse(380, 150, 60, 60);
ellipse(390, 75, 60, 60);
ellipse(216, 68, 60, 60);
//stage flooring
fill(50);
rect(0, 320, 800, 200);
fill(100);
rect(0, 260, 800, 100);
//===================
//LIGHTS
//===================
//make translucent
//add transitioning colours
//middle light 1
fill(255+(96-255)*mouseX/(width*1.0), 0*mouseX/(width*1.0), 164*mouseX/(width*1.0), 85);
//fill(255, 0, 164, 85);
quad(160, 0, 200, 0, 260, 288, 100, 288);
//right light 1
//fill(96, 0, 164, 85);
quad(380, 0, 400, 0, 400, 288, 310, 288);
//;eft light 1
quad(0, 0, 20, 0, 50, 288, 0, 288);
//add shadow for miku
fill(45);
ellipse(200 + (mouseX-15)/25, 290, 200, 30);
//====================
//MIKU HATSUNE
//====================
//keep everything w/o stroke or w/ stroke as same colour
//have miku's arms move up w/ mouse Y, and hips move with mouse X
//back of hair
fill(30, 163, 174);
ellipse(191, 124, 130, 80);
//left ponytail
fill(0, 99, 100);
triangle(130 + (mouseX-15)/25, 140, 150 + (mouseX-15)/25, 260, 130 + (mouseX-15)/25, 240);
fill(0, 127, 138);
quad(130, 80, 155, 90, 130 + (mouseX-15)/25, 140, 115 + (mouseX-15)/25, 140);
quad(114 + (mouseX-15)/25, 140, 130 + (mouseX-15)/25, 140, 130 + (mouseX-15)/25, 280, 100 + (mouseX-15)/25, 240);
fill(72);
quad(150, 82, 160, 87, 150, 103, 140, 100);
stroke(243, 61, 85);
strokeWeight(3);
line(155, 84, 146, 101);
//remove stroke
noStroke();
//left arm
fill(250, 220, 184);
triangle(168, 163, 174, 179, 152, 192 - (mouseY+6)/10);
triangle(152, 192 - (mouseY+6)/10, 122, 173 - (mouseY+6)/10, 130, 163 - (mouseY+6)/10);
//right arm
fill(255, 246, 221);
triangle(198, 163, 192, 179, 217, 192 - (mouseY+6)/10);
triangle(217, 192 - (mouseY+6)/10, 237, 163 - (mouseY+6)/10, 246, 173 - (mouseY+6)/10);
//left sleeve
fill(50);
quad(154, 190 - (mouseY+6)/10, 149, 201 - (mouseY+6)/10, 119, 181 - (mouseY+6)/10, 137, 169 - (mouseY+6)/10);
stroke(30, 163, 174);
strokeWeight(3);
line(154, 190 - (mouseY+6)/10, 149, 201 - (mouseY+6)/10);
line(119, 181 - (mouseY+6)/10, 137, 169 - (mouseY+6)/10);
//remove stroke
noStroke();
//left leg
fill(250, 220, 184);
quad(163 + (mouseX-15)/25, 227, 178 + (mouseX-15)/25, 227, 178, 288, 162, 288);
//left boot
fill(50);
stroke(50);
strokeWeight(3);
quad(163 + (mouseX-15)/30, 247, 178 + (mouseX-15)/30, 247, 178, 288, 162, 288);
stroke(0, 127, 138);
strokeWeight(3);
line(163 + (mouseX-15)/30, 247, 178 + (mouseX-15)/30, 247);
line(178, 288, 162, 288);
//right leg
noStroke();
fill(255, 246, 221);
quad(178 + (mouseX-15)/25, 227, 190 + (mouseX-15)/25, 227, 197, 288, 178, 288);
//right boot
fill(72);
stroke(72);
strokeWeight(3);
quad(178 + (mouseX-15)/30, 247, 190 + (mouseX-15)/30, 247, 197, 288, 178, 288);
stroke(30, 163, 174);
strokeWeight(3);
line(178 + (mouseX-15)/30, 247, 190 + (mouseX-15)/30, 247);
line(197, 288, 178, 288);
//remove stroke
noStroke();
//skirt
fill(50);
quad(159, 208, 173, 208, 160 + (mouseX+15)/100, 240, 135 + (mouseX+15)/100, 226);
fill(72);
quad(183, 208, 197, 208, 218 + (mouseX+15)/100, 228, 194 + (mouseX+15)/100, 240);
fill(90);
quad(173, 208, 183, 208, 194 + (mouseX+15)/100, 240, 160 + (mouseX+15)/100, 240);
strokeWeight(3);
stroke(0, 127, 138);
line(160 + (mouseX+15)/100, 240, 135 + (mouseX+15)/100, 226);
stroke(30, 163, 174);
line(218 + (mouseX+15)/100, 228, 194 + (mouseX+15)/100, 240);
stroke(68, 209, 220);
line(194 + (mouseX+15)/100, 240, 160 + (mouseX+15)/100, 240);
//remove stroke
noStroke();
//shirt
fill(255);
triangle(192 + (mouseX+15)/100, 203, 200 + (mouseX+15)/100, 203, 195 + (mouseX+15)/100, 212);
triangle(163 + (mouseX+15)/100, 203, 158 + (mouseX+15)/100, 203, 159 + (mouseX+15)/100, 208);
quad(173, 162, 192, 162, 197 + (mouseX+15)/100, 209, 159 + (mouseX+15)/100, 209);
fill(68, 209, 220);
triangle(170 + (mouseX+15)/100, 180, 180 + (mouseX+15)/100, 180, 174 + (mouseX+15)/100, 187);
triangle(174 + (mouseX+15)/100, 187,165 + (mouseX+15)/100, 202, 185 + (mouseX+15)/100, 202);
fill(250, 220, 184);
triangle(170, 160, 190, 160, 175 + (mouseX+15)/100, 177);
fill(225);
quad(166, 163, 172, 163, 175 + (mouseX+15)/100, 177, 167 + (mouseX+15)/100, 182);
quad(198, 163, 189, 163, 175 + (mouseX+15)/100, 177, 187 + (mouseX+15)/100, 184);
stroke(0, 127, 138);
strokeWeight(3);
line(166, 163, 167 + (mouseX+15)/100, 182);
line(198, 163, 187 + (mouseX+15)/100, 184);
noStroke();
fill(255);
quad(158 + (mouseX+15)/100, 207, 173 + (mouseX+15)/100, 207, 162 + (mouseX+15)/100, 226, 143 + (mouseX+15)/100, 216);
quad(196 + (mouseX+15)/100, 207, 173 + (mouseX+15)/100, 207, 185 + (mouseX+15)/100, 226, 211 + (mouseX+15)/100, 218);
//right sleeve
fill(90);
quad(215, 190 - (mouseY+6)/10, 220, 205 - (mouseY+6)/10, 244, 186 - (mouseY+6)/10, 232, 169 - (mouseY+6)/10);
stroke(30, 163, 174);
strokeWeight(3);
line(215, 190 - (mouseY+6)/10, 220, 205 - (mouseY+6)/10);
line(244, 186 - (mouseY+6)/10, 232, 169 - (mouseY+6)/10);
//remove stroke
noStroke();
//bangs back
fill(30, 163, 174);
triangle(148, 92, 138, 106, 123, 87);
triangle(136, 101, 139, 113, 115, 114);
triangle(130, 110, 150, 110, 140, 170);
//head and face
fill(255, 246, 221);
ellipse(180, 130, 110, 75);
fill(0);
ellipse(200, 130, 15, 25);
ellipse(150, 130, 15, 25);
fill(255);
ellipse(155, 130, 10, 10);
ellipse(205, 130, 10, 10);
fill(243, 122, 138);
ellipse(140, 145, 20, 10);
ellipse(210, 145, 20, 10);
strokeWeight(2);
stroke(0);
line(170, 150, 175, 155);
line(180, 150, 175, 155);
//remove stroke
noStroke();
//headphones
fill(68, 209, 220);
quad(195, 105, 240, 105, 244, 115, 240, 140);
fill(72);
quad(230, 110, 240, 110, 240, 125, 230, 125);
quad(225, 125, 245, 125, 245, 150, 220, 150);
fill(243, 61, 85);
quad(225, 129, 239, 127, 239, 144, 225, 145);
//right ponytail
fill(30, 163, 174);
triangle(260 + (mouseX-15)/25, 140, 262 + (mouseX-15)/25, 250, 230 + (mouseX-15)/25, 270);
fill(68, 209, 220);
quad(240, 95, 260, 80, 282 + (mouseX-15)/25, 140, 260 + (mouseX-15)/25, 140);
quad(260 + (mouseX-15)/25, 140, 282 + (mouseX-15)/25, 140, 293 + (mouseX-15)/25, 253, 260 + (mouseX-15)/25, 280);
fill(72);
quad(240, 85, 250, 90, 240, 105, 230, 100);
stroke(243, 61, 85);
strokeWeight(3);
line(244, 86, 233, 103);
//remove stroke
noStroke();
//bangs front
fill(68, 209, 220);
quad(150, 88, 230, 88, 240, 105, 140, 105);
fill(30, 163, 174);
triangle(137, 101, 150, 110, 115, 135);
fill(68, 209, 220);
triangle(140, 105, 165, 105, 120, 140);
triangle(165, 105, 192, 105, 193, 141);
triangle(185, 95, 226, 124, 223, 174);
triangle(214, 112, 228, 107, 238, 135);
//===================
//CROWD
//===================
//add glowing affect to glowsticks
//make hands rise and fall with miku's
//hand 1
fill(255, 246, 221);
triangle(40, 360 - (mouseY-15)/25,
40, 450 - (mouseY-15)/25, 20, 450 - (mouseY-15)/25);
rect(40, 360 - (mouseY-15)/25, 40, 80);
fill(138, 247, 152);
rect(50, 318 - (mouseY-15)/25, 20, 42);
fill(138, 247, 152, (float)(100+Math.sin(frameCount*.02-1.6)*70));
rect(40, 298 - (mouseY-15)/25, 40, 62);
//hand 2
fill(255, 246, 221);
triangle(100, 360 - (mouseY-15)/25, 130, 360 - (mouseY-15)/25, 130, 380 - (mouseY-15)/25);
triangle(140, 320 - (mouseY-15)/25, 140, 360 - (mouseY-15)/25, 160, 360 - (mouseY-15)/25);
rect(100, 318 - (mouseY-15)/25, 40, 42);
rect(130, 360 - (mouseY-15)/25, 30, 80);
fill(138, 247, 152);
rect(111, 276 - (mouseY-15)/25, 20, 42);
fill(138, 247, 152, (float)(100+Math.sin(frameCount*.02-1.6)*70));
rect(101, 256 - (mouseY-15)/25, 40, 62);
//hand 3
fill(255, 246, 221);
triangle(220, 350 - (mouseY-15)/25, 220, 390 - (mouseY-15)/25, 240, 390 - (mouseY-15)/25);
triangle(180, 390 - (mouseY-15)/25, 220, 390 - (mouseY-15)/25, 220, 400 - (mouseY-15)/25);
rect(180, 350 - (mouseY-15)/25, 40, 40);
rect(220, 390 - (mouseY-15)/25, 20, 40);
fill(138, 247, 152);
rect(190, 308 - (mouseY-15)/25, 20, 42);
fill(138, 247, 152, (float)(100+Math.sin(frameCount*.02-1.6)*70));
rect(180, 288 - (mouseY-15)/25, 40, 62);
//hand 4
fill(255, 246, 221);
triangle(280, 340 - (mouseY-15)/25, 280, 380 - (mouseY-15)/25, 260, 380 - (mouseY-15)/25);
triangle(280, 380 - (mouseY-15)/25, 320, 380 - (mouseY-15)/25, 280, 400 - (mouseY-15)/25);
rect(280, 340 - (mouseY-15)/25, 40, 40);
rect(260, 380 - (mouseY-15)/25, 20, 40);
fill(138, 247, 152);
rect(290, 298 - (mouseY-15)/25, 20, 42);
fill(138, 247, 152, (float)(100+Math.sin(frameCount*.02-1.6)*70));
rect(280, 278 - (mouseY-15)/25, 40, 62);
//hand 5
fill(255, 246, 221);
triangle(340, 360 - (mouseY-15)/25, 370, 360 - (mouseY-15)/25, 370, 380 - (mouseY-15)/25);
triangle(380, 320 - (mouseY-15)/25, 380, 360 - (mouseY-15)/25, 400, 360 - (mouseY-15)/25);
rect(340, 320 - (mouseY-15)/25, 40, 40);
rect(370, 360 - (mouseY-15)/25, 30, 80);
fill(138, 247, 152);
rect(350, 278 - (mouseY-15)/25, 20, 42);
fill(138, 247, 152, (float)(100+Math.sin(frameCount*.02-1.6)*70));
rect(340, 258 - (mouseY-15)/25, 40, 62);
}//end draw
void keyPressed()
{
//make miku sing
//when the spacebar is pressed, miku's mouth will open up to sing
//press the spacebar along to the song to make miku sing along!
//leave on for
frameRate(10);
//redraw mouth
fill(255, 246, 221);
ellipse(175, 150, 20, 20);
fill(243, 80, 100);
ellipse(175, 150, 10, 20);
}//end keyPressed
void mousePressed()
{
//make miku excited
//when the left mouse button is clicked, miku will get excited!
//leave on for 3 frames
frameRate(3);
//redraw head and face
//bangs back
fill(30, 163, 174);
triangle(148, 92, 138, 106, 123, 87);
triangle(136, 101, 139, 113, 115, 114);
triangle(130, 110, 150, 110, 140, 170);
//head and face
fill(255, 246, 221);
ellipse(180, 130, 110, 75);
stroke(0);
strokeWeight(5);
line(208, 120, 193, 128);
line(193, 128, 207, 137);
line(145, 120, 158, 128);
line(158, 128, 146, 135);
noStroke();
fill(243, 122, 138);
ellipse(140, 145, 20, 10);
ellipse(210, 145, 20, 10);
fill(243, 80, 100);
triangle(165, 140, 185, 140, 175, 155);
//remove stroke
noStroke();
//headphones
fill(68, 209, 220);
quad(195, 105, 240, 105, 244, 115, 240, 140);
fill(72);
quad(230, 110, 240, 110, 240, 125, 230, 125);
quad(225, 125, 245, 125, 245, 150, 220, 150);
fill(243, 61, 85);
quad(225, 129, 239, 127, 239, 144, 225, 145);
//bangs front
fill(68, 209, 220);
quad(150, 88, 230, 88, 240, 105, 140, 105);
fill(30, 163, 174);
triangle(137, 101, 150, 110, 115, 135);
fill(68, 209, 220);
triangle(140, 105, 165, 105, 120, 140);
triangle(165, 105, 192, 105, 193, 141);
triangle(185, 95, 226, 124, 223, 174);
triangle(214, 112, 228, 107, 238, 135);
}//end mousePressed
//end program
