Спирограф на JavaScript Canvas

circles

Красивый спирограф на JavaScript Canvas, идею которого я подсмотрел у Carlos Cabo является примером бесконечного «живого» рисунка и, несмотря на кажущуюся сложность, достаточно прост.

Общий принцип
Имеется три окружности — 1, 2 и 3 — по убыванию радиуса. Центрами окружностей 2 и 3 являются новые точки окружностей 1 и 2 соответственно, т. е. центры постоянно смещаются. Каждая окружность отрисовывается с определенной скоростью: чем меньше окружность — тем больше скорость. Каждая точка окружностей 2 и 3 связана линией с центром.

Вспомогательные функции
Для выполнения некоторых действий стоит реализовать отдельные функции.

dot — отрисовка круга заданного радиуса в заданной позиции.

function dot(x1, y1, r) {
ctx.fillStyle = 'rgba(192, 192, 192, 1)';
ctx.beginPath();
ctx.arc(x1, y1, r, 0, Math.PI * 2, true);
ctx.fill();
}

fi данном случае — текущий угол окружности 1, по которому выбирается цвет для линий.

clear — очистка канвы и заливка ее фоновым цветом.

function clear() {
ctx.clearRect(0, 0, canva.width, canva.height);
ctx.fillStyle = 'rgb(33, 33, 33)';
ctx.fillRect(0, 0, canva.width, canva.height);
}

ra2de — перевод из радиан в градусы.
de2ra — перевод из градусов в радианы.

function ra2de(ra) {
var de = Math.floor(180 / Math.PI * ra);
return de;
}

function de2ra(de) {
var ra = Math.PI / 180 * de;
return ra;
}

Окружности
Отрисовка окружности происходит следующим образом: случайно выбирается начальное значение угла fi и по нему высчитывается координата первой точки окружности; угол каждый раз увеличивается на fiAngle, после чего определяются координаты следующей точки.

function Circle(x, y, r, pr, angleInc) {
this.x = x; // абсцисса центра
this.y = y; // ордината центра
this.r = r; // радиус
this.pr = pr; // радиус точек окружности
this.fi = Math.random() * 2 * Math.PI;
this.angleInc = de2ra(angleInc); // приращение угла

this.render = function() {
this.px = Math.sin(this.fi) * this.r + this.x; // абсцисса точки окружности
this.py = Math.cos(this.fi) * this.r + this.y; // ордината точки окружности

dot(this.px, this.py, this.pr);

this.fi += this.angleInc;

if (this.fi >= Math.PI * 2) // сброс значения величины угла
this.fi -= (Math.PI * 2);
}
}

Используется это так:

Создается объект с заданными параметрами:

var c = new Circle(center_x, center_y, radius, dor_radius, angle_increment);

Вызывается рисуется следующая точка окружности:

c.render();

Создание «живой» композиции
Как сказано выше, нам понадобятся три окружности разных радиусов:

var circleBig = new Circle(canva.width / 2, canva.height / 2, canva.height / 4, 1, 0.05);
var circleMed = new Circle(canva.width / 2, canva.height / 2, canva.height / 6, 1, 0.4);
var circleSmall = new Circle(canva.width / 2, canva.height / 2, canva.height / 8, 1, 2);

Сам процесс рисования:

function draw() {
circleBig.render();
// подмена координат центра 2 окружности координатами новой точки окружности 1
circleMed.x = circleBig.px;
circleMed.y = circleBig.py;
circleMed.render();
// подмена координат центра 3 окружности координатами новой точки окружности 2
circleSmall.x = circleMed.px;
circleSmall.y = circleMed.py;
circleSmall.render();
// линии от центра окружностей 2 и 3 к их новым точкам
line(circleBig.px, circleBig.py, circleMed.px, circleMed.py, circleBig.fi);
line(circleMed.px, circleMed.py, circleSmall.px, circleSmall.py, circleBig.fi);
}

Запуск:
clear(); setInterval(draw, 10);

Возможны различные вариации этого спирографа. Можно поиграть с цветами, размерами и количеством окружностей, со скоростями и FPS (что может быть актуально для браузера FireFox).

Читайте так же:
Оставить комментарий

Последние публикации