CreateJS Effin particles
How do I make an createjs effin particles?
What is a createjs effin particles? How do you make a createjs effin particles? This script and codes were developed by Luna Eye on 16 October 2022, Sunday.
CreateJS Effin particles - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CreateJS Effin particles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="demoCanvas" width="800" height="600">
</canvas> <script src='https://code.createjs.com/createjs-2015.11.26.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
CreateJS Effin particles - Script Codes CSS Codes
body { background-color: black;
}
CreateJS Effin particles - Script Codes JS Codes
/* Particle Emitter with CreateJS
*/
window.onload = function() { // https://www.safaribooksonline.com/blog/2012/06/19/creating-a-particle-system-with-easeljs/ var canvas = document.getElementById("demoCanvas"); var stage = new createjs.Stage(canvas); //var time = Date.now(); var emitter = { density: 10, particleSize: 5, startingX: 270, startingY: 300, gravity: 0.1, wind: 0.2, friction: 0.97, groundLevel: 490, ceiling: 120, rightWall: 750, leftWall: 205 } for(i = 0; i < emitter.density; i++) { createCircle(); } createjs.Ticker.addEventListener("tick", handleTick); function createCircle() { var graphics = new createjs.Graphics(); graphics.beginFill("#0070BC"); graphics.drawCircle(0, 0, emitter.particleSize); var circle = new createjs.Shape(graphics) circle.x = emitter.startingX; circle.y = emitter.startingY; circle.vx = Math.random() * 2 - 1; circle.vy = Math.random() * -0.1; //circle.time = 0; circle.name = "particle"; stage.addChild(circle); console.log('added circle'); } function handleTick(event) { //var now = Date.now(); //var elapsed = now - time; //time = now; /*for (var i = stage.numChildren-1; i >= 0; i--) { // remove them all each tick to redraw var child = stage.getChildAt(i) if (child.name == "particle") { stage.removeChild(child); } } */ //createCircle(); for (var i = 0; i < stage.getNumChildren(); i++) { var circle = stage.getChildAt(i); if(circle.name == "particle") { //stage.removeChild(circle); circle.vx -= emitter.gravity; circle.vx += emitter.wind; // add wind attractor circle.x += circle.vx; circle.y += circle.vy; //circle.time += elapsed / 1000; //circle.x += circle.speedX * 1 / (circle.time + 1); //circle.y = emitter.startingY + circle.speedY * circle.time + 90 * (circle.time * circle.time) if (circle.x > emitter.rightWall + emitter.particleSize) { circle.x = emitter.startingX; circle.y = emitter.startingY; circle.vx = Math.random() * 2 - 1; circle.vy = Math.random() * -2; //stage.removeChildAt(i); i--; } } } stage.update(); }
}
Developer | Luna Eye |
Username | lunaman |
Uploaded | October 16, 2022 |
Rating | 3 |
Size | 2,555 Kb |
Views | 38,456 |
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 |
Multiple YouTube modals 2 | 4,110 Kb |
Simple CSS overlay | 1,744 Kb |
Particles and Electron | 3,878 Kb |
CreateJS Particle Emitter for EG | 2,267 Kb |
Right arrow shape | 1,617 Kb |
Transparent PNG overlay background image | 2,366 Kb |
Toggle button | 2,350 Kb |
Lifecycle | 2,637 Kb |
Multiple YouTube modals - one function | 4,465 Kb |
A Pen by Luna Eye | 3,116 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 |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
Wavy Road with Dashes | Jonobr1 | 2,679 Kb |
SVG Circle Progress | JMChristensen | 3,368 Kb |
Bootstrap Responsive Menu Drawer | JesseGlacken | 3,777 Kb |
Canvas Orbital Trails v2 | Jackrugile | 3,421 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
After America | Jonathangarner | 2,686 Kb |
Light Switch | Bartuc | 4,933 Kb |
Heartbeat | Apetrov | 2,079 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!