#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Processing code doesn't work in p5

edited October 2016

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);

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);

}

Tagged:

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.

• 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 edge = 235;
int inner = edge + radius;

void setup() {
size(500, 700);
noStroke();
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);
}
``````

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 edge = 120;
var inner = edge + radius;

function setup() {
createCanvas(windowWidth, windowHeight);
noStroke();
background(255, 255, 255)
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);

}
``````
• 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.

• 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..

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

You can watch it online running under Pjs library at the link below too: :D

``````/**
* 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
*
*/

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);

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);
}
``````
• edited March 2017 Answer ✓

And finally the converted p5.js version. Check it online at the link below too: :-bd
http://Bl.ocks.org/GoSubRoutine/dc44acdaa0f05c1402ea33bd60a69da4

``````/**
* 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
*
* Bl.ocks.org/GoSubRoutine/dc44acdaa0f05c1402ea33bd60a69da4
*/

"use strict";

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

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

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

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);