Random Character Template

//initialize a variable as an empty array

var backgrounds = [];

var bodies = [];

var clothes = [];

var hair = [];

var mouth = [];

​

var imageW = 510;

var imageH = 510;

​

//2- Preload the image

//store the images in the array at positions 0, 1, 2

function preload() {

  backgrounds[0] = loadImage("bgA.png");

  backgrounds[1] = loadImage("bgB.png");

  backgrounds[2] = loadImage("bgC.png");

  backgrounds[3] = loadImage("bgD.png");

  backgrounds[4] = loadImage("bgE.png");

  //push adds the element at the end 

  //it's the same as above

  bodies.push(loadImage("black.png"));

  bodies.push(loadImage("brown.png"));

  bodies.push(loadImage("white.png"));

​

  //since the files have ordered names I can load them in a loop

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

    //my hair files go from h1.png to h16.png

    //adding string means concatenating them

    //hair name start from 1 (for some reason)

    //but the array HAS to start from 0!

    hair[i-1] = loadImage("h" + i + ".png");

  }

​

  //I have have another group of hair named hw0.png - hw15.png 

  for (let i = 0; i <= 15; i++) {

    //adding at the end of the previous array

    hair.push(loadImage("hw" + i + ".png"));

  }

​

  //the clothes have yet another naming convention

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

    clothes.push(loadImage("c" + i + "A.png"));

    clothes.push(loadImage("c" + i + "B.png"));

    clothes.push(loadImage("c" + i + "C.png"));

    clothes.push(loadImage("c" + i + "D.png"));

  }

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

    mouth.push(loadImage("mouth" + i + ".png"));

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  imageMode(CENTER);

  mousePressed();

}

​

function mousePressed() {

  background(255, 255, 255);

​

  let bg = random(backgrounds);

  image(bg, width / 2, height / 2);

  //random(array) is equivalent to this

  let bodyIndex = floor(random(0, bodies.length));

  let body = bodies[bodyIndex];

  image(body, width / 2, height / 2);

  let clothing = random(clothes);

  image(clothing, width / 2, height / 2);

​

  let randomHair = random(hair);

  image(randomHair, width / 2, height / 2);

  let randomMouth = random(mouth);

  image(randomMouth, width / 2, height / 2);

}

}