Merge pull request #9 from evaristocuesta/animate-stop-0.2.0

Issue #8: Animate and stop functions added
evaristocuesta · Jul 15, 2021 · 461633a · 461633a
2 parents 408d587 + 81944f7
commit 461633a
Show file tree

Hide file tree

Showing 10 changed files with 143 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -21,7 +21,10 @@ Pict2Pix.js is a library to add pixels animation to an image
     <div id="div1">
         <img id="image-jh" src="images/jimi-hendrix.jpg">
     </div>
-    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.1.2/dist/pict2pix.min.js"></script>
+    <div id="div2">
+        <img id="image-ay" src="images/angus-young.jpg">
+    </div>
+    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.2.0/dist/pict2pix.min.js"></script>
     <script src="js/app.js"></script>
 </body>
 </html>
@@ -33,14 +36,33 @@ const image = document.getElementById('image-jh');
 window.onload = function initialize() {
     pict2pix.animate({
         image: image,
-        numberOfParticles: 3000,
+        numberOfParticles: 800,
         horizontalSpeed: 1,
         verticalSpeed: -1,
         particleType: 'twisted-particle'
     });
 }
+
+const imageay = document.getElementById('image-ay');
+const div2 = document.getElementById('div2');
+
+div2.onmouseenter = function over() {
+    pict2pix.animate({
+        image: imageay,
+        numberOfParticles: 800,
+        horizontalSpeed: 1,
+        verticalSpeed: 1,
+        particleType: 'straight-particle'
+    });
+}
+
+div2.onmouseleave = function out() {
+    pict2pix.stop(imageay.id);
+}
 ```
 
+Take a look at the example directory for more example code.
+
 ### Options
 - **image**: Mandatory. It is the image wich you want to add de pixels effect
 - **numberOfParticles**: Optional. Number of particles in the image. Be careful about the perfomance if you add a big number of particles. The default value is 3000.

diff --git a/dist/pict2pix.min.js b/dist/pict2pix.min.js
diff --git a/example/css/style.css b/example/css/style.css
@@ -2,8 +2,35 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    background: black;
+    background: white;
 }
-body {
-  overflow: hidden;
+
+h1 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.content {
+  padding: 10px 10px;
+  margin: 20px 50px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.content img {
+  max-height: 100%;
+  max-width: 90%;
+  box-shadow: 0px 0px 6px 0px #a5a5a5;
+  border-radius: 5px;
+  padding: 20px;
+}
+
+.content canvas {
+  max-height: 100%;
+  max-width: 90%;
+  box-shadow: 0px 0px 6px 0px #a5a5a5;
+  border-radius: 5px;
+  padding: 20px;
 }
diff --git a/example/images/jimi-hendrix.jpg b/example/images/jimi-hendrix.jpg
diff --git a/example/index.html b/example/index.html
@@ -8,13 +8,18 @@
     <link rel="stylesheet" media="screen" href="css/style.css"/>
 </head>
 <body>
-    <div id="div1">
+    <h1>Pict2Pix.js</h1>
+    <div class="content" id="div1">
         <img id="image-jh" src="images/jimi-hendrix.jpg">
     </div>
-    <div id="div2">
+    <div class="content">Always working</div>
+    <div class="content" id="div2">
         <img id="image-ay" src="images/angus-young.jpg">
     </div>
-    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.1.2/dist/pict2pix.min.js"></script>
+    <div class="content">Working when the mouse is over the picture</div>
+
+    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.2.0/dist/pict2pix.min.js"></script>
+
     <script src="js/app.js"></script>
 </body>
 </html>
diff --git a/example/js/app.js b/example/js/app.js
@@ -1,20 +1,28 @@
 const imagejh = document.getElementById('image-jh');
-const imageay = document.getElementById('image-ay');
+
 window.onload = function initialize() {
-
     pict2pix.animate({
         image: imagejh,
-        numberOfParticles: 1500,
+        numberOfParticles: 800,
         horizontalSpeed: -1,
         verticalSpeed: -1,
-        particleType: 'straight-particle'
+        particleType: 'twisted-particle'
     });
+}
 
+const imageay = document.getElementById('image-ay');
+const div2 = document.getElementById('div2');
+
+div2.onmouseenter = function over() {
     pict2pix.animate({
         image: imageay,
         numberOfParticles: 800,
         horizontalSpeed: 1,
         verticalSpeed: 1,
-        particleType: 'twisted-particle'
+        particleType: 'straight-particle'
     });
+}
+
+div2.onmouseleave = function out() {
+    pict2pix.stop(imageay.id);
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pict-2-pix",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Pict2Pix",
   "private": true,
   "scripts": {

diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,43 @@
 import Pict2Pix from "./pict2pix.js";
 
+var pict2PixArray = {};
+
 export function animate(config) {
-    return new Pict2Pix(config);
-}
+    if (!pict2PixArray[config.image.id]) {
+        pict2PixArray[config.image.id] = {pict2pix: new Pict2Pix(config), running: true};
+    }
+    pict2PixArray[config.image.id].running = true;
+    pict2PixArray[config.image.id].pict2pix.start();
+}
+
+export function stop(id) {
+    pict2PixArray[id].running = false;
+    pict2PixArray[id].pict2pix.stop();
+}
+
+function startAll() {
+    for (var key in pict2PixArray) {
+        if (pict2PixArray[key].running) {
+            pict2PixArray[key].pict2pix.start();
+        }
+    }
+}
+
+function stopAll() {
+    for (var key in pict2PixArray) {
+        if (pict2PixArray[key].running) {
+            pict2PixArray[key].pict2pix.stop();
+        }
+    }
+}
+
+function handleVisibilityChange() {
+    if (document.visibilityState === "hidden") {
+        stopAll();
+    } else  {
+        startAll();
+    }
+  }
+
+  document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
diff --git a/src/pict2pix.js b/src/pict2pix.js
@@ -1,21 +1,20 @@
 import ParticleFactory from "./particle-factory";
-import Particle from "./particle";
 
 export default class Pict2Pix {
     #canvas;
     #ctx;
+    #reqAnim;
     #lastTime = 0;
     #deltaTime = 0;
     #particlesArray = [];
     #config;
+    running = false;
 
     constructor(config) {
         this.#config = config;
-
         this.#canvas = document.createElement('canvas');
         this.#canvas.width = this.#config.image.width || this.#config.image.naturalWidth;
         this.#canvas.height = this.#config.image.height || this.#config.image.naturalHeight;
-        this.#config.image.replaceWith(this.#canvas);
         this.#ctx = this.#canvas.getContext('2d');
 
         this.#ctx.drawImage(this.#config.image, 0, 0, this.#canvas.width, this.#canvas.height);
@@ -33,8 +32,6 @@ export default class Pict2Pix {
         for (let i = 0; i < this.#config.numberOfParticles; i++){
             this.#particlesArray.push(factory.createParticle(config));
         }
-
-        requestAnimationFrame(this.loop.bind(this));
     }
 
     mapImage(pixels) {
@@ -80,14 +77,36 @@ export default class Pict2Pix {
         }
     }
 
+    start() {
+        if (!this.running) {
+            this.#lastTime = 0;
+            this.#config.image.style.display = "none";
+            this.#config.image.parentNode.insertBefore(this.#canvas, this.#config.image);
+            this.#reqAnim = requestAnimationFrame(this.loop.bind(this));
+            this.running = true;
+        }
+    }
+
+    stop() {
+        if (this.running) {
+            this.#config.image.style.display = "initial";
+            this.#config.image.parentNode.removeChild(this.#canvas);
+            window.cancelAnimationFrame(this.#reqAnim);
+            this.running = false;
+        }
+    }
+
     loop(timeStamp) {
+        if (!this.#lastTime) {
+            this.#lastTime = timeStamp;
+        }
         this.#deltaTime = timeStamp - this.#lastTime;
         this.#lastTime = timeStamp;
 
         this.update(this.#deltaTime);
 
         this.draw();
 
-        requestAnimationFrame(this.loop.bind(this))
+        this.#reqAnim = requestAnimationFrame(this.loop.bind(this))
     }
 }