update parameters section

update sample page link addresses
update all sample pages and config samples
2020-04-10 16:16:04 -06:00 · 2020-04-10 16:13:29 -06:00 · 2020-04-10 16:12:15 -06:00 · 2020-04-10 16:11:55 -06:00 · 2020-04-10 15:55:40 -06:00 · 2020-04-10 15:54:44 -06:00
16 changed files with 353 additions and 106 deletions
--- a/.gitignore
+++ b/.gitignore
@ -9,6 +9,5 @@
 # Local History for Visual Studio Code
 .history/

-# compiled CSS
+# expanded CSS for troubleshooting only
 css-review
-css
--- a/README.md
+++ b/README.md
@ -16,7 +16,7 @@ Very simple, lightweight animated particles display that **does not** require an

 ## Usage (simple)

-1. Download the release file.
+1. [Download the release file](https://git.asifbacchus.app/asif/ab-particles/releases).
 2. Edit your HTML to include a canvas with *ID* 'particles'. You can put the canvas anywhere you'd like, but I'd strongly recommend putting it at the end of the *body*.

    ```html
@ -54,6 +54,8 @@ Very simple, lightweight animated particles display that **does not** require an
    </head>
    ```

+    > Remember to use the proper integrity checksum found in *js/integrity.sha384* and not copy the one here!
+
 5. Because the script reads CSS variables, we need to wait until CSS is fully parsed. Add an *onload* event to the *body* tag of your HTML:

    ```html
@ -96,9 +98,11 @@ sizeMultiplier|Random multiplier between 0 and this number that is applied to va
 width|Stroke width (px) of connector lines.|integer|1
 connections|Whether or not to connect the particles to each other when they get close enough.|boolean|true
 connectionDensity|How densely particles connect to each other.<br/>**Careful not to set this number too high or you can crash the browser!**|finite number > 1|15
+noBounceH|Particles do not bounce off the left or right sides of the window.|boolean|false
+noBounceV|Particles do not bounce off the top or bottom of the window.|boolean|false
 speed|How quickly the particles bounce around the window|1 < integer < 1000|50
-hSpeed|How quickly the particles move horizontally. Positive values move to the right, negative to the left. This overrides the value of 'speed'.|-1000 < integer < 1000|1
-vSpeed|How quickly the particles move vertically. Positive values move down, negative move up. This overrides the value of 'speed'.|-1000 < integer < 1000|1
+speedH|How quickly the particles move horizontally. Positive values move to the right, negative to the left. This overrides the value of 'speed'.|-1000 < integer < 1000|1
+speedV|How quickly the particles move vertically. Positive values move down, negative move up. This overrides the value of 'speed'.|-1000 < integer < 1000|1
 avoidMouse|Should particles be repelled away from the mouse?|boolean|true
 hover|Should connection lines change colours when the mouse is near them?|boolean|true

@ -106,15 +110,15 @@ hover|Should connection lines change colours when the mouse is near them?|boolea

 ### default settings (explicit)

-Random balanced horizontal and vertical motion bouncing off the edges of the window. Particles are repelled by the mouse and connections are highlighted on hover. [Sample](defaults.html)
+Random balanced horizontal and vertical motion bouncing off the edges of the window. Particles are repelled by the mouse and connections are highlighted on hover. [Sample](https://asifbacchus.app/public/samples/ab-particles/defaults.html)

 ```html
-<body onload='particles(opacity=100, numParticles=10, sizeMultiplier=5, width=1, connections=true, connectionDensity=15, speed=50, avoidMouse=true, hover=true)'>
+<body onload='particles(opacity=100, numParticles=10, sizeMultiplier=5, width=1, connections=true, connectionDensity=15, noBounceH=false, noBounceV=false, speed=50, avoidMouse=true, hover=true)'>
 ```

 ### starry night

-Freeze the display, remove connections, disable mouse interaction. Creates a random assortment of particles that will change on each reload. [Sample](starrynight.html)
+Freeze the display, remove connections, disable mouse interaction. Creates a random assortment of particles that will change on each reload. [Sample](https://asifbacchus.app/public/samples/ab-particles/starrynight.html)

 ```html
 <body onload='particles(speed=0, connections=false, avoidMouse=false, hover=false)'>
@ -122,42 +126,42 @@ Freeze the display, remove connections, disable mouse interaction. Creates a ran

 ### snow

-No horizontal movement, connections or mouse interaction. Particles fall straight down. [Sample](snow.html)
+No horizontal movement, connections or mouse interaction. Particles fall straight down, so no vertical bounce. [Sample](https://asifbacchus.app/public/samples/ab-particles/snow.html)

 ```html
-<body onload='particles(hSpeed=0, vSpeed=100, connections=false, avoidMouse=false, hover=false)'>
+<body onload='particles(noBounceV=true, speedV=100, connections=false, avoidMouse=false, hover=false)'>
 ```

 ### bubbles

-Opposite of snow, looks a little like bubbles. [Sample](bubbles.html)
+Opposite of snow, looks a little like bubbles. No vertical bounce and negative vertical speed. Added a little horizontal speed for effect and to show off 'skew'. [Sample](https://asifbacchus.app/public/samples/ab-particles/bubbles.html)

 ```html
-<body onload='particles(hSpeed=0, vSpeed=-100, connections=false, avoidMouse=false, hover=false)'>
+<body onload='particles(noBounceV=true, speedV=-100, speedH=-15,connections=false, avoidMouse=false, hover=false)'>
 ```

 ### warp speed to the right

-Moving right would make the particles go left, therefore negative movement. We don't want connections or mouse interaction here either. [Sample](warpright.html)
+Moving right would make the particles go left, therefore negative movement. No horizontal bounce. We don't want connections or mouse interaction here either. [Sample](https://asifbacchus.app/public/samples/ab-particles/warpright.html)

 ```html
-<body onload='particles(vSpeed=0, hSpeed=-100, connections=false, avoidMouse=false, hover=false)'>
+<body onload='particles(noBounceH=true, speedH=-100, connections=false, avoidMouse=false, hover=false)'>
 ```

 ### warp speed to the left

-Moving left would make the particles go right, therefore positive movement. We don't want connections or mouse interaction here either. [Sample](warpleft.html)
+Moving left would make the particles go right, therefore positive movement. No horizontal bounce. We don't want connections or mouse interaction here either. Added a little positive vertical speed to show off skew. [Sample](https://asifbacchus.app/public/samples/ab-particles/warpleft.html)

 ```html
-<body onload='particles(vSpeed=0, hSpeed=100, connections=false, avoidMouse=false, hover=false)'>
+<body onload='particles(noBounceH=true, speedH=100, speedV=15, connections=false, avoidMouse=false, hover=false)'>
 ```

 ### my usual settings (nice background effect)

-I use this for screens where I can't figure out a meaningful background, so why not generate something nice to look at?  [Sample](index.html)
+I use this for screens where I can't figure out a meaningful background, so why not generate something nice to look at? Toning down the opacity a little to not distract from the text. [Sample](https://asifbacchus.app/public/samples/ab-particles/index.html)

 ```html
-<body onload='particles(speed=15, avoidMouse=false)'>
+<body onload='particles(speed=15, avoidMouse=false, opacity=65)'>
 ```

 ## Advanced loading
--- a/bubbles.html
+++ b/bubbles.html
@ -4,22 +4,47 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animated particles</title>
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Montserrat&display=block"
+        crossorigin="anonymous">
    <link rel="stylesheet"
        href="css/index.min.css"
-        crossorigin="anonymous"/>
+        integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
+        crossorigin="anonymous">
 </head>
-<body onload='particles(hSpeed=0, vSpeed=-100, connections=false, avoidMouse=false, hover=false)'>
+<body onload='particles(noBounceV=true, speedV=-100, speedH=-15,connections=false, avoidMouse=false, hover=false)'>
    <div class="wrapper">
-        <h1>Lorem ipsum dolor sit amet.</h1>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus quibusdam est rem sequi consectetur doloremque. Laborum suscipit, incidunt excepturi veniam rerum quis accusamus eaque, obcaecati modi doloremque eveniet ratione!</p>
-        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, <a href="#">perspiciatis nobis ipsum</a> nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.</p>
+        <div class="spacer"></div>
+        <header>
+            <h1>ab-particles</h1>
+            <h2>simple, lightweight vanilla-javascript particle animation</h2>
+        </header>
+        <main>
+            <p>This is a sample page showing off some settings of this tiny (5kb!) script. No external libraries, no external configuration files, no jQuery. Just javascript and easy colour styling via CSS variables.</p>
+            <p>Configuration details, download and source at <a href="http://git.asifbacchus.app/asif/ab-particles.git">my git repo</a>.</p>
+            <p>Thanks for checking it out!</p>
+        </main>
+        <div class="spacer"></div>
+        <footer>
+            <p>Design, code and content appearing on this site is developed by
+            <a href="https://asifbacchus.com">Asif Bacchus</a> ('author') and
+            may be freely used and redistributed in accordance with the <a
+            href="https://git.asifbacchus.app/asif/ab-particles/LICENSE">license</a>
+            appearing in the <a
+            href="https://git.asifbacchus.app/asif/ab-particles.git">content
+            repo</a>. Author provides no warranties, guarantees or implications
+            of suitability and disclaims any and all responsibility arising from
+            the usage of anything appearing on or linked to this page for any
+            purpose whatsoever. Copyright 2020 Asif Bacchus. Some Rights
+            Reserved.</p>
+        </footer>
    </div>
    <canvas id="particles"></canvas>
    <!-- javascript -->
    <script
        src="js/ab-particles.min.js"
+        integrity="sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp"
        crossorigin="anonymous"
-        integrity="sha384-eUruDNgO8YkfdY2sU3oCkjzhJbnXXT9kac3I8DwYkh2mjE0jCIKvTgN6yvvo9SqO"
        defer>
    </script>
    <!-- end javascript -->
--- a/css/index.min.css
+++ b/css/index.min.css
@ -0,0 +1,2 @@
+@media only screen and (max-width: 640px){:root{font-size:42.5%}}@media only screen and (min-width: 641px) and (max-width: 1024px){:root{font-size:50%}}@media only screen and (min-width: 1025px){:root{font-size:62.5%}}:root{height:100%;scroll-behavior:smooth;width:100%}:root body{font-size:2.2rem;height:100%;line-height:2.75rem;width:100%}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:inherit;font:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}:root{--col-bg: #212121;--col-link: #bbdefb;--col-text: #ebe7c5;--col-particle-stroke-hover: #0892d0;--col-particle-stroke: #035096;--col-particle: #536878}body{background-color:var(--col-bg);color:var(--col-text);font-family:'Montserrat', sans-serif;font-size:1.6rem;line-height:1.6rem}main{-webkit-box-flex:1;-ms-flex:1;flex:1}header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}footer{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.5rem;line-height:1.85rem}h1{font-size:5rem;line-height:5rem;margin-bottom:1rem}h2{font-size:3rem;line-height:3rem;margin-bottom:5rem}p{margin-bottom:1.5rem}a{color:inherit;font-weight:bold;text-decoration:underline;-webkit-transition:all 0.5s ease;transition:all 0.5s ease}a:hover,a:focus,a:active{color:var(--col-link)}#particles{height:100%;left:0;position:fixed;top:0;width:100%;z-index:-999}.wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:100%;padding:2rem}.spacer{-webkit-box-flex:1;-ms-flex:1;flex:1}
+/*# sourceMappingURL=index.min.css.map */
--- a/css/index.min.css.map
+++ b/css/index.min.css.map
@ -0,0 +1,11 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "../scss/index.scss",
+        "../scss/_reset.scss",
+        "../scss/_palette.scss"
+    ],
+    "names": [],
+    "file": "index.min.css"
+}
--- a/defaults.html
+++ b/defaults.html
@ -4,22 +4,47 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animated particles</title>
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Montserrat&display=block"
+        crossorigin="anonymous">
    <link rel="stylesheet"
        href="css/index.min.css"
-        crossorigin="anonymous"/>
+        integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
+        crossorigin="anonymous">
 </head>
-<body onload='particles(opacity=100, numParticles=10, sizeMultiplier=5, width=1, connections=true, connectionDensity=15, speed=50, avoidMouse=true, hover=true)'>
+<body onload='particles(opacity=100, numParticles=10, sizeMultiplier=5, width=1, connections=true, connectionDensity=15, noBounceH=false, noBounceV=false, speed=50, avoidMouse=true, hover=true)'>
    <div class="wrapper">
-        <h1>Lorem ipsum dolor sit amet.</h1>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus quibusdam est rem sequi consectetur doloremque. Laborum suscipit, incidunt excepturi veniam rerum quis accusamus eaque, obcaecati modi doloremque eveniet ratione!</p>
-        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, <a href="#">perspiciatis nobis ipsum</a> nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.</p>
+        <div class="spacer"></div>
+        <header>
+            <h1>ab-particles</h1>
+            <h2>simple, lightweight vanilla-javascript particle animation</h2>
+        </header>
+        <main>
+            <p>This is a sample page showing off some settings of this tiny (5kb!) script. No external libraries, no external configuration files, no jQuery. Just javascript and easy colour styling via CSS variables.</p>
+            <p>Configuration details, download and source at <a href="http://git.asifbacchus.app/asif/ab-particles.git">my git repo</a>.</p>
+            <p>Thanks for checking it out!</p>
+        </main>
+        <div class="spacer"></div>
+        <footer>
+            <p>Design, code and content appearing on this site is developed by
+            <a href="https://asifbacchus.com">Asif Bacchus</a> ('author') and
+            may be freely used and redistributed in accordance with the <a
+            href="https://git.asifbacchus.app/asif/ab-particles/LICENSE">license</a>
+            appearing in the <a
+            href="https://git.asifbacchus.app/asif/ab-particles.git">content
+            repo</a>. Author provides no warranties, guarantees or implications
+            of suitability and disclaims any and all responsibility arising from
+            the usage of anything appearing on or linked to this page for any
+            purpose whatsoever. Copyright 2020 Asif Bacchus. Some Rights
+            Reserved.</p>
+        </footer>
    </div>
    <canvas id="particles"></canvas>
    <!-- javascript -->
    <script
        src="js/ab-particles.min.js"
+        integrity="sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp"
        crossorigin="anonymous"
-        integrity="sha384-eUruDNgO8YkfdY2sU3oCkjzhJbnXXT9kac3I8DwYkh2mjE0jCIKvTgN6yvvo9SqO"
        defer>
    </script>
    <!-- end javascript -->
--- a/index.html
+++ b/index.html
@ -4,22 +4,47 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animated particles</title>
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Montserrat&display=block"
+        crossorigin="anonymous">
    <link rel="stylesheet"
        href="css/index.min.css"
-        crossorigin="anonymous"/>
+        integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
+        crossorigin="anonymous">
 </head>
-<body onload='particles(avoidMouse=false, speed=15)'>
+<body onload='particles(speed=15, avoidMouse=false, opacity=65)'>
    <div class="wrapper">
-        <h1>Lorem ipsum dolor sit amet.</h1>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus quibusdam est rem sequi consectetur doloremque. Laborum suscipit, incidunt excepturi veniam rerum quis accusamus eaque, obcaecati modi doloremque eveniet ratione!</p>
-        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, <a href="#">perspiciatis nobis ipsum</a> nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.</p>
+        <div class="spacer"></div>
+        <header>
+            <h1>ab-particles</h1>
+            <h2>simple, lightweight vanilla-javascript particle animation</h2>
+        </header>
+        <main>
+            <p>This is a sample page showing off some settings of this tiny (5kb!) script. No external libraries, no external configuration files, no jQuery. Just javascript and easy colour styling via CSS variables.</p>
+            <p>Configuration details, download and source at <a href="http://git.asifbacchus.app/asif/ab-particles.git">my git repo</a>.</p>
+            <p>Thanks for checking it out!</p>
+        </main>
+        <div class="spacer"></div>
+        <footer>
+            <p>Design, code and content appearing on this site is developed by
+            <a href="https://asifbacchus.com">Asif Bacchus</a> ('author') and
+            may be freely used and redistributed in accordance with the <a
+            href="https://git.asifbacchus.app/asif/ab-particles/LICENSE">license</a>
+            appearing in the <a
+            href="https://git.asifbacchus.app/asif/ab-particles.git">content
+            repo</a>. Author provides no warranties, guarantees or implications
+            of suitability and disclaims any and all responsibility arising from
+            the usage of anything appearing on or linked to this page for any
+            purpose whatsoever. Copyright 2020 Asif Bacchus. Some Rights
+            Reserved.</p>
+        </footer>
    </div>
    <canvas id="particles"></canvas>
    <!-- javascript -->
    <script
        src="js/ab-particles.min.js"
+        integrity="sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp"
        crossorigin="anonymous"
-        integrity="sha384-eUruDNgO8YkfdY2sU3oCkjzhJbnXXT9kac3I8DwYkh2mjE0jCIKvTgN6yvvo9SqO"
        defer>
    </script>
    <!-- end javascript -->
--- a/js/ab-particles.js
+++ b/js/ab-particles.js
@ -58,12 +58,12 @@ function particles(){
        // check particle position, mouse position, move particle and draw it
        update(){
            // check if particle.x is still within canvas
-            if (vSpeed === 0 && hSpeed > 0){
+            if (noBounceH === true && speedH > 0){
                if (this.x > canvas.width){
                    this.x = 0;
                }
            }
-            else if (vSpeed === 0 && hSpeed < 0){
+            else if (noBounceH === true && speedH < 0){
                if (this.x < 0){
                    this.x = canvas.width;
                }
@ -75,12 +75,12 @@ function particles(){
            }

            // check if particle.y is still within canvas
-            if (hSpeed === 0 && vSpeed > 0){
+            if (noBounceV === true && speedV > 0){
                if (this.y > canvas.height) {
                    this.y = 0;
                }
            }
-            else if (hSpeed === 0 && vSpeed < 0){
+            else if (noBounceV === true && speedV < 0){
                if (this.y < 0){
                    this.y = canvas.height;
                }
@ -114,8 +114,8 @@ function particles(){

            // move particle
            if (speed !== 0) {
-                this.x += this.directionX * speed * hSpeed;
-                this.y += this.directionY * speed * vSpeed;
+                this.x += this.directionX * speed * speedH;
+                this.y += this.directionY * speed * speedV;
            }

            // draw particle
@ -129,24 +129,23 @@ function particles(){
        let numberOfParticles = canvas.width * 0.01;
        for (let i = 0; i < numberOfParticles * numParticles; i++){
            let size = (Math.random() * sizeMultiplier) + 1;
+            // set X
            let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
-            let y = (Math.random() * ((innerHeight - size * 2) - (size * 2)) + size * 2);
-            // set directionX
-            let directionX = 0
-            if (vSpeed === 0){
-                directionX = (Math.random() * 5);
-            }
-            else {
-                directionX = (Math.random() * 5) - 2.5;
-            }
-            // set directionY
-            let directionY = 0;
-            if (hSpeed === 0){
-                directionY = (Math.random() * 5);
+            if (noBounceH){
+                directionX = Math.random() * 5;
            }
            else{
-                directionY = (Math.random() * 5) - 2.5;
+                directionX = (Math.random() * 5) - 2.5;
            }
+            // set Y
+            let y = (Math.random() * ((innerHeight - size * 2) - (size * 2)) + size * 2);
+            if (noBounceV){
+                directionY = Math.random() * 5;
+            }
+            else{
+                directionY = (Math.random() * 5) -2.5;
+            }
+

            particlesArray.push(new Particle(x, y, directionX, directionY, size));
        }
@ -287,6 +286,28 @@ function particles(){
            console.log("'connectionDensity' must be a finite number greater than 1. Using default of '15'.");
        }

+        if (typeof noBounceH == 'undefined'){
+            noBounceH = false;
+        }
+        else if (typeof noBounceH === 'boolean'){
+            noBounceH;
+        }
+        else{
+            noBounceH = false;
+            console.log("'noBounceH' must be either 'true' or 'false'. Using default of 'false'.");
+        }
+
+        if (typeof noBounceV == 'undefined'){
+            noBounceV = false;
+        }
+        else if (typeof noBounceV === 'boolean'){
+            noBounceV;
+        }
+        else{
+            noBounceV = false;
+            console.log("'noBounceV' must be either 'true' or 'false'. Using default of 'false'.");
+        }
+
        if (typeof speed == 'undefined'){
            speed = 50;
        }
@ -298,28 +319,28 @@ function particles(){
            console.log("'speed' must be an integer between 1-1000. Using default of '50'.");
        };

-        if (typeof hSpeed == 'undefined'){
-            hSpeed = 1;
+        if (typeof speedH == 'undefined'){
+            speedH = 1;
        }
-        else if (Number.isInteger(hSpeed) && (-1000 <= hSpeed && hSpeed <= 1000)){
-            hSpeed;
+        else if (Number.isInteger(speedH) && (-1000 <= speedH && speedH <= 1000)){
+            speedH;
            speed = 1;
        }
        else{
-            hSpeed = 1;
-            console.log("'hSpeed' must be an integer between -1000 and 1000. Using default of '1'.");
+            speedH = 1;
+            console.log("'speedH' must be an integer between -1000 and 1000. Using default of '1'.");
        };

-        if (typeof vSpeed == 'undefined'){
-            vSpeed = 1;
+        if (typeof speedV == 'undefined'){
+            speedV = 1;
        }
-        else if (Number.isInteger(vSpeed) && (-1000 <= vSpeed && vSpeed <= 1000)){
-            vSpeed;
+        else if (Number.isInteger(speedV) && (-1000 <= speedV && speedV <= 1000)){
+            speedV;
            speed = 1;
        }
        else{
-            vSpeed = 1;
-            console.log("'vSpeed' must be an integer between -1000 and 1000. Using default of '1'.");
+            speedV = 1;
+            console.log("'speedV' must be an integer between -1000 and 1000. Using default of '1'.");
        };

        if (typeof avoidMouse == 'undefined'){
--- a/js/ab-particles.min.js
+++ b/js/ab-particles.min.js
--- a/js/integrity.sha384
+++ b/js/integrity.sha384
@ -1,5 +1,5 @@
 ab-particles.js
-sha384-32rQlAEttnfdAaALKP4Mx9JCGitJhSWyOtuEEhN9guPoNMB/3N9bvQdyLOMwWfmf
+sha384-PpJE3R4II13gzBeewjjwi2f4nhJwQlF+npzxD5peeir09lsN/8PQi6JPvi3l98LB

 ab-particles.min.js
-sha384-eUruDNgO8YkfdY2sU3oCkjzhJbnXXT9kac3I8DwYkh2mjE0jCIKvTgN6yvvo9SqO
+sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp
--- a/scss/_palette.scss
+++ b/scss/_palette.scss
@ -1,8 +1,10 @@
-// colours used thoughout site
+// colour palette
 :root {
    --col-bg: #212121;
-    --col-particle: #536878;
-    --col-particle-stroke: #035096;
-    --col-particle-stroke-hover: #0892d0;
+    --col-link: #bbdefb;
    --col-text: #ebe7c5;
+
+    --col-particle-stroke-hover: #0892d0;
+    --col-particle-stroke: #035096;
+    --col-particle: #536878;
 }
--- a/scss/index.scss
+++ b/scss/index.scss
@ -9,12 +9,37 @@ import partials
 body {
    background-color: var(--col-bg);
    color: var(--col-text);
+    font-family: 'Montserrat', sans-serif;
+    font-size: 1.6rem;
+    line-height: 1.6rem;
+}
+
+main {
+    flex: 1;
+}
+
+header {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+}
+
+footer {
+    display: flex;
+    font-size: 1.5rem;
+    line-height: 1.85rem;
 }

 h1 {
    font-size: 5rem;
    line-height: 5rem;
-    margin-bottom: 3rem;
+    margin-bottom: 1rem;
+}
+
+h2 {
+    font-size: 3rem;
+    line-height: 3rem;
+    margin-bottom: 5rem;
 }

 p {
@ -23,19 +48,16 @@ p {

 a {
    color: inherit;
+    font-weight: bold;
+    text-decoration: underline;
+    transition: all 0.5s ease;
    &:hover,
    &:focus,
    &:active {
-        color: red;
+        color: var(--col-link);
    }
 }

-.wrapper {
-    display: flex;
-    flex-direction: column;
-    padding: 2rem;
-}
-
 #particles {
    height: 100%;
    left: 0;
@ -44,3 +66,14 @@ a {
    width: 100%;
    z-index: -999;
 }
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 100%;
+    padding: 2rem;
+}
+ .spacer {
+     flex: 1;
+ }
--- a/snow.html
+++ b/snow.html
@ -4,22 +4,47 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animated particles</title>
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Montserrat&display=block"
+        crossorigin="anonymous">
    <link rel="stylesheet"
        href="css/index.min.css"
-        crossorigin="anonymous"/>
+        integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
+        crossorigin="anonymous">
 </head>
-<body onload='particles(hSpeed=0, vSpeed=100, connections=false, avoidMouse=false, hover=false)'>
+<body onload='particles(noBounceV=true, speedV=100, connections=false, avoidMouse=false, hover=false)'>
    <div class="wrapper">
-        <h1>Lorem ipsum dolor sit amet.</h1>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus quibusdam est rem sequi consectetur doloremque. Laborum suscipit, incidunt excepturi veniam rerum quis accusamus eaque, obcaecati modi doloremque eveniet ratione!</p>
-        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, <a href="#">perspiciatis nobis ipsum</a> nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.</p>
+        <div class="spacer"></div>
+        <header>
+            <h1>ab-particles</h1>
+            <h2>simple, lightweight vanilla-javascript particle animation</h2>
+        </header>
+        <main>
+            <p>This is a sample page showing off some settings of this tiny (5kb!) script. No external libraries, no external configuration files, no jQuery. Just javascript and easy colour styling via CSS variables.</p>
+            <p>Configuration details, download and source at <a href="http://git.asifbacchus.app/asif/ab-particles.git">my git repo</a>.</p>
+            <p>Thanks for checking it out!</p>
+        </main>
+        <div class="spacer"></div>
+        <footer>
+            <p>Design, code and content appearing on this site is developed by
+            <a href="https://asifbacchus.com">Asif Bacchus</a> ('author') and
+            may be freely used and redistributed in accordance with the <a
+            href="https://git.asifbacchus.app/asif/ab-particles/LICENSE">license</a>
+            appearing in the <a
+            href="https://git.asifbacchus.app/asif/ab-particles.git">content
+            repo</a>. Author provides no warranties, guarantees or implications
+            of suitability and disclaims any and all responsibility arising from
+            the usage of anything appearing on or linked to this page for any
+            purpose whatsoever. Copyright 2020 Asif Bacchus. Some Rights
+            Reserved.</p>
+        </footer>
    </div>
    <canvas id="particles"></canvas>
    <!-- javascript -->
    <script
        src="js/ab-particles.min.js"
+        integrity="sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp"
        crossorigin="anonymous"
-        integrity="sha384-eUruDNgO8YkfdY2sU3oCkjzhJbnXXT9kac3I8DwYkh2mjE0jCIKvTgN6yvvo9SqO"
        defer>
    </script>
    <!-- end javascript -->
--- a/starrynight.html
+++ b/starrynight.html
@ -4,22 +4,47 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animated particles</title>
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Montserrat&display=block"
+        crossorigin="anonymous">
    <link rel="stylesheet"
        href="css/index.min.css"
-        crossorigin="anonymous"/>
+        integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
+        crossorigin="anonymous">
 </head>
 <body onload='particles(speed=0, connections=false, avoidMouse=false, hover=false)'>
    <div class="wrapper">
-        <h1>Lorem ipsum dolor sit amet.</h1>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus quibusdam est rem sequi consectetur doloremque. Laborum suscipit, incidunt excepturi veniam rerum quis accusamus eaque, obcaecati modi doloremque eveniet ratione!</p>
-        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, <a href="#">perspiciatis nobis ipsum</a> nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.</p>
+        <div class="spacer"></div>
+        <header>
+            <h1>ab-particles</h1>
+            <h2>simple, lightweight vanilla-javascript particle animation</h2>
+        </header>
+        <main>
+            <p>This is a sample page showing off some settings of this tiny (5kb!) script. No external libraries, no external configuration files, no jQuery. Just javascript and easy colour styling via CSS variables.</p>
+            <p>Configuration details, download and source at <a href="http://git.asifbacchus.app/asif/ab-particles.git">my git repo</a>.</p>
+            <p>Thanks for checking it out!</p>
+        </main>
+        <div class="spacer"></div>
+        <footer>
+            <p>Design, code and content appearing on this site is developed by
+            <a href="https://asifbacchus.com">Asif Bacchus</a> ('author') and
+            may be freely used and redistributed in accordance with the <a
+            href="https://git.asifbacchus.app/asif/ab-particles/LICENSE">license</a>
+            appearing in the <a
+            href="https://git.asifbacchus.app/asif/ab-particles.git">content
+            repo</a>. Author provides no warranties, guarantees or implications
+            of suitability and disclaims any and all responsibility arising from
+            the usage of anything appearing on or linked to this page for any
+            purpose whatsoever. Copyright 2020 Asif Bacchus. Some Rights
+            Reserved.</p>
+        </footer>
    </div>
    <canvas id="particles"></canvas>
    <!-- javascript -->
    <script
        src="js/ab-particles.min.js"
+        integrity="sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp"
        crossorigin="anonymous"
-        integrity="sha384-eUruDNgO8YkfdY2sU3oCkjzhJbnXXT9kac3I8DwYkh2mjE0jCIKvTgN6yvvo9SqO"
        defer>
    </script>
    <!-- end javascript -->
--- a/warpleft.html
+++ b/warpleft.html
@ -4,22 +4,47 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animated particles</title>
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Montserrat&display=block"
+        crossorigin="anonymous">
    <link rel="stylesheet"
        href="css/index.min.css"
-        crossorigin="anonymous"/>
+        integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
+        crossorigin="anonymous">
 </head>
-<body onload='particles(vSpeed=0, hSpeed=100, connections=false, avoidMouse=false, hover=false)'>
+<body onload='particles(noBounceH=true, speedH=100, speedV=15, connections=false, avoidMouse=false, hover=false)'>
    <div class="wrapper">
-        <h1>Lorem ipsum dolor sit amet.</h1>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus quibusdam est rem sequi consectetur doloremque. Laborum suscipit, incidunt excepturi veniam rerum quis accusamus eaque, obcaecati modi doloremque eveniet ratione!</p>
-        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, <a href="#">perspiciatis nobis ipsum</a> nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.</p>
+        <div class="spacer"></div>
+        <header>
+            <h1>ab-particles</h1>
+            <h2>simple, lightweight vanilla-javascript particle animation</h2>
+        </header>
+        <main>
+            <p>This is a sample page showing off some settings of this tiny (5kb!) script. No external libraries, no external configuration files, no jQuery. Just javascript and easy colour styling via CSS variables.</p>
+            <p>Configuration details, download and source at <a href="http://git.asifbacchus.app/asif/ab-particles.git">my git repo</a>.</p>
+            <p>Thanks for checking it out!</p>
+        </main>
+        <div class="spacer"></div>
+        <footer>
+            <p>Design, code and content appearing on this site is developed by
+            <a href="https://asifbacchus.com">Asif Bacchus</a> ('author') and
+            may be freely used and redistributed in accordance with the <a
+            href="https://git.asifbacchus.app/asif/ab-particles/LICENSE">license</a>
+            appearing in the <a
+            href="https://git.asifbacchus.app/asif/ab-particles.git">content
+            repo</a>. Author provides no warranties, guarantees or implications
+            of suitability and disclaims any and all responsibility arising from
+            the usage of anything appearing on or linked to this page for any
+            purpose whatsoever. Copyright 2020 Asif Bacchus. Some Rights
+            Reserved.</p>
+        </footer>
    </div>
    <canvas id="particles"></canvas>
    <!-- javascript -->
    <script
        src="js/ab-particles.min.js"
+        integrity="sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp"
        crossorigin="anonymous"
-        integrity="sha384-eUruDNgO8YkfdY2sU3oCkjzhJbnXXT9kac3I8DwYkh2mjE0jCIKvTgN6yvvo9SqO"
        defer>
    </script>
    <!-- end javascript -->
--- a/warpright.html
+++ b/warpright.html
@ -4,22 +4,47 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animated particles</title>
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Montserrat&display=block"
+        crossorigin="anonymous">
    <link rel="stylesheet"
        href="css/index.min.css"
-        crossorigin="anonymous"/>
+        integrity="sha384-6N5QXFiNi0Dxhi0OdN6AGW3PKtsxYeAxsVhf5lNgxx6F6KO08DBr5IhVMrc3rmov"
+        crossorigin="anonymous">
 </head>
-<body onload='particles(vSpeed=0, hSpeed=-100, connections=false, avoidMouse=false, hover=false)'>
+<body onload='particles(noBounceH=true, speedH=-100, connections=false, avoidMouse=false, hover=false)'>
    <div class="wrapper">
-        <h1>Lorem ipsum dolor sit amet.</h1>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus quibusdam est rem sequi consectetur doloremque. Laborum suscipit, incidunt excepturi veniam rerum quis accusamus eaque, obcaecati modi doloremque eveniet ratione!</p>
-        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, <a href="#">perspiciatis nobis ipsum</a> nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.</p>
+        <div class="spacer"></div>
+        <header>
+            <h1>ab-particles</h1>
+            <h2>simple, lightweight vanilla-javascript particle animation</h2>
+        </header>
+        <main>
+            <p>This is a sample page showing off some settings of this tiny (5kb!) script. No external libraries, no external configuration files, no jQuery. Just javascript and easy colour styling via CSS variables.</p>
+            <p>Configuration details, download and source at <a href="http://git.asifbacchus.app/asif/ab-particles.git">my git repo</a>.</p>
+            <p>Thanks for checking it out!</p>
+        </main>
+        <div class="spacer"></div>
+        <footer>
+            <p>Design, code and content appearing on this site is developed by
+            <a href="https://asifbacchus.com">Asif Bacchus</a> ('author') and
+            may be freely used and redistributed in accordance with the <a
+            href="https://git.asifbacchus.app/asif/ab-particles/LICENSE">license</a>
+            appearing in the <a
+            href="https://git.asifbacchus.app/asif/ab-particles.git">content
+            repo</a>. Author provides no warranties, guarantees or implications
+            of suitability and disclaims any and all responsibility arising from
+            the usage of anything appearing on or linked to this page for any
+            purpose whatsoever. Copyright 2020 Asif Bacchus. Some Rights
+            Reserved.</p>
+        </footer>
    </div>
    <canvas id="particles"></canvas>
    <!-- javascript -->
    <script
        src="js/ab-particles.min.js"
+        integrity="sha384-HI+YXFmq6RX6R45hGuCOv6U/XhbS6swme7nnQVc8g6QfhucST79WEzlK6XMbanUp"
        crossorigin="anonymous"
-        integrity="sha384-eUruDNgO8YkfdY2sU3oCkjzhJbnXXT9kac3I8DwYkh2mjE0jCIKvTgN6yvvo9SqO"
        defer>
    </script>
    <!-- end javascript -->
Author	SHA1	Message	Date
Asif Bacchus	1d7a12528f	update parameters section	2020-04-10 16:16:04 -06:00
Asif Bacchus	3e13824dfb	update sample page link addresses	2020-04-10 16:13:29 -06:00
Asif Bacchus	c496077ae9	update all sample pages and config samples	2020-04-10 16:12:15 -06:00
Asif Bacchus	632b556310	add proper release link	2020-04-10 16:11:55 -06:00
Asif Bacchus	eca5bd9d95	enable SRI for css	2020-04-10 15:55:40 -06:00
Asif Bacchus	d1cde40984	track css for easier distribution	2020-04-10 15:54:44 -06:00
Asif Bacchus	14931c7dc9	update comment	2020-04-10 15:53:11 -06:00
Asif Bacchus	db11078881	update base index sample page styles and content	2020-04-10 15:51:57 -06:00
Asif Bacchus	e6ab47bfdd	update minified js, checksums and SRI	2020-04-10 15:08:33 -06:00
Asif Bacchus	5d44e2d93b	remove down-right bias when bouncing normally	2020-04-10 15:04:10 -06:00
Asif Bacchus	81e41b9fd3	redefine vertical and horizontal bouncing Set option to remove bounce in either/both directions. Replace old speed based logic. Allow for combinations of directional speeds. Rename speed variables for consistency.	2020-04-10 14:47:26 -06:00