3

Как работает выцветание? В том же Powerpoint постепенный переход из одного изображения в другое. Именно алгоритм нужен

6
  • 1
    Простейший - линейный. Была точка (r1,g1,b1), стала (r2,g2,b2) - вот и меняем со временем как r(t) = r1*(1-t)+r2*t (соответственно, и другие цвета).
    – Harry
    16 дек 2019 в 7:39
  • Так ну я понял, как оно должно работать. Но что-то формула какая-то непонятная) Какие значение тут t принимает? Допустим r1=100, r2=150, t=1. И сразу получаем 150, а если t=2 то вообще 250 какие-то. 16 дек 2019 в 7:59
  • t принимает значение от 0 до 1
    – Harry
    16 дек 2019 в 8:00
  • А если я тут вот так расписал For i=1 to t*24 do if (R1<R2) then R[i] = R1+i*(R2-R1)/t; if (R1>=R2) then R[i] = R1-i*(R1-R2)/t; t это количество секунд перехода, 24 это кол-во кадров в секунде. Оно же тоже самое выходит? 16 дек 2019 в 8:02
  • А зачем if? посмотрите на формулы - это же одна и та же формула. Только - не выполняйте целочисленное деление, может получиться ерунда...
    – Harry
    16 дек 2019 в 8:21

2 ответа 2

3

Выцветание лучше всего рассматривать в цветовой модели HSV.

Параметр S — saturation — это насыщенность цвета. Чем он выше, тем цвет сильнее, а чем ниже, тем цвет ближе к серому, выцветшему.

Поэтому выцветание можно сделать через перевод цвета из RGB в HSV, небольшое снижение значения S и обратный перевод в RGB. Если выцветание надо делать постепенно, то на каждом шаге надо не вычитать константу, например, 5 или 10, а умножать на константу, например, 0.9 или 0.8.

Алгоритмы перевода из RGB в HSV и обратно, описаны даже в википедии.

5
  • Так мне же не в серый надо все, а каждый пиксель получается в свой новый цвет. 16 дек 2019 в 7:51
  • @БиарГоррилс, ну вот если рубашка выцветает, она будет как раз серого цвета. Считай каждый пиксель отдельно, конечно. 16 дек 2019 в 7:59
  • @Mark Shevchenko Может быть, лучше использовать "оттенок серого"?
    – MBo
    16 дек 2019 в 8:25
  • @MBo. Может быть, и лучше так, я не знаю. В HSV есть чистый цвет, который разбавляется белым и чёрным. Если изначальный цвет чистый, например, чистый красный, но если разбавлять белым, он в конце концов станет белым. Но если это тёмно красный, с примесью чёрного, то он станет серым. Как я себе это представляю, выцветание это как раз убавление цвета в пользу белого. Ну а поскольку большинство цветов не чистые, то не белого, а как раз оттенка серого. 16 дек 2019 в 9:37
  • @Mark Shevchenko Я к тому, что просто "серый цвет" может восприниматься при чтении как один конкретный цвет (что, видимо к первому комментарию и относится), а не свой для каждого пиксела.
    – MBo
    16 дек 2019 в 9:42
1

Вот так выглядит линейная интерполяция каждого компонента 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 />

3
  • Картинки наверное лучше на SO загружать, а в остальном как обычно - плюсище :)
    – tym32167
    16 дек 2019 в 10:15
  • @tym32167 so, насколько я помню, не выставляет cors: * 16 дек 2019 в 10:27
  • ага, точно, не выставляет
    – tym32167
    16 дек 2019 в 11:43

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.