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

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

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

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

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

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

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

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

Похожие вопросы