Merge pull request #30 from evaristocuesta/dev.0.3.1

Dev.0.3.1
evaristocuesta · Aug 15, 2021 · 0bc414e · 0bc414e
2 parents 57fa661 + c8631b4
commit 0bc414e
Show file tree

Hide file tree

Showing 15 changed files with 167 additions and 105 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ Pict2Pix.js is a creative coding library to apply fancy pixel animations to imag
 To get started with Pict2Pix.js library, follow the next steps:
 - Include the prict2pix.min.js file.
 ```html
-<script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.3.0/dist/pict2pix.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.3.1/dist/pict2pix.min.js"></script>
 ```
 - Place an image inside a container because the library will replace the image by a canvas.
 ```html
@@ -49,7 +49,7 @@ window.onload = function initialize() {
     <div id="div1">
         <img id="image-jh" src="images/jimi-hendrix.jpg">
     </div>
-    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.3.0/dist/pict2pix.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.3.1/dist/pict2pix.min.js"></script>
     <script src="js/app.js"></script>
 </body>
 </html>

diff --git a/dist/pict2pix.min.js b/dist/pict2pix.min.js
diff --git a/docs/index.html b/docs/index.html
@@ -9,7 +9,7 @@
     <link rel="canonical" href="https://evaristocuesta.github.io/pict2pix/">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.2.0/styles/a11y-dark.css">
-    <link rel="stylesheet" media="screen" href="css/style.css?v=0.3.0"/>
+    <link rel="stylesheet" media="screen" href="css/style.css?v=0.3.1"/>
 
     <meta name="theme-color" content="#7952b3">
 
@@ -151,7 +151,7 @@ <h3 class="fw-light">Setting up a basic skeleton</h3>
                 <li>
                   <div>Include the prict2pix.min.js file.</div> 
                   <div>
-                    <pre><code>&#x3C;script src=&#x22;https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.3.0/dist/pict2pix.min.js&#x22;&#x3E;&#x3C;/script&#x3E;</code></pre> 
+                    <pre><code>&#x3C;script src=&#x22;https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.3.1/dist/pict2pix.min.js&#x22;&#x3E;&#x3C;/script&#x3E;</code></pre> 
                   </div>
                 </li>
                 <li>
@@ -204,7 +204,7 @@ <h3 class="fw-light">Full basic skeleton code</h3>
     &#x3C;div class=&#x22;content&#x22; id=&#x22;div1&#x22;&#x3E;
         &#x3C;img id=&#x22;image-jh&#x22; src=&#x22;images/jimi-hendrix.jpg&#x22;&#x3E;
     &#x3C;/div&#x3E;
-    &#x3C;script src=&#x22;https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.3.0/dist/pict2pix.min.js&#x22;&#x3E;&#x3C;/script&#x3E;
+    &#x3C;script src=&#x22;https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.3.1/dist/pict2pix.min.js&#x22;&#x3E;&#x3C;/script&#x3E;
     &#x3C;script src=&#x22;js/app.js&#x22;&#x3E;&#x3C;/script&#x3E;
 &#x3C;/body&#x3E;
 &#x3C;/html&#x3E;
@@ -249,11 +249,11 @@ <h3 class="fw-light">Full basic skeleton code</h3>
 
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.3.0/dist/pict2pix.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.3.1/dist/pict2pix.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/highlight.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/languages/javascript.min.js"></script>
-    <script src="js/app.js?v=0.3.0.0"></script>
-    <script src="js/index.js?v=0.3.0.0"></script>
+    <script src="js/app.js?v=0.3.1"></script>
+    <script src="js/index.js?v=0.3.1"></script>
 
   </body>
 </html>
diff --git a/docs/js/led-matrix.js b/docs/js/led-matrix.js
@@ -2,10 +2,11 @@ const imagejh = document.getElementById('image-jh');
 
 window.onload = function initialize() {
     pict2pix.animate({
-        image: imagejh,
+        image: imagejh2,
         particleType: 'led-matrix',
         type: 'random',
-        speed: 6, 
-        transitionTime: 5000
+        transitionTime: 2000,
+        idleTime: 5000,
+        ledSize: 4
     });
 }
diff --git a/docs/led-matrix.html b/docs/led-matrix.html
@@ -9,7 +9,7 @@
     <link rel="canonical" href="https://evaristocuesta.github.io/pict2pix/led-matrix.html">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.2.0/styles/a11y-dark.css">
-    <link rel="stylesheet" media="screen" href="css/style.css?v=0.3.0"/>
+    <link rel="stylesheet" media="screen" href="css/style.css?v=0.3.1"/>
 
     <meta name="theme-color" content="#7952b3">
 
@@ -112,11 +112,12 @@ <h3 class="fw-light">Setting up Led Matrix Effect</h3>
 
 window.onload = function initialize() {
     pict2pix.animate({
-        image: imagejh,
+        image: imagejh2,
         particleType: 'led-matrix',
         type: 'random',
-        speed: 6, 
-        transitionTime: 5000
+        transitionTime: 2000,
+        idleTime: 3000,
+        ledSize: 4
     });
 }</code></pre>
                   </div>
@@ -135,8 +136,9 @@ <h3 class="fw-light">Setting up Led Matrix Effect</h3>
                         <li>vertical</li>
                       </ul>
                     </li>
-                    <li><b>speed</b>: Optional. Transition effect speed. Range 1-10. Default value 8.</li>
-                    <li><b>transitionTime</b>: Optional. Time between transitions in ms. Default value 8000.</li>
+                    <li><b>ledSize</b>: Optional. Led size. Must be greater than 4. Default value 4.</li>
+                    <li><b>transitionTime</b>: Optional. Trasitions time in ms. Default value 2000.</li>
+                    <li><b>idleTime</b>: Optional. Idle time in ms. Default value 5000.</li>
                   </ul>
                 </li>
               </ul>
@@ -157,11 +159,11 @@ <h3 class="fw-light">Setting up Led Matrix Effect</h3>
 
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.3.0/dist/pict2pix.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.3.1/dist/pict2pix.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/highlight.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/languages/javascript.min.js"></script>
-    <script src="js/app.js?v=0.3.0.0"></script>
-    <script src="js/led-matrix.js"></script>
+    <script src="js/app.js?v=0.3.1"></script>
+    <script src="js/led-matrix.js?v=0.3.1"></script>
 
   </body>
 </html>
diff --git a/docs/straight-particles.html b/docs/straight-particles.html
@@ -9,7 +9,7 @@
     <link rel="canonical" href="https://evaristocuesta.github.io/pict2pix/led-matrix.html">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.2.0/styles/a11y-dark.css">
-    <link rel="stylesheet" media="screen" href="css/style.css?v=0.3.0"/>
+    <link rel="stylesheet" media="screen" href="css/style.css?v=0.3.1"/>
 
     <meta name="theme-color" content="#7952b3">
 
@@ -151,11 +151,11 @@ <h3 class="fw-light">Setting up Straight Particles Effect</h3>
 
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.3.0/dist/pict2pix.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.3.1/dist/pict2pix.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/highlight.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/languages/javascript.min.js"></script>
-    <script src="js/app.js?v=0.3.0.0"></script>
-    <script src="js/straight-particles.js"></script>
+    <script src="js/app.js?v=0.3.1"></script>
+    <script src="js/straight-particles.js?v=0.3.1"></script>
 
   </body>
 </html>
diff --git a/docs/twisted-particles.html b/docs/twisted-particles.html
@@ -9,7 +9,7 @@
     <link rel="canonical" href="https://evaristocuesta.github.io/pict2pix/led-matrix.html">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.2.0/styles/a11y-dark.css">
-    <link rel="stylesheet" media="screen" href="css/style.css?v=0.3.0"/>
+    <link rel="stylesheet" media="screen" href="css/style.css?v=0.3.1"/>
 
     <meta name="theme-color" content="#7952b3">
 
@@ -151,11 +151,11 @@ <h3 class="fw-light">Setting up Twisted Particles Effect</h3>
 
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.3.0/dist/pict2pix.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.3.1/dist/pict2pix.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/highlight.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/languages/javascript.min.js"></script>
-    <script src="js/app.js?v=0.3.0.0"></script>
-    <script src="js/twisted-particles.js"></script>
+    <script src="js/app.js?v=0.3.1"></script>
+    <script src="js/twisted-particles.js?v=0.3.1"></script>
 
   </body>
 </html>
diff --git a/example/js/app.js b/example/js/app.js
@@ -13,8 +13,9 @@ window.onload = function initialize() {
         image: imagejh2,
         particleType: 'led-matrix',
         type: 'random',
-        speed: 6, 
-        transitionTime: 5000
+        transitionTime: 2000,
+        idleTime: 3000,
+        ledSize: 4
     });
 }
 

diff --git a/src/led-matrix-effect/default-led-particle.js b/src/led-matrix-effect/default-led-particle.js
@@ -5,31 +5,70 @@ export default class DefaultLedParticle {
     #y;
     #originalX;
     #originalY;
-    #targetX;
-    #targetY;
-    #maxDistance;
+    #fromX;
+    #fromY;
+    #toX;
+    #toY;
     #color;
-    #minForce;
+    #dx;
+    #dy;
+    #transitionTime;
+    #realTransitionTime;
+    #radio;
+    #endAngle = Math.PI*2;
 
     constructor(config, props) {
         this.#config = config;
         this.#x = 0;
         this.#y = 0;
         this.#originalX = props.x;
         this.#originalY = props.y;
-        this.setTargetToOrigin();
+        this.setFromOrigin();
+        this.setToOrigin();
         this.#color = props.color;
-        this.#minForce = ((Math.random() * this.#config.speed) + this.#config.speed / 2) * 0.001;
+        this.#radio = props.ledSize / 2;
     }
 
-    setTarget(x, y) {
-        this.#targetX = x;
-        this.#targetY = y;
+    #calculateDistance() {
+        this.#dx = this.#toX - this.#fromX;
+        this.#dy = this.#toY - this.#fromY;
     }
 
-    setTargetToOrigin() {
-        this.#targetX = this.#originalX;
-        this.#targetY = this.#originalY;
+    setTransitionTime(transitionTime) {
+        this.#transitionTime = transitionTime;
+        const max = Math.floor(this.#transitionTime - (this.#transitionTime / 10));
+        const min = Math.floor(this.#transitionTime / 2);
+        this.#realTransitionTime = Math.floor(Math.random() * (max - min) + min);
+    }
+
+    setFrom(x, y) {
+        this.#fromX = x;
+        this.#fromY = y;
+        this.#calculateDistance();
+    }
+
+    setTo(x, y) {
+        this.#toX = x;
+        this.#toY = y;
+        this.#calculateDistance();
+    }
+
+    setFromPos() {
+        this.#fromX = this.#x;
+        this.#fromY = this.#y;
+        this.#calculateDistance();
+    }
+
+    setFromOrigin() {
+        this.#fromX = this.#originalX;
+        this.#fromY = this.#originalY;
+        this.#calculateDistance();
+    }
+
+    setToOrigin() {
+        this.#toX = this.#originalX;
+        this.#toY = this.#originalY;
+        this.#calculateDistance();
     }
 
     setPos(x, y) {
@@ -54,31 +93,28 @@ export default class DefaultLedParticle {
     }
 
     getTargetX() {
-        return this.#targetX;
+        return this.#toX;
     }
 
     getTargetY() {
-        return this.#targetY;
+        return this.#toY;
     }
 
-    update(deltaTime, speed) {
-        const dx = this.#targetX - this.#x;
-        const dy = this.#targetY - this.#y;
-        if (Math.abs(dx) > 1 || Math.abs(dy) > 1 ) {
-            this.#x += speed * dx * deltaTime * this.#minForce;
-            this.#y += speed * dy * deltaTime * this.#minForce;
-            return false;
+    update(accumulatedTime) {
+        const time = accumulatedTime / this.#realTransitionTime;
+        if (accumulatedTime <= this.#realTransitionTime) {
+            this.#x = this.#dx * time + this.#fromX;
+            this.#y = this.#dy * time + this.#fromY;
         }
         else {
-            this.#x = this.#targetX;
-            this.#y = this.#targetY;
-            return true;
+            this.#x = this.#toX;
+            this.#y = this.#toY;
         }
     }
 
     draw(ctx) {
         ctx.beginPath();
-        ctx.arc(this.#x, this.#y, 2, 0, Math.PI*2);
+        ctx.arc(this.#x, this.#y, this.#radio, 0, this.#endAngle);
         ctx.closePath();
         ctx.fillStyle = this.#color;
         ctx.fill();

diff --git a/src/led-matrix-effect/led-matrix-effect-idle-state.js b/src/led-matrix-effect/led-matrix-effect-idle-state.js
@@ -15,7 +15,7 @@ export default class LedMatrixEffectIdleState extends LedMatrixEffectBaseState {
 
     update(deltaTime) {
         this.#accumulatedTime += deltaTime;
-        if (this.#accumulatedTime > this.#config.transitionTime) {
+        if (this.#accumulatedTime > this.#config.idleTime) {
             this.ledMatrixEffect.setState(LedMatrixStateFactory.createLedMatrixState(this.#config.type, this.#config, this.#particlesArray));
         }
     }

diff --git a/src/led-matrix-effect/led-matrix-effect-returning-state.js b/src/led-matrix-effect/led-matrix-effect-returning-state.js
@@ -5,25 +5,27 @@ export default class LedMatrixEffectReturningState extends LedMatrixEffectBaseSt
 
     #config;
     #particlesArray;
+    #accumulatedTime = 0;
 
     constructor(config, particles) {
         super();
         this.#config = config;
         this.#particlesArray = particles;
         for (let i = 0; i < this.#particlesArray.length; i++){
-
-            this.#particlesArray[i].setTargetToOrigin();
+            this.#particlesArray[i].setTransitionTime(this.#config.transitionTime);
+            this.#particlesArray[i].setFromPos();
+            this.#particlesArray[i].setToOrigin();
         }
     }
-
     update(deltaTime) {
-        let finished = true;
-        for (let i = 0; i < this.#particlesArray.length; i++){
-            let particleIdle = this.#particlesArray[i].update(deltaTime, 1);
-            finished = finished && particleIdle;
-        }
-        if (finished) {
+        this.#accumulatedTime += deltaTime;
+        if (this.#accumulatedTime > this.#config.transitionTime) {
             this.ledMatrixEffect.setState(LedMatrixStateFactory.createLedMatrixState('idle', this.#config, this.#particlesArray));
         }
+        else {
+            for (let i = 0; i < this.#particlesArray.length; i++){
+                this.#particlesArray[i].update(this.#accumulatedTime, this.#config.transitionTime);
+            }            
+        }
     }
 }