| <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> |
