JavaScript - Algoritmo sepia

 
Vista:
sin imagen de perfil
Val: 62
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Algoritmo sepia

Publicado por pedro (71 intervenciones) el 03/12/2019 08:05:08
Buenos días.
Estoy realizando un algoritmo para cambiar una imagen a sepia en componentes RGB, y he encontrado el siguiente:

1
2
3
R=Math.trunc(0.393*R + 0.769*G + 0.189*B);     if(R>255)R=255;
G=Math.trunc(0.349*R + 0.686*G + 0.168*B);    if(G>255)G=255;
B=Math.trunc(0.272*R + 0.534*G + 0.131*B);     if(B>255)B=255;

El algoritmo funciona perfectamente.

Mi pregunta es si alguien sabe de dónde salen esos valores para multiplicar.

No se si consiste en que los tonos sepia se generan a través de una proporción de los tres colores (no he encontrado dicha proporción).

O si aparecen pasando las componentes a HSV, cambiando el ángulo y volviendo a hacer el cambio (tampoco se si el sepia corresponde a un ángulo concreto).

Gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Algoritmo sepia

Publicado por ScriptShow (692 intervenciones) el 05/12/2019 10:04:41
Saludos Pedro,

puedes revisar documentación genérica al respecto para entender el concepto...

https://www.w3.org/TR/filter-effects/#sepiaEquivalent

https://www.it-swarm.net/es/css/como-transformar-el-negro-en-un-color-dado-usando-solo-filtros-css/831278205/

http://camanjs.com/examples/

El último ejemplo, pulsando en el botón Nostalgia verás resultados parecidos en la imagen.

Hay mucho de combinaciones matemáticas en el mundo de la programación... Experimenta variando cifras y/o porcentajes hasta conseguir tu propósito. No creo que se trate de una regla fija.

También en CSS es posible aplicando una Class a las imágenes. Veamos el ejemplo:

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
img.sepia {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-ms-filter: sepia(100%);
-o-filter: sepia(100%);
filter: sepia(100%);
}
</style>
 
<img src="imagen" border="0" class="sepia">

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 62
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Algoritmo sepia

Publicado por Pedro (71 intervenciones) el 05/12/2019 18:56:22
Muchísimas gracias por contestar.

He estado viendo como funciona el algoritmo y comento lo que he entendido. (No se si será el sitio adecuado para hacerlo, ya que no se si estos temas interesan aquí o es una web más de código, pero a mí es un tema que me gusta y si a alguien le interesa, o puede completar mi información genial).

He transformado puntos RGB con el algoritmo sepia y los he pasado a HSV con un conversor online. En todos ellos el ángulo es 38º o muy cercano (supongo que cambia un poco por el error al utilizar los decimales)

Siguiendo el algoritmo de transformación de RGB a HSV hacia atrás, ( se divide entre 6 para obtener un número entre 0 y 1 y se multiplica por 360 para obtener un ángulo entre 0 y 360) tendríamos que dividir por 60 para ver a qué número entre 0 y 1 corresponde el ángulo 38º. Dicho número es 0,63333 .

Otra cosa interesante es que las proporciones del algoritmo sepia entre los coeficientes utilizados para R, G y B se mantienen, siendo el cociente entre (G-B) / (R-B) siempre igual y precisamente 0,636363. Es decir, prácticamente el ángulo 38º considerándolo entre 0 y 1.

Y esa división es precisamente el valor que da el algoritmo que transforma RGB en HSV al ángulo cuando el mayor valor es el de R.

Así pues, los valores están puestos de forma que R va a ser siempre el mayor valor de los tres (ya que tiene el mayor coeficiente para multiplicar tanto a R como a G como a B), y la proporción de los coeficientes para multiplicar a R , G y B es siempre la misma. Es dos tercios a 1. (0,63333)

Hasta este punto, podríamos elegir diversos valores para esos coeficientes.

Otro dato interesante es que están elegidos de forma que la importancia del verde es 4 a 2 a 1 las del rojo y el azul en cada componente. Si no me equivoco (igual alguien me puede corregir), se debe a que ese es el orden de importancia de los tres colores en nuestra visión. (por ejemplo, en los sensores CMOS, hay 2 celdas verdes por cada celda roja o azul).

El resto, supongo que serán pruebas de valores hasta encontrar una combinación que cumpla esas normas y de el efecto sepia que más le guste a la persona que lo diseñó.

Yo he probado con otros valores que cumplen esas normas y me ha dado otros sepias.

Por ejemplo:

1
2
3
pixels[l]=Math.trunc(0.4*R + 0.8*G + 0.2*B); if(pixels[l]>255)pixels[l]=255;
pixels[l+1]=Math.trunc(0.35*R + 0.7*G + 0.175*B);if(pixels[l+1]>255)pixels[l+1]=255;
pixels[l+2]=Math.trunc(0.25*R + 0.5*G + 0.125*B); if(pixels[l+2]>255)pixels[l+2]=255;

Números con menos decimales. Cada coeficiente verde doble que el rojo y este doble que el azul.
La proporción de las componentes es dos tercios a uno. Es decir, si de 0.4 a 0.35 hay 0.05, entonces debe haber el doble de distancia al siguiente coeficiente de rojo. Es decir, 0.25.

Obtengo una imagen con un tono parecido. El ángulo es el mismo, pero hay menos diferencias entre los colores. Luego, aunque no lo he comprobado, debe ser menos saturado.

De esta forma, cambiando los coeficientes y manteniendo la proporción, podemos hacer que la foto tome distintos tonos. Si conocemos el ángulo del tono que queremos, también podemos establecer la relación entre las componentes para obtener dicho efecto.

Espero que le sirva a alguien. Un saludo.

Gracias de nuevo. Me vienen muy bien los enlaces.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar