tlhcelik / p5js-collision

p5.js with collision objects example

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

p5.js Mouse Pointer with Collision Object Classes


Open Project in the p5Js Web Editor

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
    <script  src="p5_collide2d.js"></script>
  </head>

Yellow circles had created by p5.js code.
function MousePointer() {
  fill(255, 204, 0);

  this.MousePointer = function(){
    ellipse(mouseX, mouseY, 1,1);
  }

  this.collision = function (collisionObjectList) {
    for (var i = 0; i < collisionObjectList.length; i++) {
      if (mouseX >= (collisionObjectList[i].getX() - collisionObjectList[i].getRadius()) &&
          mouseX <= (collisionObjectList[i].getX() + collisionObjectList[i].getRadius()) ) {

            if (mouseY >= (collisionObjectList[i].getY() - collisionObjectList[i].getRadius()) &&
                mouseY <= (collisionObjectList[i].getY() + collisionObjectList[i].getRadius()) ) {
                    collisionObjectList[i].update();
            }
      }
    }
  };
}

When mouse pointer collide this object, set to radius 0. In this way can unvisible this object or you can delete object.

About

p5.js with collision objects example

License:GNU General Public License v3.0


Languages

Language:JavaScript 87.7%Language:HTML 12.3%