let names = [];

let drawShape = false;

​

function setup() {

  createCanvas(400, 400);

  nameInput = select('.name');

  nameInput.changed(getName);

  frameRate(10);

  textSize(32);

  background(220);

}

​

function draw() {

  for(let i = 0; i < names.length; i = i + 1) {

    text(names[i],random(width),random(height));

  }

  if(drawShape == true) {

    rect(0,0,100,100);

  }

}

​

function getName() {

  names.push(nameInput.value());

  if(nameInput.value() == "red") {

    fill(244,42,7);

  }

  if(nameInput.value() == "blue") {

    fill(7,19,244);

  }

  if(nameInput.value() == "orange") {

    fill(244,141,7);

  }

  if(nameInput.value() == "yellow") {

    fill(255,255,28);

  }

  if(nameInput.value() == "green") {

    fill(30,224,26);

  }

  if(nameInput.value() == "purple") {

    fill(165,30,219);

  }

  if(nameInput.value() == "pink") {

    fill(255,198,228);

  }

  nameInput.value("");

}