//variable for slider.

let numFaces = 40;

let name;

​

function setup() {

  createCanvas(600, 600);

  //New pattern button.

  var patternButton = createButton('New Pattern');

  patternButton.mousePressed(pattern);

  patternButton.style('color', 'lightblue');

  //Save pattern button.

  function savePattern(){

    save(name.value() + '-pattern');

  }

  var saveButton = createButton('Save Pattern');

  saveButton.mousePressed(savePattern);

  saveButton.style('color', 'lightblue');

  //slider

  var slider = createSlider(10, 80, 40);

  function updateNumFaces() {

    numFaces = slider.value();

    pattern();

  }

  slider.input(updateNumFaces);

  //input name

  name = createInput('name your pattern');

  name.style('color', 'lightblue');

  pattern();

}

​

​

​

function face(x) {

  //color

  let r = random(50);

  let g = random(60, 255);

  let b = random(255);

  //size

  let s = random(10, 65);

  let sizeEyes = random(15, 23)

  //position

  let y = random(height);

  //

  //body.

  fill(r, g, b);

  square(x, y, s);

  //head.

  fill(r, g, b);

  ellipse(x, y, s);

  //eyes.

  fill('white');

  ellipse(x - 12, y - 15, sizeEyes);

  ellipse(x + 12, y - 15, sizeEyes);

  fill(1);

  ellipse(x - 12, y - 15, 8);

  ellipse(x + 12, y - 15, 8);

  //mouth.

  fill(1);

  ellipse(x, y + 10, 20);

  //text.

  fill('#7FFF00')

  textAlign(CENTER);

  textSize(50);

  text(name.value(), width / 2, height / 2);

}

​

function pattern() {

  background(1);

  for (let x = 0; x <= width; x += numFaces) {

    face(x);

  }

}

​

​