Taking user input

eefilp

Greetings!

I'm new to p5.js and I'm bringing some of my Processing sketches to p5.js as most modern browsers dropped the Applet support, but I'm having some trouble with this one, which is sort of a char to string operation:

var input;

function setup() {
  createCanvas(1000,600);
  background(100);
  input = "";
}

function draw() {
  print(input);
}

function keyPressed() {
  if ( key >= 'A' && key <= 'Z' || key >= 'a' && key <= 'z' ) {
  input+=char(key);
  if ( abs( int( input ) ) > 100 ) {
    input = input.substring(  0, input.length()-1 );
  }
} else if ( key == BACKSPACE && input.length() > 0 ) {
  input = input.substring(  0, input.length()-1 );
}
}

What my original sketch would do is to get each key pressed and translate it to a string, but when I print the string, all I get is 'undefined' instead of the character:

undefined p5.js:12486:7 undefinedundefined p5.js:12486:7 undefinedundefinedundefined p5.js:12486:7 undefinedundefinedundefinedundefined p5.js:12486:7 undefinedundefinedundefinedundefinedundefined p5.js:12486:7 (and so on)

So I'm not really sure what's going on, as the BACKSPACE key doesn't work as well, but I guess that's how p5.js handles the key input?

blindfish

All I can suggest is check the p5js reference for any differences in method output; and when in doubt check values being returned by built-in methods (oh - and don't use print() in draw()!):

var input = "";

function setup() {
  createCanvas(100,100);
}

function draw() {

}

function keyPressed() {
    print(key);
    print(char(key));
    print(keyCode);
    print(char(keyCode));      
} 

eefilp

I followed your advice and got some insights looking at the references, thanks. I managed to re-do it in another fashion but still I have one issue. First, the code:

var inputString;
var inputLen;

function setup() {
  createCanvas(100,100);
  inputString = "";
}

function draw() {
  inputLen = inputString.length;
}

function keyTyped() {
  if ( key >= 'A' && key <= 'Z' || key >= 'a' && key <= 'z' ) {
    inputString += str(key);
  }
  else if ( keyCode == BACKSPACE && inputLen > 0 ) {
    inputString = inputString.substring(  0, inputLen-1);
  }
  print(inputString);
  print(inputLen);
}

so far it's working properly except when I use the BACKSPACE to delete the last character: it does in fact delete the last character, but it seems it also adds a invisible character to the string

a p5.js:12486:7
0 p5.js:12486:7
ab p5.js:12486:7
1 p5.js:12486:7
abc p5.js:12486:7
2 p5.js:12486:7

--HERE I TYPE BACKSPACE--

ab p5.js:12486:7
3 p5.js:12486:7 <<see how the input length expands?
a p5.js:12486:7
2 p5.js:12486:7 <<then it proceeds to shorten like it should have done first
 p5.js:12486:7
1 p5.js:12486:7
 p5.js:12486:7
0

any ideas?

edit: the BACKSPACE issue also happens if I type anything outside the range of A-Z or a-z. i. e. if I hit the key ENTER, for the first time, the string length would go up one value and nothing new would show up at the string print, but if I hit the key again, nothing happens, but then if I hit any key in that range, 'c', for instance, the length would go up and the letter c would show up in the string, but again, If I hit the ENTER key or backspace, string length expands and no new character in the string appears. I really have no idea what's going on, maybe the conditional?

GoToLoop

http://p5js.org/reference/#/p5/createInput

eefilp

GoToLoop, I'm well aware of this element but I'm not looking for a text box. Further in my sketch I would call a object for each letter in the string and I won't use this kind of functionality in it, as I won't show the original string, so no text box. Perhaps there's something I can work out from your suggestion but I didn't notice?

Thanks

blindfish

How are you testing this? There's one MAJOR problem with using backspace in a browser environment: it's tied by default to the browser's back behaviour... When I test your code (in a browser) backspace does what I expect: throws me a step back in the history. I'm guessing you're testing in the p5 editor and the behaviour you see may be a symptom of using that.

If you want to enable the use of backspace then @GoToLoop's suggestion is sensible: a text field is the one place where it will behave the way you want. Otherwise use a different key - like minus:

var inputString;
var inputLen;

function setup() {
  createCanvas(100,100);
  inputString = "";
}

function draw() {

}

function keyTyped() {

  if ( key >= 'A' && key <= 'Z' || key >= 'a' && key <= 'z' ) {
    inputString += str(key);
  }
  // note that a String  in JS has a length property
  // so you don't need to track this manually...
  // and definitely not in draw()!!!
  else if ( inputString.length > 0 && keyCode == 45) {
    inputString = inputString.slice(0, -1);
  }
  print(inputString);
}

eefilp

Wonderful! The issue was using substring instead of slice, it seems, thanks And very good point about the backspace, I didn't notice it before as there was no previous webpage in my browser tab, thanks for the hint as well. :)

blindfish

The issue was using substring instead of slice

Definitely not: substring is fine; but slice doesn't require a variable reference.

If you look at all your length outputs they are all one step behind the execution of keyTyped - e.g.:

a p5.js:12486:7
0 p5.js:12486:7 << length 0???

That's hardly surprising as you updated your unnecessary inputLen variable in draw() after keyTyped() had completed ;)

eefilp

Hah, makes much more sense now. I'll be careful on how Javascript runs the code differently than Java.