如何将此处理代码翻译成 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 代码没有很好地转换为 java 脚本。

我更改了以下内容：

Java 使用被声明变量类型的关键字来声明变量：例如，float x。在 JS 中，但是你使用 let 例如 let x.
Class定义完全不同。查看 documentation 了解更多信息。

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

如何将此处理代码翻译成 p5.js？

How to translate this Processing code to p5.js?

javascript

processing

p5.js