Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/***********************************
 *File Name: Wiggle Wiggle
 *Author: Sin I Lei
 *Date: Sept 13, 2016
 *Descrpition: An interactive drawing featuring a girl
 *dancing on the dance floor. The mouse controls the direction 
 *of which she dances towards. Light rays will also move around
 * and change accordingly, as well as the colours of the ground lighting.
 *Clicking with the mouse will also make the girl's bottom wiggle.
 ************************************/

//Set size and message
void setup() {
  size(400, 400);
  println("DANCE DANCE DANCE!");
}

void draw() {
  //Set framerate
  frameRate(60);
  noStroke();
  //Set background colour
  background(64, 0, 80);

  //Dance floor
  fill(40, 42, 95);
  rect(0, 320, 400, 80);
  //Ground pixel lighting decoration
  fill(243, (mouseX/2)+35, 88, 90);
  rect(60, 350, 30, 30);
  fill((mouseX/2)-43, (mouseY/2)-58, (mouseX/2)+121, 90);
  rect(300, 350, 30, 30);
  fill((mouseY/2)+88, (mouseX/2)+34, (mouseX/2)+144, 90);
  rect(330, 320, 30, 30);


  /************************************
   *                 Girl
   *************************************/

  //Arms
  stroke(150);
  strokeWeight(3);
  line(180, 230, 140, 280);
  line(220, 230, 260, 280);

  //Body
  noStroke();
  fill(85, 44, 37);
  quad(180, 230, 220, 230, (mouseX/2)+120, (mouseY/4)+250, (mouseX/2)+80, (mouseY/4)+250);

  //Head and hair
  fill(155, 124, 45);
  ellipse(200, 205, 70, 70);
  triangle(165, 200, 165, 240, 185, 240);
  triangle(165, 200, 235, 200, 190, 250);
  triangle(165, 200, 235, 200, 210, 250);
  triangle(235, 200, 235, 240, 215, 240);

  //Legs
  stroke(150);
  line((mouseX/2)+80, (mouseY/4)+250, 160, 380);
  line((mouseX/2)+120, (mouseY/4)+250, 240, 380);

  //Butt
  ellipseMode(CENTER);
  fill(71, 194, 206);
  ellipse((mouseX/2)+120, (mouseY/4)+250, 40, 40);
  ellipse((mouseX/2)+80, (mouseY/4)+250, 40, 40);



  /*************************************
   *             Light beams
   **************************************/

  noStroke();
  fill(243, (mouseX/2)+35, 88, 90);
  quad(0, 0, 20, 0, mouseX+70, (-mouseY/2)+450, mouseX-80, (-mouseY/2)+450);
  arc(mouseX-5, (-mouseY/2)+450, 150, 40, 0, PI);
  fill((mouseX/2)-43, (mouseY/2)-58, (mouseX/2)+121, 90);
  quad(380, 0, 400, 0, -mouseX+400, (mouseY/2)+300, -mouseX+250, (mouseY/2)+300);
  arc(-mouseX+325, (mouseY/2)+300, 150, 40, 0, PI);
}




//If mouse is pressed butt moves up
void mousePressed() {
  //slow down framrate so it last longer
  frameRate(10);

  /*****************************************
   *******************************************
   *The whole scene will loop again when mouse is pressed
   *but with position of butt, body and legs higher,
   *and the light beams with different RGB
   *******************************************
   ******************************************/


  //Set background colour
  background(64, 0, 80);

  //Dance floor
  fill(40, 42, 95);
  rect(0, 320, 400, 80);
  //Ground pixel lighting decoration
  fill(243, (mouseX/2)+35, 88, 90);
  rect(60, 350, 30, 30);
  fill((mouseX/2)-43, (mouseY/2)-58, (mouseX/2)+121, 90);
  rect(300, 350, 30, 30);
  fill((mouseY/2)+88, (mouseX/2)+34, (mouseX/2)+144, 90);
  rect(330, 320, 30, 30);


  /************************************
   *                 Girl
   *************************************/

  //Arms
  stroke(150);
  line(180, 230, 140, 280);
  line(220, 230, 260, 280);

  //Body
  noStroke();
  fill(85, 44, 37);
  //height of body is set 10 piexels higher
  quad(180, 230, 220, 230, (mouseX/2)+120, (mouseY/4)+240, (mouseX/2)+80, (mouseY/4)+240);

  //Head and hair
  fill(155, 124, 45);
  ellipse(200, 205, 70, 70);
  triangle(165, 200, 165, 240, 185, 240);
  triangle(165, 200, 235, 200, 190, 250);
  triangle(165, 200, 235, 200, 210, 250);
  triangle(235, 200, 235, 240, 215, 240);

  //Legs
  stroke(150);
  //height of legs are set 10 piexels higher
  line((mouseX/2)+80, (mouseY/4)+240, 160, 380);
  line((mouseX/2)+120, (mouseY/4)+240, 240, 380);

  //Butt
  ellipseMode(CENTER);
  fill(71, 154, 206);
  //height of butt is set 10 piexels higher
  ellipse((mouseX/2)+120, (mouseY/4)+240, 40, 40);
  ellipse((mouseX/2)+80, (mouseY/4)+240, 40, 40);


  /*************************************
   *             Light beams
   **************************************/

  noStroke();
  fill(243, (mouseX/2)+35, 88, 90);
  quad(0, 0, 20, 0, mouseX+70, (-mouseY/2)+450, mouseX-80, (-mouseY/2)+450);
  arc(mouseX-5, (-mouseY/2)+450, 150, 40, 0, PI);
  fill((mouseX/2)-43, (mouseY/2)-58, (mouseX/2)+121, 90);
  quad(380, 0, 400, 0, -mouseX+400, (mouseY/2)+300, -mouseX+250, (mouseY/2)+300);
  arc(-mouseX+325, (mouseY/2)+300, 150, 40, 0, PI);
}