Particles attraction

Developer
Sergey
Size
6,181 Kb
Views
10,120
  1. Particles attraction Previews
  2. Particles attraction HTML Codes
  3. Particles attraction CSS Codes
  4. Particles attraction JS Codes

How do I make an particles attraction?

What is a particles attraction? How do you make a particles attraction? This script and codes were developed by Sergey on 14 November 2022, Monday.

Particles attraction Previews
IQ Test

Particles attraction - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Particles attraction</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas></canvas>
<button onclick='scene.isPlaying ? scene.stop() : scene.play()'>Play / Stop</button> <script src="js/index.js"></script>
</body>
</html>

Particles attraction - Script Codes CSS Codes

html,
body { width: 100%; height: 100%; -ms-touch-action: none; touch-action: none;
}
canvas { width: 100%; height: 100%; background: #262626; -ms-touch-action: none; touch-action: none;
}
button { display: block; position: absolute; top: 10px; left: 10px; color: #fff; border: 1px solid #fff; background: #c30000; border-radius: 5px; padding: 6px 18px;
}

Particles attraction - Script Codes JS Codes

'use strict';
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Vector = function () { function Vector(x, y) { _classCallCheck(this, Vector); this.x = x || 0; this.y = y || 0; } Vector.add = function add(a, b) { return new Vector(a.x + b.x, a.y + b.y); }; Vector.sub = function sub(a, b) { return new Vector(a.x - b.x, a.y - b.y); }; Vector.scale = function scale(vector, size) { return vector.clone().scale(size); }; Vector.random = function random() { return new Vector(Math.random() * 2 - 1, Math.random() * 2 - 1); }; Vector.prototype.set = function set() { var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; var y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1]; this.x = x; this.y = y; return this; }; Vector.prototype.setX = function setX() { var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; this.x = x; return this; }; Vector.prototype.setY = function setY() { var y = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; this.y = y; return this; }; Vector.prototype.invertX = function invertX() { this.x = -this.x; return this; }; Vector.prototype.invertY = function invertY() { this.y = -this.y; return this; }; Vector.prototype.add = function add(vector) { this.x += vector.x; this.y += vector.y; return this; }; Vector.prototype.sub = function sub(vector) { this.x -= vector.x; this.y -= vector.y; return this; }; Vector.prototype.scale = function scale() { var size = arguments.length <= 0 || arguments[0] === undefined ? 1 : arguments[0]; this.x *= size; this.y *= size; return this; }; Vector.prototype.distanceTo = function distanceTo(vector) { var dx = vector.x - this.x, dy = vector.y - this.y; return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)); }; Vector.prototype.length = function length() { return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2)); }; Vector.prototype.normalize = function normalize() { var m = this.length(); if (m) { this.x /= m; this.y /= m; } return this; }; Vector.prototype.angle = function angle() { return Math.atan2(this.y, this.x); }; Vector.prototype.clone = function clone() { return new Vector(this.x, this.y); }; return Vector;
}();
var Point = function () { function Point() { var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; var y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1]; _classCallCheck(this, Point); var size = Math.random(); var color = Math.floor((1 - size) * 55 + 200); this.x = x; this.y = y; this.radius = 1 + size * 2; this.color = 'rgb(' + color + ',' + color + ',' + color + ')'; this.maxSpeed = 4 - size; this.minSpeed = 1 - size; this.friction = 0.002; this.weight = size * 0.8; this.acceleration = new Vector(0, 0); this.velocity = Vector.random().scale(this.maxSpeed / 2); } Point.prototype.update = function update(canvas, attractionPoint) { if (attractionPoint) { var attraction = this.getAttraction(attractionPoint); this.acceleration.set(attraction.x, attraction.y); } else { this.acceleration.set(0, 0); } if (this.x <= 0 || this.x >= canvas.width) { if (this.x < 0) { this.x = 0; } else { this.x = canvas.width; } this.velocity.invertX(); } if (this.y <= 0 || this.y >= canvas.height) { if (this.y < 0) { this.y = 0; } else { this.y = canvas.height; } this.velocity.invertY(); } this.velocity.add(this.acceleration); if (this.velocity.length() > this.minSpeed) { this.velocity.scale(1 - this.friction); } if (this.velocity.length() > this.maxSpeed) { this.velocity.normalize().scale(this.maxSpeed); } this.x += this.velocity.x; this.y += this.velocity.y; return this; }; Point.prototype.getAttraction = function getAttraction(attractionPoint) { var strength = 1 / (this.weight * Math.pow(attractionPoint.distanceTo(this), 1.1)); return Vector.sub(attractionPoint, this).normalize().scale(strength); }; Point.prototype.draw = function draw(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false); ctx.fillStyle = this.color; ctx.fill(); ctx.closePath(); }; return Point;
}();
var Scene = function () { function Scene(element) { _classCallCheck(this, Scene); this.element = element; this.ctx = element.getContext('2d'); this.isPlaying = false; } Scene.prototype.clear = function clear() { var element = this.element; this.ctx.clearRect(0, 0, element.width, element.height); }; Scene.prototype.resize = function resize() { this.element.width = window.innerWidth; this.element.height = window.innerHeight; this.clear(); }; Scene.prototype.draw = function draw(renderer) { var _this = this; if (this.isPlaying) { window.requestAnimationFrame(function () { _this.draw(); }); renderer(); } }; Scene.prototype.stop = function stop() { this.isPlaying = false; }; Scene.prototype.play = function play() { this.isPlaying = true; this.draw(); }; Scene.prototype.init = function init() { var _this2 = this; this.resize(); window.addEventListener('resize', function () { _this2.resize(); }); }; return Scene;
}();
var ParticleScene = function (_Scene) { _inherits(ParticleScene, _Scene); function ParticleScene(element) { _classCallCheck(this, ParticleScene); var _this3 = _possibleConstructorReturn(this, _Scene.call(this, element)); _this3.points = []; _this3.cursor = new Vector(); _this3.cursorIsActive = false; return _this3; } ParticleScene.prototype.emit = function emit() { var count = arguments.length <= 0 || arguments[0] === undefined ? 100 : arguments[0]; var points = []; for (var index = 0; index < count; index++) { var x = this.element.width * Math.random(); var y = this.element.height * Math.random(); points.push(new Point(x, y)); } return points; }; ParticleScene.prototype.drawCursor = function drawCursor() { this.ctx.beginPath(); this.ctx.arc(this.cursor.x, this.cursor.y, 5, 0, 2 * Math.PI, false); this.ctx.fillStyle = '#fff'; this.ctx.fill(); this.ctx.closePath(); }; ParticleScene.prototype.renderFrame = function renderFrame() { this.clear(); var cursor = undefined; if (this.cursorIsActive) { cursor = this.cursor; this.drawCursor(); } for (var _iterator = this.points, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { var _ref; if (_isArray) { if (_i >= _iterator.length) break; _ref = _iterator[_i++]; } else { _i = _iterator.next(); if (_i.done) break; _ref = _i.value; } var point = _ref; point.update(this.element, cursor).draw(this.ctx); } }; ParticleScene.prototype.draw = function draw() { var _this4 = this; _Scene.prototype.draw.call(this, function () { return _this4.renderFrame(); }); }; ParticleScene.prototype.init = function init() { var _this5 = this; _Scene.prototype.init.call(this); this.points = this.emit(1000); var removePoint = function removePoint() { return _this5.cursorIsActive = false; }; this.element.addEventListener('mousemove', function (e) { _this5.cursor.set(e.clientX, e.clientY); _this5.cursorIsActive = true; }); this.element.addEventListener('touchmove', function (e) { var touch = e.touches[0]; e.preventDefault(); _this5.cursor.set(touch.pageX, touch.pageY); _this5.cursorIsActive = true; }); this.element.addEventListener('touchend', removePoint); this.element.addEventListener('mouseleave', removePoint); return this; }; return ParticleScene;
}(Scene);
var canvas = document.querySelector('canvas');
var scene = new ParticleScene(canvas);
scene.init().play();
Particles attraction - Script Codes
Particles attraction - Script Codes
Home Page Home
Developer Sergey
Username JohnTheCat
Uploaded November 14, 2022
Rating 3
Size 6,181 Kb
Views 10,120
Do you need developer help for Particles attraction?

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!

Sergey (JohnTheCat) Script Codes
Name
Checkbox ios 7-8 style
BMTH logo mask test
Hoi hoi
Switch from Google Material Design
A Pen by Sergey
Checkbox sony xperia style
Create amazing video scripts 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!