DVD Screensaver demo

From 0623f7b1d94be0513778ae70e7c574a67f743c17 Mon Sep 17 00:00:00 2001 From: Yaroslav Date: Thu, 31 Jan 2019 15:41:02 +0300 Subject: dvd readme, change ever demo html to index.html --- dvd/README.md | 18 ++++++++++++++++++ dvd/dvd.html | 50 -------------------------------------------------- dvd/dvd.js | 37 ++++++++----------------------------- dvd/index.html | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 76 insertions(+), 79 deletions(-) create mode 100644 dvd/README.md delete mode 100644 dvd/dvd.html create mode 100644 dvd/index.html (limited to 'dvd') 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.html b/dvd/dvd.html deleted file mode 100644 index 089788f..0000000 --- a/dvd/dvd.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - DVD Screensaver demo - - - - - -

- - 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/index.html b/dvd/index.html new file mode 100644 index 0000000..cdd9dc1 --- /dev/null +++ b/dvd/index.html @@ -0,0 +1,50 @@ + + + + + DVD Screensaver demo + + + + + +

+ + -- cgit v1.2.3