Sprite positions can't change indepently

[Vozcan]

Hi .i made a simple pixi app which tries to simulate spring forces but can't make it  work properly .

I've patched PIXI.ObservablePoint 

Object.assign(PIXI.ObservablePoint.prototype, {

    add: function(o) {
        this.set(this.x += o.x, this.y += o.y);
    },
    radd: function(o) {
        return new PIXI.ObservablePoint(test, window, this.x + o.x, this.y + o.y);//test is a useless callback function that  do nothing .
    },
    sub: function(o) {
        this.set(this.x -= o.x, this.y -= o.y);

    },
    rsub: function(o) {
        return new PIXI.ObservablePoint(test, window, this.x - o.x, this.y - o.y);
    },
    mult: function(o) {
        this.x *= o;
        this.y *= o;
    },
    rmult: function(o) {
        return new PIXI.ObservablePoint(test, window, this.x * o, this.y * o);
    },
    getAngle() {
        //in radians
        return Math.atan2(this.y, this.x);
    },
    getLenght() {
        return Math.hypot(this.x, this.y);
    },
    setLength(l) {
        let angle = this.getAngle();
        this.set(Math.cos(angle) * l, Math.sin(angle) * l);
    },
    setAngle(a) {
        //in radians;
        this.set(Math.cos(a) * this.getLenght(), Math.sin(a) * this.getLenght());
    }

});

 and this one is the sprite object 

class spring extends PIXI.Sprite {
    constructor(x, y) {
        super();
        this.texture = new PIXI.Texture.fromImage("assets/image.png");
        this.x = app.rw;//random width
        this.y = app.rh;//random height
        this.t = new PIXI.ObservablePoint(test,window,x,y);
        this.scale.set(.5 + Math.random() * .5);
        this.anchor.set(.5);
        this.friction=.9;
        
    }
    update() {
        this.d = this.t.rsub(this.position);
        this.d.mult(.1);
        this.vel.add(this.d);
        this.position.add(this.vel);
        this.vel.mult(this.friction);
    }
}
let arr = [];
for (var a = 0; a < 100; a++) {
    let bu = new spring(app.rw, app.rh);
    container.addChild(bu);
    arr.push(bu);
}

app.ticker.add(() => {
    for (var i = 0; i < arr.length; i++) {
        let bu = arr[i];
        bu.update();
    }
});

when i tried to create spring objects they behave weirdly .

If there is only one spring object on array nothing happens unusual.But if there are more then one spring object they act like this and i can't change their positions independently beyond that if i disable friction  they fastly disappear from screen .

[ivan.popelyshev]

not related - fromImage is not a constructor, you dont need "new" there. Also, Sprite has texture as first param:

super(PIXI.Texture.fromImage("assets/blablabla.png"));

As for real problem, I dont see is in the source code. You have to share the whole fiddle, or give me something that i can paste in http://pixijs.github.io/examples/#/basics/basic.js

The update looks like very unstable thing, but i dont see how can one ball affect another.

[ivan.popelyshev]

Do you use any calculations with "container.width" or "container.height"? Anything that can also move your screen?

[ivan.popelyshev]

this.vel.add(this.d);
this.position.add(this.vel);

there's no "this.vel" anywhere in constructor. How does it work at all?

[Vozcan]

Sorry i forgot to write them here I have a template for pixi applications (with  couple of patches   for velocity acceleration etc..).Here ,this is codepen link of it .Try to change position values of any object or remove friction .I think it has something to do with callbacks for observable point because  observablepoint  has got a default callback function for sprite position  named  onChange and it increases local_id variable .

Thanks in advance 

[ivan.popelyshev]

Object.assign(PIXI.Sprite.prototype, {
    acc: new PIXI.ObservablePoint(test, window, 0, 0),
    vel: new PIXI.ObservablePoint(test, window, 0, 0),
  
    k: .1,

    interactive: false,
    buttonMode: false

});

That's the same velocity and acceleration for all sprite objects. You have to create new one for each object independently. After that fix it looks correct.

[Vozcan]

Okey thank you so much. That fixed the problem .I always thing that Object assign create new vel, acc etc... point for each of the created objects .

Thanks again.