​

​

function setup() {

  createCanvas(800, 800);

}

​

function draw() {

  background(255);

  new Hair();

  new Face();

  new Eyes();

  new Nose3();

  noLoop();

}

​

// mouseClicked creates a new loop, generating new random colors within each category.

function mouseClicked() {

  loop();

}

​

// Creates an ellipse and fills with a random selection from the skintone options.

class Face {

  constructor() {

    stroke(0);

    strokeWeight(3);

    fill(random(skintones));

    ellipse(400, 400, 200);

  }

}

​

// Creates an ellipse and fills with a random selection from the hair color options.

class Hair {

  constructor() {

    stroke(0);

    strokeWeight(3);

    fill(random(haircolors));

    ellipse(400, 300, 500);

  }

}

​

// Creates ellipses and fills with a random selection from the eye color options.

class Eyes {

  constructor() {

  stroke(0);

    strokeWeight(2);

    fill(255);

    ellipse(360, 400, 25);

    ellipse(440, 400, 25);

    fill(random(eyecolors));

    ellipse(360, 398, 15);

    ellipse (440, 398, 15);

    fill(0);

    ellipse(360, 398, 5);

    ellipse(440, 398, 5);

  }

}

​

class Nose1 {

 constructor() {

   stroke(0);

   strokeWeight(2);

   fill('hsba(0, 0%, 0%, 0.2)');

   strokeJoin(ROUND);

   beginShape();

   curveVertex(397, 410);

   curveVertex(393, 395);

   curveVertex(407, 395);

   curveVertex(415, 430);

   curveVertex(385, 430);

   curveVertex(393, 395);

   curveVertex(403, 410);

   endShape();

 } 

}

​

class Nose2 {

 constructor() {

   stroke(0);

   strokeWeight(2);

   fill('hsba(0, 0%, 0%, 0.2)');

   strokeJoin(ROUND);

   beginShape();

   curveVertex(397, 410);

   curveVertex(395, 395);

   curveVertex(405, 395);

   curveVertex(410, 425);

   curveVertex(400, 435);

   curveVertex(390, 425);

   curveVertex(395, 395);

   curveVertex(403, 410);

   endShape();

 } 

}

​

class Nose3 {

 constructor() {

   stroke(0);

   strokeWeight(2);

   fill('hsba(0, 0%, 0%, 0.2)');

   strokeJoin(ROUND);

   beginShape();

   curveVertex(397, 410);

   curveVertex(395, 405);

   curveVertex(405, 405);

   curveVertex(408, 415);

   curveVertex(413, 425);

   curveVertex(400, 435);

   curveVertex(395, 425);

   curveVertex(392, 415);

   curveVertex(395, 405);

   curveVertex(403, 410);

   endShape();

 } 

}