{

  createCanvas(400, 400);

}

​

function draw() 

{

  if(keyIsPressed === true) // he turns 'Super Sayain'

  {

     background(174, 224, 235);      

  // Draw random orange lines representing energy

    stroke(252,0,0);

    strokeWeight(3);

    // The following loop is for the energy around our 'Sayain'

    for (let i = 0; i < 20; i++) 

    {

      let x1 = random(width);

      let y1 = random(height);

      let x2 = x1 + random(-30, 30); // Randomizing the length and direction of the lines

      let y2 = y1 + random(-30, 30);

      line(x1, y1, x2, y2);

    }  

  stroke('orange');

  strokeWeight(2);

  rect(162+10, 288, 50, 50) //neck

  ellipse(130-10,190, 40, 70); //left ear

  ellipse(270+8,190, 40, 70); //right ear

  ellipse(200,200, 160,200); //face

  stroke('orange')

    strokeWeight(2)

  fill(8, 126, 153)

  ellipse(200,430, 280, 200) //shirt and body

    noStroke()

    fill(0)

  triangle(172, 329, 200,359,222,329) //shirt cutout

    //the following is for the eyebrows

    //Left brow

    noStroke()

    fill(255)

  ellipse(156+2,162,40,20)  //left brow

  fill(0)

    noStroke()

  ellipse(156+2,167,40,20);

    //right brow

    fill(255)

  ellipse(224+2,160+2,40,20)  //right brow

  fill(0)

    noStroke()

  ellipse(224+2,167,40,20);

  fill(255)

  stroke("black");

  strokeWeight(1);

  ellipse(146+15,181,40, 20); //left eye

  ellipse(146+90,181,40, 20); //right eye

  fill(255);

  circle(208, 225, 10); //nose

  circle(188, 225, 10); //nose

  noStroke()

  ellipse(200,256,60, 30) //mouth

  fill(171, 5, 118);

  ellipse(200,260-8,60, 30) //creation of his smile

  //rectangle & 2 triangle used for hair foundation

  fill('orange')

  rect(124,70,147,65)

  triangle(122,174, 152, 129, 125,124);

  triangle(277,175,240, 135, 270,130);

  //the following triangles create the hair using background color

  fill(174, 224, 235);

  triangle(124, 70, 135, 101, 142, 62)

  triangle(139, 62, 146,88, 162,68)

  triangle(159,69,164,81,187,58)

  triangle(168,69,186,89,200,50)

  triangle(187,62, 207, 90, 218, 50)

  triangle(211,68,222,82,235,50)

  triangle(226,70,233,90, 247,54)

  triangle(240,70,248,83,270,54)

  triangle(260,70,261,90,272,62)

  //the following circles are for his eyeballs

  fill(235,16,16)

  circle(162,181,15)

  circle(235,181,15);  

   stroke(255)

    line(200,150, 197,167) // 1st frustration line

    line(184+5,167,180,150) //2nd frustration line

    //This code hides any imperfections with the outer glow intended effect

    fill(0)

    noStroke()

    ellipse(121,191, 20,67)

    ellipse(278,191,20,67)

  fill(0) //This is for the final form

     }

  else{

  background(174, 224, 235);

  stroke("black");

  strokeWeight(1);

  fill(110,82,45); //skin colour

  rect(162+10, 288, 50, 50) //neck

  ellipse(130-10,190, 40, 70); //left ear

  ellipse(270+8,190, 40, 70); //right ear

  ellipse(200,200, 160,200); //face

  stroke(0);

  stroke(0)

  fill(36, 10, 107)

  ellipse(200,430, 280, 200) //shirt and body

    stroke(110,82,45)

    fill(110,82,45)

  triangle(172, 330+1, 200,359,222,329) //shirt cutout

    //the following is for the eyebrows

    //Left brow

    fill(0)

  ellipse(156+2,162,40,20)  //left brow

  fill(110,82,45)

    noStroke()

  ellipse(156+2,167,40,20);

    //right brow

    fill(0)

  ellipse(224+2,160+2,40,20)  //right brow

  fill(110,82,45)

    noStroke()

  ellipse(224+2,167,40,20); 

  fill(255)

  ellipse(146+15,181,40, 20); //left eye

  ellipse(146+90,181,40, 20); //right eye

  fill(255);

  circle(208, 232, 10); //nose

  circle(188, 232, 10); //nose

  noStroke()

  ellipse(200,256,60, 30) //mouth

  fill(110,82,45);

  ellipse(200,260-8,60, 30) //creation of his smile

  //rectangle & 2 triangle used for hair foundation

  fill(0)

  rect(124,70,147,65)

  triangle(122,174, 152, 129, 125,124);

  triangle(277,175,240, 135, 270,130);

  //the following triangles create the hair using background color

  fill(174, 224, 235);

  triangle(124, 70, 135, 101, 142, 62)

  triangle(139, 62, 146,88, 162,68)

  triangle(159,69,164,81,187,58)

  triangle(168,69,186,89,200,50)

  triangle(187,62, 207, 90, 218, 50)

  triangle(211,68,222,82,235,50)   

  triangle(226,70,233,90, 247,54)

  triangle(240,70,248,83,270,54)

  triangle(260,70,261,90,272,62)

  //the following circles are for his eyeballs

  fill(0)

  circle(162,181,15)

  circle(235,181,15);

  //fill(255) //white text

  //text(`mouseX: ${mouseX}, mouseY: ${mouseY}`, 20, 20); //mouse position to assist with placement of shapes

  }

}