CreateJS Effin particles

Developer
Size
2,555 Kb
Views
38,456

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 Previews

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(); }
}
CreateJS Effin particles - Script Codes
CreateJS Effin particles - Script Codes
Home Page Home
Developer Luna Eye
Username lunaman
Uploaded October 16, 2022
Rating 3
Size 2,555 Kb
Views 38,456
Do you need developer help for CreateJS Effin particles?

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!

Luna Eye (lunaman) Script Codes
Create amazing marketing copy with AI!

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!