dvd screensaver

author: Yaroslav <contact@yaroslavps.com> 2019-01-31 15:30:44 +0300
committer: Yaroslav <contact@yaroslavps.com> 2019-01-31 15:30:44 +0300
commit: 2da5cc0a05ad6f634cf23565d6adee6edc67af6e (patch)
tree: c9b3d84ff7fca209e0af513142f432b874e10883 /dvd
parent: 3fc8db582ab295ebf7a16546e867e6ba62d282bf (diff)
download: canvas-antics-2da5cc0a05ad6f634cf23565d6adee6edc67af6e.tar.gz
canvas-antics-2da5cc0a05ad6f634cf23565d6adee6edc67af6e.zip
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");
author	Yaroslav <contact@yaroslavps.com>	2019-01-31 15:30:44 +0300
committer	Yaroslav <contact@yaroslavps.com>	2019-01-31 15:30:44 +0300
commit	2da5cc0a05ad6f634cf23565d6adee6edc67af6e (patch)
tree	c9b3d84ff7fca209e0af513142f432b874e10883 /dvd
parent	3fc8db582ab295ebf7a16546e867e6ba62d282bf (diff)
download	canvas-antics-2da5cc0a05ad6f634cf23565d6adee6edc67af6e.tar.gz canvas-antics-2da5cc0a05ad6f634cf23565d6adee6edc67af6e.zip