如何將此處理代碼翻譯成 p5.js？

Question

幾年前，我用 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(); } }

現在我想把它作為 p5.js 代碼。 我認為它可以這樣工作：

 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>

不幸的是，它不起作用。 有誰知道如何解決這個問題？

Answer 1

您的很多 java 代碼都沒有很好地轉換為 javascript。

我更改了以下內容：

1. Java 使用被聲明變量類型的關鍵字聲明變量：例如， float x 。 但是在 JS 中，您使用let ，例如let x 。
2. Class定義完全不同。 查看文檔以獲取更多信息。

 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>

Answer 2

在這里，您需要使用constructor()從 Drawing 中實例化一個新的 Object，另外不要忘記使用this關鍵字來訪問變量。

你也可以看到它在這里工作：

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