Direction of Particles in simple physics engine interact in weird ways

Hi guys,
I’m playing around with the simple physics engine from this video: https://www.youtube.com/watch?v=BjoM9oKOAKY

What I wanted to do is to have two particles that just move in one direction. To do this I create two particles with different starting angles, say 0 and 90 and update them so that they should move on a straight line. If I create each particle on it’s own, it works just fine. If I create and update both however, they both start moving in the 45 degree direction. This baffles me, since the update function inside the particle object should be isolated from each other right? Here is the code:

var particles = [];
var flowfield;

function setup() {
  createCanvas(400, 400);
  sta_pt = createVector(height * 0.2, width * 0.8);

  bg_col = color(3, 219, 252);

  colorMode(HSB, 255);

  flowfield = new Array(2);

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

    if (i == 0) {

      ang = 0;

      parti = new Particle();

    } else {

      ang = 90;

      parti = new Particle();

    }

    particles[i] = parti;

    var v = p5.Vector.fromAngle(ang, 1);

    flowfield[i] =  v;

  }

  background(bg_col);

  frameRate(5);

}

function draw() {

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

    particles[i].applyForceArr(flowfield, i);

    particles[i].update();

    particles[i].show();

  }

}

And heres the particle class:

function Particle() {

  this.pos = sta_pt;

  this.vel = createVector(0, 0);

  this.acc = createVector(0, 0);

  this.maxspeed = 4;

  this.h = 0;

  this.prevPos = this.pos.copy();

  this.update = function() {

    this.vel.add(this.acc);

    this.vel.limit(this.maxspeed);

    this.pos.add(this.vel);

    this.acc.mult(0);

  };

  this.applyForceArr = function(force, index) {

    print(force[index]);

    this.acc.add(force[index]);

  };

  this.show = function() {

    stroke(0);

    strokeWeight(1);

    line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);

    this.updatePrev();

  };

  this.updatePrev = function() {

    this.prevPos.x = this.pos.x;

    this.prevPos.y = this.pos.y;

  }

}

not sure about the syntax since I mainly do processing in java.

but it looks to me that you:

  1. create an array for your particles
  2. in setup you create one (!) new object called parti, alongside a variable “and” that is either 0 OR 90 degree.
  3. then you point the object in the particles array to that single object called parti

not sure about p5.js, but if I did that in processing I think it would “point” to a single object. so every time you change something, cycling through particles[i] you essentially overwrite the variables in that one object.

in my opinion, you should declare the array and then append new objects to it
something like
for…
particles[i]. push (new Particle());

or something like that (not sure about the syntax)
but the gist is that in my opinion you create one object and put it into two slots, but it still stays one object

Thanks for the reply.
I tried your recommendation and added the particles with

particles.push(new Particle());

but the same problem persists.

Also deleting the parti variable after every for loop step changes nothing. Does anybody else have an idea?