HTML5 Efek Petir

DEMO : http://longfield-html5.blogspot.com/


SSnya :

pada demo ane ga make template xml cuma clasic jadi hasilnya gampang cuma bagaimana caranya supaya bisa jadi header pada template xml ?? ane belom tw juga... mana sore ntar kuliah lagi...ckckck (ho? apa hubungannya??)
scriptnya :


<style> * { font-family: sans-serif; color: #003366; padding: 0; margin: 0; } body { background-color:#F8F8FF; overflow:hidden; border:none; } .main { background:url("2.png") repeat-y scroll 50% 0 #E1E1E1; margin:0 auto; width:990px; } </style><br /> <script> function noise() { this.map32 = []; this.map256 = []; this.maxOctaves = 5; this.colorFunc = function(i, j, color){return "rgba(" + color + "," + color + "," + color + ", " + 1.6 / j + ")";}; } noise.prototype.noise = function(x, y, random) { var n = x + y * (5 + random); n = (n << 13) ^ n; return (1.0 - 0.000000000931322574615478515625 * ((n * (n * n * 15731 + 789221) + 1376312589) & 0x7fffffff)); } noise.prototype.setNoise = function() { var temp = [] for (var i = 0; i < 34; i++) temp[i] = []; var random = Math.floor(Math.random() * 19) + 1; for (var y = 1; y < 33; ++y) for (var x = 1; x < 33; ++x) { var noise = this.noise(x, y, random); temp[x][y] = 128.0 + this.noise(x, y, random) * 128.0; } for (var x = 1; x < 33; ++x) { temp[0][x] = temp[32][x]; temp[33][x] = temp[1][x]; temp[x][0] = temp[x][32]; temp[x][33] = temp[x][1]; } temp[0][0] = temp[32][32]; temp[33][33] = temp[1][1]; temp[0][33] = temp[32][1]; temp[33][0] = temp[1][32]; for (var y = 1; y < 33; ++y) for (var x = 1; x < 33; ++x) { var center = temp[x][y]/4.0, sides = (temp[x+1][y] + temp[x-1][y] + temp[x][y+1] + temp[x][y-1])/8.0, corners = (temp[x+1][y+1] + temp[x+1][y-1] + temp[x-1][y+1] + temp[x-1][y-1])/16.0; this.map32[((x - 1) * 32) + (y - 1)] = center + sides + corners; } } noise.prototype.cosInterpolate = function(a, b, x) { var ft = x * 3.1415927, f = (1 - Math.cos(ft)) * 0.5; return a * (1 - f) + b * f; } noise.prototype.interpolate = function(x, y) { var Xint = Math.floor(x), Xfrac = x - Xint, Yint = Math.floor(y), Yfrac = y - Yint; var X0 = Xint % 32, Y0 = Yint % 32, X1 = (Xint + 1) % 32, Y1 = (Yint + 1) % 32; var bot = this.cosInterpolate(this.map32[X0*32 + Y0] , this.map32[X1*32 + Y0] , Xfrac), top = this.cosInterpolate(this.map32[X0*32 + Y1] , this.map32[X1*32 + Y1] , Xfrac); return this.cosInterpolate(bot , top , Yfrac) } noise.prototype.overlapOctaves = function() { for (var x = 0; x < 256*256; ++x) { this.map256[x] = 0; } for (var octave = 0; octave < this.maxOctaves; ++octave) for (var x = 0; x < 256; ++x) for (var y = 0; y < 256; ++y) { var scale = 1 / Math.pow(2, 3 - octave), noise = this.interpolate(x * scale, y * scale); this.map256[(y * 256) + x] += noise / Math.pow(2, octave); } } noise.prototype.expFilter = function() { var cover = 20.0, sharpness = 0.95; for (var x = 0; x < 256 * 256; ++x) { var c = this.map256[x] - (255.0 - cover); if (c < 0) c = 0; this.map256[x] = 255.0 - (Math.pow(sharpness, c) * 255.0); } } noise.prototype.initMaps = function() { this.setNoise(); } noise.prototype.process = function() { this.overlapOctaves(); this.expFilter(); } noise.prototype.init = function() { this.textureCtx = null; this.initMaps(); this.process(); var canvas = document.createElement('CANVAS'); canvas.setAttribute('width',256); canvas.setAttribute('height',256); document.getElementById("textureHolder").appendChild(canvas); this.ctx = canvas.getContext('2d'); for(var i = 0; i < 256; ++i) { for(var j = 0; j < 256; ++j) { var color = Math.floor(this.map256[i * 256 + j]); this.ctx.beginPath(); // this.ctx.fillStyle = "rgba(" + color + "," + color + "," + color + ", " + 0.09 * Math.exp(-j / 100) + ")"; this.ctx.fillStyle = this.colorFunc(i, j, color); this.ctx.fillRect( i, j, 1 , 1 ); this.ctx.fill(); } } this.textureCtx = this.ctx; } noise.prototype.load = function(callback) { this.init(); var timer = setInterval(function() { if (_this.textureCtx) { clearInterval(timer); _this.texture = _this.ctx.createPattern(document.getElementById("textureHolder").firstChild, "no-repeat") callback(); } }, 200), _this = this; } </script> <script> function light() { this.minParticleLength = 6; this.maxParticleLength = 15; this.dense = 7; this.height = 0; this.particleWidth = 0; this.path = []; } light.prototype.create = function(x, y, particleWidth, height, direction) { this.path = []; this.particleWidth = particleWidth; this.path.push({x:x, y:y}) var oldX = x, oldY = y, dx, dy, oldAlpha = Math.PI / 2, alpha = Math.random() * Math.PI, lastChildCounter = 0, counter = 0; var maxHeight = 0; while (maxHeight < height) { while (Math.abs(oldAlpha - alpha) >= Math.PI / 8) alpha = Math.random() * Math.PI; dx = (this.minParticleLength + Math.random() * this.maxParticleLength) * Math.cos(alpha); dy = (this.minParticleLength + Math.random() * this.maxParticleLength) * Math.sin(alpha); if (maxHeight + dy >= height) dy = height - maxHeight; if (particleWidth > 1 && (counter - lastChildCounter - this.dense) * Math.random() > 0.1) { var rnd = Math.random(), cnt = 1, lights = []; if (rnd > 0.9) cnt = 4 else if (rnd > 0.7) cnt = 3 else if (rnd > 0.4) cnt = 2; for (var i = 0; i < cnt; ++i) { var childLight = new light(); childLight.create(oldX + dx, direction ? oldY - dy : oldY + dy, particleWidth - 1, Math.floor(maxHeight * (0.3 + Math.random() * 0.3)), false) lights.push(childLight) } lastChildCounter = counter; this.path.push({x: oldX + dx, y: direction ? oldY - dy : oldY + dy, lights: lights}) } else this.path.push({x: oldX + dx, y: direction ? oldY - dy : oldY + dy}) maxHeight += dy; oldAlpha = alpha; alpha = Math.random() * Math.PI; oldX = oldX + dx; oldY = direction ? oldY - dy : oldY + dy; ++counter; } this.height = maxHeight; if (direction) this.path.reverse(); return this.path; } function kilat() { this.ctx = null; this.bounds = null; this.timer = null; } kilat.prototype.init = function() { this.ctx = document.getElementById("mainCanvas").getContext("2d"); this.width = document.getElementById("mainCanvas").offsetWidth; this.height = document.getElementById("mainCanvas").offsetHeight; this.bounds = getOffsetRect(document.getElementById("mainCanvas")); var _this = this; document.onmousedown = function(){_this.onDocMouseDown.apply(_this, arguments)}; document.onmouseup = function(){_this.onDocMouseUp.apply(_this, arguments)}; document.onmousemove = function(){_this.onDocMouseMove.apply(_this, arguments)}; } kilat.prototype.fillBackground = function(alpha) { this.ctx.globalCompositeOperation = "source-over"; this.ctx.beginPath(); this.ctx.fillStyle = "rgba(193,193,202," + alpha + ")"; this.ctx.fillRect( 0 , 0 , this.width , this.height ); this.ctx.fill(); this.ctx.globalCompositeOperation = "lighter"; } kilat.prototype.draw = function() { if (this.isMouseDown) { var newlight = new light(); newlight.create(this.mouseX,this.mouseY, 3, this.mouseY + Math.random() * 30 - this.height / 5, true) this.drawLight(newlight) } } kilat.prototype.drawLight = function(light, childFlag) { var savedLights = []; this.ctx.lineCap = 'butt'; this.ctx.lineJoin = 'round'; var prevX = light.path[0].x, prevY = light.path[0].y; for (var i = 1; i < light.path.length; ++i) { this.ctx.beginPath() var myWidth = (i <= light.path.length - light.particleWidth) ? light.particleWidth : light.path.length - i; this.ctx.lineWidth = myWidth * 6; var mygrad = this.grad(prevX,prevY,light.path[i].x, light.path[i].y, myWidth * 4); var lineGradient1 = this.ctx.createLinearGradient(mygrad.x1,mygrad.y1,mygrad.x2,mygrad.y2); if (myWidth > 1) { lineGradient1.addColorStop(0, "rgba(25,35,245,0.05)"); lineGradient1.addColorStop(0.25, "rgba(25,35,245,0.1)"); lineGradient1.addColorStop(0.35, "rgba(20,20,200,0.1)"); lineGradient1.addColorStop(0.4, "rgba(20,20,255,0.15)"); lineGradient1.addColorStop(0.45, "rgba(235,244,244,0.2)"); lineGradient1.addColorStop(0.5, "rgba(255,255,255,0.7)"); lineGradient1.addColorStop(0.55, "rgba(235,244,244,0.2)"); lineGradient1.addColorStop(0.6, "rgba(20,20,255,0.15)"); lineGradient1.addColorStop(0.65, "rgba(20,20,200,0.1)"); lineGradient1.addColorStop(0.75, "rgba(25,35,245,0.1)"); lineGradient1.addColorStop(1, "rgba(25,35,245,0.05)"); } else { lineGradient1.addColorStop(0, "rgba(25,35,245,0.05)"); lineGradient1.addColorStop(0.2, "rgba(25,35,245,0.1)"); lineGradient1.addColorStop(0.3, "rgba(70,70,250,0.1)"); lineGradient1.addColorStop(0.5, "rgba(255,255,255,0.4)"); lineGradient1.addColorStop(0.6, "rgba(70,70,250,0.1)"); lineGradient1.addColorStop(0.8, "rgba(25,35,245,0.1)"); lineGradient1.addColorStop(1, "rgba(25,35,245,0.05)"); } this.ctx.strokeStyle = lineGradient1; this.ctx.moveTo(prevX,prevY) this.ctx.lineTo(light.path[i].x, light.path[i].y) this.ctx.stroke(); prevX = light.path[i].x; prevY = light.path[i].y; } this.ctx.save(); if (typeof childFlag == 'undefined') { var radgrad = this.ctx.createRadialGradient(15,15, 2 + 2 * Math.random(), 15, 15, 4 + 2 * Math.random()); radgrad.addColorStop(0, "rgba(255,255,255,0.025)"); radgrad.addColorStop(0.2, "rgba(255,255,255,0.015)"); radgrad.addColorStop(0.5, "rgba(25,35,245,0.01)"); radgrad.addColorStop(1, "rgba(25,35,245,0)"); this.ctx.translate(light.path[0].x - 15 * 4, light.path[0].y - 15 * 2); this.ctx.scale(4, 2) this.ctx.fillStyle = radgrad; this.ctx.fillRect(0,0,30,30); this.ctx.restore(); } for (var i = 1; i < light.path.length; ++i) { if (light.path[i].lights) savedLights = savedLights.concat(light.path[i].lights) } for (var i = 0; i < savedLights.length; ++i) this.drawLight(savedLights[i], true) } kilat.prototype.onDocMouseMove = function(e) { var ev = e ? e : window.event; this.mouseX = ev.clientX - this.bounds.left; this.mouseY = ev.clientY - this.bounds.top; } kilat.prototype.onDocMouseDown = function(e) { var newlight = new light(); newlight.create(this.mouseX,this.mouseY, 3, this.mouseY + Math.random() * 30 - this.height / 5, true) this.drawLight(newlight) var _this = this; this.timer = setTimeout(function(){_this.isMouseDown = true;}, 150) return false; } kilat.prototype.onDocMouseUp = function(e) { clearTimeout(this.timer) this.isMouseDown = false; return false; } kilat.prototype.grad = function(x1, y1, x2, y2, width) { if (Math.floor(x1) == Math.floor(x2)) return {x1: x1 - width / 2, y1: (y1 + y2) / 2, x2: x1 + width / 2, y2: (y1 + y2) / 2}; else if (Math.floor(y1) == Math.floor(y2)) return {x1: (x1 + x2) / 2, y1: y1 - width / 2, x2: (x1 + x2) / 2, y2: y1 + width / 2}; else { var A = x2 - x1, B = y2 - y1, x0 = (x1 + x2) / 2, y0 = (y1 + y2) / 2, C = -A * x0 - B * y0, a = B*B/(A*A) + 1, b = B*C/(A*A) + x0 * B / A - y0, c = 2 * x0 * C / A + C*C/(A*A) + x0*x0 + y0*y0 - width*width, y1 = (-b + Math.sqrt(b*b - a*c)) / a, x1 = (-B*y1 - C) / A, y2 = (-b - Math.sqrt(b*b - a*c)) / a, x2 = (-B*y2 - C) / A; return {x1:x1, y1:y1, x2:x2, y2:y2}; } } var _kilat = new kilat(); function multiSky() { this.timer = 0; } multiSky.prototype.init = function(callback) { this.ctx = document.getElementById("mainCanvas").getContext("2d"); this.width = document.getElementById("mainCanvas").offsetWidth; this.height = document.getElementById("mainCanvas").offsetHeight; var sky1 = new noise(), sky2 = new noise(), sky3 = new noise(); var _this; this.ctx.font = "16px Sans-serif"; this.ctx.fillText("Tunggu sebentar bro...", 20, 20); sky1.load(function() { _multiSky.texture1 = sky1.texture; sky2.load(function() { _multiSky.texture2 = sky2.texture; callback(); /* sky3.load(function() { _multiSky.texture3 = sky3.texture; setInterval(function() { // _multiSky.fillBackground(0.4) callback(); // _multiSky.draw.call(_multiSky); }, 30) })*/ }) }) } multiSky.prototype.draw = function() { var offset = this.height / 5; this.drawLoop(this.texture1, this.timer * 1.1, - offset - (10 * (Math.cos(2 - this.timer / 10) / 15 + Math.cos(2 + this.timer / 5) / 15)), 1.73) this.drawLoop(this.texture2, this.timer * 2.765 - 1457, - offset - 13 - (10 * (Math.sin(Math.cos(5 + this.timer / 10) / 10) + Math.cos(this.timer / 8) / 20)), 1.45) // this.drawLoop(this.texture3, this.timer * 2.343 + 234, - offset - 20/* - (40 * (Math.sin(2 + this.timer / 10) / 15 + Math.cos(2 - this.timer / 5) / 15))*/, 1.7) this.timer += 0.5; } multiSky.prototype.drawLoop = function(texture, time, dy, scaleY) { var count = Math.floor(this.width / 256 + 1); for (var i = -1; i <= count; i++) { this.ctx.save(); this.ctx.translate(scaleY * ( i * 256 + Math.floor(time) % 256), dy) this.ctx.scale(scaleY, 1) this.ctx.fillStyle = texture; this.ctx.fillRect(0,0, scaleY * 256, 256); this.ctx.fill(); this.ctx.restore(); } } var _multiSky = new multiSky(); function getWindowWidth() { var myWidth = 0; if (typeof (window.innerWidth) == 'number') myWidth = window.innerWidth; else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) myWidth = document.documentElement.clientWidth; else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { myWidth = document.body.clientWidth; } return myWidth; } function getOffsetRect(elem) { var box = elem.getBoundingClientRect(), body = document.body, docElem = document.documentElement, scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop, scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft, clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0, top = box.top + scrollTop - clientTop, left = box.left + scrollLeft - clientLeft; return { top: Math.round(top), left: Math.round(left) } } function getWindowHeight() { var myHeight = 0; if (typeof (window.innerWidth) == 'number' ) myHeight = window.innerHeight; else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) myHeight = document.documentElement.clientHeight; else if (document.body && (document.body.clientWidth || document.body.clientHeight)) myHeight = document.body.clientHeight; return myHeight; } </script> <script> function rainLine() { this.width = 0; this.time = 0; this.x1 = 0; this.y1 = 0; this.x2 = 0; this.y2 = 0; } function rainDot() { this.rmax = 0; this.time = 0; this.x = -1; this.y = -1; } function hujan() { this.ctx = null; this.fps = 10; this.wind = 25; this.timeLine = 7; this.timeDot = 10; this.linesCount = 7; this.dotsCount = 20; this.lines = []; this.dots = []; } hujan.prototype.init = function() { this.ctx = document.getElementById("mainCanvas").getContext("2d"); this.width = document.getElementById("mainCanvas").offsetWidth; this.height = document.getElementById("mainCanvas").offsetHeight; for (var i = 0; i < this.linesCount; ++i) { var line = new rainLine(); this.newLine(line); this.lines.push(line); } for (var i = 0; i < this.dotsCount; ++i) { var dot = new rainDot(); this.newDot(dot); this.dots.push(dot); } /* var _this = this; setInterval(function() { _this.draw.apply(_this); }, 100 )*/ } hujan.prototype.newLine = function(line) { line.time = Math.floor(Math.random() * this.timeLine / 3); line.x1 = Math.random() * this.width; line.y1 = this.height / 5 + Math.random() * this.height / 10; line.x2 = line.x1 + Math.random() * this.wind; line.y2 = (Math.random() * 1 / 5 + 9 / 10) * this.height; var rnd = Math.random(); // line.width = rnd < 0.8 ? 1 : rnd < 0.95 ? 2 : 3; line.width = 1; } hujan.prototype.newDot = function(dot) { dot.time = Math.floor(Math.random() * this.timeDot / 2); dot.x = Math.random() * this.width; dot.y = (Math.random() * 1 / 5 + 4 / 5) * this.height; dot.rmax = Math.random() < 0.8 ? 1 : 2; } hujan.prototype.draw = function() { /* this.ctx.beginPath(); this.ctx.fillStyle = "rgba(250,250,254,1)"; this.ctx.fillRect( 0 , 0 , this.width , this.height ); this.ctx.closePath(); this.ctx.fill();*/ for (var i = 0; i < this.linesCount; ++i) { this.ctx.beginPath(); this.ctx.lineCap = 'round'; this.ctx.lineWidth = this.lines[i].width; this.ctx.moveTo(this.lines[i].x1, this.lines[i].y1); this.ctx.lineTo(this.lines[i].x2, this.lines[i].y2); var lineGradient = this.ctx.createLinearGradient(0,0,this.lines[i].x2 - this.lines[i].x1,this.lines[i].y2 - this.lines[i].y1); lineGradient.addColorStop(0, "rgba(171,205,239,0)"); lineGradient.addColorStop(1, "rgba(171,205,239," + 0.03 * (this.lines[i].time + 1) / this.timeLine + ")"); this.ctx.strokeStyle = lineGradient; this.ctx.closePath(); this.ctx.stroke(); this.lines[i].time++; if (this.lines[i].time > this.timeLine) this.newLine(this.lines[i]) } /* for (var i = 0; i < this.dotsCount; ++i) { this.ctx.save() this.ctx.strokeStyle = "rgba(171,205,239," + (this.timeDot - this.dots[i].time) / (this.timeDot) + ")"; this.ctx.beginPath(); this.ctx.translate(this.dots[i].x, this.dots[i].y + 10 * (Math.random() - 0.5) * Math.sin(this.dots[i].time / 1.5) * Math.exp(- this.dots[i].time / 5)); this.ctx.scale(1, 0.4) this.ctx.arc(0, 0, 5 + 1.5 * this.dots[i].time * this.dots[i].rmax / 2, 0, Math.PI * 2, true); this.ctx.stroke(); this.ctx.restore() this.dots[i].time++; if (this.dots[i].time > this.timeDot) this.newDot(this.dots[i]) }*/ } var _hujan = new hujan(); </script><br /> <script> function init() { _hujan.init(); _kilat.init(); _multiSky.init(function() { setInterval(function() { _kilat.fillBackground(0.42) _hujan.draw(); _kilat.draw(); _multiSky.draw(); }, 50 ) }) } </script><br /> </head><br /> <body onload="init();"><br /> <br /> <div class="main"> <canvas style="margin-left:30px" height="650px" width="930px" id="mainCanvas"></canvas><br /> </div> <div style="text-align:center"> <span style="font-size: 14px; color: #000;">Silahkan klik untuk melihat efek petir canvas HTML5</span><br /> <br /> </div> <div id="textureHolder" style="display:none;"></div></body><br /> </html>


pada kode di atas terdapat kode lebar dan tinggi canvas height="650px" width="930px ini bisa anda sesuaikan sendiri .