dvd readme, change ever demo html to index.html

3 files changed, 27 insertions, 30 deletions

diff --git a/dvd/README.md b/dvd/README.md
new file mode 100644
index 0000000..ee80d70
--- /dev/null
+++ b/dvd/README.md
@@ -0,0 +1,18 @@
+# DVD Screensaver #
+
+Just like the good old days, when you paused that DVD movie for a long time, except now you can watch that sweet old screensaver on demand at any time.
+
+To start the animation, just call the following function. You can omit passing the options object for the default experience. For it to work, you need to have a canvas object in your HTML document with id #dvd.
+
+```javascript
+playDVD({
+    'speed': 200,
+    'colors': [
+        "#012fff",
+        "#ff2190",
+        "#ce21ff",
+        "#ffec00",
+        "#ff8702"
+    ]
+});
+```
diff --git a/dvd/dvd.js b/dvd/dvd.js
index e0b4e38..a0ae45b 100644
--- a/dvd/dvd.js
+++ b/dvd/dvd.js
@@ -1,5 +1,5 @@
 /*
-DVD Screensaver JS v0.1.0
+DVD Screensaver JS v1.0.0
 Copyright 2018 Yaroslav de la Peña Smirnov
 All rights reserved.
 
@@ -32,7 +32,7 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGE.
 */
 
-function dvdScreensaver(options={}){
+function playDVD(options={}){
     /* >>> Parameters <<<
     There are just two customizable parameters
     The speed in pixels/s
@@ -60,6 +60,7 @@ function dvdScreensaver(options={}){
     }
     var container = canvas.parentNode;
     var ctx = canvas.getContext("2d");
+    ctx.fillStyle = colors[0];
     ctx.save();
 
     /* >>> State variables <<<
@@ -75,7 +76,6 @@ function dvdScreensaver(options={}){
     var boundx;
     var boundy;
     var last = null;
-    var currentColor = colors[0];
 
     function randomRange(min, max){
         return Math.floor(Math.random() * (max - min - 1)) + min;
@@ -108,9 +108,11 @@ function dvdScreensaver(options={}){
         else if(py == 0)
             direction[1] = 1;
         // Change the color randomly
-        ctx.restore();
-        ctx.fillStyle = colors[randomRange(0, colors.length+1)];
-        ctx.save();
+        if (colors.length > 1){
+            ctx.restore();
+            ctx.fillStyle = colors[randomRange(0, colors.length+1)];
+            ctx.save();
+        }
     }
 
     function initDVD(){
@@ -162,29 +164,6 @@ function dvdScreensaver(options={}){
     window.addEventListener("resize", resize);
 }
 
-// For test purposes
-function drawLogo(color="#012fff"){
-    var canvas = document.getElementById("dvd");
-    if(!canvas){
-        console.log("There is no #dvd canvas to draw on! Aborting...");
-        return;
-    }
-    var container = canvas.parentNode;
-    var ctx = canvas.getContext("2d");
-    ctx.save();
-
-    canvas.height = parseInt(container.offsetHeight);
-    canvas.width = parseInt(container.offsetWidth);
-
-    let px = canvas.width - 340;
-    let py = canvas.height - 154;
-    ctx.translate(px, py);
-    ctx.fillStyle = "#012fff";
-    ctx.fill(logoPath);
-    ctx.restore();
-    ctx.save();
-}
-
 // This is the path for the logo, it is just a 'd' SVG string
 // You can easily 'export' the logo to SVG by copying the string to a
 // 'path' tag's 'd' attribute inside an SVG document with size of 340x154px
diff --git a/dvd/dvd.html b/dvd/index.html
index 089788f..cdd9dc1 100644
--- a/dvd/dvd.html
+++ b/dvd/index.html
@@ -38,7 +38,7 @@ html{
 </style>
     <script>
         window.addEventListener("load", function(){
-            dvdScreensaver({"speed": 210});
+            playDVD({"speed": 210});
         });
     </script>
     </head>