将处理转换为p5.js

Question

有人能解释一下为什么这个翻译不起作用吗？由于我对处理和p5.js都非常陌生，所以我不断收到错误消息。。。

这是我想要更改的处理代码。

Particle[] particles;
float alpha;
void setup() {
size(900, 500);
background(0);
noStroke();
setParticles();
}
void draw() {
frameRate(30);
alpha = map(height, 0, width, 5, 35);
fill(4, 255);
rect(0, 0, width, height);
background(0);
loadPixels();
for (Particle p : particles) {
p.move();
}
updatePixels();
}
void setParticles() {
particles = new Particle[10000]; 
for (int i = 0; i < 10000; i++) { 
float x = random(width);
float y = random(height);
float adj = map(y, 0, height, 255, 0);
int c = color(60, adj, 255);
particles[i]= new Particle(x, y, c);
}
}
void mousePressed() {
setParticles();
}
class Particle {
float posX, posY, incr, theta;
color  c;
Particle(float xIn, float yIn, color cIn) {
posX = xIn;
posY = yIn;
c = cIn;
}
public void move() {
update();
wrap();
display();
}
void update() {
incr +=  .008;
theta = noise(posX * .006, posY * .008, incr) * TWO_PI;
posX += 2 * tan(theta);
posY += 2 * sin(theta);
}
void display() {
if (posX > 0 && posX < width && posY > 0  && posY < height) {
pixels[(int)posX + (int)posY * width] =  c;
}
}
void wrap() {
if (posX < 0) posX = width;
if (posX > width ) posX =  0;
if (posY < 0 ) posY = height;
if (posY > height) posY =  0;
}
}

这是不起作用的p5.js翻译。

var particles;
let particle  = [];
const num = 100;
function setup() {
createCanvas(900, 500);
background(0);
noStroke();
setParticles();
}
function draw() {
frameRate(30);
let alpha = map(height, 0, width, 5, 35);
fill(0, alpha);
rect(0, 0, width, height);
loadPixels();
for (var i = 0; i < num; i++) { 
particles[i].update();
particles[i].display();
particles[i].wrap();
}
updatePixels();
}
function setParticles() {
particles = new Array(10000);
for (var i = 0; i < 10000; i++) {
var x = random(width);
var y = random(height);
var adj = map(y, 0, height, 255, 0);
let c = color(60, adj, 255);
particles[i] = new Particle(x, y, c);
}
}
function mousePressed() {
setParticles();
}
function Particle (xln, yln, cln) {
this.posX = xln;
this.posY = yln;
this.c = cln;
this.update = function() {
this.incr += .008;
this.theta = noise(this.posX * .006, this.posY * .008, this.incr) * TWO_PI;
this.posX += 2 * tan(this.theta);
this.posY += 2 * sin(this.theta);
}
this.display = function() {
if (this.posX > 0 && this.posX < width && this.posY > 0 && this.posY < height) {
pixels[int(this.posX) + int(this.posY) * width] = c;
}
}
this.wrap = function() {
if (this.posX < 0)
this.posX = width;
if (this.posX > width)
this.posX = 0;
if (this.posY < 0)
this.posY = height;
if (this.posY > height)
this.posY = 0;
}
}

如果有经验的人能帮助我，我将是一个很大的帮助！

Answer 1

很酷的项目！你非常接近，只有一些事情需要调整。

如果你在display()函数中放入一个console.log(this.posX)，你会发现它是NaN，如果你追踪你的步骤，你会注意到它是由以下原因引起的：

this.theta = noise(this.posX * 0.006, this.posY * 0.008, this.incr) * TWO_PI;
this.posX += 2 * sin(this.theta);

这里的问题是没有定义this.incr，所以将this.incr = 0添加到构造函数中可以解决这个问题。

显示功能中的以下行缺少c的this.：

pixels[int(this.posX) + int(this.posY) * width] = c; // should be this.c

你也没有循环通过所有的粒子，这可能是一个明智的决定，但当你这样做时，它看起来非常棒：

for (var i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].display();
particles[i].wrap();
}

在处理像素时，您必须考虑像素阵列中有4个元素，它们按每个像素的顺序表示R、G、B、A值。因此，要得到给定X和Y的索引：

let index =  (int(this.posX) + int(this.posY) * width) * 4;

最后，您可能需要设置pixelDensity(1)，使其覆盖整个屏幕，更多信息可以在p5.js文档中找到。

我使用了es6类而不是函数，但前提是一样的：

var particles = [];
let particle = [];
const num = 100;
function setup() {
createCanvas(900, 400);
pixelDensity(1);
background(0);
noStroke();
setParticles();
}
function draw() {
frameRate(30);
let alpha = map(height, 0, width, 5, 35);
fill(0, alpha);
rect(0, 0, width, height);
loadPixels();
for (var i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].display();
particles[i].wrap();
}
updatePixels();
}
function setParticles() {
particles = new Array(10000);
for (var i = 0; i < 10000; i++) {
var x = random(width);
var y = random(height);
var adj = map(y, 0, height, 255, 0);
let c = color(60, adj, 255);
particles[i] = new Particle(x, y, c);
}
}
function mousePressed() {
setParticles();
}
class Particle {
constructor(xln, yln, cln) {
this.posX = xln;
this.posY = yln;
this.c = cln;
this.incr = 0;
}
update() {
this.incr += 0.008;
this.theta = noise(this.posX * 0.006, this.posY * 0.008, this.incr) * TWO_PI;
this.posX += 2 * tan(this.theta);
this.posY += 2 * sin(this.theta);
}
display() {
if (
this.posX > 0 &&
this.posX < width &&
this.posY > 0 &&
this.posY < height
) {
let index =  (int(this.posX) + int(this.posY) * width) * 4;
pixels[index] = this.c; 
pixels[index+1] = this.c; 
pixels[index+2] = this.c; 
pixels[index+3] = this.c; 
}
}
wrap() {
if (this.posX < 0) this.posX = width;
if (this.posX > width) this.posX = 0;
if (this.posY < 0) this.posY = height;
if (this.posY > height) this.posY = 0;
}
}

html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="sketch.js"></script>
</body>
</html>

这里有一个指向p5.js编辑器草图的链接。