aboutsummaryrefslogtreecommitdiffhomepage
path: root/dvd
diff options
context:
space:
mode:
authorYaroslav <contact@yaroslavps.com>2019-01-31 15:30:44 +0300
committerYaroslav <contact@yaroslavps.com>2019-01-31 15:30:44 +0300
commit2da5cc0a05ad6f634cf23565d6adee6edc67af6e (patch)
treec9b3d84ff7fca209e0af513142f432b874e10883 /dvd
parent3fc8db582ab295ebf7a16546e867e6ba62d282bf (diff)
downloadcanvas-antics-2da5cc0a05ad6f634cf23565d6adee6edc67af6e.tar.gz
canvas-antics-2da5cc0a05ad6f634cf23565d6adee6edc67af6e.zip
dvd screensaver
Diffstat (limited to 'dvd')
-rw-r--r--dvd/dvd.html50
-rw-r--r--dvd/dvd.js191
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");
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-24 04:16:21 +0000