let text_array, len_array;

let box_obj, box_x, box_y, box_w, box_h, txt_stroke, txt_size;

​

​

function setup () {

  createCanvas(1500, 500);

  background(200);

  text_array = [];

  // clear text box

  clear_button = createButton('clear textbox');

  clear_button.position(width/30, height/4);

  clear_button.mousePressed(empty_array);

  clear_button.style('font-size', '18px');

  clear_button.style('background-color', 255);

}

​

function draw () {

  background(244, 194, 194);

  textSize(20);

  fill(255);

  let msg = "CLICK ANYWHERE ON THE TEXTBOX AND START TYPING";

  text(msg, width/30, height/2.5);

  box_x = 50;

  box_y = height/2;

  box_h = 100;

  txt_stroke = 7;

  txt_size = 45;

  box_obj = text_box(box_x, box_y, box_h, txt_stroke, text_array, txt_size);

}

​

function text_box (x, y, h, stroke, txt, size) {

    box_w = textWidth(join(txt, "")) + 30;  // width of the rectangle changes

    // box

    strokeWeight(stroke);

    fill(255);

    rect(x, y, box_w, h);

    // text

    fill(0);

    textSize(size);

    text(join(txt, ""), x + stroke, y + size);

    noFill();

    rect(x, y, box_w, h);

  }

​

function keyPressed () {

  len_array = text_array.length;

  if (key == "Backspace") {

    text_array.pop();

  }

​

  else {

    if (key != "Shift" && key != "Enter" && key != "CapsLock" && key != "Control" && key != "Meta" && key != "Alt") {

      text_array[len_array] = key;

    }

  }

  if (len_array > (width * 2)) {

    text_array.splice(0, 1);

  }

}

​

function empty_array () {

  text_array = [];

}

​

​

​