Калейдоскоп на треугольниках и двух картинках
Небольшое JS-приложение создаёт визуальный эффект калейдоскопа, заполняя канву картинками, расположенными с поворотом на треугольных тайлах.
Всего требуется две картинки, я взял простейший образец и повернул его, чтобы получить второе изображение (left.png, right.png). При более "продвинутых" фонах можно добиться более красочных эффектов.
В коде для простоты мы не создаём повёрнутую копию рисунка программно, а просто добавляем отдельное изображение, к тому же, для некоторых калейдоскопов более подходящими могут оказаться две несимметричные картинки.
Исходник скрипта можно увидеть, если щёлкнуть правой кнопкой мыши на свободном месте страницы и выбрать пункт меню "Исходный код страницы", "Просмотреть исходный код" и т.п. (название пункта зависит от браузера).
В коде есть настройки mainSize
- размер канвы и patternDimension
- размер стороны паттерна, они не обязаны соответствовать или быть пропорциональными размером рисунков. Конечно, если все размеры не подогнаны, картинка иногда будет "встряхиваться", как положено калейдоскопу.
Из-за известного ограничения безопасности, в частности, генерации исключения "Uncaught DOMException: The operation is insecure" при вызове метода getImageData()
, это может не выполняться "кликом в браузере", то есть, по протоколу file://
, а должно вызываться на удалённом или локальном сервере.
Посмотреть скрипт Kaleidoscope в работе, новое окно/вкладка

Калейдоскоп с другой парой картинок, фрагмент скрина, качество снижено
02.04.2022, 16:42 [759 просмотров]