Assignment 5: Generative Text Output

Concept

For this assignment, I decided to develop a simple generative text output program through a textbox. this textbox takes user input and displays them and has the following functionalities:

1. User can use any language keyboard to enter text
2. User input is stored letter by letter (except action keys e.g. Shift, Backspace, Enter, etc. which is stored as one keystroke/one word)
3. User can enter capital letter words by pressing Shift + letter or by activating Caps Lock
4. User can delete their input letter by letter using Backspace
5. User can clear the whole text box using the <<clear textbox>> button

Code highlight

For the implementation of the textbox, I decided to not use any input functions and make it a bit more interesting. I’m using the function KeyPressed()  to store any key pressed by the user. The reason I picked KeyPressed() was that, unlike other functions such as KeyTyped() and KeyCode(), it recognizes the action keys such as Shift, Backspace, Control, Enter, Alt, etc.  These action keys are useful for implementing features such as erasing, moving to the next line, typing capital letters, etc. In this program, only the erasing and capitalizing are implemented.

// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
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 = [];
}

// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

 

Embedded sketch:

Reflection and ideas for future work or improvements:

This simple textbox is the foundation for a simple browser text editor. Some natural next steps for improving the above textbox program would be:

1. Implementing a blinking cursor (like in the text editors)
2. Implementing the cursor’s move to the next line (using Return/Enter action key)
3. Implementing a feature where pressing and holding down a key would continuously add that key to the textbox (with the help of keyReleased())
4. Implementing features to modify the text’s font, size, and style from within the editor itself.