Converting my Processing code to p5.js (ArrayList + others!)

p5.js Coding Questions
1

Hello there,
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!

1 Like
2

-a- where you have the JAVA code from?
if that is a tutorial it might be also available as p5.js already
so google first

-b- p5.js coding questions are best
if you setup it as MVCS on
https://editor.p5js.org/
so we see with one click code / error / result…
and can link back to you suggested repairs

-c- p5.js array: different, not arrayList:
https://p5js.org/reference/#group-Data

-d- p5.js Vector:
https://p5js.org/reference/#/p5.Vector

2 Likes
3

That’s not how we define classes’ constructor, methods & fields under JS syntax!
You should read the JS reference for it:

Also, there’s no ArrayList either. We use JS arrays instead:

And while in Java we can generally omit the keyword this before accessing a class member, in JS it’s mandatory:

Now w/ all the info above, here’s a partial but proper JS conversion of your class ParticleSystem:

class ParticleSystem {
  constructor(position) {
    this.origin = position.copy();
    this.particles = [];
  }
 
  addParticle() {
    this.particles.push(new Particle(this.origin));
  }

  // ...
}
4 Likes