let bangsChoice = 0;

let brows = [];

let browsChoice = 0;

let eyes = [];

let eyesChoice = 0;

let hair = [];

let hairChoice = 0;

let nose = [];

let noseChoice = 0;

let mouth = [];

let mouthChoice = 0;

let clothes = [];

let clothesChoice = 0;

let effects = [];

let effectsChoice = 0;

let pupils = [];

let pupilsChoice = 0;

let bg = []

let bgChoice = 0;

let hairColor, pupilsColor, clothesColor, skinColor, browsColor;

​

let head, headX, headY, headScale, colorX, colorY;

let photo;

​

​

​

function setup() {

  createCanvas(windowWidth + 100 , windowHeight + 100);

  imageMode(CENTER);

  headScale = 600;

  head.resize(headScale, headScale);

  headX = width/2 + 140;

  headY = height/2 - 20;

  photo.resize(headScale, headScale);

  randomize();

  let buttonColor = color(198, 224, 245);

  colorX = 225;

  colorY = 185;

​

  //second

  let bangsBack = createButton('⇽');

  bangsBack.position(50, 150);

  bangsBack.style('background-color', buttonColor);

  bangsBack.mousePressed(function(){

    if (bangsChoice > 0) {

      bangsChoice -= 1;

    }

    else {

      bangsChoice = bangs.length - 1;

    }

  });

  let bangsFor = createButton('⇾');

  bangsFor.position(150, 150);

  bangsFor.style('background-color', buttonColor);

  bangsFor.mousePressed(function(){

    if (bangsChoice < bangs.length - 1) {

      bangsChoice += 1;

    }

    else {

      bangsChoice = 0;

    }

  });

  //third

  let browsBack = createButton('⇽');

  browsBack.position(50, 200);

  browsBack.style('background-color', buttonColor);

  browsBack.mousePressed(function(){

    if (browsChoice > 0) {

      browsChoice -= 1;

    }

    else {

      browsChoice = brows.length - 1;

    }

  });

  let browsFor = createButton('⇾');

  browsFor.position(150, 200);

  browsFor.style('background-color', buttonColor);

  browsFor.mousePressed(function(){

    if (browsChoice < brows.length - 1) {

      browsChoice += 1;

    }

    else {

      browsChoice = 0;

    }

  });

  browsColor = createColorPicker("rgb(255, 255, 255)");

  browsColor.position(colorX, colorY + 60);

  //fourth

  let eyesBack = createButton('⇽');

  eyesBack.position(50, 250);

  eyesBack.style('background-color', buttonColor);

  eyesBack.mousePressed(function(){

    if (eyesChoice > 0) {

      eyesChoice -= 1;

      pupilsChoice -= 1;

    }

    else {

      eyesChoice = eyes.length - 1;

      pupilsChoice = pupils.length -1;

    }

  });

  let eyesFor = createButton('⇾');

  eyesFor.position(150, 250);

  eyesFor.style('background-color', buttonColor);

  eyesFor.mousePressed(function(){

    if (eyesChoice < eyes.length - 1) {

      eyesChoice += 1;

      pupilsChoice += 1;

    }

    else {

      eyesChoice = 0;

      pupilsChoice = 0;

    }

  });

  pupilsColor = createColorPicker("rgb(255, 255, 255)");

  pupilsColor.position(colorX, colorY + 120);

  //first

  let hairBack = createButton('⇽');

  hairBack.position(50, 100);

  hairBack.style('background-color', buttonColor);

  hairBack.mousePressed(function(){

    if (hairChoice > 0) {

      hairChoice -= 1;

    }

    else {

      hairChoice = hair.length - 1;

    }

  });

  let hairFor = createButton('⇾');

  hairFor.position(150, 100);

  hairFor.style('background-color', buttonColor);

  hairFor.mousePressed(function(){

    if (hairChoice < hair.length - 1) {

      hairChoice += 1;

    }

    else {

      hairChoice = 0;

    }

  });

  hairColor = createColorPicker("rgb(255, 255, 255)");

  hairColor.position(colorX, colorY);

  //sixth

  let mouthBack = createButton('⇽');

  mouthBack.position(50, 350);

  mouthBack.style('background-color', buttonColor);

  mouthBack.mousePressed(function(){

    if (mouthChoice > 0) {

      mouthChoice -= 1;

    }

    else {

      mouthChoice = mouth.length - 1;

    }

  });

  let mouthFor = createButton('⇾');

  mouthFor.position(150, 350);

  mouthFor.style('background-color', buttonColor);

  mouthFor.mousePressed(function(){

    if (mouthChoice < mouth.length - 1) {

      mouthChoice += 1;

    }

    else {

      mouthChoice = 0;

    }

  });

  //fifth

  let noseBack = createButton('⇽');

  noseBack.position(50, 300);

  noseBack.style('background-color', buttonColor);

  noseBack.mousePressed(function(){

    if (noseChoice > 0) {

      noseChoice -= 1;

    }

    else {

      noseChoice = nose.length - 1;

    }

  });

  let noseFor = createButton('⇾');

  noseFor.position(150, 300);

  noseFor.style('background-color', buttonColor);

  noseFor.mousePressed(function(){

    if (noseChoice < nose.length - 1) {

      noseChoice += 1;

    }

    else {

      noseChoice = 0;

    }

    }); 

    let clothesBack = createButton('⇽');

  clothesBack.position(50, 400);

  clothesBack.style('background-color', buttonColor);

  clothesBack.mousePressed(function(){

    if (clothesChoice > 0) {

      clothesChoice -= 1;

    }

    else {

      clothesChoice = clothes.length - 1;

    }

  });

  let clothesFor = createButton('⇾');

  clothesFor.position(150, 400);

  clothesFor.style('background-color', buttonColor);

  clothesFor.mousePressed(function(){

    if (clothesChoice < clothes.length - 1) {

      clothesChoice += 1;

    }

    else {

      clothesChoice = 0;

    }

  });

  clothesColor = createColorPicker("rgb(255, 255, 255)");

  clothesColor.position(colorX, colorY + 240);

  let effectsBack = createButton('⇽');

  effectsBack.position(50, 450);

  effectsBack.style('background-color', buttonColor);

  effectsBack.mousePressed(function(){

    if (effectsChoice > 0) {

      effectsChoice -= 1;

    }

    else {

      effectsChoice = effects.length - 1;

    }

  });

  let effectsFor = createButton('⇾');

  effectsFor.position(150, 450);

  effectsFor.style('background-color', buttonColor);

  effectsFor.mousePressed(function(){

    if (effectsChoice < effects.length - 1) {

      effectsChoice += 1;

    }

    else {

      effectsChoice = 0;

    }

  });

  let bgBack = createButton('⇽');

  bgBack.position(50, 500);

  bgBack.style('background-color', buttonColor);

  bgBack.mousePressed(function(){

    if (bgChoice > 0) {

      bgChoice -= 1;

    }

    else {

      bgChoice = bg.length - 1;

    }

  });

  let bgFor = createButton('⇾');

  bgFor.position(150, 500);

  bgFor.style('background-color', buttonColor);

  bgFor.mousePressed(function(){

    if (bgChoice < bg.length - 1) {

      bgChoice += 1;

    }

    else {

      bgChoice = 0;

    }

  });

  let random = createButton('🎲');

  random.position(70, 35);

  random.style('background-color', buttonColor);

  random.mousePressed(randomize);

  let exp = createButton('💾');

  exp.position(120, 35);

  //exp.size(100, 100);

  exp.style('background-color', buttonColor);

  exp.mousePressed(ex);

  skinColor = createColorPicker("rgb(255, 255, 255)");

  skinColor.position(colorX, colorY + 180);

}

​

function preload() {

  for (let i = 1; i < 11; i++) {

    let filename = 'assets/bangs' + i + '.png';

    let bangsFile = loadImage(filename);

    bangs.push(bangsFile);

  }

  for (let i = 1; i < 7; i++) {

    let filename = 'assets/brows' + i + '.png';

    let browsFile = loadImage(filename);

    brows.push(browsFile);

  }

  for (let i = 1; i < 7; i++) {

    let filename = 'assets/eyes' + i + '.png';

    let eyesFile = loadImage(filename);

    eyes.push(eyesFile);

  }

  for (let i = 1; i < 17; i++) {

    let filename = 'assets/hair' + i + '.png';

    let hairFile = loadImage(filename);

    hair.push(hairFile);

  }

  for (let i = 1; i < 8; i++) {

    let filename = 'assets/mouth' + i + '.png';

    let mouthFile = loadImage(filename);

    mouth.push(mouthFile);

  }

  for (let i = 1; i < 7; i++) {

    let filename = 'assets/nose' + i + '.png';

    let noseFile = loadImage(filename);

    nose.push(noseFile);

  }

  for (let i = 1; i < 4; i++) {

    let filename = 'assets/clothes' + i + '.png';

    let clothesFile = loadImage(filename);

    clothes.push(clothesFile);

  }

  for (let i = 1; i < 7; i++) {

    let filename = 'assets/effect' + i + '.png';

    let effectFile = loadImage(filename);

    effects.push(effectFile);

  }

  for (let i = 1; i < 7; i++) {

    let filename = 'assets/pupils' + i + '.png';

    let pupilsFile = loadImage(filename);

    pupils.push(pupilsFile);

  }

  for (let i = 1; i < 13; i++) {

    let filename = 'assets/background' + i + '.png';

    let backgroundFile = loadImage(filename);

    bg.push(backgroundFile);

  }

  head = loadImage('assets/head.png');

  photo = loadImage('assets/polaroid.png');

}

​

function draw() {

  background(245, 198, 215);

//   fill(255);

//   noStroke();

//   rectMode(CENTER);

//   rect(headX,headY, headScale, headScale);

//   rectMode(CORNER);

  image(bg[bgChoice], headX, headY, headScale, headScale);

  tint(hairColor.color());

  image(hair[hairChoice], headX, headY, headScale, headScale); 

  tint(skinColor.color());

  image(head, headX, headY);

  tint(clothesColor.color());

  image(clothes[clothesChoice], headX, headY, headScale, headScale);

  tint(pupilsColor.color());

  image(pupils[pupilsChoice], headX, headY, headScale, headScale); 

  tint(255);

  image(eyes[eyesChoice], headX, headY, headScale, headScale);

  tint(browsColor.color());

  image(brows[browsChoice], headX, headY, headScale, headScale);

  tint(skinColor.color());

  image(nose[noseChoice], headX, headY, headScale, headScale);

  image(mouth[mouthChoice], headX, headY, headScale, headScale);

  noTint();

  image(effects[effectsChoice], headX, headY, headScale, headScale);

  tint(hairColor.color())

  image(bangs[bangsChoice], headX, headY, headScale, headScale);

  noTint();

  fill(169, 171, 170);

  image(photo, headX, headY);

  fill(235);

  strokeJoin(ROUND);

  stroke(142, 179, 209);

  strokeWeight(3);

  rect(44, 94, 139, 35.5); //hair

  rect(44, 194 - 50, 139, 35.5); //bangs

  rect(44, 294 - 100, 139, 35.5); // eyebrows

  rect(44, 394 - 150, 139, 35.5); //eyes

  rect(44, 494 - 200, 139, 35.5); //nose

  rect(44, 594 - 250, 139, 35.5); //mouth

  rect(44, 694 - 300, 139, 35.5); //clothes

  rect(44, 794 - 350, 139, 35.5); 

  rect(44, 894 - 400, 139, 35.5);

  rect(60, 27, 105, 40);

  rect(colorX - 10, colorY - 25, 70, 300);

  textX = width/2 - 300;

  textY = width/2 - 284;

  noStroke();

  fill(0);

  textSize(15)

  textFont('Tahoma')

  text('Bangs', 93, 216 - 50);

  text('Hair', 97, 116);

  text('Hair', colorX + 10, colorY - 5); //clr

  text('Eyebrows', 82, 316 - 100);

  text('Eyebrows', colorX - 6.5, colorY + 55); //clr

  text('Eyes', 95, 416 - 150);

  text('Eyes', colorX + 10, colorY + 115); //clr

  text('Skin', colorX + 10, colorY + 175); //clr

  text('Nose', 95, 516 - 200);

  text('Mouth', 93, 616 - 250);

  text('Clothes', 91, 716 - 300);

  text('Clothes', colorX, colorY + 235); //clr

  text('Extras', 92, 816 - 350);

  textSize(13);

  text('Background', 80.5, 916 - 400);

}

​

function randomize() {

​

  bangsChoice = int(random(0, bangs.length));

  browsChoice = int(random(0, brows.length));

  eyesChoice = int(random(0, eyes.length));

  pupilsChoice = eyesChoice;

  hairChoice = int(random(0, hair.length));

  noseChoice = int(random(0, nose.length));

  mouthChoice = int(random(0, mouth.length));

  effectsChoice = int(random(0, effects.length));

  clothesChoice = int(random(0, clothes.length));

​

}

​

function ex(){

  imageMode(CENTER);

  let c = get(headX - 300, headY - 310, photo.width, photo.height + 15);

  fill(245, 198, 215);

  rect(0, 0, width, height);

  image(c, width/2, height/2 - 10);

  save('Character.png');

}