Simplified my question: Array - 2 movers from circle border should move through circle center but they move parallel

p5.js Coding Questions
1

I posted this before but made the code simpler so I can explain my problem. When I call two individual movers it works but as soon as I use an array not:

I have a circle and with an array define two points on that circle for mover objects. Both movers from that array should move straight through the center of the circle and keep moving in that direction. Like the green arrows in the picture.
I get the two dots to start at a different position on the circle but they move in the same direction in parallel. One moves correctly through the center and the other in parallel.

I am missing something with the array…

both to center
both to center809Ă—797 38.8 KB

code:

let angle = 0;

let movers = [];
let r = 200;

function setup() {
  createCanvas(800, 800);
  


  
  for (let i = 0; i < 5; i++) {
  angle = random(TWO_PI*4)

  xv = sin(angle);
  yv = cos(angle);

  x = r * cos(angle);
  y = r * sin(angle);
    
  mov = new Mover(x, y, xv, yv);
  movers.push(mov);
}
}

function draw() {
  translate(width/2, height/2);
  background(0);
  stroke(255);
  strokeWeight(4);
  noFill();

  noFill();
  circle(0, 0, r * 2);
  circle(0, 0, 20);
  
  for (let i = 0; i < movers.length; i++) {
  movers[i].update();
  movers[i].show();
}
}

class Mover {
  constructor(x, y, xv, yv) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    

  }

  update() {
    let postion = createVector(x, y);
    let center = createVector(xv, yv);
    
    let dir = p5.Vector.sub(center, postion);
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    let force = dir.setMag(1);
    this.vel.add(force);
    
  }

  show() {
    fill(255, 0, 0);
    noStroke();
    ellipse(this.pos.x, this.pos.y, 20);
     
  }
}
1 Like
4

They’d all be 0?

Remark

Shouldn’t you declare vectors at start of class? <<<------ this seems to be wrong.

Apparently, it’s enough to declare everything in the constructor using this.

5

Awesome @Chrisir ! Yeah still very inexperienced here but this did solve it. Thanks a million!

Now it works!

let angle = 0;
let movers = [];
let r = 200;

function setup() {
  createCanvas(800, 800);
  


  
  for (let i = 0; i < 5; i++) {
  angle = random(TWO_PI*4)

  xv = sin(angle);
  yv = cos(angle);

  x = r * cos(angle);
  y = r * sin(angle);
    
  mov = new Mover(x, y, xv, yv);
  movers.push(mov);
}
}

function draw() {
  translate(width/2, height/2);
  background(0);
  stroke(255);
  strokeWeight(4);
  noFill();

  noFill();
  circle(0, 0, r * 2);
  circle(0, 0, 20);
  
  for (let i = 0; i < movers.length; i++) {
  movers[i].update();
  movers[i].show();
}
}

class Mover {
  constructor(x, y, xv, yv) {
    this. postion = createVector(x, y);
    this. center = createVector(xv, yv);
   
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    

  }

  update() {
     let dir = p5.Vector.sub(this.center, this.postion);
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    let force = dir.setMag(1);
    this.vel.add(force);
    
  }

  show() {
    fill(255, 0, 0);
    noStroke();
    ellipse(this.pos.x, this.pos.y, 20);
     
  }
}
1 Like
6

:slight_smile:

Remember to use Menu Edit | Tidy Code in the p5 Editor please

2 Likes