Smoke Effect Demo
How do I make an smoke effect demo?
Just a little smoke effect on canvas demo.. What is a smoke effect demo? How do you make a smoke effect demo? This script and codes were developed by Danwarfel on 04 January 2023, Wednesday.
Smoke Effect Demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Smoke Effect Demo</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Smoke Effect Demo - Script Codes CSS Codes
body, html { background-color: transparent; color: #fff; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
canvas { position: absolute; margin-left: 0%;
}
Smoke Effect Demo - Script Codes JS Codes
(function () { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame;
})();
var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d");
canvas.height = document.body.offsetHeight;
canvas.width = 600;
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() { 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 = 2; this.startSize = 25; this.endSize = 40; this.angle = Math.random() * 339; 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 = "http://danwarfel.com/smoke-particle.gif";
smokeImage.onload = function () { render();
}
window.onresize = resizeMe;
window.onload = resizeMe;
function resizeMe() { canvas.height = document.body.offsetHeight;
}
Developer | Danwarfel |
Username | danwarfel |
Uploaded | January 04, 2023 |
Rating | 4 |
Size | 2,920 Kb |
Views | 8,096 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Experimental Landing Page | 6,319 Kb |
SVG Hyphens Text | 2,627 Kb |
Full-Screenery | 43,891 Kb |
Sticky Nav Demo | 10,094 Kb |
Breathing Honeycomb | 49,929 Kb |
A Pen by danwarfel | 3,668 Kb |
Fullscreen Menu With Hamburger Icon | 3,612 Kb |
Fly-In Menu | 2,301 Kb |
Loading Animation | 1,684 Kb |
Delusid Homepage | 5,879 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Navcube | Wbarlow | 4,775 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
We Simplify animation | Meodai | 48,169 Kb |
Two column of responsive height | Fixie | 2,908 Kb |
Eunice A | Ejbronze | 2,203 Kb |
Process Accordion | Devilskitchen | 31,432 Kb |
Hoi hoi | JohnTheCat | 7,248 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!