let names = [];

let drawShape = false;

p = 0;

let drawShapetwo = false;

​

function setup() {

  createCanvas(400, 400);

  nameInput = select('.name');

  nameInput.changed(getName);

  frameRate(10);

  textSize(32);

  background(220);

}

​

function draw() {

  background(220);

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

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

  }

  if (drawShapetwo== true) {

    ellipse(width / 2, height / 2, random(110, 120), random(110, 120));

    point(width / 2 - 18, height / 2, 25, 25);

    point(width / 2 + 18, height / 2, 25, 25);

    arc(width / 2, height / 2 + 5, 17, 17, 0, p, OPEN);

    p = p + PI;

    if (p >= p + PI) {

      p = p + PI;

    }

    strokeWeight(5);

    fill(99, 160, 212);

  }

  if (drawShape == false) {

    ellipse(width / 2, height / 2, random(110, 120), random(110, 120));

    point(width / 2 - 18, height / 2, 25, 25);

    point(width / 2 + 18, height / 2, 25, 25);

    line(width / 2+7, height / 2+10, width/2-7, height/2+10);

    strokeWeight(5);

  } 

   if (drawShape == true) {

    ellipse(width / 2, height / 2, random(110, 120), random(110, 120));

    point(width / 2 - 18, height / 2, 25, 25);

    point(width / 2 + 18, height / 2, 25, 25);

    arc(width / 2, height / 2 + 5, 17, 17, 0, PI, OPEN);

    strokeWeight(5);

    fill(255, 255, 113);

  } 

}

​

function getName() {

  names.push(nameInput.value());

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

    drawShape = true;

    //background(255, 255, 113, 50);

  }

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

    drawShapetwo = true;

    //background(255, 255, 113, 50);

  }

  nameInput.value("");

}