P5 any? object here?

wjsandbe

I don't necessarily need code help, I need help working out the logic. I have made a keyboard that is triggered via mouseClicked. Each key of the keyboard is visualized by a rectangle. When a rectangle is clicked the corresponding letter is drawn. The problem is I can't figure out how to have the letters move over if there is already a letter present. For example if I click the a, the letter "a" shows up on my screen, if I go ahead and click the "s" key next the letter "s" will appear on the screen, but it will be drawn directly on top of the previous letter drawn, the "a". I am wondering how do I code the drawing so that it recognizes when a letter is already drawn and then moves the next letter over?

    var v1 = 0;
    var v2 = 0; 
    var lp = 0;
    var mod = 0;
    var colourq = 200;
    var wcolour = 200;


    function setup() {
      createCanvas(600, 600);

    function draw() {
      background(0);
    lp = width/12 * 5 + (mod * 5)


    if(v1 > 0){
        fill(255);
    text("q", lp, height/12 * 4);
    }
    if(v2 > 0){
        fill(255);
    text("w", lp, height/12 * 4);
    }

    function mouseClicked(){
      if (mouseX < width/12 * 10 && mouseY > height - height/32 * 3){
      mod++;
    }

      if (mouseX > 0 && mouseY > height - height/32 * 3 && mouseX < 0 + width/12 && mouseY < (height - height/32 * 3) + height/32 && colourq != 100){
     v1 = 1;
     colourq = 100;}

     else { colourq = 200;}

       if (mouseX > width/12 && mouseY > height - height/32 * 3 && mouseX < width/12 * 2 && mouseY < (height - height/32 * 3) + height/32 && wcolour != 100){
     v2 = 1;
    wcolour = 100;}
else { wcolour = 200;}
    }

kfrajer

text("w", lp, height/12 * 4);

Instead of doing that, you could have a String keeping track of all input letters, then you output your String:

var inputData="";  //Global scope


text(inputData, lp, height/12 * 4);

Then any mouseClicked on a letter will concatenate the letter to your inputData. This way, you don't need to keep track of letter spacing and letter positions.

Kf

wjsandbe

Sorry I don't quite follow you. How does inputData designate which letter to draw?