Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*Project inspired by past students:SELINA MURIEL 
 (http://www-acad.sheridanc.on.ca/PROG14998/2016/interactive-toy/
 selina_muriel_interactive_toy/index.html)
 and Peter Francis (http://www-acad.sheridanc.on.ca/PROG14998/2016/
 interactive-toy/peter_francis_interactive_toy/index.html */

//Button variables defined
float outfitButton= 0;
float earsButton= 0;
float eyesButton=0;
float mouthButton = 0;
float noseButton= 0;
float facialFeaturesButton =0;
float spazzX;

void setup () {
  size(400, 400);
}
void draw () {
  background (255); 

  // Draw sky
  noStroke();
  fill (#8FF5FC);
  rect (-20, -20, 400, 280);

  // Draw sun   
  noStroke ();
   fill (155);
    ellipse (spazzX, 50, 40, -30);
    spazzX = spazzX + random (1,-2);
  ellipse (60, 60, - 20, -20);
  fill ( #FFDAB9);
  ellipse ( 80, 80, - 40, -40);
  fill (#FFFACD);
  ellipse (60, 60, - 20, -20);


  // Draw grass
  fill (#9ACD32);
  rect (0, 400, 400, 280);

  // Draw shadow
  fill (155);
  ellipseMode (CORNERS);
  ellipse (40, 310, 160, 360);

  //Draw the default animal character
  //Draw default ears
  strokeWeight (2);
  stroke (#DEB600);
  fill (#FFF4C2);
  triangle (60, 60, 65, 140, 120, 120);
  triangle (90, 120, 140, 60, 140, 120);

  //Draw arms
  strokeWeight (2);
  fill (#FFF4C2);
  ellipseMode(CORNERS);
  ellipse (170, 190, 30, 210);

  //Draw legs
  strokeWeight (2);
  stroke(#DEB600);
  fill (#FFF4C2);
  ellipseMode (CENTER);
  ellipse (80, 280, 30, 120);
  ellipseMode (CENTER);
  ellipse (120, 280, 30, 120);

  //Draw body
  strokeWeight (2);
  stroke (0);
  fill (255);
  ellipseMode (CORNERS);
  ellipse (60, 175, 140, 290);

  //Draw head
  strokeWeight (2);
  stroke (#DEB600);
  fill (#FFF4C2);
  ellipseMode(CORNERS);
  ellipse (50, 90, 150, 190);
  fill (255);

  //Draw default eyes (white)
  stroke (0);
  fill (255);
  ellipseMode(CORNERS);
  ellipse(65, 125, 95, 155);
  ellipse(105, 125, 135, 155);

  //Draw default eyes (blacks)
  stroke (0);
  ellipseMode(CORNERS);
  ellipse (70, 130, 90, 150);
  ellipseMode (CORNERS);
  ellipse(110, 130, 130, 150);

  //Draw mouth
  strokeWeight(2);
  stroke(0);
  line (90, 175, 115, 175);
  strokeWeight (1);

  //Draw nose
  fill (#68570A);
  stroke (0);
  triangle(100, 150, 95, 160, 105, 160);
  fill (255);

  //Draw background of character customization UI
  strokeWeight(10);
  stroke(#9B6700);
  fill (#FFC859);
  rect(200, 360, 400, 100, 10);
  strokeWeight(1);
  for (int i = 100; i < 355; i = i+5) {
    line(200, i, 400, i);
  }

  //Draw buttons (activated through mousePressed)
  //Eye Buttons
  stroke(0);
  fill (#FFE8A0);
  rectMode(CORNERS);
  strokeWeight (2);
  rect(220, 120, 280, 160, 10);
  strokeWeight (1);
  //Draw Eye button icon
  ellipseMode(CORNERS);
  fill(255);
  ellipse(230, 130, 250, 150);
  ellipse (250, 130, 270, 150);
  fill(0);
  ellipse(235, 135, 245, 145);
  ellipse (255, 135, 265, 145);

  //Nose button
  fill (#FFE8A0);
  stroke(0);
  strokeWeight (2);
  rectMode(CORNERS);
  rect(220, 180, 280, 220, 10);
  //Draw nose button icon
  fill (255);
  triangle (250, 190, 240, 210, 260, 210);
  strokeWeight (1);

  //Mouth button
  fill (#FFE8A0);
  stroke(0);
  strokeWeight (2);
  rectMode(CORNERS);
  rect(220, 240, 280, 280, 10);
  //Draw mouth button icon
  stroke(0);
  line (230, 260, 270, 260);
  strokeWeight (1);

  //Facial features button
  fill (#FFE8A0);
  strokeWeight (2);
  rectMode(CORNERS);
  rect(220, 300, 280, 340, 10);
  //Draw Facial features icon
  //left cheek
  fill (255);
  strokeWeight (1);
  ellipseMode(CORNERS);
  ellipse (235, 310, 240, 315);
  ellipse (230, 320, 235, 325);
  ellipse (240, 320, 245, 325);
  //right cheek
  ellipse (260, 320, 265, 325);
  ellipse (270, 320, 275, 325);
  ellipse (265, 310, 270, 315);
  strokeWeight (1);

  //ear accessory button
  fill (#FFE8A0);
  strokeWeight (2);
  rectMode(CORNERS);
  rect(320, 120, 380, 160, 10);
  strokeWeight (1);
  //ear button icon
  fill (255);
  quad (330, 130, 370, 155, 370, 130, 330, 150);
  strokeWeight (1);

  //random button
  fill (#FFE8A0);
  strokeWeight (2);
  rectMode(CORNERS);
  rect(320, 180, 380, 220, 10);
  //random button icon
  fill (255);
  strokeWeight (1);
  ellipseMode(CORNERS);
  triangle(335, 200, 345, 190, 335, 185);
  triangle (350, 190, 365, 183, 365, 200);
  ellipse(335, 215, 365, 190);
  strokeWeight (1);

  //outfit button
  fill (#FFE8A0);
  strokeWeight (2);
  rectMode(CORNERS);
  rect(320, 240, 380, 280, 10);
  //outfit button icon
  fill (255);
  rectMode(CORNERS);
  rect(340, 270, 360, 250);
  rect(330, 260, 340, 250);
  rect(360, 260, 370, 250);
  triangle(340, 250, 350, 260, 360, 250);
  strokeWeight (1);


  drawAnimalEars();
  drawAnimalEyes();
  drawAnimalOutfit();
  drawAnimalMouth();
  drawAnimalNose();
  drawAnimalFacialFeatures(); 
}
void drawAnimalEyes() {
  if (eyesButton==0) {
    fill (255);
    ellipseMode(CORNERS);
    ellipse(65, 125, 95, 155);
    ellipse(105, 125, 135, 155);
    fill (0);
    ellipseMode(CORNERS);
    ellipse (70, 130, 90, 150);
    ellipseMode (CORNERS);
    ellipse(110, 130, 130, 150);
    fill (255);
  } else if (eyesButton==1) {
    fill(0);
    ellipseMode (CORNERS);
    ellipse(65, 125, 95, 155);
    ellipse(105, 125, 135, 155);
    fill(255);
    ellipse (70, 140, 80, 130);
    ellipse (110, 130, 120, 140);
  } else if (eyesButton==2) {
    fill(255);
    ellipseMode(CORNERS);
    ellipse(65, 125, 95, 155);
    ellipse(105, 125, 135, 155);
    fill(0);
    ellipse (90, 150, 80, 140);
    ellipse (120, 150, 130, 140);
    fill(255);
  }
}
void drawAnimalOutfit() {
  if (outfitButton==0) { 
    //sleeves
    quad (40, 190, 75, 190, 65, 210, 35, 220);
    quad (125, 190, 160, 190, 160, 220, 135, 210);
    line (125, 195, 160, 195);
    line (120, 200, 160, 200);
    line (115, 205, 160, 205);
    line (40, 200, 90, 200);
    line (40, 195, 90, 195);
    line (40, 205, 90, 205);
    //shirt
    quad (75, 190, 130, 190, 135, 260, 65, 260);
    triangle (75, 185, 40, 260, 70, 260);//left triangle
    triangle (130, 190, 130, 260, 160, 260);
    line (60, 220, 60, 260);
    line (140, 210, 140, 260);
    //designs
    fill(#ff0000);
    quad(80, 190, 80, 220, 120, 190, 120, 220);
    fill(0);
    ellipse (90, 220, 95, 230);
    ellipse (90, 240, 95, 250);
    strokeWeight(2);
    line(100, 190, 100, 260);
    line (65, 260, 135, 260);
    strokeWeight(1);
  } else if (outfitButton==1) {
    stroke(0);
    strokeWeight(5);
    line(70, 200, 70, 260);
    line (90, 190, 90, 260);
    line (110, 190, 110, 260);
    line (67, 263, 133, 263);
    line (125, 190, 125, 260);
    strokeWeight(1);
  } else if (outfitButton==2) {
    //sleeves
    fill (0);
    quad (40, 190, 75, 190, 65, 210, 35, 220);
    quad (125, 190, 160, 190, 160, 220, 135, 210);
    line (125, 195, 160, 195);
    line (120, 200, 160, 200);
    line (115, 205, 160, 205);
    line (40, 200, 90, 200);
    line (40, 195, 90, 195);
    line (40, 205, 90, 205);
    //shirt
    fill (0);
    quad (75, 190, 130, 190, 135, 260, 65, 260);
    triangle (75, 185, 40, 260, 70, 260);//left triangle
    triangle (130, 190, 130, 260, 160, 260);
    line (60, 220, 60, 260);
    line (140, 210, 140, 260);
    //designs
    fill(#ff0000);
    quad(80, 190, 80, 220, 120, 190, 120, 220);
    fill(0);
    ellipse (90, 220, 95, 230);
    ellipse (90, 240, 95, 250);
    strokeWeight(2);
    line(100, 190, 100, 260);
    line (65, 260, 135, 260);
    strokeWeight(1);
  }
}
void drawAnimalFacialFeatures () {
  noStroke();
  fill (#98E6FF);
  if (facialFeaturesButton==0) {
    ellipse (75, 160, 80, 170);
    ellipse (120, 160, 125, 170);
  } else if (facialFeaturesButton==1) {
    fill (#FFC3DC);
    ellipse (70, 160, 85, 170);
    ellipse (120, 160, 135, 170);
  } else if (facialFeaturesButton==2) {
    fill (0);
    ellipse  (70, 160, 75, 165);
  }
}
void drawAnimalNose () {
  if (noseButton==0) {
    strokeWeight (2);
    fill (#68570A);
    triangle(100, 150, 95, 160, 105, 160);
  } else if (noseButton==1) {
    strokeWeight (2);
    fill (#68570A);
    triangle (90, 160, 110, 170, 100, 150);
  } else if (noseButton==2) {
    strokeWeight (2);
    fill (#68570A);
    ellipse (120, 150, 80, 160);
  } else if (noseButton == 3) {
    strokeWeight (2);
    fill (#68570A);
    ellipse (90, 140, 110, 160);
  }
}
void drawAnimalMouth () {
  if (mouthButton==0) {
    stroke(0);
    strokeWeight(2);
    line (90, 175, 115, 175);
    strokeWeight (1);
  } else if (mouthButton==1) {
    strokeWeight (2);
    line (90, 170, 90, 180);
    strokeWeight (1);
  } else if (mouthButton==2) {
    strokeWeight(2);
    line (90, 170, 90, 180); 
    line (100, 170, 100, 180);
    line (110, 170, 110, 180);
    line (115, 170, 115, 180);
    strokeWeight (1);
  } else if (mouthButton==3) {
    strokeWeight (2);
    fill (255);
    ellipse (90, 170, 115, 180);
    strokeWeight (0);
  } else if (mouthButton==4) {
  }
}
void drawAnimalEars () {
  if (earsButton==0) {
    fill(#ff90f8);
    quad(160, 60, 150, 80, 120, 60, 110, 80);
  } else if (earsButton==1) {
    fill(#f9f000);
    ellipse(140, 70, 150, 60);
    ellipse (140, 80, 150, 70);
  } else if (earsButton==2) {
    strokeWeight(6);
    line (175, 190, 140, 290);
    strokeWeight (1);
  }
}
void mousePressed () {
  if (mouseX>220 && mouseX<280 && mouseY>120 && mouseY<160)
  {
    if (eyesButton==0) {
    }
    eyesButton++;
    if (eyesButton==3) {
      eyesButton=0;
    }
  }
  if (mouseX>320 && mouseX<380 &&mouseY<160 && mouseY>120)
  {
    if (earsButton==0) {
    }
    earsButton++;
    if (earsButton==3) {
      earsButton=0;
    }
  }
  if (mouseX>320 && mouseX<380 && mouseY<280 && mouseY>240)
  {
    if (outfitButton==0) {
    }
    outfitButton++;
    if (outfitButton==3) {
      outfitButton=0;
    }
  }

  if (mouseX>220 && mouseX<280 && mouseY<280 && mouseY>240) 
  {
    if (mouthButton==0) {
    }
    mouthButton++;
    if (mouthButton==5) {
      mouthButton=0;
    }
  }
  if (mouseX>220 && mouseX<280 && mouseY<220 && mouseY>180) 
  {
    if (noseButton==0) {
    }
    noseButton++;
    if (noseButton==4) {
      noseButton=0;
    }
  }
  if (mouseX>220 && mouseX<280 && mouseY<340 && mouseY>280)
  {
    if (facialFeaturesButton==0) {
    }
    facialFeaturesButton++;
    if (facialFeaturesButton==3)
      facialFeaturesButton=0;
  }
}