Flying Particles

Developer
Lucas Motta
Size
4,660 Kb
Views
30,360
  1. Flying Particles Previews
  2. Flying Particles HTML Codes
  3. Flying Particles CSS Codes
  4. Flying Particles JS Codes

How do I make an flying particles?

Prototype for a project that I'm working on at the moment - not really optimised thou.. What is a flying particles? How do you make a flying particles? This script and codes were developed by Lucas Motta on 22 September 2022, Thursday.

Flying Particles Previews
IQ Test

Flying Particles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flying 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="particles" width="960" height="720"></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>

Flying Particles - Script Codes CSS Codes

body, canvas { background: #710363;
}

Flying Particles - Script Codes JS Codes

(function() { var App, Obstacle, Particle, Vector2D, extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, hasProp = {}.hasOwnProperty, bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; Vector2D = (function() { function Vector2D(x1, y1) { this.x = x1 != null ? x1 : 0; this.y = y1 != null ? y1 : 0; } Vector2D.prototype.add = function(vector) { return new Vector2D(this.x + vector.x, this.y + vector.y); }; Vector2D.prototype.subtract = function(vector) { return new Vector2D(this.x - vector.x, this.y - vector.y); }; Vector2D.prototype.multiply = function(n) { return new Vector2D(this.x * n, this.y * n); }; Vector2D.prototype.divide = function(n) { return new Vector2D(this.x / n, this.y / n); }; Vector2D.prototype.clone = function() { return new Vector2D(this.x, this.y); }; Vector2D.prototype.magnitude = function() { return Math.sqrt(this.x * this.x + this.y * this.y); }; return Vector2D; })(); Obstacle = (function(superClass) { extend(Obstacle, superClass); function Obstacle(x, y, radius, mass) { this.radius = radius; this.mass = mass != null ? mass : 6; Obstacle.__super__.constructor.call(this, x, y); } Obstacle.prototype.move = function(x1, y1) { this.x = x1; this.y = y1; }; Obstacle.prototype.avoid = function(particle) { var d, v; v = particle.subtract(this); d = this.radius - Math.min(v.magnitude(), this.radius); return v.multiply(this.mass * d / this.radius); }; return Obstacle; })(Vector2D); Particle = (function(superClass) { extend(Particle, superClass); function Particle(x, y, weight) { if (x == null) { x = 0; } if (y == null) { y = 0; } this.weight = weight; if (this.weight == null) { this.weight = Math.random() * 20 + 20; } Particle.__super__.constructor.call(this, x, y); } Particle.prototype.reset = function(x1, y1) { this.x = x1 != null ? x1 : 0; this.y = y1 != null ? y1 : 0; }; Particle.prototype.update = function(velX, velY) { this.x += velX; return this.y += velY; }; return Particle; })(Vector2D); App = (function() { function App() { this.updateParticles = bind(this.updateParticles, this); var i, j, k; this.canvas = document.getElementById("particles"); this.context = this.canvas.getContext("2d"); this.width = this.canvas.width; this.height = this.canvas.height; this.data = this.context.createImageData(this.width, this.height); this.particles = []; this.obstacles = []; this.strength = 300; this.angle = Math.random() * Math.PI * 2; this.wind = new Vector2D(Math.cos(this.angle) * this.strength, Math.sin(this.angle) * this.strength); this.windVariation = 0; for (i = j = 1; j <= 8; i = ++j) { this.obstacles.push(new Obstacle(Math.random() * this.width, Math.random() * this.height, Math.random() * 60 + 60)); } for (i = k = 1; k <= 2500; i = ++k) { this.particles.push(new Particle(Math.random() * this.width, Math.random() * this.height)); } $(window).on("mousemove", (function(_this) { return function(e) { if (!_this.cursor) { _this.cursor = new Obstacle(_this.width * .5, _this.height * .5, 80, 20); _this.obstacles.push(_this.cursor); } return _this.cursor.move(e.clientX, e.clientY); }; })(this)); this.updateParticles(); } App.prototype.changeDirection = function() { this.windVariation += .002; this.wind.x = Math.sin(this.angle * Math.cos(this.windVariation)) * this.strength; return this.wind.y = Math.cos(this.angle * Math.cos(this.windVariation)) * this.strength; }; App.prototype.updateParticles = function() { var j, k, len1, len2, obstacle, p, ref, ref1, v; ref = this.particles; for (j = 0, len1 = ref.length; j < len1; j++) { p = ref[j]; v = this.wind.clone(); ref1 = this.obstacles; for (k = 0, len2 = ref1.length; k < len2; k++) { obstacle = ref1[k]; v = v.add(obstacle.avoid(p)); } v = v.divide(p.weight); p.update(v.x, v.y); if (p.x < 0) { p.reset(this.width, Math.random() * this.height); } else if (p.x > this.width) { p.reset(0, Math.random() * this.height); } else if (p.y < 0) { p.reset(Math.random() * this.width, this.height); } else if (p.y > this.height) { p.reset(Math.random() * this.width, 0); } } this.changeDirection(); this.drawParticles(); return requestAnimationFrame(this.updateParticles); }; App.prototype.drawParticles = function() { var i, j, len, len1, p, ref; ref = this.particles; for (j = 0, len1 = ref.length; j < len1; j++) { p = ref[j]; this.setPixel(this.data, p.x, p.y, 235, 202, 47, 255); } len = this.data.data.length; i = 3; while (i < len) { this.data.data[i] -= 50; i += 4; } return this.context.putImageData(this.data, 0, 0); }; App.prototype.setPixel = function(imageData, x, y, r, g, b, a) { var index; if (x < 0 || x > this.width || y < 0 || y > this.height) { return; } x = Math.round(x); y = Math.round(y); index = (x + y * imageData.width) * 4; imageData.data[index + 0] = r; imageData.data[index + 1] = g; imageData.data[index + 2] = b; imageData.data[index + 3] = a; index = ((x + 1) + (y + 1) * imageData.width) * 4; imageData.data[index + 0] = r; imageData.data[index + 1] = g; imageData.data[index + 2] = b; imageData.data[index + 3] = a; index = ((x - 1) + (y - 1) * imageData.width) * 4; imageData.data[index + 0] = r; imageData.data[index + 1] = g; imageData.data[index + 2] = b; imageData.data[index + 3] = a; index = ((x + 1) + (y - 1) * imageData.width) * 4; imageData.data[index + 0] = r; imageData.data[index + 1] = g; imageData.data[index + 2] = b; imageData.data[index + 3] = a; index = ((x - 1) + (y + 1) * imageData.width) * 4; imageData.data[index + 0] = r; imageData.data[index + 1] = g; imageData.data[index + 2] = b; return imageData.data[index + 3] = a; }; return App; })(); $(function() { return new App(); });
}).call(this);
Flying Particles - Script Codes
Flying Particles - Script Codes
Home Page Home
Developer Lucas Motta
Username lucasmotta
Uploaded September 22, 2022
Rating 4
Size 4,660 Kb
Views 30,360
Do you need developer help for Flying 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!

Lucas Motta (lucasmotta) Script Codes
Name
Follow the kitty
A Pen by Lucas Motta
3D Kitty Grid
Responsive Infinite Carousel
CSS Triangles with shadow
Medium Menu
CSS Grid Example
Create amazing SEO content 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!