Need help converting my Processing code to p5.js (ArrayList + others)

Question

I am trying without success to translate this code from Processing to p5.

I’m having an issue with the ArrayList at line 21 & 26, and also the functions inside the ParticleSystem class.

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>