diff options
| -rw-r--r-- | dvd/dvd.html | 50 | ||||
| -rw-r--r-- | dvd/dvd.js | 191 |
2 files changed, 241 insertions, 0 deletions
diff --git a/dvd/dvd.html b/dvd/dvd.html new file mode 100644 index 0000000..089788f --- /dev/null +++ b/dvd/dvd.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf8"> + <title>DVD Screensaver demo</title> + <script src="dvd.js"></script> +<style> +body, +html{ + margin: 0; + padding: 0; + background-color: #000; + min-height: 100vh; + min-width: 100%; +} + +*{ + box-sizing: border-box; +} + +.canvas-container{ + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + margin: 0; + padding: 0; + overflow: hidden; +} + +#dvd{ + position: absolute; + margin: 0; + padding: 0; + bottom: 0; +} +</style> + <script> + window.addEventListener("load", function(){ + dvdScreensaver({"speed": 210}); + }); + </script> + </head> + <body> + <div class="canvas-container"> + <canvas id="dvd"></canvas> + </div> + </body> +</html> diff --git a/dvd/dvd.js b/dvd/dvd.js new file mode 100644 index 0000000..e0b4e38 --- /dev/null +++ b/dvd/dvd.js @@ -0,0 +1,191 @@ +/* +DVD Screensaver JS v0.1.0 +Copyright 2018 Yaroslav de la Peña Smirnov +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted (subject to the limitations in the disclaimer +below) provided that the following conditions are met: + + * Redistributions of source code must retain the above copyright notice, + this list of conditions and the following disclaimer. + + * Redistributions in binary form must reproduce the above copyright + notice, this list of conditions and the following disclaimer in the + documentation and/or other materials provided with the distribution. + + * Neither the name of the copyright holder nor the names of its + contributors may be used to endorse or promote products derived from this + software without specific prior written permission. + +NO EXPRESS OR IMPLIED LICENSES TO ANY PARTY'S PATENT RIGHTS ARE GRANTED BY +THIS LICENSE. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND +CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A +PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR +CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, +EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, +PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR +BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER +IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) +ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE +POSSIBILITY OF SUCH DAMAGE. +*/ + +function dvdScreensaver(options={}){ + /* >>> Parameters <<< + There are just two customizable parameters + The speed in pixels/s + And a list of colors + */ + var speed = options.hasOwnProperty('speed') ? options['speed'] : 200; + var colors = [ + "#012fff", + "#ff2190", + "#ce21ff", + "#ffec00", + "#ff8702" + ]; + try{ + if(options["colors"].length > 0){ + colors = option["colors"]; + } + } + catch(e){} + + 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(); + + /* >>> State variables <<< + px, py are the current coordinates + direction is an array with the direction for the x and y axis [x, y] + either 1 or -1 for each axis + boundx, boundy the boundaries for each axis + last is the timestamp of the last rendered frame + */ + var px = 0; + var py = 0; + var direction = [1, 1]; + var boundx; + var boundy; + var last = null; + var currentColor = colors[0]; + + function randomRange(min, max){ + return Math.floor(Math.random() * (max - min - 1)) + min; + } + + function randomInt(max){ + return Math.floor(Math.random() * max); + } + + function resize(){ + // On window/viewport resize, get the new size of the container + // and accordingly resize the canvas, then reinitialize + canvas.height = parseInt(container.offsetHeight); + canvas.width = parseInt(container.offsetWidth); + boundx = canvas.width - 340; + boundy = canvas.height - 154; + try{ window.cancelAnimationFrame(requestedFrame); } + catch(e) {} + initDVD(); + } + + function bounce(){ + // Change the direction after reaching the boundaries of the canvas + if(px === boundx) + direction[0] = -1; + else if(px == 0) + direction[0] = 1; + if(py === boundy) + direction[1] = -1; + else if(py == 0) + direction[1] = 1; + // Change the color randomly + ctx.restore(); + ctx.fillStyle = colors[randomRange(0, colors.length+1)]; + ctx.save(); + } + + function initDVD(){ + px = randomRange(0, boundx); + py = randomRange(0, boundy); + bounce(); + drawLogo(); + requestedFrame = window.requestAnimationFrame(nextFrame); + } + + function drawLogo(){ + ctx.translate(px, py); + ctx.fill(logoPath); + ctx.restore(); + ctx.save(); + } + + function nextFrame(timestamp){ + if(!last) last = timestamp; + let delta = timestamp - last; + // If more than 250ms have passed since last frame, it is assumed + // that the browser stopped calling back frames because the tab/page + // was in the background, thus this frame is ignored, and the last + // timestamp reset + if (delta > 250){ + last = timestamp; + requestedFrame = window.requestAnimationFrame(nextFrame); + return; + } + + ctx.clearRect(0, 0, canvas.width, canvas.height); + px += delta*speed*direction[0]/1000; + py += delta*speed*direction[1]/1000; + + // If px and/or py are out of bounds, equal them to the boundaries + // and change direction and color + px = px > boundx ? boundx : px; + py = py > boundy ? boundy : py; + px = px < 0 ? 0 : px; + py = py < 0 ? 0 : py; + if (px === boundx || py === boundy || px == 0 || py == 0) + bounce(); + drawLogo(); + last = timestamp; + requestedFrame = window.requestAnimationFrame(nextFrame); + } + + resize(); + 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 +var logoPath = new Path2D("m 146.99116,153.94326 c -13.35681,-0.18459 -32.78363,-1.02291 -47.688801,-2.05776 -23.466055,-1.62924 -45.981002,-4.3045 -61.468194,-7.30377 -16.583846,-3.21169 -27.470922,-6.6589 -33.5609749,-10.62651 -5.693411,-3.70924 -5.6977634,-7.9672 -0.01198,-11.76202 10.5083219,-7.01354 39.0416119,-13.02717 79.1049899,-16.67199 40.0625,-3.64479 86.24899,-4.40797 133.36086,-2.20366 33.33046,1.55949 66.69696,5.50962 86.87024,10.28429 13.95227,3.30226 22.21907,6.59355 26.21779,10.43827 3.34946,3.22042 2.45012,6.86903 -2.4725,10.03129 -6.75156,4.33726 -19.52662,8.11191 -39.16496,11.57207 -10.69135,1.88377 -33.26108,4.5728 -46.64763,5.55774 -1.05443,0.0777 -2.29458,0.18168 -2.75588,0.23107 -0.46133,0.0493 -1.70145,0.14903 -2.75588,0.22134 -17.59185,1.20452 -31.36196,1.85962 -45.65181,2.17178 -7.28597,0.15903 -34.95521,0.23457 -43.37525,0.11816 z M 91.619741,141.53968 c 0.246501,-0.54082 1.577888,-3.37792 2.958608,-6.30471 1.38073,-2.92681 3.97904,-8.43478 5.774001,-12.23994 1.79496,-3.80514 3.26356,-7.00941 3.26356,-7.12056 0,-0.11083 -1.63516,-0.17316 -3.633701,-0.13817 l -3.63368,0.0638 -2.77722,6.01554 c -1.527468,3.30855 -3.049673,6.63511 -3.382678,7.39234 l -0.605444,1.377 -1.532179,-3.22776 c -0.842697,-1.77531 -2.15561,-4.50538 -2.917591,-6.0669 -0.761982,-1.56146 -1.674777,-3.46156 -2.028438,-4.22242 l -0.643011,-1.38336 h -3.681731 c -2.024947,0 -3.679724,0.0783 -3.677275,0.17343 0.0025,0.0953 0.850914,1.89142 1.885494,3.99109 6.486321,13.16391 9.424026,19.08649 10.299835,20.76514 l 0.995888,1.90876 h 1.443692 1.44369 z m 157.142039,0.7355 c 5.188,-0.68578 9.41624,-3.42237 11.61856,-7.51972 1.08667,-2.02166 1.48805,-3.65101 1.47779,-5.99878 -0.0157,-3.45827 -1.32322,-6.38437 -4.0325,-9.02037 -3.03562,-2.95345 -6.70084,-4.31834 -11.53042,-4.29378 -5.76798,0.0293 -10.16571,2.08832 -13.18479,6.17306 -3.00985,4.0723 -3.16277,9.97784 -0.36495,14.0917 3.40779,5.0107 9.35311,7.44872 16.01631,6.56789 z m -5.54176,-5.90707 c -4.31219,-1.32401 -6.34954,-5.45601 -5.0004,-10.14124 0.3368,-1.16962 0.64619,-1.63772 1.85723,-2.80979 1.694,-1.63956 2.92156,-2.14614 5.67747,-2.34288 1.47527,-0.10495 2.16445,-0.032 3.57215,0.38095 1.48362,0.43506 1.94773,0.70798 3.10626,1.82651 1.70942,1.65036 2.25524,3.04538 2.23261,5.70636 -0.0291,3.41194 -1.46575,5.72662 -4.35299,7.01273 -1.71581,0.76435 -5.20994,0.94533 -7.09233,0.36736 z m -115.69781,-7.4379 -0.0617,-13.13008 -3.4149,-0.0641 -3.41491,-0.0641 v 13.19426 13.1942 h 3.4768 3.47679 z m 35.02189,12.88627 c 5.57848,-0.87386 9.43058,-3.73535 11.06507,-8.21959 0.60235,-1.65248 0.86633,-5.42998 0.50802,-7.26957 -0.86323,-4.43193 -3.79437,-7.81822 -8.19431,-9.46686 -2.58572,-0.96883 -4.72073,-1.17598 -12.11927,-1.17598 h -6.57281 v 13.18791 13.18787 l 6.8897,-7.7e-4 c 3.78935,-7.7e-4 7.57996,-0.10995 8.4236,-0.24194 z m -8.36368,-12.8492 V 120.733 l 3.65452,0.0787 c 3.35842,0.0722 3.76137,0.12786 4.97258,0.68589 1.77565,0.81808 3.22494,2.27495 3.85741,3.87758 0.70863,1.79564 0.73168,5.18857 0.0468,6.88027 -1.42191,3.51196 -4.28497,4.93327 -9.95511,4.94215 l -2.57615,0.003 z m 58.95194,10.66365 v -2.42939 h -6.59014 -6.59018 v -3.12343 -3.12346 h 6.11087 6.11089 v -2.42935 -2.42934 h -6.11089 -6.11087 v -2.65695 -2.65689 l 6.41044,-0.0618 6.41044,-0.0618 0.0678,-2.48719 0.0678,-2.4872 h -9.95321 -9.95323 v 13.18795 13.18788 h 10.06495 10.06494 z m -55.99848,-37.63689 c -0.56514,-1.55315 -6.6479,-19.745362 -10.68201,-30.500635 -1.21711,-3.244903 -3.21419,-8.606818 -4.43794,-11.915368 -1.22378,-3.308552 -3.45791,-9.295163 -4.96476,-13.303554 -1.50687,-4.008448 -3.37737,-9.023954 -4.15674,-11.14554 v 0 c 0.1132,7.753794 -3.31132,15.478553 -7.05209,22.6287 -5.54096,10.59092 -14.16891,18.382289 -26.839111,24.236589 -9.254071,4.275859 -18.82133,6.915187 -32.010932,7.770321 -2.151756,0.139639 -20.122931,0.238112 -34.993323,0.238112 H 6.6093311 c 1.297449,-5.682097 2.499861,-11.390991 3.7229069,-17.005458 1.118101,-5.128453 2.349359,-10.868483 3.35183,-15.385899 1.002489,-4.517416 2.511699,-11.441092 3.353804,-15.385899 0.842103,-3.944775 2.104342,-9.80096 2.804983,-13.013676 l 1.27388,-5.841335 33.37117,0.09868 c 0,0 -1.834357,8.68698 -3.865101,17.830551 -1.18701,5.344567 -2.844658,12.944946 -3.683672,16.889781 -0.985729,5.086667 -1.507133,8.591572 -1.507133,8.591572 0.530336,0.347072 3.483413,0.654093 11.600436,0.646249 2.452576,-0.188444 4.351334,0.303934 10.093479,-1.082626 12.03678,-2.567928 25.373826,-11.704567 27.442655,-23.29192 1.23584,-15.53558 -10.073,-19.386044 -19.173576,-21.715208 -4.657829,-0.902524 -7.554207,-0.925697 -14.082639,-0.953788 -12.407734,-0.05339 -38.663957,-0.02061 -38.548987,-0.404903 0.06667,-0.222837 0.683332,-7.015798 1.370307,-10.2607061 0.686974,-3.2449068 1.42608,-6.7327768 1.64246,-7.7507698 L 26.169546,0.11634112 99.793939,0.05817112 153.64452,1.1189665e-6 171.86475,55.139193 c 15.90414,-16.81515 41.9698,-52.0728379 41.9698,-52.0728379 3.06637,-3.17516498 3.06637,-2.92540698 3.06637,-2.92540698 l 37.8987,-0.139251 c 22.87335,7.08e-4 37.83276,0.09054 39.93089,0.240169 18.93018,1.35096698 31.95022,7.23033778 39.68635,17.92100088 2.65097,3.663453 4.29404,7.800689 5.01207,12.62051 0.38653,2.594514 0.82857,9.168986 0.38658,12.084423 -2.08144,13.730651 -9.48751,24.14318 -20.88122,32.432894 -10.11263,7.35762 -22.67257,11.906626 -37.98327,13.756908 -6.99046,0.844756 -10.58984,0.937387 -36.57474,0.941064 l -22.68487,-0.24689 11.90128,-62.598027 32.28588,0.210248 -7.72673,39.483857 c 0,0.346577 13.62833,0.447274 16.79807,0.0707 3.72122,-0.442298 9.37453,-1.436308 14.32105,-3.701324 7.85521,-3.441626 16.01089,-8.597671 16.90708,-19.037053 0.72188,-8.408859 -8.53627,-20.060355 -17.72945,-22.01817 -4.65557,-0.964397 -11.12815,-1.1399 -28.62191,-1.39721 l -25.07841,-0.0062 -3.75735,4.178366 -63.53836,77.338047 z"); |