KeyPressed BACKSPACE and delete just one shape - processing

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);
}
}
}

Answer 2

If you want to be able to change what's been drawn to the screen, you're going to have to take this approach:
Step 1: Store everything you need to draw to the screen in a data structure. For you, this might be an ArrayList that holds instances of a Circle class that you create.
Step 2: Every single time draw() is called, clear the previous frames by calling the background() function, and then draw everything in the data structure to the screen.
Step 3: To modify what's on the screen, just modify what's in the data structure. For you, you might remove the Circle in the last position of the ArrayList.