(9 intermediate revisions by the same user not shown) | |||
Line 533: | Line 533: | ||
} | } | ||
− | / | + | |
+ | /****************SMOKE CANVAS***************************/ | ||
canvas { | canvas { | ||
position:absolute; | position:absolute; | ||
margin-left : 50%; | margin-left : 50%; | ||
− | left: - | + | left: -200px; |
− | + | overflow: hidden; | |
− | + | } | |
+ | #smoke{display:none;} | ||
</style> | </style> | ||
Line 629: | Line 631: | ||
</li> | </li> | ||
</ul> | </ul> | ||
+ | |||
+ | |||
+ | <!-- This is the HTML code for smoke--> | ||
+ | <canvas id="smoke-canvas"></canvas> | ||
+ | <img id="smoke" src="https://static.igem.org/mediawiki/2016/9/96/T--Peshawar--smoke.png"/> | ||
Line 662: | Line 669: | ||
alt="shopify stats"></a></div></noscript> | alt="shopify stats"></a></div></noscript> | ||
<!-- End of StatCounter Code for Default Guide --> | <!-- End of StatCounter Code for Default Guide --> | ||
− | |||
Line 746: | Line 752: | ||
+ | //********************SMOKE CANVAS JS************************** | ||
+ | |||
+ | (function () { | ||
+ | var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; | ||
+ | window.requestAnimationFrame = requestAnimationFrame; | ||
+ | })(); | ||
+ | |||
+ | var canvas = document.getElementById("smoke-canvas"), | ||
+ | ctx = canvas.getContext("2d"), | ||
+ | settings = { | ||
+ | color: { | ||
+ | r: 255, | ||
+ | g: 255, | ||
+ | b: 255 | ||
+ | } | ||
+ | }, | ||
+ | loading = true; | ||
+ | |||
+ | canvas.height = document.body.offsetHeight; | ||
+ | canvas.width = 300; | ||
+ | |||
+ | var parts = [], | ||
+ | minSpawnTime = 40, | ||
+ | lastTime = new Date().getTime(), | ||
+ | maxLifeTime = Math.min(5000, (canvas.height / (1.5 * 60) * 1000)), | ||
+ | emitterX = canvas.width / 2, | ||
+ | emitterY = canvas.height - 10, | ||
+ | smokeImage = new Image(); | ||
+ | |||
+ | function spawn() { | ||
+ | if (new Date().getTime() > lastTime + minSpawnTime) { | ||
+ | lastTime = new Date().getTime(); | ||
+ | parts.push(new smoke(emitterX, emitterY)); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function render() { | ||
+ | if(loading){ | ||
+ | load(); | ||
+ | return false; | ||
+ | } | ||
+ | |||
+ | var len = parts.length; | ||
+ | ctx.clearRect(0, 0, canvas.width, canvas.height); | ||
+ | |||
+ | while (len--) { | ||
+ | if (parts[len].y < 0 || parts[len].lifeTime > maxLifeTime) { | ||
+ | parts.splice(len, 1); | ||
+ | } else { | ||
+ | parts[len].update(); | ||
+ | |||
+ | ctx.save(); | ||
+ | var offsetX = -parts[len].size / 2, | ||
+ | offsetY = -parts[len].size / 2; | ||
+ | |||
+ | ctx.translate(parts[len].x - offsetX, parts[len].y - offsetY); | ||
+ | ctx.rotate(parts[len].angle / 180 * Math.PI); | ||
+ | ctx.globalAlpha = parts[len].alpha; | ||
+ | ctx.drawImage(smokeImage, offsetX, offsetY, parts[len].size, parts[len].size); | ||
+ | ctx.restore(); | ||
+ | } | ||
+ | } | ||
+ | spawn(); | ||
+ | requestAnimationFrame(render); | ||
+ | } | ||
+ | |||
+ | function smoke(x, y, index) { | ||
+ | this.x = x; | ||
+ | this.y = y; | ||
+ | |||
+ | this.size = 1; | ||
+ | this.startSize = 32; | ||
+ | this.endSize = 40; | ||
+ | |||
+ | this.angle = Math.random() * 359; | ||
+ | |||
+ | this.startLife = new Date().getTime(); | ||
+ | this.lifeTime = 0; | ||
+ | |||
+ | this.velY = -1 - (Math.random() * 0.5); | ||
+ | this.velX = Math.floor(Math.random() * (-6) + 3) / 10; | ||
+ | } | ||
+ | |||
+ | smoke.prototype.update = function () { | ||
+ | this.lifeTime = new Date().getTime() - this.startLife; | ||
+ | this.angle += 0.2; | ||
+ | |||
+ | var lifePerc = ((this.lifeTime / maxLifeTime) * 100); | ||
+ | |||
+ | this.size = this.startSize + ((this.endSize - this.startSize) * lifePerc * .1); | ||
+ | |||
+ | this.alpha = 1 - (lifePerc * .01); | ||
+ | this.alpha = Math.max(this.alpha, 0); | ||
+ | |||
+ | this.x += this.velX; | ||
+ | this.y += this.velY; | ||
+ | } | ||
+ | |||
+ | smokeImage.src = document.getElementById("smoke").src; | ||
+ | smokeImage.onload = function(){ | ||
+ | loading = false; | ||
+ | } | ||
+ | |||
+ | function load(){ | ||
+ | if(loading){ | ||
+ | setTimeout(load, 100); | ||
+ | }else{ | ||
+ | render(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | render(); | ||
+ | |||
+ | // save off the original image for colorizing | ||
+ | var origImage = smokeImage; | ||
+ | |||
+ | window.onresize = resizeMe; | ||
+ | window.onload = resizeMe; | ||
+ | |||
+ | function resizeMe() { | ||
+ | canvas.height = document.body.offsetHeight; | ||
+ | } | ||
+ | |||
+ | function changeColor() { | ||
+ | var tCanvas = document.createElement("canvas"), | ||
+ | tCtx = tCanvas.getContext("2d"), | ||
+ | color = settings.color; | ||
+ | |||
+ | tCanvas.width = tCanvas.height = 32; | ||
+ | tCtx.drawImage(origImage, 0, 0, 32, 32); | ||
+ | |||
+ | var imgd = tCtx.getImageData(0, 0, 32, 32), | ||
+ | pix = imgd.data; | ||
+ | |||
+ | for (var i = 0, n = pix.length; i < n; i += 4) { | ||
+ | pix[i] = color.r | ||
+ | pix[i + 1] = color.g; | ||
+ | pix[i + 2] = color.b; | ||
+ | } | ||
+ | |||
+ | tCtx.putImageData(imgd, 0, 0); | ||
+ | return tCanvas.toDataURL(); | ||
+ | } | ||
+ | |||
+ | // Settings | ||
+ | var gui = new dat.GUI(); | ||
+ | var colorController = gui.addColor(settings, 'color').onChange(function () { | ||
+ | smokeImage.src = changeColor(); | ||
+ | }); | ||
</script> | </script> | ||
</html> | </html> |
Latest revision as of 06:44, 11 September 2016