Пример:
HTML:
1 |
<div id="circles"></div> |
JS:
Подключаем библиотеку p5.min.js версии 0.5.10 и скрипт самой графики.
Важно! Скрипт стабильно работает на версии 0.5.10
Например, на версии 0.9.0 - круги перемещаются с бешеной скоростью, что приводит к зависанию браузера. На других версиях не проверял.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
var orbitalsBack = []; var orbitalsFront = []; var orbitalsAmountBG = 8; var orbitalsAmountFG = 60; function setup() { var w = document.getElementById('circles').offsetWidth; var h = 500; var myCanvas = createCanvas(w, h); myCanvas.parent("circles"); for (var i = 0; i < orbitalsAmountBG; i++) { orbitalsBack[i] = new OrbitalBG(); } for (var j = 0; j < orbitalsAmountFG; j++) { orbitalsFront[j] = new OrbitalFG(); } } function draw(){ clear(); for (var i = 0; i < orbitalsBack.length; i++) { orbitalsBack[i].display(); orbitalsBack[i].update(); orbitalsBack[i].edges(); }; for (var k = 0; k < orbitalsFront.length; k++) { orbitalsFront[k].display(); orbitalsFront[k].update(); orbitalsFront[k].edges(); } } var speedMin = -10; var speedMax = 12; var colorsBG = ["hsl(208, 56%,46%)", "hsl(208, 56%,44%)", "hsl(208, 56%,42%)", "hsl(208, 56%,40%)", "hsl(208, 56%,38%)", "hsl(208, 56%,36%)", "hsl(208, 56%,34%)", "hsl(208, 56%,32%)", "hsl(208, 56%,30%)", "hsl(208, 56%,26%)", "hsl(208, 56%,24%)", "hsl(208, 56%,46%)", "hsl(208, 56%,45%)", "hsl(208, 56%,43%)", "hsl(208, 56%,41%)", "hsl(208, 56%,39%)", "hsl(208, 56%,37%)", "hsl(208, 56%,35%)", "hsl(208, 56%,33%)", "hsl(208, 56%,31%)", "hsl(208, 56%,27%)", "hsl(208, 56%,25%)"]; var colorsFG = ["hsl(207, 100%,100%)", "hsl(207, 100%,90%)", "hsl(207, 100%,85%)", "hsl(207, 100%,80%)", "hsl(207, 100%,75%)", "hsl(207, 100%,76%)", "hsl(207, 100%,74%)", "hsl(207, 100%,72%)", "hsl(207, 100%,70%)", "hsl(207, 100%,68%)", "hsl(207, 100%,66%)", "hsl(207, 100%,64%)", "hsl(207, 100%,62%)", "hsl(207, 100%,60%)", "hsl(207, 100%,58%)", "hsl(207, 100%,57%)", "hsl(207, 100%,56%)"]; function OrbitalBG() { var radius = round(random(120, 220)); var filler = colorsBG[int(random(0, colorsBG.length))] this.pos = createVector( random(0 + 120, width - 120), random(0 + 120, height - 120) ); this.vel = createVector(random(speedMin, speedMax) / (radius / 1.75), random(speedMin, speedMax) / (radius / 1.75)); var orbitPoint = createVector(random(0, width), random(0, height)); this.update = function() { this.acc = p5.Vector.sub(orbitPoint, this.pos); this.acc.setMag((this.radius)); this.vel.add(this.acc); this.pos.add(this.vel); }; this.display = function() { fill(filler); noStroke(); ellipse(this.pos.x, this.pos.y, radius, radius); }; this.edges = function() { if(((radius / 2) + this.pos.x) > width) { this.vel.x *= -1; } if(((radius / 2 * -1) + this.pos.x) < 0) { this.vel.x *= -1; } if(((radius / 2) + this.pos.y) > height) { this.vel.y *= -1; } if(((radius / 2 * -1) + this.pos.y) < 0) { this.vel.y *= -1; } }; } function OrbitalFG() { var radius = round(random(4, 100)); var filler = colorsFG[int(random(0, colorsFG.length))] this.pos = createVector( random(0 + 98, width - 98), random(0 + 98, height - 98) ); this.vel = createVector(random(speedMin, speedMax) / (radius / 2), random(speedMin, speedMax) / (radius / 2)); var orbitPoint = createVector(random(0, width), random(0, height)); this.update = function() { this.acc = p5.Vector.sub(orbitPoint, this.pos); this.acc.setMag((this.radius)); this.vel.add(this.acc); this.pos.add(this.vel); }; this.display = function() { fill(filler); noStroke(); ellipse(this.pos.x, this.pos.y, radius, radius); }; this.edges = function() { if(((radius / 2) + this.pos.x) > width) { this.vel.x *= -1; } if(((radius / 2 * -1) + this.pos.x) < 0) { this.vel.x *= -1; } if(((radius / 2) + this.pos.y) > height) { this.vel.y *= -1; } if(((radius / 2 * -1) + this.pos.y) < 0) { this.vel.y *= -1; } }; } |
Где:
h
- Высота блока
w
- Ширина блока.
orbitalsAmountBG
- Количество больших кругов.
orbitalsAmountFG
- Количество малых кругов.
speedMin
и speedMax
- Минимальная и максимальная скорость движения.
colorsBG
- Цвета больших кругов.
colorsFG
- Цвета малых кругов.
Цвета можно выставить определенные, например в RGB, но удобнее это сделать в HSL
Для это заменяем первые значения цвета 208, 56% (темно синий) и 207, 100% (голубой) на нужные нам (красные, зеленые и т.д.).
Найдено на codepen.io у пользователя Glynn Smith
Добавить комментарий: