Index: screensavers/horizontal_sparkle/index.htm |
diff --git a/screensavers/horizontal_sparkle/index.htm b/screensavers/horizontal_sparkle/index.htm |
new file mode 100644 |
index 0000000000000000000000000000000000000000..50680fcecc6abab33d81a0a351fe7622f0b25d63 |
--- /dev/null |
+++ b/screensavers/horizontal_sparkle/index.htm |
@@ -0,0 +1,156 @@ |
+<html> |
+<head> |
+<script type="text/javascript"> |
+var canvas; |
+var g; |
+var rate = 5; |
+var mouseX = 0; |
+var mouseY = 0; |
+var pmouseX = 0; |
+var pmouseY = 0; |
+var width, height; |
+var mousePressed = false; |
+ |
+var hexes = []; |
+ |
+function setup() { |
+ canvas = document.createElement("canvas"); |
+ document.body.appendChild(canvas); |
+ g = canvas.getContext("2d"); |
+ setInterval(draw, rate); |
+ document.addEventListener('mousemove', onDocumentMouseMove, false); |
+ document.addEventListener('mousedown', onDocumentMouseDown, false); |
+ document.addEventListener('mouseup', onDocumentMouseUp, false); |
+ window.addEventListener('resize', onWindowResize, false); |
+ onWindowResize(); |
+ ////////////////////////////////////////// |
+ while (hexes.length < 200) { |
+ hexes.push(new Hex()); |
+ } |
+} |
+function onWindowResize(e) { |
+ width = canvas.width = window.innerWidth; |
+ height = canvas.height = window.innerHeight; |
+} |
+function onDocumentMouseMove(e) { |
+ pmouseX = mouseX; |
+ pmouseY = mouseY; |
+ mouseX = e.pageX; |
+ mouseY = e.pageY; |
+} |
+function onDocumentMouseDown(e) { |
+ mousePressed = true; |
+} |
+function onDocumentMouseUp(e) { |
+ mousePressed = false; |
+} |
+ |
+function dist(x, y, xx, yy) { |
+ return Math.sqrt((xx-x)*(xx-x)+(yy-y)*(yy-y)); |
+} |
+ |
+function constrain(v, min, max){ |
+ if(v<min) v = min; |
+ if(v>max) v = max; |
+ return v; |
+} |
+ |
+function map(v, i1, i2, o1, o2) { |
+ return o1 + (o2 - o1) * ((v - i1) / (i2 - i1)); |
+} |
+ |
+function random(a, b) { |
+ var r = Math.random(); |
+ if (a instanceof Array) { |
+ var i = Math.floor(r*a.length); |
+ return a[i]; |
+ } else if (b == undefined) { |
+ return r*a; |
+ } else { |
+ return r*(a+b)-a; |
+ } |
+} |
+var cx = -200; |
+function draw() { |
+ g.globalCompositeOperation = "source-over"; |
+ g.fillStyle= "#000"; |
+ g.fillRect(0, 0, width, height); |
+ g.globalCompositeOperation = "lighter"; |
+ for (var h in hexes) { |
+ hexes[h].update(); |
+ hexes[h].draw(); |
+ } |
+ cx += 8; |
+ if (cx > width+200) { |
+ cx = -200; |
+ } |
+} |
+ |
+function roundedHex(x,y, d) { |
+ var sides = 6; |
+ var a = Math.PI*2/sides; |
+ var aa = a; |
+ var r = 10; |
+ g.beginPath(); |
+ g.save(); |
+ g.translate(x, y); |
+ g.moveTo(Math.cos(aa)*d, Math.sin(aa)*d); |
+ for (var i = 0; i < sides; i++) { |
+ aa += a; |
+ g.lineTo(Math.cos(aa)*d, Math.sin(aa)*d); |
+ } |
+ g.fill(); |
+ g.restore(); |
+ g.closePath(); |
+} |
+ |
+var colors = ["#e4463b", "#fffc23", "#5ad81c", "#1c8bd8"]; |
+var s = 80; |
+var rows = 20; |
+var cols = 10; |
+function Hex() { |
+ this.x = (hexes.length%rows)*s; |
+ this.y = Math.floor(hexes.length/rows)*s*0.865; |
+ this.color = random(colors); |
+ this.ss = 0; |
+ this.draw = function() { |
+ var radgrad2 = g.createRadialGradient(0,0,0,0,0,this.ss*1.5);//g.createRadialGradient(this.x,this.y,0,this.x,this.y,this.s); |
+ radgrad2.addColorStop(0, this.color); |
+ radgrad2.addColorStop(1, "#000"); |
+ g.fillStyle = radgrad2; |
+ if (this.ss > 0) { |
+ roundedHex(this.x, this.y, this.ss); |
+ } |
+ } |
+ |
+ this.update = function() { |
+ var d = dist(cx, height/2.3, this.x, this.y); |
+ d = constrain(d, 0, 200); |
+ var x = map(d, 200, 0, 0, s*2); |
+ this.ss += (x-this.ss)*0.5; |
+ } |
+ |
+} |
+</script> |
+<style type="text/css"> |
+* { |
+margin: 0; |
+padding: 0; |
+} |
+html, body { |
+width: 100%; |
+background-color: #000; |
+height: 100%; |
+} |
+img { |
+position: absolute; |
+ left: 50%; |
+ margin-left: -90px; |
+ padding-top: 470px; |
+} |
+</style> |
+</head> |
+<body onload="setup()"> |
+<img src="title.png" alt="" width="180"/> |
+</body> |
+</html> |