Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
void setup(){
size(400,400);
background(0,0,0);
frameRate(60);
println("Move the ball (your cursor) left to right and back again to do the wave!");
}
void draw(){
  background(30+mouseX/5,20+mouseX/5,100+mouseX/3); 
  noStroke();
  fill(240+mouseX/5,240+mouseX/5,255+mouseX/3);
  triangle(400,0,0,400,400,400);
  fill(90+mouseX/5,100+mouseX/5,130+mouseX/3);
  triangle(400,20,20,400,400,400);
  
//necks
  fill(200,140,120);
  noStroke();
  rect(40,190,60,210);
  fill(255,210,180);
  rect(120,150,140,170);
  fill(244,179,147);
  rect(200,170,220,190);
  fill(235,210,210);
  rect(280,180,300,200);
  fill(100,50,60);
  rect(360,160,380,180);
/*To make it easier for myself, I actuall made the necks all the same color to start, so I could easily keep track of them all. I did this with the heads, hair, and arms as well.*/
  
//hair in back
  fill(100,10,50);
  ellipse(130,120,80,80);
  
//heads
  fill(180,140+mouseX/15,120+mouseX/15);
  ellipse(50,170+mouseX/145,60,60);
  fill(255,223+mouseX/10,196+mouseX/10);
  ellipse(130,130+mouseX/140,60,60);
  fill(234,189+mouseX/20,157+mouseX/20);
  ellipse(210,150+mouseX/150,60,60);
  fill(255,240,240);
  ellipse(290,160+mouseX/160,60,60);
  fill(100,60+mouseX/30,50+mouseX/30);
  ellipse(370,140+mouseX/140,60,60);
  
//frontal hair
  fill(40,0,100);
  arc(50,170,61,61,PI,TWO_PI);
  fill(80,200,100);
  rect(18,160,90,170);
  fill(100,10,50);
  ellipse(115,105+mouseX/140,32,32);
  ellipse(145,105+mouseX/140,32,32);
  fill(255,255,100);
  triangle(180,110,230,110,180,140);
  triangle(190,110,240,110,240,140);
  rect(180,90,240,120);
  strokeWeight(2);
  stroke(255,180,100);
  line(190,90,190,100);
  line(200,90,200,100);
  line(210,90,210,100);
  line(220,90,220,100);
  line(230,90,230,100);
  noStroke();
  fill(40,0,40);
  triangle(260,120,260,160,320,120);
  triangle(270,110,320,110,320,160);
  rect(290,100,320,120);
  
//shirts
  noStroke();
  rectMode(CORNERS);
  fill(90,70,255);
  rect(30,210,70,280);
  fill(150,80,150);
  triangle(90,170,170,170,130,200);
  rect(110,170,150,260);
  fill(255,40,70);
  rect(190,190,230,270);
  fill(255,50,80);
  triangle(250,200,330,200,290,230);
  rect(270,200,310,280);
  fill(240,240,255);
  rect(350,180,390,280);
  
//arms
  strokeWeight(20);
  stroke(180,140,120);
  line(20,130+mouseX,20,230+mouseY/120);
  line(80,130+mouseX,80,230+mouseY/120);
  stroke(255,223,196);
  line(100,90+mouseX,100,190+mouseX/120);
  line(160,90+mouseX,160,190+mouseX/120);
  stroke(234,189,157);
  line(180,110+mouseX,180,210+mouseX/120);
  line(240,110+mouseX,240,210+mouseX/120);
  stroke(255,240,240);
  line(260,120+mouseX,260,220+mouseX/120);
  line(320,120+mouseX,320,220+mouseX/120);
  stroke(100,60,50);
  line(340,80+mouseX,340,200+mouseX/120);
  line(400,80+mouseX,400,200+mouseX/120);
/*The arms were actually the first thing I programmed, because I wanted to get an idea for how they would work in relation to the mouse. Once I had what I wanted, I applied the code to each person.*/

//pants
  noStroke();
  fill(100,40,120);
  rect(110,260,150,280);
  fill(90,80,150);
  rect(190,270,230,280);

//shirt designs
  fill(255);
  rect(40,220,60,230);
  rect(50,220,60,260);
  fill(250,250,255);
  rect(120,200,130,220);
  rect(130,210,140,220);
  rect(130,190,140,200);
  fill(255);
  triangle(280,220,300,220,280,240);
  triangle(300,230,300,250,280,250);
/*The shirt designs were tricky, as they were basically random shapes. I tried to make them as simplistic as possible without being too tedious, but still making the designs appealing.*/

//barricade
  fill(90,80,150);
  rect(0,280,400,400);
  fill(70,50,100);
  rect(0,280,400,310);
  fill(135,60,100);
  rect(0,280,400,300);

//banner
  fill(90,50,140);
  rect(230,320,400,400);
   fill(50,40,110);
  rect(240,330,400,400); 

//banner letters
  fill(240,240,255);
  rect(260,350,270,400);
  rect(260,350,300,360);
  rect(280,380,300,390);
  rect(290,380,300,400);
  rect(310,350,350,400);
  rect(370,350,400,360);
  rect(380,350,390,400);
  fill(50,40,110);
  rect(320,360,340,400);
/*To add to the aesthetic of the drawing, I decided to add "Go Team" to try and show that its an audience doing the wave.*/   

//ball
  strokeWeight(20);
  stroke(255);
  point(mouseX-0,0+mouseY);
/*When trying to make the baseball, i discovered that adding the little red strings was too tedious and difficult, so I scrapped it because the ball was so tiny anyways.*/
}