2

I'm writing code using p5js, a JavaScript library.
Right now, I'm making interactive art using Matter-js, a library of physics engines.

What I want to do is divide a picture into disjointed objects and mix them using a physics engine. Then, return to the original position so that the time will return with the passage of time or with a mouse click. I want to bring the object back and restore the picture.

I want to invalidate the collision detection of the object when returning this object to the initial position. If there is a collision detection, the objects will collide and you will not be able to return to the initial position.
Does anyone know a good way?

The URL of the application in the process of being created is posted below.　　 https://openprocessing.org/sketch/1387403

A part of the code of p5js is below. The whole code can be seen from the above URL.

function MonaBox(img, x, y, w, h) {
    let options = {
        friction: 0,
        restitution: 0.95,
    };
    this.body = Bodies.rectangle(x, y, w, h, options);
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.img = img;
    World.add(world, this.body);
    this.pos = this.body.position;
    this.angle = this.body.angle;
    

    this.show = function() {
        push();
        translate(this.pos.x, this.pos.y);
        rotate(this.angle);
        imageMode(CENTER);
        image(this.img, 0,0,this.w, this.h);
        pop();
    };

    this.update = function(isTouched){
        if(isTouched == false){
            this.pos = this.body.position;
            this.angle = this.body.angle;
        } else {
            if(this.pos.x != this.x){
                if(this.pos.x < this.x) this.pos.x +=0.1;
                if(this.pos.x > this.x) this.pos.x -=0.1;
            }
            if(this.pos.y != this.y){
                if(this.pos.y < this.y) this.pos.y +=0.1;
                if(this.pos.y > this.y) this.pos.y -=0.1;
            }
            if(this.angle != 0){
                if(this.pos.y < 0) this.pos.y +=0.1;
                if(this.pos.y > 0) this.pos.y -=0.1;
            }
        }
    };
}
George Profenza
  • 50,687
  • 19
  • 144
  • 218
kikpond15
  • 21
  • 3
  • 1
    Could you disable collision for each body as shown in [JavaScript, Matter.js: Disable collision for one body](https://stackoverflow.com/questions/32683832/javascript-matter-js-disable-collision-for-one-body)? – ggorlen Dec 08 '21 at 20:31
  • Do you mean to use collisionFilter to separate groups of all objects? – kikpond15 Dec 09 '21 at 05:42
  • 1
    Yes. If you check the link, it says "bodies ... will never collide if the value [of collisionFilter.group] is negative." Did you try that? – ggorlen Dec 09 '21 at 05:49
  • 1
    Thank you so much.　 I was able to do what I wanted to do safely. – kikpond15 Dec 09 '21 at 06:44
  • 2
    No problem, glad it worked out. Can you post a [self answer](https://stackoverflow.com/help/self-answer) sharing your solution? It might be helpful to other people in the future. If not, I'll suggest a duplicate of the linked post. – ggorlen Dec 09 '21 at 16:10

0 Answers0