aboutsummaryrefslogtreecommitdiffhomepage
path: root/dvd
diff options
context:
space:
mode:
authorYaroslav <contact@yaroslavps.com>2019-01-31 15:41:02 +0300
committerYaroslav <contact@yaroslavps.com>2019-01-31 15:41:02 +0300
commit0623f7b1d94be0513778ae70e7c574a67f743c17 (patch)
tree81709db2370cd6905b9731218407f5b2750e3c2b /dvd
parent2da5cc0a05ad6f634cf23565d6adee6edc67af6e (diff)
downloadcanvas-antics-0623f7b1d94be0513778ae70e7c574a67f743c17.tar.gz
canvas-antics-0623f7b1d94be0513778ae70e7c574a67f743c17.zip
dvd readme, change ever demo html to index.html
Diffstat (limited to 'dvd')
-rw-r--r--dvd/README.md18
-rw-r--r--dvd/dvd.js37
-rw-r--r--dvd/index.html (renamed from dvd/dvd.html)2
3 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"
+ ]
+});
+```
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/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>