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

Question

I'm new to Processing and p5.js and am trying without success to translate this code from Processing to p5. The main thing I'm having an issue with is the ArrayList at line 21 & 26, and also the functions inside the ParticleSystem class. Note: I'm aware this is probably a very noob question, however I've been trying many methods and nothing seems to work, hence me requesting help from you guys.

Here's the working Processing code:

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

    // Method to update position
    void update() {
        acceleration.x = -0.01*(position.x - home.x);
        acceleration.y = -0.01*(position.y - home.y);
        velocity.add(acceleration);
        velocity.mult(0.9);
        position.add(velocity);
        //   lifespan -= 1.0;
    }

    // Method to display
    void display() {
        noStroke();//stroke(255, lifespan);
        //fill(255, lifespan);
        fill(0);
        ellipse(position.x, position.y, 25, 25);
    }
}

And here's an early version of how far i got with p5.js before i made the code a complete mess:

var ps;

function setup() {
  size(1200, 800);
  ps = new ParticleSystem(new PVector(width/2, 50));
  for (var i=0; i<1200; i++)
  {
    ps.addParticle();
  }
}


function 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>();
  }

  function addParticle() {
    particles.add(new Particle(origin));
  }

  function run() {
    for (float i = particles.size()-1; i >= 0; i--) {
      Particle p = particles.get(i);
      p.run();
//      if (p.isDead()) {
        //    particles.remove(i);
//      }
    }
  }

  function move_away_from( var x, var y){
    for(Particle p : particles){
      var 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();
  }

  function run() {
    update();
    display();
  }

  // Method to update position
  function update() {
    acceleration.x = -0.01*(position.x - home.x);
    acceleration.y = -0.01*(position.y - home.y);
    velocity.add(acceleration);
    velocity.mult(0.9);
    position.add(velocity);
    //   lifespan -= 1.0;
  }

  // Method to display
  function display() {
    noStroke();//stroke(255, lifespan);
    //fill(255, lifespan);
    fill(0);
    ellipse(position.x, position.y, 25, 25);
  }


}

So if anyone has got the solution or can tell me the steps i need to take please let me know!

Answer 1

In JavaScript you don't need something like an ArrayList at all. A JavaScript array is dynamic. Further it is not necessary to declare the attributes. Attributes are "created" automatically when something is assigned to.

Instead of a PVector object you can uss p5.Vector . A p5.Vector is created by createVector . Furthermore, read about Classes in JavaScript.

See the example:

 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>