"use strict"; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var canvas = document.getElementById("canva"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext("2d"); var makeRandom = function makeRandom(to) { return Math.random() * to; }; var speedRandom = function speedRandom(x) { return (Math.random() - 0.5) * x; }; var mouse = { x: null, y: null }; var colors = ["#BA2D27", "#C45C43", "#1B8F9C", "#33090E", "#0C5963"]; var circles = []; window.addEventListener("resize", function () { canvas.width = window.innerWidth; canvas.height = window.innerHeight; init(); }); window.addEventListener("mousemove", function (evt) { mouse.x = evt.x; mouse.y = evt.y; }); var Circle = function () { function Circle(x, y, radius, vx, vy, color) { _classCallCheck(this, Circle); this.x = x; this.y = y; this.radius = radius; this.vx = vx; this.vy = vy; this.color = color; } _createClass(Circle, [{ key: "draw", value: function draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); ctx.fillStyle = this.color; ctx.strokeStyle = this.color; ctx.fill(); ctx.stroke(); } }, { key: "updateMove", value: function updateMove() { if (this.x > window.innerWidth + this.radius && this.vx > 0) { this.x = 0 - this.radius; } if (this.x < 0 - this.radius && this.vx < 0) { this.x = window.innerWidth + this.radius; } if (this.y > window.innerHeight + this.radius && this.vy > 0) { this.y = 0 - this.radius; } if (this.y < 0 - this.radius && this.vy < 0) { this.y = window.innerHeight + this.radius; } this.x += this.vx; this.y += this.vy; this.makeSpecialCircle(); this.draw(); } }, { key: "makeSpecialCircle", value: function makeSpecialCircle() { var _this = this; circles.forEach(function (circle, index) { if (_this.x - circle.x < 150 && _this.x - circle.x > -150 && _this.y - circle.y < 150 && _this.y - circle.y > -150 && _this.radius !== circle.radius && _this.color === circle.color) { ctx.beginPath(); ctx.moveTo(_this.x, _this.y); ctx.lineTo(circle.x, circle.y); ctx.strokeStyle = circle.color; ctx.stroke(); } }); } }]); return Circle; }(); var makeCircles = function makeCircles(count, circle) { var result = []; for (var i = 0; i < count; i++) { result.push(new Circle(makeRandom(circle.rdmX - circle.rdmR * 2) + circle.rdmR, makeRandom(circle.rdmY - circle.rdmR * 2) + circle.rdmR, makeRandom(circle.rdmR), speedRandom(circle.vx), speedRandom(circle.vy), colors[Math.floor(makeRandom(5))])); } return result; }; var init = function init() { circles = makeCircles(100, { rdmX: window.innerWidth, rdmY: window.innerHeight, rdmR: 20, vx: 2, vy: 2 }); circles.forEach(function (circle) { return circle.draw(); }); }; function animate() { requestAnimationFrame(animate); ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); circles.forEach(function (circle, i) { circle.updateMove(); }); } init(); animate();