How to translate this Processing code to p5.js?

Question

A few years ago, I programmed this with Processing:

import processing.pdf.*;
drawing w;
void setup() {
  size(1080, 720);
  beginRecord(PDF, "drawing.pdf");
  w = new drawing();
  background(0);
}
void draw() {
  w.step();
  w.render();
}
class drawing {
  float x, y;
  float tx, ty;
  float prevX, prevY;
  drawing() {
    tx = 0;
    ty = 90000;
    x = map(noise(tx), 0, 0.2, 0, width);
    y = map(noise(ty), 0, 0.2, 0, height);
  }
  void render() {
    stroke(255);
    line(prevX, prevY, x, y);
  }
  void step() {
    prevX = x;
    prevY = y;
    x = map(noise(tx), 0, 1, 0, width);
    y = map(noise(ty), 0, 1, 0, height);
    tx += 0.01;
    ty += 0.01;
  }
}
void keyPressed() {
  if (key == 'a') {
    endRecord();
    exit();
  }
}

Now I would like to have it as p5.js code. I thought it could work this way:

drawing w;

function setup() {
  createCanvas(720, 400);
  w = new drawing();
  background(0);
}

function draw() {
  w.step();
  w.render();
}
class drawing {
  float x, y;
  float tx, ty;
  float prevX, prevY;
  drawing() {
    tx = 0;
    ty = 90000;
    x = map(noise(tx), 0, 0.2, 0, width);
    y = map(noise(ty), 0, 0.2, 0, height);
  }

  function render() {
    stroke(255);
    line(prevX, prevY, x, y);
  }

  function step() {
    prevX = x;
    prevY = y;
    x = map(noise(tx), 0, 1, 0, width);
    y = map(noise(ty), 0, 1, 0, height);
    tx += 0.01;
    ty += 0.01;
  }
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>

Unfortunately, it doesn't work. Has anyone an idea how to fix that?

The answers bellow are great(+1). I'd like to also point you to https://github.com/zenozeng/p5.js-svg : hopefully saving .svg files is an acceptable workaround for the Processing .pdf save feature. — George Profenza, May 30 '22 at 07:47
Related: [Processing to P5 — How to convert?](https://stackoverflow.com/questions/50042423/processing-to-p5-how-to-convert) — ggorlen, Feb 21 '23 at 21:47

score 2 · Answer 1 · answered May 30 '22 at 03:16

A lot of your java code hasn't been well translated to javascript.

I changed the following:

Java declares variables with the keyword of the type of the variable being declared: for example, float x. In JS, however you use let such as let x.
Class definitions are completely different. Look at the documentation for more information.

class Drawing {
  constructor() {
    this.tx = 0;
    this.ty = 90000;
    this.x = map(noise(this.tx), 0, 0.2, 0, width);
    this.y = map(noise(this.ty), 0, 0.2, 0, height);
  }

  render() {
    stroke(255);
    line(this.prevX, this.prevY, this.x, this.y);
  }

  step() {
    this.prevX = this.x;
    this.prevY = this.y;
    this.x = map(noise(this.tx), 0, 1, 0, width);
    this.y = map(noise(this.ty), 0, 1, 0, height);
    this.tx += 0.01;
    this.ty += 0.01;
  }
}

let w;

function setup() {
  createCanvas(720, 400);
  w = new Drawing();
  background(0);
}

function draw() {
  w.step();
  w.render();
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>

score 2 · Accepted Answer · answered May 30 '22 at 03:17

Here it is, you need to use constructor() to instantiate a new Object from Drawing, Also don't forget this keyword to access variables.

You can see it working here as well:

https://editor.p5js.org/ghaithalzein05/sketches/veGh2JAYC

let w;

function setup() {
  createCanvas(400, 400);
  background(0);
  w = new Drawing();
}

function draw() {
  w.step();
  w.render();
}

class Drawing {
  
  constructor() {
    this.nextX = 0;
    this.nextY = 90000;
    this.x = map(noise(this.nextX), 0, 0.2, 0, width);
    this.y = map(noise(this.nextY), 0, 0.2, 0, height);
    this.px = 0;
    this.py = 0;
  }

   render() {
    stroke(255);
    line(this.px, this.py, this.x, this.y);
  }

   step() {
    this.px = this.x;
    this.py = this.y;
    this.x = map(noise(this.nextX), 0, 1, 0, width);
    this.y = map(noise(this.nextY), 0, 1, 0, height);
    this.nextX += 0.01;
    this.nextY += 0.01;
  }
}

How to translate this Processing code to p5.js?

2 Answers2