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?

Answer 1

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