diff options
| -rw-r--r-- | dvd/README.md | 18 | ||||
| -rw-r--r-- | dvd/dvd.js | 37 | ||||
| -rw-r--r-- | dvd/index.html (renamed from dvd/dvd.html) | 2 | ||||
| -rw-r--r-- | letitsnow/index.html (renamed from letitsnow/snow.html) | 0 | ||||
| -rw-r--r-- | starfield/index.html (renamed from starfield/stars.html) | 0 |
5 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" + ] +}); +``` @@ -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> diff --git a/letitsnow/snow.html b/letitsnow/index.html index a2c7779..a2c7779 100644 --- a/letitsnow/snow.html +++ b/letitsnow/index.html diff --git a/starfield/stars.html b/starfield/index.html index 9c7d0f2..9c7d0f2 100644 --- a/starfield/stars.html +++ b/starfield/index.html |