БлогNot. Праздничный салют на каждый день :)

Праздничный салют на каждый день :)

Пару лет назад я писал фейерверк на Javascript вручную, по-моему, ничего так вышло.

Сегодня подобную задачу удобнее решать с помощью фреймворка p5.js, имеющего удобные средства управления объектами и их визуализации.

Я хотел, чтобы мой фейерверк содержал ещё какую-нибудь поздравительную надпись, но без крайностей - и не скучно-статичную, и не прыгающую по экрану, как сумасшедшая.

Остановился на надписи "С 23 февраля!" которая скромно и разреженно мерцает в левом верхнем углу экрана. Но потом подумал - а почему только 23 февраля, не будут ли обижены чувства верующих трансегендеров? :) Пусть лучше дата будет календарной, и те, кто отмечает, к примеру, 7 марта, видят "С 7 марта!".

Скрипт использует только внешний файл p5.min.js, который подключается из другой папки моего сайта.

Канва растягивается на весь экран, если в некоторых браузерах при этом всё же появляются полосы прокрутки - ну, извините, это библиотечный метод :) Я спрятал стилевым указанием overflow:hidden; основную полосу прокрутки браузера, в современных браузерах должно работать.

При изменении размеров окна браузера канва подстраивается под новые размеры.

Вы легко можете увидеть исходник страницы, нажав правой кнопкой мыши на ссылке p5Fireworks.html и сохранив файл на свой компьютер командой "Сохранить объект как..." или "Сохранить ссылку как..." (название команды зависит от браузера, файл будет переименован движком блога). Кодировка исходника - Юникод (UTF-8).

Часть параметров в исходнике закомментирована, делать кучу настроек в отдельных переменных, как обычно, поленился.

В любом браузере можно нажать клавишу F11, чтобы перейти в полноэкранный режим отображения.

 p5Fireworks.html - открыть скрипт в текущем окне (вкладке) или скачать (с помощью меню правой кнопки мыши) (5 Кб)

Скриншот скрипта Today`s Fireworks (с потерей качества)
Скриншот скрипта Today`s Fireworks (с потерей качества)

23.02.2018, 15:48 [4152 просмотра]


теги: javascript графика random дата

показать комментарии (1)