Hace unos años, programé esto con 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(); } }Ahora me gustaría tenerlo como código p5.js. Pensé que podría funcionar de esta manera:
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>Desafortunadamente, no funciona. ¿Alguien tiene una idea de cómo arreglar eso?
Gran parte de su código java no se ha traducido bien a javascript.
Cambié lo siguiente:
float x . En JS, sin embargo, usa let como 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>Aquí está, debe usar constructor () para crear una instancia de un nuevo objeto del dibujo. Además, no olvide esta palabra clave para acceder a las variables.
Puedes verlo funcionando aquí también:
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; } }