Merge pull request #23 from paulsonnentag/tim

Collision now working with the particles / particle demo nearly finished
paulsonnentag · Sep 7, 2016 · 307190f · 307190f
2 parents 2e4289a + 17e2d88
commit 307190f
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 23 deletions.
diff --git a/examples/particleDemo/server/index.js b/examples/particleDemo/server/index.js
@@ -14,14 +14,37 @@ swip(io, {
 
         const updatedParticles = particles.filter((particle) => particle.ttl > 0)
           .map((particle) => {
-          particle.x += particle.speedX;
-          particle.y += particle.speedY;
-          particle.ttl--;
+            particle.x += particle.speedX;
+            particle.y += particle.speedY;
+            particle.ttl--;
 
-          return particle;
-        })
+            return particle;
+          })
           .map((particle) => {
-
+            const currClients = cluster.clients;
+
+            const tresholdX = Math.abs(particle.speedX);
+            const tresholdY = Math.abs(particle.speedY);
+
+            currClients.forEach((client) => {
+              if (isParticleInClient(particle, client)) {
+                const leftSide = client.transform.x + tresholdX;
+                const rightSide = (client.transform.x + client.size.width) - tresholdX;
+                const topSide = client.transform.y + tresholdY;
+                const bottomSide = (client.transform.y + client.size.height) - tresholdY;
+
+
+                if ((particle.x >= rightSide && checkForWall(particle.y, client.openings.right, client.transform.y))
+                  || (particle.x <= leftSide && checkForWall(particle.y, client.openings.left, client.transform.y))) {
+                  particle.speedX *= -1;
+                }
+
+                if ((particle.y >= bottomSide && checkForWall(particle.x, client.openings.bottom, client.transform.x))
+                  || (particle.y <= topSide && checkForWall(particle.x, client.openings.top, client.transform.x))) {
+                  particle.speedY *= -1;
+                }
+              }
+            });
 
             return particle;
           });
@@ -30,7 +53,7 @@ swip(io, {
           particles: { $set: updatedParticles },
         };
       },
-      merge: () => ({}),
+      merge: (cluster1, cluster2) => ({ particles: { $set: cluster1.data.particles.concat(cluster2.data.particles) } }),
     },
     init: () => ({ particles: [] }),
   },
@@ -49,5 +72,30 @@ swip(io, {
   },
 });
 
+function isParticleInClient (particle, client) {
+  const leftSide = client.transform.x;
+  const rightSide = (client.transform.x + client.size.width);
+  const topSide = client.transform.y;
+  const bottomSide = (client.transform.y + client.size.height);
+
+  if (particle.x < rightSide && particle.x > leftSide && particle.y > topSide && particle.y < bottomSide) {
+    return true;
+  }
+
+  return false;
+}
+
+function checkForWall (particlePos, openings, transform) {
+  let isWall = true;
+
+  openings.forEach((opening) => {
+
+    if (particlePos >= (opening.start + transform) && particlePos <= (opening.end + transform)) {
+      isWall = false;
+    }
+  });
+
+  return isWall;
+}
 
 server.listen(3000);
diff --git a/examples/particleDemo/static/index.html b/examples/particleDemo/static/index.html
@@ -11,6 +11,10 @@
         padding: 0;
       }
 
+      canvas {
+        cursor: pointer;
+      }
+
     </style>
   </head>
 
@@ -92,6 +96,22 @@
       swip.init({ socket: socket, container: canvas }, function (client) {
         const converter = client.converter;
 
+        client.onClick(function (evt) {
+          var particles = [];
+          for(var i = 0; i < 20; i++) {
+              particles.push({
+                x: evt.position.x,
+                y: evt.position.y,
+                speedX: Math.random() * 20 - 10,
+                speedY: Math.random() * 20 - 10,
+                color: getRandomColor(),
+                ttl: 10000000000,
+              });
+          }
+
+          client.emit('addParticle', { particles: particles });
+        });
+
         client.onDragStart(function (evt) {
         });
 
@@ -109,25 +129,26 @@
             });
           }
 
-          client.emit('addParticle', { particles: particles });
+          //client.emit('addParticle', { particles: particles });
         });
 
         client.onDragEnd(function (evt) {
-          var particles = [];
-          for(var i = 0; i < 20; i++) {
-            for(pos in evt.position) {
-              particles.push({
-                x: evt.position[pos].x,
-                y: evt.position[pos].y,
-                speedX: Math.random() * 20 - 10,
-                speedY: Math.random() * 20 - 10,
-                color: getRandomColor(),
-                ttl: 100,
-              });
+
+            var particles = [];
+            for(var i = 0; i < 20; i++) {
+              for(pos in evt.position) {
+                particles.push({
+                  x: evt.position[pos].x,
+                  y: evt.position[pos].y,
+                  speedX: Math.random() * 20 - 10,
+                  speedY: Math.random() * 20 - 10,
+                  color: getRandomColor(),
+                  ttl: 500,
+                });
+              }
             }
-          }
 
-          client.emit('addParticle', { particles: particles });
+            //client.emit('addParticle', { particles: particles });
         });
 
         client.onUpdate(function (evt) {

diff --git a/src/client/init.js b/src/client/init.js
@@ -45,7 +45,6 @@ function init ({ socket, container }, initCallback) {
 
     client.onDragStart = (callback) => {
       container.addEventListener('touchstart', (evt) => {
-        evt.preventDefault();
         callback(converter.convertTouchPos(state.client.transform, evt));
       });
     };

diff --git a/src/server/utils.js b/src/server/utils.js
@@ -166,7 +166,7 @@ function lookupIDs (objects, objectIDs) {
 }
 
 function almostEqual (a, b) {
-  return Math.abs(a - b) < 0.01;
+  return Math.abs(a - b) < 0.1;
 }
 
 module.exports = {