​

function setup() {

  createCanvas(500, 400);

​

  slider = createSlider(0, 11, 1, 1);

  slider.position(80, 60);

  slider.style('width', '320px')

​

  txt = createElement("h3", "Number of Maxines");

  txt.position(150, 20);

​

  textAlign(CENTER);

  textSize(70);

}

​

function draw() {

  background(170, 200, 80);

  let val = int(slider.value());

  scale(0.3)

  translate(-40,400)

​

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

    avatar(50 + (i * 165), height / 4);

  }

}

​

function avatar(x, y) {

  //ponytail

  fill(60, 30, 20);

  rect(x-6, y, 130, 200, 20, 15, 10, 5);

  arc(x+59, y+30, 130, 160, PI, TWO_PI);

​

  //head and neck

  noStroke();

  fill(400, 210, 180);

  rect(x+68, y+200, 44, 90);

  rect(x+18, y+6, 140, 200, 90);

​

  //body

  fill(0, 80, 50);

  rect(x+13, y+250, 153, 90, 40, 50);

​

  //mouth

  stroke(250, 100, 100);

  fill(230, 60, 100);

  strokeWeight(4);

  arc(x+96, y+154, 50, 50, 0, PI);

​

  //eyes

  stroke(0, 0, 0);

  noFill();

  arc(x+124, y+97, 35, 45, PI, TWO_PI);

  arc(x+65, y+97, 35, 45, PI, TWO_PI);

​

  //nose

  noStroke();

  fill(400, 150, 140, 150);

  rect(x+90, y+113, 13, 25);

​

  //hair

  noStroke();

  fill(80, 40, 40);

  arc(x+88, y+55, 150, 110, PI, TWO_PI);

}

​