​

function setup() {

  createCanvas(1440, 720);

  interface = new Interface();

  change = new Change();

}

​

​

​

function draw() {

  loop();

  background(220);

  interface.text();

  change.bg();

  interface.border();

​

  // Background Colors:

  interface.color(bgCream);

  interface.colorDisplay(515, 95);

  interface.color(bgGrey);

  interface.colorDisplay(565, 95);

  interface.color(bgYellow);

  interface.colorDisplay(615, 95);

  interface.color(bgGreen);

  interface.colorDisplay(665, 95);

  interface.color(bgBlue);

  interface.colorDisplay(715, 95);

  // Skin Colors:

  interface.color(skinPale);

  interface.colorDisplay(515, 195);

  interface.color(skinLightCool);

  interface.colorDisplay(565, 195);

  interface.color(skinLightWarm);

  interface.colorDisplay(615, 195);

  interface.color(skinMediumLight);

  interface.colorDisplay(665, 195);

  interface.color(skinMedium);

  interface.colorDisplay(715, 195);

  interface.color(skinMediumCool);

  interface.colorDisplay(765, 195);

  interface.color(skinMediumWarm);

  interface.colorDisplay(815, 195);

  interface.color(skinMediumDarkWarm);

  interface.colorDisplay(865, 195);

  interface.color(skinMediumDarkCool);

  interface.colorDisplay(915, 195);

  interface.color(skinDark);

  interface.colorDisplay(965, 195);

  // Face Icons:

  // Mouth

  interface.iconDisplay(500, 230);

  image(Pout, 380, 120, 250, 250);

  interface.iconDisplay(555, 230);

  image(Smile, 440, 122, 245, 245);

  interface.iconDisplay(610, 230);

  image(Grin, 497, 125, 240, 240);

  // Nose

  interface.iconDisplay(500, 290);

  image(NoseButton, 390, 210, 230, 230);

  interface.iconDisplay(555, 290);

  image(NoseRound, 445, 210, 230, 230);

  interface.iconDisplay(610, 290);

  image(NoseWide, 505, 210, 230, 230);

  interface.iconDisplay(665, 290);

  image(NoseLong, 560, 210, 230, 230);

  interface.iconDisplay(720, 290);

  image(NoseHawk, 610, 210, 230, 230);

  // Hair Colors:

  interface.color(hairBlond);

  interface.colorDisplay(515, 415);

  interface.color(hairLightBrown);

  interface.colorDisplay(515, 475);

  interface.color(hairDarkBrown);

  interface.colorDisplay(515, 535);

  interface.color(hairBlack);

  interface.colorDisplay(515, 595);

  interface.color(hairRed);

  interface.colorDisplay(515, 655);

  // Hair Icons:

  interface.iconDisplay(545, 395);

  interface.iconDisplay(600, 395);

  interface.iconDisplay(655, 395);

  interface.iconDisplay(710, 395);

  interface.iconDisplay(765, 395);

  interface.iconDisplay(820, 395);

  interface.iconDisplay(875, 395);

  interface.iconDisplay(930, 395);

  interface.iconDisplay(985, 395);

  interface.iconDisplay(545, 455);

  interface.iconDisplay(600, 455);

  interface.iconDisplay(655, 455);

  interface.iconDisplay(710, 455);

  interface.iconDisplay(765, 455);

  interface.iconDisplay(820, 455);

  interface.iconDisplay(875, 455);

  interface.iconDisplay(930, 455);

  interface.iconDisplay(985, 455);

  interface.iconDisplay(545, 515);

  interface.iconDisplay(600, 515);

  interface.iconDisplay(655, 515);

  interface.iconDisplay(710, 515);

  interface.iconDisplay(765, 515);

  interface.iconDisplay(820, 515);

  interface.iconDisplay(875, 515);

  interface.iconDisplay(930, 515);

  interface.iconDisplay(985, 515);

  interface.iconDisplay(545, 575);

  interface.iconDisplay(600, 575);

  interface.iconDisplay(655, 575);

  interface.iconDisplay(710, 575);

  interface.iconDisplay(765, 575);

  interface.iconDisplay(820, 575);

  interface.iconDisplay(875, 575);

  interface.iconDisplay(930, 575);

  interface.iconDisplay(985, 575);

  interface.iconDisplay(545, 635);

  interface.iconDisplay(600, 635);

  interface.iconDisplay(655, 635);

  interface.iconDisplay(710, 635);

  interface.iconDisplay(765, 635);

  interface.iconDisplay(820, 635);

  interface.iconDisplay(875, 635);

  interface.iconDisplay(930, 635);

  interface.iconDisplay(985, 635);

  image(BuzzBlond, 522, 384, 100, 100);

  image(BuzzLightBrown, 522, 444, 100, 100);

  image(BuzzDarkBrown, 522, 504, 100, 100);

  image(BuzzBlack, 522, 564, 100, 100);

  image(BuzzRed, 522, 624, 100, 100);

  image(AfroBlond, 597.5, 395, 53, 53);

  image(AfroLightBrown, 597.5, 455, 53, 53);

  image(AfroDarkBrown, 597.5, 515, 53, 53);

  image(AfroBlack, 597.5, 575, 53, 53);

  image(AfroRed, 597.5, 635, 53, 53);

  image(BraidsBlond, 647, 386, 60, 60);

  image(BraidsTopBlond, 647, 386, 60, 60);

  image(BraidsLightBrown, 647, 446, 60, 60);

  image(BraidsTopLightBrown, 647, 446, 60, 60);

  image(BraidsDarkBrown, 647, 506, 60, 60);

  image(BraidsTopDarkBrown, 647, 506, 60, 60);

  image(BraidsBlack, 647, 566, 60, 60);

  image(BraidsTopBlack, 647, 566, 60, 60);

  image(BraidsBlack, 647, 626, 60, 60);

  image(BraidsTopRed, 647, 626, 60, 60);

  image(CurlyShortBlond, 697, 392, 70, 70);

  image(CurlyShortLightBrown, 697, 452, 70, 70);

  image(CurlyShortDarkBrown, 697, 512, 70, 70);

  image(CurlyShortBlack, 697, 572, 70, 70);

  image(CurlyShortRed, 697, 632, 70, 70);

  image(CurlyBobBlond, 758, 390, 60, 60);

  image(CurlyTopBlond, 758, 390, 60, 60);

  image(CurlyBobLightBrown, 758, 450, 60, 60);

  image(CurlyTopLightBrown, 758, 450, 60, 60);

  image(CurlyBobDarkBrown, 758, 510, 60, 60);

  image(CurlyTopDarkBrown, 758, 510, 60, 60);

  image(CurlyBobBlack, 758, 570, 60, 60);

  image(CurlyTopBlack, 758, 570, 60, 60);

  image(CurlyBobRed, 758, 630, 60, 60);

  image(CurlyTopRed, 758, 630, 60, 60);

  image(CurlyLongBlond, 822, 391, 43, 43);

  image(CurlyTopBlond, 822, 391, 43, 43);

  image(CurlyLongTopBlond, 822, 391, 43, 43);

  image(CurlyLongLightBrown, 822, 451, 43, 43);

  image(CurlyTopLightBrown, 822, 451, 43, 43);

  image(CurlyLongTopLightBrown, 822, 451, 43, 43);

  image(CurlyLongDarkBrown, 822, 511, 43, 43);

  image(CurlyTopDarkBrown, 822, 511, 43, 43);

  image(CurlyLongTopDarkBrown, 822, 513, 43, 43);

  image(CurlyLongBlack, 822, 571, 43, 43);

  image(CurlyTopBlack, 822, 571, 43, 43);

  image(CurlyLongTopBlack, 822, 571, 43, 43);

  image(CurlyLongRed, 822, 631, 43, 43);

  image(CurlyTopRed, 822, 631, 43, 43);

  image(CurlyLongTopRed, 822, 631, 43, 43);

  image(StraightShortBlond, 862, 394, 70, 70);

  image(StraightShortLightBrown, 862, 454, 70, 70);

  image(StraightShortDarkBrown, 862, 514, 70, 70);

  image(StraightShortBlack, 862, 574, 70, 70);

  image(StraightShortRed, 862, 634, 70, 70);

  image(StraightBobBlond, 923, 390, 60, 60);

  image(StraightTopBlond, 923, 390, 60, 60);

  image(StraightBobLightBrown, 923, 450, 60, 60);

  image(StraightTopLightBrown, 923, 450, 60, 60);

  image(StraightBobDarkBrown, 923, 510, 60, 60);

  image(StraightTopDarkBrown, 923, 510, 60, 60);

  image(StraightBobBlack, 923, 570, 60, 60);

  image(StraightTopBlack, 923, 570, 60, 60);

  image(StraightBobRed, 923, 630, 60, 60);

  image(StraightTopRed, 923, 630, 60, 60);

  image(StraightLongBlond, 985, 391, 43, 43);

  image(StraightTopBlond, 985, 391, 43, 43);

  image(StraightLongTopBlond, 985, 391, 43, 43);

  image(StraightLongLightBrown, 985, 451, 43, 43);

  image(StraightTopLightBrown, 985, 451, 43, 43);

  image(StraightLongTopLightBrown, 985, 451, 43, 43);

  image(StraightLongDarkBrown, 985, 511, 43, 43);

  image(StraightTopDarkBrown, 985, 511, 43, 43);

  image(StraightLongTopDarkBrown, 985, 513, 43, 43);

  image(StraightLongBlack, 985, 571, 43, 43);

  image(StraightTopBlack, 985, 571, 43, 43);

  image(StraightLongTopBlack, 985, 571, 43, 43);

  image(StraightLongRed, 985, 631, 43, 43);

  image(StraightTopRed, 985, 631, 43, 43);

  image(StraightLongTopRed, 985, 631, 43, 43);

  // Eye Colors:

  interface.color(eyeBlue);

  interface.colorDisplay(1100, 95);

  interface.color(eyeGrey);

  interface.colorDisplay(1100, 155);

  interface.color(eyeHazel);

  interface.colorDisplay(1100, 215);

  interface.color(eyeLightBrown);

  interface.colorDisplay(1100, 275);

  interface.color(eyeDarkBrown);

  interface.colorDisplay(1100, 335);

  // Eye Icons:

  interface.iconDisplay(1130, 75);

  interface.iconDisplay(1185, 75);

  interface.iconDisplay(1240, 75);

  interface.iconDisplay(1295, 75);

  interface.iconDisplay(1130, 135);

  interface.iconDisplay(1185, 135);

  interface.iconDisplay(1240, 135);

  interface.iconDisplay(1295, 135);

  interface.iconDisplay(1130, 195);

  interface.iconDisplay(1185, 195);

  interface.iconDisplay(1240, 195);

  interface.iconDisplay(1295, 195);

  interface.iconDisplay(1130, 255);

  interface.iconDisplay(1185, 255);

  interface.iconDisplay(1240, 255);

  interface.iconDisplay(1295, 255);

  interface.iconDisplay(1130, 315);

  interface.iconDisplay(1185, 315);

  interface.iconDisplay(1240, 315);

  interface.iconDisplay(1295, 315);

  image(AlmondBlue, 1092, 33, 75, 75, 100, 100, 100, 100);

  image(AlmondGrey, 1092, 93, 75, 75, 100, 100, 100, 100);

  image(AlmondHazel, 1092, 153, 75, 75, 100, 100, 100, 100);

  image(AlmondLightBrown, 1092, 213, 75, 75, 100, 100, 100, 100);

  image(AlmondDarkBrown, 1092, 273, 75, 75, 100, 100, 100, 100);

  image(UpBlue, 1145, 33, 75, 75, 100, 100, 100, 100);

  image(UpGrey, 1145, 93, 75, 75, 100, 100, 100, 100);

  image(UpHazel, 1145, 153, 75, 75, 100, 100, 100, 100);

  image(UpLightBrown, 1145, 213, 75, 75, 100, 100, 100, 100);

  image(UpDarkBrown, 1145, 273, 75, 75, 100, 100, 100, 100);

  image(DownBlue, 1202, 33, 75, 75, 100, 100, 100, 100);

  image(DownGrey, 1202, 93, 75, 75, 100, 100, 100, 100);

  image(DownHazel, 1202, 153, 75, 75, 100, 100, 100, 100);

  image(DownLightBrown, 1202, 213, 75, 75, 100, 100, 100, 100);

  image(DownDarkBrown, 1202, 273, 75, 75, 100, 100, 100, 100);

  image(RoundBlue, 1257, 33, 75, 75, 100, 100, 100, 100);

  image(RoundGrey, 1257, 93, 75, 75, 100, 100, 100, 100);

  image(RoundHazel, 1257, 153, 75, 75, 100, 100, 100, 100);

  image(RoundLightBrown, 1257, 213, 75, 75, 100, 100, 100, 100);

  image(RoundDarkBrown, 1257, 273, 75, 75, 100, 100, 100, 100);

  // Clothes

  interface.color(bgCream);

  interface.colorDisplay(1100, 415);

  interface.color('#AF2D3F');

  interface.colorDisplay(1100, 475);

  interface.color('#52264d');

  interface.colorDisplay(1100, 535);

  interface.color('#1F4657');

  interface.colorDisplay(1100, 595);

  interface.color('#1E1E1E');

  interface.colorDisplay(1100, 655);

  // Clothes Icons:

  interface.iconDisplay(1130, 395);

  interface.iconDisplay(1185, 395);

  interface.iconDisplay(1240, 395);

  interface.iconDisplay(1295, 395);

  interface.iconDisplay(1350, 395);

  interface.iconDisplay(1130, 455);

  interface.iconDisplay(1185, 455);

  interface.iconDisplay(1240, 455);

  interface.iconDisplay(1295, 455);

  interface.iconDisplay(1350, 455);

  interface.iconDisplay(1130, 515);

  interface.iconDisplay(1185, 515);

  interface.iconDisplay(1240, 515);

  interface.iconDisplay(1295, 515);

  interface.iconDisplay(1350, 515);

  interface.iconDisplay(1130, 575);

  interface.iconDisplay(1185, 575);

  interface.iconDisplay(1240, 575);

  interface.iconDisplay(1295, 575);

  interface.iconDisplay(1350, 575);

  interface.iconDisplay(1130, 635);

  interface.iconDisplay(1185, 635);

  interface.iconDisplay(1240, 635);

  interface.iconDisplay(1295, 635);

  interface.iconDisplay(1350, 635);

  image(TankCream, 1120, 375, 60, 60);

  image(TankStripes, 1120, 435, 60, 60);

  image(TankFloral, 1120, 495, 60, 60);

  image(TankPolka, 1120, 555, 60, 60);

  image(TankBlack, 1120, 615, 60, 60);

  image(TeeCream, 1182, 390, 45, 45);

  image(TeeStripes, 1182, 450, 45, 45);

  image(TeeFloral, 1182, 510, 45, 45);

  image(TeePolka, 1182, 570, 45, 45);

  image(TeeBlack, 1182, 630, 45, 45);

  image(ShirtCream, 1238, 390, 45, 45);

  image(ShirtStripes, 1238, 450, 45, 45);

  image(ShirtFloral, 1238, 510, 45, 45);

  image(ShirtPolka, 1238, 570, 45, 45);

  image(ShirtBlack, 1238, 630, 45, 45);

  image(TurtleCream, 1292, 390, 45, 45);

  image(TurtleStripes, 1292, 450, 45, 45);

  image(TurtleFloral, 1292, 510, 45, 45);

  image(TurtlePolka, 1292, 570, 45, 45);

  image(TurtleBlack, 1292, 630, 45, 45);

  image(HoodieCream, 1347, 390, 45, 45);

  image(HoodieStripes, 1347, 450, 45, 45);

  image(HoodieFloral, 1347, 510, 45, 45);

  image(HoodiePolka, 1347, 570, 45, 45);

  image(HoodieBlack, 1347, 630, 45, 45);

  noLoop();

}

​

function mouseClicked() {

  // loop();

  // Changes background color:

  // change.bg();

  change.hairbottom();

  change.skin();

  change.nose();

  change.mouth();

  change.eye();

  change.clothes();

  change.hairtop();

  // noLoop();

​

}

​

function keyTyped() {

  if (key === 'c') {

    loop();

  } 

}