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

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â€¦

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);
let force = dir.setMag(1);

}

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

}
}
``````
1 Like

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`.

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);
let force = dir.setMag(1);

}

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

}
}

``````
1 Like

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

2 Likes