Processing code doesn't work in p5

Mskelly

Hello everybody, I am new here and quite intimidated by all the wonderful work that is done here. I'm a a student and just discovering Processing. For a project I downloaded p5 because I'd like to run my files online. I've managed to do the transfer with my sketches from the normal processing code to p5.js, except for one, and I just can't figure out why it won't work. It's with the 'constrain' function, where I'd like to limit a dot (mouse coordinates) to a rectangle in the sketch, if that makes any sense. I copy both the codes here, hoping that someone can help me! Thank you for taking the time to read this.

Original code Processing:

float mx; float my; float easing = 0.05; int radius = 10; int edge = 235; int inner = edge + radius; void setup() { size(500, 700); noStroke(); ellipseMode(RADIUS); rectMode(CORNERS); }

void draw() {

if (abs(mouseX - mx) > 0.1) { mx = mx + (mouseX - mx) * easing; } if (abs(mouseY - my) > 0.1) { my = my + (mouseY- my) * easing; }

mx = constrain(mx, inner, width - inner); my = constrain(my, inner, height - inner); fill(196, 239, 234); rect(edge, edge, width-edge, height-edge); fill(146, 140, 211);
ellipse(mx, my, radius, radius); }

Code that I typed in p5:

var mx; var my; var easing = 0.05; var radius = 10; var edge = 120; var inner = edge + radius;

function setup() { createCanvas(windowWidth, windowHeight); noStroke(); background(255,255,255) ellipseMode(RADIUS); rectMode(CORNERS); }

function draw() {

if (abs(mouseX - mx) > 0.1) { mx = mx + (mouseX - mx) * easing; } if (abs(mouseY - my) > 0.1) { my = my + (mouseY- my) * easing; }

x= constrain(mx, inner, width - inner); y= constrain(my, inner, height - inner); fill(196, 239, 234); rect(edge, edge, width-edge, height-edge); fill(146, 140, 211);
ellipse(mx, my, radius, radius);

}

KevinWorkman

Can you please edit your post to format your code? Read this: https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text

Also, can you be more specific about exactly what's not working? What do you expect this code to do? What does it do instead?

The only error I get is due to a missing semicolon on line 11.

Mskelly

Thank you for your reply. I would like to transfer the first code, which runs how it should in Processing, to p5. By this I mean having a rectangle in the middle, in which a small circle, defined by the mouse coordinates, is contained. Even if you move the mouse 'beyond' the rectangle, it has to stay inside.

So this is the code working correctly in Processing:

float mx;
float my;
float easing = 0.05;
int radius = 10;
int edge = 235;
int inner = edge + radius;


void setup() {
  size(500, 700);
  noStroke(); 
  ellipseMode(RADIUS);
  rectMode(CORNERS);

}

void draw() { 


  if (abs(mouseX - mx) > 0.1) {
    mx = mx + (mouseX - mx) * easing;
  }
  if (abs(mouseY - my) > 0.1) {
    my = my + (mouseY- my) * easing;
  }

  mx = constrain(mx, inner, width - inner);
  my = constrain(my, inner, height - inner);
  fill(196, 239, 234);
  rect(edge, edge, width-edge, height-edge);
  fill(146, 140, 211);  
  ellipse(mx, my, radius, radius);
} 

And this is the code for p5, where the rectangle appears but not the circle, I can't see what I didn't rewrite correctly:

var mx;
var my;
var easing = 0.05;
var radius = 10;
var edge = 120;
var inner = edge + radius;


function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  background(255, 255, 255)
  ellipseMode(RADIUS);
  rectMode(CORNERS);
}

function draw() {

  if (abs(mouseX - mx) > 0.1) {
    mx = mx + (mouseX - mx) * easing;
  }
  if (abs(mouseY - my) > 0.1) {
    my = my + (mouseY - my) * easing;
  }

  mx = constrain(mx, inner, width - inner);
  my = constrain(my, inner, height - inner);
  fill(196, 239, 234);
  rect(edge, edge, width - edge, height - edge);
  fill(146, 140, 211);
  ellipse(mx, my, radius, radius);


}

KevinWorkman

Time to debug your program. I'd start by simply logging your variables right before calling the ellipse() function:

console.log(mx + ", " + my + ", " + radius);

Doing this will show you that mx and my are NaN.

You aren't giving mx and my default values. In Java they'll be given default values of 0, but JavaScript will give them default values of undefined. Then when you pass that into the constrain() function, you get back NaN.

To fix your problem, you have to give your mx and my values. Probably either 0 or the middle of the screen, depending on how you want your sketch to behave.

Mskelly

Thank you for your quick response! As a newbie I'm not familiar with the console.log , what do I write between the " "? I have given mx and my values and there is an improvement because the circle now appears, only it stays in the upper left corner, and doesn't follow the mouse..

GoToLoop

There's a very good article about Processing to p5.js transition below: O:-)
https://GitHub.com/processing/p5.js/wiki/Processing-transition

Before translating your sketch to p5.js, I've made some tweaks.
You can watch it online running under Pjs library at the link below too: :D
http://studio.SketchPad.cc/sp/pad/view/ro.9XkJm3bjTAxB2/latest

/**
 * Easing Box (v2.2)
 * Author: MsKelly (2016-Oct-04)
 * Mod: GoToLoop
 *
 * forum.Processing.org/two/discussion/18404/
 * processing-code-doesn-t-work-in-p5#Item_5
 *
 * studio.SketchPad.cc/sp/pad/view/ro.9XkJm3bjTAxB2/latest
 */

static final float EASING = .05, LIMIT = .1;
static final int RAD = 15, EDGE = 50;
static final int INNER = EDGE + RAD;

float mx = INNER, my = INNER;
int iw, ih, ew, eh;

void setup() {
  size(400, 500);

  ellipseMode(RADIUS);
  rectMode(CORNERS);

  noStroke();
  background(0);

  iw = width  - INNER;
  ih = height - INNER;

  ew = width  - EDGE;
  eh = height - EDGE;
}

void draw() {
  final float dx = mouseX - mx, dy = mouseY - my;

  if (abs(dx) > LIMIT)  mx = constrain(mx + dx*EASING, INNER, iw);
  if (abs(dy) > LIMIT)  my = constrain(my + dy*EASING, INNER, ih);

  fill(196, 239, 234);
  rect(EDGE, EDGE, ew, eh);

  fill(146, 140, 211);
  ellipse(mx, my, RAD, RAD);
}

GoToLoop

And finally the converted p5.js version. Check it online at the link below too: :-bd
http://Bl.ocks.org/GoSubRoutine/dc44acdaa0f05c1402ea33bd60a69da4
http://p5js.SketchPad.cc/sp/pad/view/ro.CQ494WRivD81VV/latest

/**
 * Easing Box (v2.2)
 * Author: MsKelly (2016-Oct-04)
 * Mod: GoToLoop
 *
 * forum.Processing.org/two/discussion/18404/
 * processing-code-doesn-t-work-in-p5#Item_6
 *
 * p5js.SketchPad.cc/sp/pad/view/ro.CQ494WRivD81VV/latest
 * Bl.ocks.org/GoSubRoutine/dc44acdaa0f05c1402ea33bd60a69da4
 */

"use strict";

const EASING = .05, LIMIT = .1,
      RAD = 15, EDGE = 50,
      INNER = EDGE + RAD;

let mx = INNER, my = INNER,
    iw, ih, ew, eh,
    boxCol, ballCol;

function setup() {
  createCanvas(400, 500);

  ellipseMode(RADIUS).rectMode(CORNERS);
  noStroke().background(0);

  iw = width - INNER, ih = height - INNER;
  ew = width - EDGE,  eh = height - EDGE;

  boxCol  = color(196, 239, 234);
  ballCol = color(146, 140, 211);
}

function draw() {
  const dx = mouseX - mx, dy = mouseY - my;

  if (abs(dx) > LIMIT)  mx = constrain(mx + dx*EASING, INNER, iw);
  if (abs(dy) > LIMIT)  my = constrain(my + dy*EASING, INNER, ih);

  fill(boxCol).rect(EDGE, EDGE, ew, eh);
  fill(ballCol).ellipse(mx, my, RAD, RAD);
}

Mskelly

Thank you so much! This looks good :)