Задать вопрос
@morgan6
Дизайн интерьера, создание сайтов

Эффект тепловизора javascript?

Привет!
Подскажите пожалуйста, как можно реализовать эффект тепловизора, как на сайте https://aeroidea.ru.
  • Вопрос задан
  • 187 просмотров
Подписаться 1 Сложный 1 комментарий
Пригласить эксперта
Ответы на вопрос 1
@rPman
Рисуешь на канвасе, на каждом onmousemoove прибавляешь к области в текущих координатах и ее окрестностях (размер рисующего круга) к интенсивности, причем чем дальше от центра, тем меньше прибавляешь, возможно для красоты использовать свою маску, небольшое изображение, определяющее твою кисть. Если мышка не двигается какое то время (setTimeout и сбрасывать счетчик на onmousemoove) то с некоторым шагом времени начинаешь вычитать из каждого пиксела интенсивность.

Если под интенсивностью. и ее изменениями подразумевать и менять одновременно все три канала rgb, т.е. 0.0.0 - это 0, а 255,255,255 - 255 то у тебя будет чернобелый аналог того что на сайте.

Если тебе нужна другая карта цветов, тебе где то отдельно нужно определить массивом или функцией, какое значение интенсивности - какой цвет. Т.е. функция сложения текущей области и кисти должна сначала преобразовывать цвета в интенсивность, складывать их и обратно преобразовывать в цвет.

Чтобы туда сюда цвета не запрашивать с канваса, можно хранить интенсивность в отдельном массиве.

p.s. если попиксельно будет медленно, ищи операции с изображениями в целом или даже webgl
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Rocket Смоленск
от 80 000 до 130 000 ₽
div. Ставрополь
от 40 000 до 90 000 ₽
Wanted. Санкт-Петербург
До 220 000 ₽
18 дек. 2024, в 17:26
5000 руб./за проект
18 дек. 2024, в 17:23
1500 руб./за проект
18 дек. 2024, в 16:42
2000 руб./за проект