Home » Snippets » Canvas Particles Emission Canvas Particles Emission - Snippet --- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart --- Bootstrap Foundation Animate.css Preview HTML CSS JS <canvas id="canvas"></canvas> html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #171819; } var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), window_width = window.innerWidth, window_height = window.innerHeight; // Set canvas's width and height to that // of window (the view port) canvas.width = window_width; canvas.height = window_height; // Just a random object name to store some utility // functions that we can use later var $$ = { // Get a random integer from a range of ints // Usage: $$.randomInt(4, 8) -> would return // 4 or 5 or 6 or 7 or 8 randomInt: function(min, max) { return Math.floor( Math.random() * (max - min + 1) + min ); } }; // Pool of particles. Basically an array that stores all // our particles var particles = []; // The object that'll serve as the prototype // of every particle we create! var Particle = { x: window_width/2, y: window_height/2, x_speed: 10, y_speed: 10, radius: 10, _position: {}, // Draw the particle draw: function() { // Begin Drawing Path ctx.beginPath(); // Background color for the object that we'll draw ctx.fillStyle = this.bg_color; // Draw the arc // ctx.arc(x, y, radius, start_angle, end_angle, anticlockwise) // angle are in radians // 360 degrees = 2π radians or 1 radian = 360/2π = 180/π degrees ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false); // Close Drawing Path ctx.closePath(); // Fill the canvas with the arc ctx.fill(); }, // These are just some helpers that // I've created, got no use in this // creation. These might give you some idea // to do some funky things .. Who knows ? :) trackPosition: function() { var position = {x: this.x, y: this.y}; this._position.x = this.x; this._position.y = this.y; }, getPosition: function() { return this._position; } }; function createParticle() { // Create a particle object and use `Particle` // as the prototype of the object. I hope you know // about prototypes right ? Prototypal Inheritance, nope ? :S var particle = Object.create(Particle); // Random number between -5 and 5 using // our utility function, that was defined above. particle.x_speed = $$.randomInt(-3, 3); particle.y_speed = $$.randomInt(-3, 3); // Push the newly created particle // into our master array particles.push(particle); } function repaint() { // Clear the entire Canvas ctx.clearRect(0, 0, window_width, window_height); // Re-draw all particles we have in our bag! for (var i = 0; i < particles.length; i++) { var particle = particles[i]; // Set the new particle's background color // HSLA FTW! particle.bg_color = "hsla("+i+", 80%, 50%, 0.5)"; // This restriction makes sure // that your computer does not // run out of RAM and hence slows down. if (particles.length > 500) { particles.shift(); } particle.draw(); // Changing x and y co-ordinates which // are random (generated in createParticle()) // // This is cool, as we get different // speed for each particles then! particle.x = particle.x + particle.x_speed; particle.y = particle.y + particle.y_speed; // Track new position // Just a helper that might give you some // cool ideas to make some unique twists to this // experiment. particle.trackPosition(); } } // Magic method for animation! setInterval(function() { createParticle(); repaint(); }, 1000/60); Tutorials Palace 24 January, 2019 No Comments 526 Views Canvas Particles Emission CSS Animation CSS Animation Download Canvas Particles Emission Code Fullscreen Tutor Play Walkthrough Related Snippets Box Shadow Editor Dripping Paint CSS3 Animation National flag of Mongolia Particles Emission Based on Mouse Moves Custom Cursor Images with CSS Particle System Leaving Trails CSS3 LT Form Particles Gravity Effect Glowing Particle System with Different Shapes Leave a Reply Cancel replyYour email address will not be published. Required fields are marked *Name * Email * Website Notify me of new posts by email.