Калейдоскоп на треугольниках и двух картинках

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

Всего требуется две картинки, я взял простейший образец и повернул его, чтобы получить второе изображение (left.png, right.png). При более "продвинутых" фонах можно добиться более красочных эффектов.

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

Исходник скрипта можно увидеть, если щёлкнуть правой кнопкой мыши на свободном месте страницы и выбрать пункт меню "Исходный код страницы", "Просмотреть исходный код" и т.п. (название пункта зависит от браузера).

В коде есть настройки mainSize - размер канвы и patternDimension - размер стороны паттерна, они не обязаны соответствовать или быть пропорциональными размером рисунков. Конечно, если все размеры не подогнаны, картинка иногда будет "встряхиваться", как положено калейдоскопу.

Из-за известного ограничения безопасности, в частности, генерации исключения "Uncaught DOMException: The operation is insecure" при вызове метода getImageData(), это может не выполняться "кликом в браузере", то есть, по протоколу file://, а должно вызываться на удалённом или локальном сервере.

 Посмотреть скрипт Kaleidoscope в работе, новое окно/вкладка

Калейдоскоп с другой парой картинок, фрагмент скрина, качество снижено

02.04.2022, 16:42 [679 просмотров]