Help with getting this to work?

plowrighth

Hey everyone, I've made this code.

int A;
int speed;
PFont a;  
String letters = "";
int back = 102;


void setup() {
  size(500,500);
  A = 150;
  speed = 5;
    a = createFont("OCRA",50,true);
frameRate(random(60));
}

void draw() {

  background(100,100,100);
  fill(random(0,255),random(0,255),random(0,255));
  textFont(a);

  A = A + speed;

  if(A > 125) {
    speed = -speed;
  }

  if(A < 0) {
      speed = -speed;
    }
       text(letters,A,350);

}

  void keyPressed() {
  if ((key == ENTER) || (key == RETURN)) {
    letters = letters.toLowerCase();
    println(letters);  // Print to console to see input
    if (letters.equals("black")) {
      back = 0;
    } else if (letters.equals("gray")) {
      back = 204;
    }
    letters = "";  // Clear the variable
  } else if ((key > 31) && (key != CODED)) { 
    // If the key is alphanumeric, add it to the String
    letters = letters + key; 
  }
}

I'm trying to get it to work on a website, I've start changing it but it's not work, any help?

var A;
var speed;
String letters = "";
var back = 102;


function setup() {
   var myCanvas=createCanvas(650, 450);
    myCanvas.parent('myCanvas');

  A = 150;
  speed = 5;
  textSize(100);
frameRate(random(60));
}

function draw() {

  background(100,100,100);
  fill(random(0,255),random(0,255),random(0,255));

  A = A + speed;

  if(A > 125) {
    speed = -speed;
  }

  if(A < 0) {
      speed = -speed;
    }
           textFont("OCRAStd");
       text(letters,100,225);

}

  function keyPressed() {
  if ((key == ENTER) || (key == RETURN)) {
    letters = letters.toLowerCase();
    println(letters);  // Print to console to see input
    if (letters.equals("black")) {
      back = 0;
    } else if (letters.equals("gray")) {
      back = 204;
    }
    letters = "";  // Clear the variable
  } else if ((key > 31) && (key != CODED)) { 
    // If the key is alphanumeric, add it to the String
    letters = letters + key; 
  }
}

Thanks for your time :)

koogs

What's it meant to do?

plowrighth

When you type a keyPressed function should happen so it shows the letter you pressed and then like 'glitches' it

koogs

and what does it do currently? what is wrong with it?

plowrighth

Nothing loads up on the webpage..

Lord_of_the_Galaxy

Check if your html code is proper.
Why have you used a random frameRate?

benja

String letters = ""; should be var letters = "";

Then you have a problem within your keyPressed()-function. Not that familiar with p5js, so not really sure how they handle everything, but 'key" cannot be compared to a number, should be string or char.

You could either use keyCode or somthing like key.charCodeAt(0) instead of "key".

Lord_of_the_Galaxy

Even in Processing, key is not compared with ENTER, keyCode is.
How do you type cast in JavaScript? In Java, you just say (int)key and copare with numbers.

GoToLoop

Java's(int) fraction corresponds to JS' ~~fraction or fraction | 0. :P

However, key is a String in p5.js. Therefore, we need method charCodeAt() before comparing it to a UTF-16/ASCII value:

https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt

GoToLoop

Even in Processing, key is not compared with ENTER; keyCode is.

Java automatically coerces key's char to keyCode's int datatype. ~O)

Lord_of_the_Galaxy

@GoToLoop I don't get it, ENTER is not coded in Processing? I thought it was.

GoToLoop

Processing has many key constants: ENTER, TAB, LEFT, etc.
What I meant is we can mix char & int datatypes.
Thus we can compare key & keyCode. :ar!

Lord_of_the_Galaxy

I meant doesn't ENTER key set the value of key to CODED?

plowrighth

I've used a random Frame rate, as the animation is suppose to be different each time the code is ran :) I'll try making some changes now :)

Lord_of_the_Galaxy

But it could possibly lead to very slow frameRates like 1.

GoToLoop

I meant doesn't ENTER key set the value of key to CODED?

Nope! But Regardless, why would you worry about it? Just use keyCode in place of key. As long as you don't need to distinguish upper & lower case letters. :-j

Lord_of_the_Galaxy

And you keep on confusing me. So, keyCode is set to the value of key, except that even if key is uppercase, keyCode is still lowercase? In any case, I don't understand why it has to be so confusing?

GoToLoop

keyCode is still lowercase?

It is always uppercase. At least in Processing. L-)
While key can be both cases. B-)

plowrighth

If you guys are lost. I definitely am, but yeah that's part of the experiment (different frame rates )

Lord_of_the_Galaxy

Still, as I said, random frameRate can lead to very slow frameRate like 1 or 2.