需要帮助将我的处理代码转换为 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 {

  

    constructor(l) {

        this.acceleration = createVector(0, 0);

        this.velocity = createVector(0,0);//random(-0.0001, 0.00001), random(-0.001, 0.0001));

        this.position = l ? l.copy() : createVector(Math.random()*1200, Math.random()*1200,);

        this.home = this.position.copy();

    }

    run() {

        this.update();

        this.display();

    }

    // Method to update position

    update() {

        this.acceleration.x = -0.01*(this.position.x - this.home.x);

        this.acceleration.y = -0.01*(this.position.y - this.home.y);

        this.velocity.add(this.acceleration);

        this.velocity.mult(0.9);

        this.position.add(this.velocity);

        //   lifespan -= 1.0;

    }

    // Method to display

    display() {

        noStroke();//stroke(255, lifespan);

        //fill(255, lifespan);

        fill(0);

        ellipse(this.position.x, this.position.y, 25, 25);

    }

}

class ParticleSystem {

    constructor(position) {

        this.origin = position.copy();

        this.particles = [];

    }

    addParticle() {

        //this.particles.push(new Particle(this.origin));

        this.particles.push(new Particle());

    }

    run() {

        for (let i = this.particles.length-1; i >= 0; i--) {

            this.particles[i].run();

    //      if (p.isDead()) {

            //    particles.remove(i);

    //      }

        }

    }

    move_away_from(x, y){

        for (let i = 0; i < this.particles.length; i++) {

            let p = this.particles[i];

            let 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);

            }

        }

    }

}

var ps;

function setup() {

    createCanvas(1200, 800);

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

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

        ps.addParticle();

    }

}

function draw() {

    background(255);

    ps.move_away_from(mouseX, mouseY);

    ps.run();

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>