KeyPressed BACKSPACE and delete just one shape

Question

I've create a code for a "generative" logo {Like this http://ebologna.it/ } (it's at the start so is not complete), and I want that while pressing one time the BACKSPACE I can go back just for one shape. Now like I have my code, when I press Backspace it delete all.

Below is the code:

import controlP5.*;

ControlP5 cp5;

String textValue = "";
String val;

void setup() {
   size(700,800);

  PFont font = createFont("arial",20);

  cp5 = new ControlP5(this);

  cp5.addTextfield("INPUT")
     .setPosition(width/2-100,600)
     .setSize(200,40)
     .setFont(font)
     .setFocus(true)
     .setColor(color(255,255,255))

     ;

  textFont(font);
  background(0);
  noStroke();
}
void draw() {


  if (keyPressed) {

    if (key == 'o' || key == 'O') {
      fill(205, 152, 59, 100);
      ellipse(width/2, height/2, 50, 50);
    } 

      if (key == 'b' || key == 'B') {
        fill(20, 84, 42, 100);
        rectMode(CENTER);
        rect(width/2, height/2, 50, 50);
      }
    } 
    if (key == BACKSPACE) {    //This reset all, I want to reset just the last one shape
  background (0);
}

val = cp5.get(Textfield.class,"INPUT").getText();
 println(val.length());

}

Thanks !

Answer 1

Another option is to use a for loop to go through each character of the text String and draw the corresponding shape.

A for loop may look complicated because of it's syntax but it's not too bad if you look at it as a way of repeating a set of instructions for a given number of times/steps. The syntax roughly like so:

for( intial step ; condition to stop ; incrementation ){
//something to repeat while the condition to stop is still false
}

think of walking 10 steps, one step a time:

for(int step = 0 ; step < 10 ; step = step+1){
   println("step index: " + i); 
}

If you can do one step at a time, you can also hop:

for(int step = 0 ; step < 10 ; step = step+2){
       println("step index: " + i); 
    }

Going back to your challenge, you can use a for loop to go through each character of the text. For example:

String text = "go";
for(int letterIndex = 0 ; letterIndex < text.length(); letterIndex = letterIndex + 1){
    //get the character
    char letter = text.charAt(letterIndex);
    println(letter);
}

The snippet above uses String's length() function to retrieve the number of characters and the charAt() to retrieve a character by it's index in the String

Applied to your code:

import controlP5.*;

ControlP5 cp5;



void setup() {
   size(700,800);

  PFont font = createFont("arial",20);

  cp5 = new ControlP5(this);

  cp5.addTextfield("INPUT")
     .setPosition(width/2-100,600)
     .setSize(200,40)
     .setFont(font)
     .setFocus(true)
     .setColor(color(255,255,255));

  textFont(font);
  background(0);
  noStroke();
}
void draw() {
  background (0);
  //get the text string
  String text = cp5.get(Textfield.class,"INPUT").getText();
  //loop through each character
  for(int letterIndex = 0 ; letterIndex < text.length(); letterIndex = letterIndex + 1){
    //get the character
    char letter = text.charAt(letterIndex);
    //draw the coresponding shape
    if (letter == 'o' || letter == 'O') {
      fill(205, 152, 59, 100);
      ellipse(width/2, height/2, 50, 50);
    } 
    if (letter == 'b' || letter == 'B') {
      fill(20, 84, 42, 100);
      rectMode(CENTER);
      rect(width/2, height/2, 50, 50);
    } 
  }
}