Another Particle Demo
How do I make an another particle demo?
Just another particle playground. Move your mouse and click around for fun.. What is a another particle demo? How do you make a another particle demo? This script and codes were developed by Timo Hausmann on 16 October 2022, Sunday.
Another Particle Demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Another Particle Demo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="myCanvas" width="400" height="300"></canvas> <script src="js/index.js"></script>
</body>
</html>
Another Particle Demo - Script Codes CSS Codes
body { margin: 0; overflow: hidden;
}
#myCanvas { display: block; }
Another Particle Demo - Script Codes JS Codes
var canvas = document.getElementById('myCanvas'), ctx = canvas.getContext('2d'), width = canvas.width, height = canvas.height, lastUpdate = new Date(), mouseUpdate = new Date(), lastMouse = [], particles = [], requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })();
Math.randMinMax = function(min, max, round) { var val = min + (Math.random() * (max - min)); return val;
};
Math.TO_RAD = Math.PI/180;
Math.getAngle = function( x1, y1, x2, y2 ) { var dx = x1 - x2, dy = y1 - y2; return Math.atan2(dy,dx);
};
Math.getDistance = function( x1, y1, x2, y2 ) { var xs = x2 - x1, ys = y2 - y1; xs *= xs; ys *= ys; return Math.sqrt( xs + ys );
};
window.setTimeout(function() { setFullscreen(); for(var i=0;i<40;i=i+1) { (function(i) { window.setTimeout(function() { createParticle({ x: width/2 - 150 + ((i/40)*300), degree: Math.randMinMax(225,135) }); },i*20); })(i); } loop();
}, 100);
canvas.addEventListener('mousemove', function(e) { var thisUpdate = new Date(), thisMouse = [e.offsetX || e.layerX, e.offsetY || e.layerY], degree = 0, distance = 0, hue = 180; if( thisUpdate - mouseUpdate < 20 ) return; degree = Math.getAngle( thisMouse[0], thisMouse[1], lastMouse[0], lastMouse[1] ); degree /= Math.TO_RAD; degree += 180; distance = Math.getDistance( thisMouse[0], thisMouse[1], lastMouse[0], lastMouse[1] ); if( distance < 1 ) distance = 1; hue = 180 * (degree / 360); createParticle({ color: 'hsla('+ hue +', 100%, 50%, '+(Math.random().toFixed(2))+')', x: thisMouse[0], y: thisMouse[1], degree: degree, speed: distance*20, vs: -distance/3 }); mouseUpdate = thisUpdate; lastMouse = thisMouse;
});
canvas.addEventListener('mousedown', function(e) { for(var i=0;i<40;i=i+1) { createParticle({ x: e.offsetX || e.layerX, y: e.offsetY || e.layerY, color: 'hsla('+ Math.randMinMax(290, 360) +', 100%, 50%, '+(Math.random().toFixed(2))+')', speed: Math.randMinMax(100, 350) }); }
});
window.addEventListener('resize', setFullscreen );
function createParticle( args ) { var options = { x: width/2, y: height/2, color: 'hsla('+ Math.randMinMax(160, 290) +', 100%, 50%, '+(Math.random().toFixed(2))+')', degree: Math.randMinMax(0, 360), speed: Math.randMinMax(200, 250), vd: Math.randMinMax(-90,90), vs: Math.randMinMax(-8,-5) }; for (key in args) { options[key] = args[key]; } particles.push( options );
}
function loop() { var thisUpdate = new Date(), delta = (lastUpdate - thisUpdate) / 1000, amount = particles.length, size = 2, i = 0, p; ctx.fillStyle = 'rgba(0,0,0,0.25)'; ctx.fillRect(0,0,width,height); for(;i<amount;i=i+1) { p = particles[ i ]; p.degree += (p.vd * delta); p.speed += (p.vs); if( p.speed < 0 ) continue; p.x += Math.cos(p.degree * Math.TO_RAD) * (p.speed * delta); p.y += Math.sin(p.degree * Math.TO_RAD) * (p.speed * delta); if( p.x < 0 || p.x > width ) { p.degree = 180 - p.degree; } if( p.y < 0 || p.y > height ) { p.degree *= -1; } ctx.save(); ctx.translate( p.x, p.y ); ctx.rotate( p.degree * Math.TO_RAD ); ctx.fillStyle = p.color; ctx.fillRect( -size, -size, size*2, size*2 ); ctx.restore(); } lastUpdate = thisUpdate; requestAnimFrame( loop );
}
function setFullscreen() { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight;
};
![Another Particle Demo - Script Codes](http://shots.codepen.io/timohausmann/pen/mGHbq-512.jpg)
Developer | Timo Hausmann |
Username | timohausmann |
Uploaded | October 16, 2022 |
Rating | 3.5 |
Size | 2,956 Kb |
Views | 12,144 |
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 |
Use your mousewheel | 4,109 Kb |
Single Element Spinner | 2,540 Kb |
Vector Based Movement | 2,568 Kb |
CSS3 3D Particles | 2,859 Kb |
Valentines Day | 3,118 Kb |
Simple 3d cube | 2,963 Kb |
Depth First Search Maze | 2,693 Kb |
Simple CSS 3D Cubes | 2,894 Kb |
Triangle Split Plane | 3,263 Kb |
Stream of Cables | 2,488 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 |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
Vue.js Starter | Andymerskin | 1,268 Kb |
Video mute | Leon9208 | 2,131 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
Scoreboard.js basic usage | Tbleckert | 1,733 Kb |
Colorful Sliders | Chanrith | 1,246 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Basic jQuery Filter list | Mtedwards | 2,464 Kb |
Importable Clearfix | Corysimmons | 1,411 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!