Живые рисунки JavaScript Canvas

live-canva-hoops

Красивые рисунки на JS Canvas — это здорово. Но гораздо лучше, когда рисунок «живой», то есть прорисовывается в режиме реального времени.

Оживить рисунок можно с помощью анимации — быстрой смены кадров, в нашем случае — это очистка всей канвы и отрисовка немного измененного изображения. Другой способ — дорисовка изображения без затирания предыдущего рисунка. В этой статье я расскажу как раз о втором способе: о конечных рисунках с помощью детерминированных (математических) функций.

Прочитать остальную часть записи »

Т-фракталы на JavaScript Canvas

t-fractal-1

На днях я прочитал пост пользователя celen и вдохновился красотой T-фракталов. Так как я немного увлекаюсь созданием растровых композиций в JavaScript Canvas, то у меня возникла идея реализовать то же самое, только на стороне клиента силами JS, освобождая сервер от нагрузки.

Прочитать остальную часть записи »

Движущиеся ноды со связями на JavaScript Canvas

Представляю вашему вниманию очередное мое творение, которое достаточно долгое время пролежало «под сукном».

nodes

Это движущиеся круглые объекты со связями, которые могут появляться по мере сближения объектов и исчезать по мере их удаления. Написано все на JavaScript Canvas и на не очень сильных компьютерах может подтормаживать ввиду особенностей реализации.

Прочитать остальную часть записи »

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

circles

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

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

Прочитать остальную часть записи »

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