Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*
Interactive Drawing Assignment
 Class Selection
 By: Jonah GM
 
 Interact by:
 
 -At a moderate speed or slow speed, move mouse completely to the left or the right
 to select a class
 -Mouse right = Rogue Class
 -Mouse left = Hero Class
 -Click any key to "Select a class"
 -Click displays light, as well as message, "Class Selected!"
 */
//Drawn only once
void setup() {
  //Size of the Applet
  size(400, 400);
}
//Constantly draw
void draw() {
  //Set framerate to 60 frames per second
  frameRate(60);
  //Background to colour (White)
  background(255);
  //No outer lines (Stroke)
  noStroke();
  //Background shades
  fill(0, 210);
  rect(0, 0, 400, 100);
  fill(0, 200);
  rect(0, 100, 400, 100);
  fill(0, 190);
  rect(0, 200, 400, 100);


  //Floor
  fill(25);
  rect(0, 280, 400, 400);

  //Floor Shadow
  fill(23);
  ellipse(200, 340, 270, 70);
  fill(20);
  ellipse(200, 340, 250, 50);

  //The use of mouseX allows for shapes to move accordingly to the mouse
  //HERO CLASS Waist Cape
  fill(160);
  triangle(260+mouseX, 260, 240+mouseX, 230, 220+mouseX, 240);

  //The use of sin allows for a shape to repeat, faking the 'loop' function
  //The use of frameCount is to control how fast the shape will move accordingly
  //to the frames per second
  //HERO CLASS Sword Hilt
  fill(139, 69, 19);
  rect(285+mouseX, 130+sin(frameCount/20)*2, 10, 60);
  rect(270+mouseX, 120+sin(frameCount/20)*2, 50, 15);

  //ROGUE CLASS Dagger Handles
  rect(mouseX-114, 130+sin(frameCount/20)*2, 10, 60);
  rect(mouseX-309, 215+sin(frameCount/20)*2, 60, 10);

  //BASE CLASS CHARACTER
  //Hair Colour
  fill(25);
  //Hair(Back of Head)
  //Right
  triangle(165, 135, 180, 80, 190, 110);
  triangle(150, 120, 170, 80, 190, 100);
  //Left
  triangle(210, 110, 220, 80, 235, 135);
  triangle(230, 80, 210, 100, 250, 120);
  //Head
  fill(222, 185, 135);
  ellipse(200, 80, 80, 80);

  //Hair
  fill(25);
  triangle(210, 60, 260, 80, 230, 50);
  triangle(195, 60, 215, 60, 230, 90);
  triangle(145, 100, 180, 60, 165, 55);
  triangle(240, 30, 215, 60, 200, 60);
  triangle(215, 20, 180, 60, 210, 60);
  triangle(140, 80, 175, 45, 190, 70);
  ellipse(200, 56, 70, 34);

  //Body
  fill(20);
  ellipse(200, 200, 95, 100);

  //Feet
  fill(13);
  triangle(125, 340, 170, 340, 150, 290);
  triangle(230, 340, 275, 340, 250, 290);

  //Hands
  fill(222, 185, 135);
  ellipse(290, 160+sin(frameCount/20)*2, 40, 40);
  ellipse(120, 220+sin(frameCount/20)*2, 40, 40);

  //Pants
  fill(0, 0, 50);
  arc(200, 210, 93, 80, 0, PI);

  //HERO CLASS ATTIRE
  //Belt
  fill(81, 34, 34);
  triangle(155+mouseX, 220, 160+mouseX, 230, 237+mouseX, 160);
  triangle(230+mouseX, 150, 150+mouseX, 220, 160+mouseX, 230);
  triangle(240+mouseX, 160, 170+mouseX, 210, 220+mouseX, 160);
  //Shoulder Attachments
  fill(100, 0, 0);
  //Left
  triangle(175+mouseX, 175, 185+mouseX, 165, 150+mouseX, 150);
  triangle(185+mouseX, 165, 160+mouseX, 140, 150+mouseX, 150);
  //Right
  triangle(225+mouseX, 175, 250+mouseX, 150, 240+mouseX, 140);
  triangle(240+mouseX, 140, 215+mouseX, 165, 225+mouseX, 175);

  //Shoes
  //Red Bottom
  fill(113, 0, 0);
  triangle(125+mouseX, 340, 170+mouseX, 340, 150+mouseX, 290);
  triangle(230+mouseX, 340, 275+mouseX, 340, 250+mouseX, 290);
  //Black Top
  fill(10);
  triangle(130+mouseX, 325, 165+mouseX, 325, 150+mouseX, 290);
  triangle(235+mouseX, 325, 270+mouseX, 325, 250+mouseX, 290);

  //Waist Cape
  fill(200);
  triangle(210+mouseX, 210, 250+mouseX, 210, 260+mouseX, 260);

  //Blade
  fill(120);
  triangle(290+mouseX, 130+sin(frameCount/20)*2, 270+mouseX, 40+sin(frameCount/20)*2, 290+mouseX, 40+sin(frameCount/20)*2);
  fill(145);
  triangle(290+mouseX, 130+sin(frameCount/20)*2, 290+mouseX, 40+sin(frameCount/20)*2, 310+mouseX, 40+sin(frameCount/20)*2);
  fill(150);
  triangle(270+mouseX, 40+sin(frameCount/20)*2, 310+mouseX, 40+sin(frameCount/20)*2, 290+mouseX, 0+sin(frameCount/20)*2);
  fill(140);
  triangle(290+mouseX, 0+sin(frameCount/20)*2, 290+mouseX, 40+sin(frameCount/20)*2, 270+mouseX, 40+sin(frameCount/20)*2);

  //Hilt
  fill(139, 69, 19);
  rect(290+mouseX, 120+sin(frameCount/20)*2, 50, 15);



  //ROGUE CLASS ATTIRE
  //Mask
  fill(100);
  triangle(mouseX-238, 90, mouseX-198, 100, mouseX-198, 160);
  triangle(mouseX-158, 90, mouseX-198, 100, mouseX-198, 160);


  //Belt Equip
  rect(mouseX-175, 200, 10, 30);
  triangle(mouseX-174, 230, mouseX-164, 230, mouseX-169, 240);
  //Belt
  fill(44, 19, 19);
  rect(mouseX-246, 205, 95, 15);
  //Belt Buckle
  fill(75);
  ellipse(mouseX-219, 213, 20, 25);

  //Gloves
  fill(50);
  ellipse(mouseX-108, 160+sin(frameCount/20)*2, 40, 40);
  ellipse(mouseX-278, 220+sin(frameCount/20)*2, 40, 40);

  //Dagger Blades
  //Right
  rect(mouseX-114, 185+sin(frameCount/20)*2, 10, 25);
  triangle(mouseX-114, 210+sin(frameCount/20)*2, mouseX-104, 210+sin(frameCount/20)*2, mouseX-114, 230+sin(frameCount/20)*2);
  //Left
  rect(mouseX-330, 215+sin(frameCount/20)*2, 25, 10);
  triangle(mouseX-349, 215+sin(frameCount/20)*2, mouseX-329, 215+sin(frameCount/20)*2, mouseX-329, 225+sin(frameCount/20)*2);
}


//Light on Key Click
void keyPressed()
{   
  //Run one frame per second when key clicked
  frameRate(1);
  //Selected Light
  fill(255, 255, 0, 100);
  triangle(70, 340, 200, 340, 200, -50);
  triangle(330, 340, 200, 340, 200, -50);
  arc(200, 340, 260, 70, 0, PI);

  //Display text "Class Selected!" 
  println("Class Selected!");
}

/*
REFERENCES
 
 http://www-acad.sheridanc.on.ca/PROG14998/2016/interactive-drawing/anita_he_interactive_drawing/index.html
 Referred to code using sin, understanding the format in which the code must be typed.
 
 */