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?
A lot of your java code hasn't been well translated to javascript.
I changed the following:
float x. In JS, however you use let such as let x.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>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;
}
}