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 !

In the future, please provide a [mcve]. Your question has nothing to do with ControlP5, so all of that code is just extra. — Kevin Workman, Jun 02 '16 at 13:03

score 0 · Answer 1 · answered Jun 02 '16 at 13:03

0

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.

answered Jun 02 '16 at 13:03

Kevin Workman

41,537
9
68
107

First of all thanks for the answer Kevin. For the Step 1, you tell me to create a Circle class, you mean to create a variable INT or...? Step 2, I call the void draw just one time, you mean everytime I call an If to call the "else background" too? I apologize in advance but I'm just not very practical with the program and I don't understand very well , speaking in " code " what should I write on the program for have that you say? – Carol Jun 02 '16 at 13:34
@Carol My suggestion of a `Circle` class was just an example. Looking at your code now, you might be better off using the existing `PShape` class, which you can read about in [the reference](https://www.processing.org/reference/PShape.html). And **you** don't call the `draw()` function at all, Processing automatically calls it for you 60 times per second. I suggest trying something out and posting another question (in a new post) if you get stuck. – Kevin Workman Jun 02 '16 at 13:36
Ok, I'll try it! Thank you very much again. – Carol Jun 02 '16 at 13:37

score 0 · Accepted Answer · answered Jun 02 '16 at 22:28

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

Wow this is the code that I need ! Really thank you a lot, you clear all my doubts! Again, thank you very much. — Carol, Jun 03 '16 at 18:20
Glad it helps. Bare in mind that repeating letters will redraw the shape (e.g. type "bobo" in the text field to see what I mean). This is something you may or may not want in your program — George Profenza, Jun 03 '16 at 18:53

KeyPressed BACKSPACE and delete just one shape

2 Answers2