From 0623f7b1d94be0513778ae70e7c574a67f743c17 Mon Sep 17 00:00:00 2001
From: Yaroslav <contact@yaroslavps.com>
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 ++++++++++++++++++++++++++++++++++++++++++++
letitsnow/index.html | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++
letitsnow/snow.html | 57 ---------------------------------------------------
starfield/index.html | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++
starfield/stars.html | 58 ----------------------------------------------------
8 files changed, 191 insertions(+), 194 deletions(-)
create mode 100644 dvd/README.md
delete mode 100644 dvd/dvd.html
create mode 100644 dvd/index.html
create mode 100644 letitsnow/index.html
delete mode 100644 letitsnow/snow.html
create mode 100644 starfield/index.html
delete mode 100644 starfield/stars.html
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 @@
-<!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
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 @@
+<!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(){
+ playDVD({"speed": 210});
+ });
+ </script>
+ </head>
+ <body>
+ <div class="canvas-container">
+ <canvas id="dvd"></canvas>
+ </div>
+ </body>
+</html>
diff --git a/letitsnow/index.html b/letitsnow/index.html
new file mode 100644
index 0000000..a2c7779
--- /dev/null
+++ b/letitsnow/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf8">
+ <title>Let It Snow demo</title>
+ <script src="snow.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;
+}
+
+#snow{
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ bottom: 0;
+}
+</style>
+ <script>
+ window.addEventListener("load", function(){
+ letItSnow({
+ 'max_particles': 200,
+ 'base_speed': 200,
+ 'max_xspeed': 300,
+ 'max_tradius': 20,
+ 'max_tduration': 5000,
+ 'interactive': true,
+ });
+ });
+ </script>
+ </head>
+ <body>
+ <div class="canvas-container">
+ <canvas id="snow"></canvas>
+ </div>
+ </body>
+</html>
diff --git a/letitsnow/snow.html b/letitsnow/snow.html
deleted file mode 100644
index a2c7779..0000000
--- a/letitsnow/snow.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf8">
- <title>Let It Snow demo</title>
- <script src="snow.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;
-}
-
-#snow{
- position: absolute;
- margin: 0;
- padding: 0;
- bottom: 0;
-}
-</style>
- <script>
- window.addEventListener("load", function(){
- letItSnow({
- 'max_particles': 200,
- 'base_speed': 200,
- 'max_xspeed': 300,
- 'max_tradius': 20,
- 'max_tduration': 5000,
- 'interactive': true,
- });
- });
- </script>
- </head>
- <body>
- <div class="canvas-container">
- <canvas id="snow"></canvas>
- </div>
- </body>
-</html>
diff --git a/starfield/index.html b/starfield/index.html
new file mode 100644
index 0000000..9c7d0f2
--- /dev/null
+++ b/starfield/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf8">
+ <title>Starfield demo</title>
+ <script src="stars.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;
+}
+
+#stars{
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ bottom: 0;
+}
+
+</style>
+ <script>
+ window.addEventListener("load", function(){
+ warpLaunch({
+ 'max_particles': 1500,
+ 'speed': 70,
+ 'step': 10,
+ 'interactive': true,
+ 'color': true,
+ });
+ });
+ </script>
+ </head>
+ <body>
+ <div class="canvas-container">
+ <canvas id="stars"></canvas>
+ </div>
+ </body>
+</html>
+
diff --git a/starfield/stars.html b/starfield/stars.html
deleted file mode 100644
index 9c7d0f2..0000000
--- a/starfield/stars.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf8">
- <title>Starfield demo</title>
- <script src="stars.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;
-}
-
-#stars{
- position: absolute;
- margin: 0;
- padding: 0;
- bottom: 0;
-}
-
-</style>
- <script>
- window.addEventListener("load", function(){
- warpLaunch({
- 'max_particles': 1500,
- 'speed': 70,
- 'step': 10,
- 'interactive': true,
- 'color': true,
- });
- });
- </script>
- </head>
- <body>
- <div class="canvas-container">
- <canvas id="stars"></canvas>
- </div>
- </body>
-</html>
-
--
cgit v1.2.3