Как работает выцветание? В том же Powerpoint постепенный переход из одного изображения в другое. Именно алгоритм нужен
2 ответа
Выцветание лучше всего рассматривать в цветовой модели HSV.
Параметр S — saturation — это насыщенность цвета. Чем он выше, тем цвет сильнее, а чем ниже, тем цвет ближе к серому, выцветшему.
Поэтому выцветание можно сделать через перевод цвета из RGB в HSV, небольшое снижение значения S и обратный перевод в RGB. Если выцветание надо делать постепенно, то на каждом шаге надо не вычитать константу, например, 5 или 10, а умножать на константу, например, 0.9 или 0.8.
Алгоритмы перевода из RGB в HSV и обратно, описаны даже в википедии.
-
Так мне же не в серый надо все, а каждый пиксель получается в свой новый цвет. 16 дек 2019 в 7:51
-
@БиарГоррилс, ну вот если рубашка выцветает, она будет как раз серого цвета. Считай каждый пиксель отдельно, конечно. 16 дек 2019 в 7:59
-
-
@MBo. Может быть, и лучше так, я не знаю. В HSV есть чистый цвет, который разбавляется белым и чёрным. Если изначальный цвет чистый, например, чистый красный, но если разбавлять белым, он в конце концов станет белым. Но если это тёмно красный, с примесью чёрного, то он станет серым. Как я себе это представляю, выцветание это как раз убавление цвета в пользу белого. Ну а поскольку большинство цветов не чистые, то не белого, а как раз оттенка серого. 16 дек 2019 в 9:37
-
@Mark Shevchenko Я к тому, что просто "серый цвет" может восприниматься при чтении как один конкретный цвет (что, видимо к первому комментарию и относится), а не свой для каждого пиксела.– MBo16 дек 2019 в 9:42
Вот так выглядит линейная интерполяция каждого компонента RGB:
let c = canvas.getContext('2d'),
w = canvas.width,
h = canvas.height,
prev,
result = c.createImageData(w, h);
function lerp (a, b, t) {
return a +(b-a)*t
}
function upd() {
var t = slider.value / 100;
if (t === prev || !img1.imgData || !img2.imgData) return
for (var i = 0; i < result.data.length; i++)
result.data[i] = lerp(img1.imgData.data[i], img2.imgData.data[i], t)
c.putImageData(result, 0, 0)
prev = t;
}
function init(el) {
c.drawImage(el, 0, 0);
el.imgData = c.getImageData(0, 0, w, h);
upd()
}
img {display: none}
<img id=img1 src="https://picsum.photos/id/12/150/150"
onload=init(this) crossorigin=anonymous />
<img id=img2 src="https://picsum.photos/id/13/150/150"
onload=init(this) crossorigin=anonymous />
<input id=slider type="range" onmousemove=upd() /><br>
<canvas id="canvas" width=150 height=150 />
-
Картинки наверное лучше на SO загружать, а в остальном как обычно - плюсище :)– tym3216716 дек 2019 в 10:15
-
-
if
? посмотрите на формулы - это же одна и та же формула. Только - не выполняйте целочисленное деление, может получиться ерунда...