需要帮助将我的处理代码转换为 p5.js（ArrayList + 其他！）

Question

我是 Processing 和 p5.js 的新手，正在尝试将此代码从 Processing 转换为 p5，但没有成功。我遇到的主要问题是第 21 和 26 行的 ArrayList，以及 ParticleSystem 类中的函数。注意：我知道这可能是一个非常菜鸟的问题，但是我已经尝试了很多方法，但似乎没有任何效果，因此我向你们寻求帮助。

这是工作处理代码：

ParticleSystem ps;

void setup() {

    size(1200, 800);

    ps = new ParticleSystem(new PVector(width/2, 50));

    for (int i=0; i<1200; i++) {

        ps.addParticle();

    }

}

void draw() {

    background(255);

    ps.move_away_from(mouseX, mouseY);

    ps.run();

}

class ParticleSystem {

    ArrayList<Particle> particles;

    PVector origin;

    ParticleSystem(PVector position) {

        origin = position.copy();

        particles = new ArrayList<Particle>();

    }

    void addParticle() {

        particles.add(new Particle(origin));

    }

    void run() {

        for (int i = particles.size()-1; i >= 0; i--) {

            Particle p = particles.get(i);

            p.run();

      //      if (p.isDead()) {

              //    particles.remove(i);

      //      }

        }

    }

    void move_away_from( float x, float y){

        for(Particle p : particles){

            float d = dist(x,y,p.position.x, p.position.y);

            if( d < 200 ){ 

                p.velocity.x += map(d,0,200,0.5,0.1)*(p.position.x - x);

                p.velocity.y += map(d,0,200,0.5,0.1)*(p.position.y - y);

            }

        }

    }

}

class Particle {

    PVector position;

    PVector velocity;

    PVector acceleration;

    PVector home;

    Particle(PVector l) {

        acceleration = new PVector(0, 0);

        velocity = new PVector(0,0);//random(-0.0001, 0.00001), random(-0.001, 0.0001));

        l=new PVector(random(0, 1200), random(0, 800));

        position = l.copy();

        home = position.copy();

    }

    void run() {

        update();

        display();

    }

因此，如果有人有解决方案或可以告诉我我需要采取的步骤，请告诉我！

Answer 1

在 JavaScript 中，您根本不需要像 an 之类的东西ArrayList。JavaScript 数组是动态的。此外，没有必要声明属性。当分配了某些东西时，属性会自动“创建”。PVector您可以使用 uss代替对象p5.Vector。Ap5.Vector由createVector. 此外，请阅读JavaScript 中的类。看例子：class Particle {&nbsp;&nbsp;&nbsp; &nbsp; constructor(l) {&nbsp; &nbsp; &nbsp; &nbsp; this.acceleration = createVector(0, 0);&nbsp; &nbsp; &nbsp; &nbsp; this.velocity = createVector(0,0);//random(-0.0001, 0.00001), random(-0.001, 0.0001));&nbsp; &nbsp; &nbsp; &nbsp; this.position = l ? l.copy() : createVector(Math.random()*1200, Math.random()*1200,);&nbsp; &nbsp; &nbsp; &nbsp; this.home = this.position.copy();&nbsp; &nbsp; }&nbsp; &nbsp; run() {&nbsp; &nbsp; &nbsp; &nbsp; this.update();&nbsp; &nbsp; &nbsp; &nbsp; this.display();&nbsp; &nbsp; }&nbsp; &nbsp; // Method to update position&nbsp; &nbsp; update() {&nbsp; &nbsp; &nbsp; &nbsp; this.acceleration.x = -0.01*(this.position.x - this.home.x);&nbsp; &nbsp; &nbsp; &nbsp; this.acceleration.y = -0.01*(this.position.y - this.home.y);&nbsp; &nbsp; &nbsp; &nbsp; this.velocity.add(this.acceleration);&nbsp; &nbsp; &nbsp; &nbsp; this.velocity.mult(0.9);&nbsp; &nbsp; &nbsp; &nbsp; this.position.add(this.velocity);&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp;lifespan -= 1.0;&nbsp; &nbsp; }&nbsp; &nbsp; // Method to display&nbsp; &nbsp; display() {&nbsp; &nbsp; &nbsp; &nbsp; noStroke();//stroke(255, lifespan);&nbsp; &nbsp; &nbsp; &nbsp; //fill(255, lifespan);&nbsp; &nbsp; &nbsp; &nbsp; fill(0);&nbsp; &nbsp; &nbsp; &nbsp; ellipse(this.position.x, this.position.y, 25, 25);&nbsp; &nbsp; }}class ParticleSystem {&nbsp; &nbsp; constructor(position) {&nbsp; &nbsp; &nbsp; &nbsp; this.origin = position.copy();&nbsp; &nbsp; &nbsp; &nbsp; this.particles = [];&nbsp; &nbsp; }&nbsp; &nbsp; addParticle() {&nbsp; &nbsp; &nbsp; &nbsp; //this.particles.push(new Particle(this.origin));&nbsp; &nbsp; &nbsp; &nbsp; this.particles.push(new Particle());&nbsp; &nbsp; }&nbsp; &nbsp; run() {&nbsp; &nbsp; &nbsp; &nbsp; for (let i = this.particles.length-1; i >= 0; i--) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.particles[i].run();&nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; if (p.isDead()) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; particles.remove(i);&nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; move_away_from(x, y){&nbsp; &nbsp; &nbsp; &nbsp; for (let i = 0; i < this.particles.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let p = this.particles[i];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let d = dist(x,y, p.position.x, p.position.y);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( d < 200 ){&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; p.velocity.x += map(d,0,200,0.5,0.1)*(p.position.x - x);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; p.velocity.y += map(d,0,200,0.5,0.1)*(p.position.y - y);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}var ps;function setup() {&nbsp; &nbsp; createCanvas(1200, 800);&nbsp; &nbsp; ps = new ParticleSystem(createVector(width/2, 50));&nbsp; &nbsp; for (var i=0; i<1200; i++) {&nbsp; &nbsp; &nbsp; &nbsp; ps.addParticle();&nbsp; &nbsp; }}function draw() {&nbsp; &nbsp; background(255);&nbsp; &nbsp; ps.move_away_from(mouseX, mouseY);&nbsp; &nbsp; ps.run();}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>