var input2;

var input3;

​

var button1;

​

function setup() {

  createCanvas(480, 480);

  textAlign(CENTER);

  textSize(20);

  input1 = createInput();

  input1.style('color', '#0000ff'); //input 1 is blue

  input1.size(12, 15);

  input1.position(174, 5);

  input2 = createInput();

  input2.style('color', '#ff0000'); //input 2 is red

  input2.size(12, 15);

  input2.position(110, 5);

  input3 = createInput();

  input3.style('color', '#00ff00'); //input 3 is green

  input3.size(12, 15);

  input3.position(235, 5);

  button1 = createButton("submit");

  button1.position(20, 80);

  button1.mousePressed(drawName);

  makeText();

}

​

function drawName() {

  background(0);

  let lt = Number(input1.value());

  let st = Number(input2.value());

  let tt = Number(input3.value());

  translate(75, 120);

  for (let i = st; i < lt; i = i + tt) {

    fill(255);

    ellipse((30 * i), (30 * i), 40, 40);

    fill(0);

    text(i, (30 * i), (30 * i) + 5)

  }

  translate(-75, -120);

  makeText();

}

​

function makeText() {

  noStroke();

  fill(255);

  text("for (let x = 0; x < ", 100, 20);

  text("; x+=    ) {", 232, 20);

  text("ellipse((30 * i), (30 * i), 40, 40);", 180, 45);

  text("}", 35, 65);

​

}