Problem with char coordinates

Processing Coding Questions
1

Hello everybody,

I would like to select the same chars in a String and to give each char the same coordinate…
Here is my attempt below. I can only move the last char, why ?! Thanks alot in advance for your help.
Best,
L

PFont f;
String message="press the mouse to shake it\nand dance!";
String alphabet="abcdefghijklmnopqrstuvwxyz,;:.!\n";
Letter[]letters;
int x=10;
int y=10;


void setup() {
  size(600, 400);
  f = createFont("Arial", 20, true);
  textFont(f);
  letters = new Letter[message.length()];
  for (int i =0; i < message.length(); i++) {  
    letters[i]= new Letter(x+50, y*10, message.charAt(i), random(10, 30));   
    x +=textWidth(message.charAt(i))+5;
    String s=str(message.charAt(i));
    if (s.equals("\n")) {
      x=10;
      y +=5;
    }
  }
}


void draw() {
  background(255);
  smooth();

  for (int i =0; i < message.length(); i++) {
    
   String st=str(message.charAt(i)).toUpperCase();
   char upperCaseChar= st.charAt(0);
   int index = alphabet.indexOf(upperCaseChar);

    if (index < 0) continue;
    float m = map(mouseX, 50, width-100, 0, 1);
    m=constrain(m, 0, 1);
    float sortY =+100;
    float interY=lerp(y, sortY, m);
  letters[i]= new Letter(x+50, interY, message.charAt(i), 30);
    x = int(textWidth(message.charAt(i))*10);
  }

  // text(message,10,10);
 
    for (int i=0; i < letters.length; i++) {    
      letters[i].display();
      line(letters[i].x, letters[i].y, letters[i].x+10, letters[i].y+10);
      if (mousePressed) {
        letters[i].shake();
      } else {
        letters[i].home();     
    }
  }
}

class Letter {
  
  char letter;
  float homex, homey;
  float x, y;
float sizeText;
  
  Letter(float _x, float _y, char letter_, float sizeText_) {
    homex=x=_x;
    homey=y=_y;
    letter=letter_;   
    sizeText= sizeText_;
   
  }
  
  void display() {
    fill(0);
    textAlign(LEFT);
    textSize(sizeText);
    text(letter, x,y);  
  }
  
  void shake () {
    x+=random(-2,+2);
    y+= random(-2, 2);
  }
  
  void home() {
    x=homex;
    y=homey;
    
  }
  
}
2

Sounds like some debugging is in your future!

Here’s a guide on debugging Processing:

But basically, you need to trace through your code and narrow the problem down to a single line that’s behaving differently from what you expected. The println() function is very handy for this.

For example, try printing out the value of upperCaseChar and index after you calculate them:

println(upperCaseChar);
println(index);

What value do you expect to print out? What prints out instead?

If you’re still stuck, try to create a smaller example that uses hard-coded values to test things out. Good luck!

1 Like
3

Dear Kevin,
Thanks a lot for your help. Yes I was a bit lazy not using our beloved friend ‘Println’
now that I did it thanks to your advice I undrestood that I didn’t get the right index values…
Then I found out that since I turn the char to upperCaseChar, my reference text (alphabet) needed to be in
upper Case too. Now what I’d like to achieve is to draw curveVertex between the letters… Could you please guide me how to proceed?! Thanks a lot in advance. Best, L

PFont f;
String message="press the mouse to shake it\nand dance!";
String alphabet="ABCDEFGHIJKLMNOPQRSTUVWXYZ,.;:!?\n ";
Letter[]letters;
int x, y;
float letterSize;

void setup() {
  size(600, 400);
  f = createFont("Arial", 20, true);
  textFont(f);

  //translate(0, 200);
  letters = new Letter[message.length()];
  for (int i =0; i < message.length(); i++) {  
    letters[i]= new Letter(x+50, 200+y*10, message.charAt(i), random(20, 30));   
    x +=textWidth(message.charAt(i))+5;
    String s=str(message.charAt(i));
    if (s.equals("\n")) {
      x=10;
      y +=5;
    }
  }
}

void draw() {
  background(255);
  smooth();
  x=20;
  y=40;

  for (int i =0; i < message.length(); i++) {   
    String st=str(message.charAt(i)).toUpperCase();
    char upperCaseChar= st.charAt(0);
    int index = alphabet.indexOf(upperCaseChar);
    // println(upperCaseChar);
    //println(index);
    //if (index < 0) continue;

    float m = map(mouseX, 50, width-100, 0, 1);
    m=constrain(m, 0, 1);
    float sortY =index*20+40;
    float interY=lerp(y, sortY, m);
    letters[i].y=+interY;
    if (st.equals("\n")) {
      x=20;
     y +=25;
    }
    line(letters[i].x, letters[i].y, letters[i].x, letters[i].y+interY);
  }


  for (int i=0; i < letters.length; i++) {    
    letters[i].display();

    if (mousePressed) {
      letters[i].shake();
    } else {
      letters[i].home();
    }
  }
}

class Letter {

  char letter;
  float homex, homey;
  float x, y;
  float sizeText;

  Letter(float _x, float _y, char letter_, float sizeText_) {
    homex=x=_x;
    homey=y=_y;
    letter=letter_;   
    sizeText= sizeText_;
  }

  void display() {
    fill(0);
    textAlign(LEFT);
    textSize(sizeText);
    text(letter, x, y);
  }

  void shake () {
    x+=random(-2, +2);
    y+= random(-2, 2);
  }

  void home() {
    x=homex;
    y=homey;
  }

}

4

You’ll have better luck if you start with a smaller example. Can you create a simple sketch that draws a curve from one hard-coded point to another?

If you’re still stuck, I recommend posting the small example in a new post, that way people know you have a new question. Good luck!