1 | "use strict"; |
2 | |
3 | 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; }; }();
|
4 | |
5 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
6 | |
7 | var canvas = document.getElementById("canva");
|
8 | canvas.width = window.innerWidth; |
9 | canvas.height = window.innerHeight; |
10 | var ctx = canvas.getContext("2d");
|
11 | |
12 | var makeRandom = function makeRandom(to) {
|
13 | return Math.random() * to; |
14 | }; |
15 | var speedRandom = function speedRandom(x) {
|
16 | return (Math.random() - 0.5) * x; |
17 | }; |
18 | |
19 | var mouse = { x: null, y: null };
|
20 | var colors = ["#BA2D27", "#C45C43", "#1B8F9C", "#33090E", "#0C5963"]; |
21 | var circles = []; |
22 | |
23 | window.addEventListener("resize", function () {
|
24 | canvas.width = window.innerWidth; |
25 | canvas.height = window.innerHeight; |
26 | init(); |
27 | }); |
28 | |
29 | window.addEventListener("mousemove", function (evt) {
|
30 | mouse.x = evt.x; |
31 | mouse.y = evt.y; |
32 | }); |
33 | |
34 | var Circle = function () {
|
35 | function Circle(x, y, radius, vx, vy, color) {
|
36 | _classCallCheck(this, Circle); |
37 | |
38 | this.x = x; |
39 | this.y = y; |
40 | this.radius = radius; |
41 | this.vx = vx; |
42 | this.vy = vy; |
43 | this.color = color; |
44 | } |
45 | |
46 | _createClass(Circle, [{
|
47 | key: "draw", |
48 | value: function draw() {
|
49 | ctx.beginPath(); |
50 | ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); |
51 | ctx.fillStyle = this.color; |
52 | ctx.strokeStyle = this.color; |
53 | ctx.fill(); |
54 | ctx.stroke(); |
55 | } |
56 | }, {
|
57 | key: "updateMove", |
58 | value: function updateMove() {
|
59 | if (this.x > window.innerWidth + this.radius && this.vx > 0) {
|
60 | this.x = 0 - this.radius; |
61 | } |
62 | if (this.x < 0 - this.radius && this.vx < 0) {
|
63 | this.x = window.innerWidth + this.radius; |
64 | } |
65 | if (this.y > window.innerHeight + this.radius && this.vy > 0) {
|
66 | this.y = 0 - this.radius; |
67 | } |
68 | if (this.y < 0 - this.radius && this.vy < 0) {
|
69 | this.y = window.innerHeight + this.radius; |
70 | } |
71 | |
72 | this.x += this.vx; |
73 | this.y += this.vy; |
74 | |
75 | this.makeSpecialCircle(); |
76 | this.draw(); |
77 | } |
78 | }, {
|
79 | key: "makeSpecialCircle", |
80 | value: function makeSpecialCircle() {
|
81 | var _this = this; |
82 | |
83 | circles.forEach(function (circle, index) {
|
84 | 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) {
|
85 | ctx.beginPath(); |
86 | ctx.moveTo(_this.x, _this.y); |
87 | ctx.lineTo(circle.x, circle.y); |
88 | ctx.strokeStyle = circle.color; |
89 | ctx.stroke(); |
90 | } |
91 | }); |
92 | } |
93 | }]); |
94 | |
95 | return Circle; |
96 | }(); |
97 | |
98 | var makeCircles = function makeCircles(count, circle) {
|
99 | var result = []; |
100 | for (var i = 0; i < count; i++) {
|
101 | 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))])); |
102 | } |
103 | return result; |
104 | }; |
105 | |
106 | var init = function init() {
|
107 | circles = makeCircles(100, {
|
108 | rdmX: window.innerWidth, |
109 | rdmY: window.innerHeight, |
110 | rdmR: 20, |
111 | vx: 2, |
112 | vy: 2 |
113 | }); |
114 | circles.forEach(function (circle) {
|
115 | return circle.draw(); |
116 | }); |
117 | }; |
118 | |
119 | function animate() {
|
120 | requestAnimationFrame(animate); |
121 | ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); |
122 | circles.forEach(function (circle, i) {
|
123 | circle.updateMove(); |
124 | }); |
125 | } |
126 | |
127 | init(); |
128 | animate(); |
Travelled to 12 computer(s): aoiabmzegqzx, bhatertpkbcr, cbybwowwnfue, gwrvuhgaqvyk, ishqpsrjomds, lpdgvwnxivlt, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tslmcundralx, tvejysmllsmz, vouqrxazstgt
No comments. add comment
| Snippet ID: | #1014798 |
| Snippet name: | circles.js |
| Eternal ID of this version: | #1014798/1 |
| Text MD5: | c62874ac13b4f022ad56d617da608722 |
| Author: | stefan |
| Category: | |
| Type: | Document |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2018-05-02 15:05:14 |
| Source code size: | 4071 bytes / 128 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 564 / 428 |
| Referenced in: | [show references] |