Красивые рисунки на JavaScript Canvas с помощью математики

js-math

Я углубленно изучал математику 2 последних года в школе и 2 первых в ВУЗе, но только сейчас понял всю ее прелесть. Я не любил полярные системы координат, но был очарован графиками некоторых функций, изображенными с ее помощью. И только теперь я понял, что с помощью математики, полярных координат и JavaScript Canvas можно создавать замечательные украшения для сайта.

Сейчас я расскажу, как можно нарисовать ту штуку, которая изображена на заглавной картинке.

О создании рисовалки на JS Canvas я уже рассказывал (1, 2). Их тех двух статей можно получить представление о JS Canvas, а также узнать, как рисовать графические примитивы вроде линий и простых фигур. Для рисования графиков функций большего и не понадобится.

Итак, немного теории.

Полярная система координат — двумерная система координат, в которой каждая точка на плоскости определяется двумя числами — полярным углом φ и полярным радиусом r (wiki).

Так как рисовать все же удобнее в декартовой системе координат, то стоит научиться переводить полярные координаты в декартовы. Делается это так:

x = r * cos(φ)
y = r * sin(φ)

Таким образом, мы сначала определяем r(φ), затем переводим все в декартовы координаты и рисуем.

Координаты внутри элемента canvas начинаются с верхнего левого угла. Поэтому, чтобы график был посередине канвы, к x и y нужно прибавить соответственно половину ширины и половину высоты канвы. При этом график будет инвертирован относительно оси абсцисс, так как возрастание координат идет слева направо и сверху вниз.

Рисовать график нужно в цикле по φ от 0 до 360. Шаг φ следует выбирать из компромисса скорости и плавности отрисовки: чем больше шаг, тем скорость выше, но тем более угловатый получается график. Я рекомендую выбрать какое-нибудь значение из отрезка [0.01; 0.1].

Итак, приступим к рисованию. Наш график задается следующим образом:

r = 7 * (4 + sin(5 * φ) + 0.5 * sin(10 * φ) + 1/6 * sin(60 * φ)) * (1 + φ/50)

Числовой множитель (в моем случае 7) влияет на размеры графика.

Теперь сам JavaScript:

var canvas = document.getElementById(«canvas»);
// сделаем канву на весь экран
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var ctx = canvas.getContext(«2d»);
ctx.clearRect(0, 0, canvas.width, canvas.height); // на всякий случай

// передаем координаты центра канвы и коэффициент размера
Weave(Math.floor(window.innerWidth / 2), Math.floor(window.innerHeight / 2), 7);

function Weave(centerX, centerY, size)
{
var x = 0;
var y = 0;
var r, fi = 0;

ctx.beginPath();

while (fi <= 360) { // задаем функцию r = size * (4 + Math.sin(5 * fi) + 0.5 * Math.sin(10 * fi) + 1/6 * Math.sin(60 * fi) ) * (1 + fi/50); // переводим координаты x = Math.floor(r * Math.cos(fi)) + centerX; y = Math.floor(r * Math.sin(fi)) + centerY; if (fi == 0) ctx.moveTo(x, y); ctx.lineTo(x, y); fi += 0.01; } ctx.stroke(); }

Можно попробовать поиграться с числовыми коэффициентами графика.
Еще одна функция с красивыми графиками и игра с коэффициентами описаны здесь. Например, вот:

r = size * (1 + 1 * Math.cos(1.8 * fi))

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

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