How can I write text without the letters overlapping?

rita_isabel

I want to write using the normal letters of the keyboard, but instead of letters I want images. I know how to associate a letter to an image. But for now, I want to know how can I write without the letters stay overlapping. This is what I have so far. Please help me!

int rectWidth;
//int segundos = 30;
//int frate = 50;
//int cont = 2;

void setup() {
  size(640, 360);
  noStroke();
  background(#FFFFFF);
  rectWidth = width/4;
}

void draw() { 
  // keep draw() here to continue looping while waiting for keys
  // save("imagem"+cont+".jpg");
  //   cont++;
}

void keyPressed() {
  int keyIndex = -1;
  if (key >= 'A' && key <= 'Z') {
    keyIndex = key - 'A';
  } else if (key >= 'a' && key <= 'z') {
    keyIndex = key - 'a';
  }
  if (keyIndex == -1) {
    // If it's not a letter key, clear the screen
    background(#FFFFFF);
  } else { 
      fill(#000000);
  textSize(160);
  text(key, random(550), 240);
  print (key);

  }
}

jeremydouglass

This is what I have so far.

Did you mean to show your code? Please edit your post, paste in your code, highlight the code and press CTRL+o to indent. This will help forum members read it, run it, and give feedback.

https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text#latest

rita_isabel

I was asking how can I create a code using processing to type/write normally, because what I have right now, just allowed me to type/write, but the with the letters overlapping.

koogs

yes, but you had to format your code so we could read it before we could see what you were doing.

this is the bit displaying the letters

  text(key, random(550), 240);

so you are printing the new character at a random position on line 240. to stop this you have to control the x position. maybe start at 0 and move to the right with each letter...

rita_isabel

Can you explain me how to control the x position, please?

jeremydouglass

1. Read the tutorial "Coordinate Systems and Shapes" to understand x and y:
   https://processing.org/tutorials/drawing/
2. Look at the reference page for text() to see how the x argument is defined:
   https://processing.org/reference/text_.html
3. Look at the 2d Array example for an advanced example of many different dots, each drawn at a different x/y location. Instead of dots, they could be images, or letters. https://processing.org/examples/array2d.html

rita_isabel

But if I take the random it's impossible to write This is what happen with the code that I have.

jeremydouglass

Try these:

Show text at a random x:

text(key, random(550), 240);

Show text at x=100: (same place every time)

text(key, 100, 240);

Show text based at an x based on what second it currently is (0-59):

text(key, second()*10, 240);

...did you try them?

Okay, now: @koogs is suggesting that you instead do something like this:

text(key, x, 240);

...but now you need to define x as a variable somewhere before using it, and every time you press a key, you need to increase x by some amount -- e.g. x=x+10; -- like a cursor moving forward.

rita_isabel

Now, the letters just stay overlapping in the same place :s

jeremydouglass

Re-read the end of my answer.

koogs

depending on the size of the letters 10 pixels might not be enough. try a bigger value.

best of all would be to modify the increment based on the width of the new letter... (using textWidth())