#27: documentation updated to 0.3.1

evaristocuesta · Aug 15, 2021 · 451523d · 451523d
1 parent a6a3a81
commit 451523d
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 28 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/[email protected].0/dist/pict2pix.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/evaristocuesta/[email protected].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/[email protected].0/dist/pict2pix.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/[email protected].1/dist/pict2pix.min.js"></script>
     <script src="js/app.js"></script>
 </body>
 </html>

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected].0/dist/pict2pix.min.js&#x22;&#x3E;&#x3C;/script&#x3E;</code></pre> 
+                    <pre><code>&#x3C;script src=&#x22;https://cdn.jsdelivr.net/gh/evaristocuesta/[email protected].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/[email protected].0/dist/pict2pix.min.js&#x22;&#x3E;&#x3C;/script&#x3E;
+    &#x3C;script src=&#x22;https://cdn.jsdelivr.net/gh/evaristocuesta/[email protected].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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/[email protected].0/dist/pict2pix.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/[email protected].1/dist/pict2pix.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/[email protected].0/dist/pict2pix.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/[email protected].1/dist/pict2pix.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/[email protected].0/dist/pict2pix.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/[email protected].1/dist/pict2pix.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/[email protected].0/dist/pict2pix.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/[email protected].1/dist/pict2pix.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/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>