CODEWITHSUNDEEP
javascriptprocessingp5.js
Anna_B
Anna_B

Reputation: 890

How to translate this Processing code to p5.js?

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/[email protected]/lib/p5.js"></script>

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

Upvotes: 1

Views: 439

Answers (2)

Mohamad Ghaith Alzin
Mohamad Ghaith Alzin

Reputation: 959

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

Upvotes: 2

cSharp
cSharp

Reputation: 3159

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

I changed the following:

  1. 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.
  2. 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/[email protected]/lib/p5.js"></script>

Upvotes: 2

Related Questions