Броуновское движение на JS

Пример:

HTML:

<div id="circles"></div>

1	<div id="circles"></div>

JS:

Подключаем библиотеку p5.min.js версии 0.5.10 и скрипт самой графики.

Важно! Скрипт стабильно работает на версии 0.5.10

Например, на версии 0.9.0 - круги перемещаются с бешеной скоростью, что приводит к зависанию браузера. На других версиях не проверял.

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;
		}
	};
}

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

Пример:

HTML:

JS:

Смотрите также:

Добавить комментарий: