Translation from Processing to p5 not working

p5.js Coding Questions
1

Hi all, I can’t figure out why this isn’t spinning. Any tips? (It works in Processing).

var spin;

function setup() {
  createCanvas(400, 400);
  background(255);
}

function draw() {
}

function mouseDragged() {
  push();
  translate(mouseX-20, mouseY); 
  rotate(spin);
  ellipse(0, 0, 80, 20); 
  pop();
 
  push();
  translate(mouseX+20, mouseY); 
  rotate(spin);
  ellipse(0, 0, 80, 20); 
  pop();

  spin+=0.1;
}

function keyPressed() {
  background(255);
}

Here’s the Processing sketch:

float spin;

void setup() {
  size(400, 400);
  background(255);
}

void draw() {
}

void mouseDragged() {
  pushMatrix();
  translate(mouseX-20, mouseY); 
  rotate(spin);
  ellipse(0, 0, 80, 20); 
  popMatrix();
 
  pushMatrix();
  translate(mouseX+20, mouseY); 
  rotate(spin);
  ellipse(0, 0, 80, 20); 
  popMatrix();

  spin+=0.1;
}

void keyPressed() {
  background(255);
}
1 Like
2
  • In Java, fields are automatically initialized w/ a default value according to their datatype.
  • For float, that default value is 0.0f.
  • However in JS, the initial value for all variables is undefined.
  • And when they’re coerced to a numerical value, like you do at spin += 0.1;, they become NaN.
  • In order to avoid that, initialize the spin variable: let spin = 0;
3 Likes
3

Amazing! Thanks so much, that’s extremely helpful!