En nuestroArtículo anteriorTutorial, enseñamos a nuestra aplicación a trabajar con referencias y paletas. Ahora es el momento de agregar más opciones para el ajuste del color y los efectos visuales.
Además, exploraremos un nuevo modelo de color, HSV, que funciona con colores de manera diferente a RGB y LAB. Este modelo hace que sea más fácil manipular características como el tono, la saturación y la luz, lo que lo hace especialmente útil para ajustar los colores en imágenes.Esta innovación abrirá nuevas posibilidades creativas y oportunidades para la experimentación.
El código completo del proyecto está disponible enEste enlace. el
Este enlaceAdjusting the Number of Colors in the Extracted Palette
Ya hemos visto cómo limitar una paleta puede alterar la apariencia de una imagen.
Para ajustes de filtro y procesamiento de imagen más flexibles, agregaremos la posibilidad de controlar el número de colores extraídos de la imagen. Ahora, puede ajustar con precisión cuántos colores se destacan en la imagen, permitiendo un mejor control sobre los efectos visuales.Esta característica es especialmente útil cuando se trabaja con paletas para crear filtros, ya que cambiar el número de colores se aplica a una amplia gama de tareas de diseño.
La aplicación ahora cuenta con un deslizador que le permite elegir el número de colores extraídos de la imagen (de 10 a 20).
<div style={{ marginBottom: 12 }}>
<label>Number of Colors</label>
<input
type="range"
min="10"
max="20"
value={colorCount}
onChange={(e) => setColorCount(Number(e.target.value))}
style={{ width: "100%" }}
/>
</div>
Vamos a experimentar con la impresionante fotografía de So Sasaki paraVuelve TokioDispone de una amplia gama de colores y tonos, por lo que es el tema perfecto para nuestra exploración.
A continuación puedes comparar cómo se ve la imagen con una paleta de diferentes tamaños.
Filter Intensity Slider
Para hacer el proceso de filtración más flexible, agregaremos un deslizador para controlar la intensidad de la aplicación de la paleta a la imagen.
Simplemente seleccione la intensidad de filtro deseada y haga clic en “Aplicar filtro”.
<div style={{ marginBottom: 16 }}>
<label style={{ display: "block", marginBottom: 6 }}>Filter Intensity</label>
<input
type="range"
min="0"
max="100"
value={intensity}
onChange={(e) => setIntensity(Number(e.target.value))}
style={{ width: "100%" }}
/>
</div>
How does it work?
Cuando la intensidad se ajuste al 100%, la imagen se transformará completamente utilizando los colores de la paleta seleccionada.Cuanto menor sea el valor de intensidad, menos influencia tendrá la paleta en la imagen, lo que le permitirá mantener más de los colores originales.
HSV Color Model
HSV (Hue, Saturación, Valor) es uno de los modelos de color más populares, a menudo utilizado para representar el color en términos de su tono, saturación y brillo.
- y
- Tono (color): Este representa el color primario (como el rojo, el verde, el azul, etc.), medido en grados de 0 a 360. y
- La saturación está afectada por la cantidad de gris en el color: 100% es un color completamente saturado, y 0% es gris. y
- Valor (brillante): Esto representa lo brillante que es el color. Un valor de 0% da negro, mientras que el 100% es la versión más brillante del color. y
Differences from RGB and LAB: de
- y
- A diferencia de RGB, donde los colores se combinan en función de la intensidad del rojo, verde y azul, HSV se basa en la percepción visual humana. y
- En comparación con LAB, que utiliza un modelo matemático más complejo para la representación precisa de los colores en diferentes condiciones de iluminación, HSV es más intuitivo y fácil de usar. y
Ejemplo de código para convertir RGB a HSV:
function rgbToHsv(r, g, b) {
r /= 255;
g /= 255;
b /= 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const delta = max - min;
let h = 0, s = 0, v = max;
if (delta !== 0) {
s = delta / max;
if (r === max) {
h = (g - b) / delta;
} else if (g === max) {
h = 2 + (b - r) / delta;
} else {
h = 4 + (r - g) / delta;
}
h *= 60;
if (h < 0) h += 360;
}
return [h, s * 100, v * 100];
}
A continuación se muestran ejemplos de imágenes en la misma paleta, pero en modelos de colores diferentes.
Contrast Slider
El contraste se refiere a la diferencia entre los puntos más claros y oscuros de una imagen. Ajustar el contraste le permite aumentar o reducir esta diferencia.Cuanto mayor sea el contraste, más pronunciadas serán las áreas de luz y oscuridad.
How does contrast adjustment work?
Cuando el contraste se incrementa, las áreas oscuras de la imagen se vuelven aún más oscuras, y las áreas de luz se vuelven aún más brillantes.
Ejemplo de código para cambiar el contraste:
const applyContrast = (r, g, b, contrast) => {
const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
r = contrastFactor * (r - 128) + 128;
g = contrastFactor * (g - 128) + 128;
b = contrastFactor * (b - 128) + 128;
return [r, g, b];
};
Algorithm Description: de
El algoritmo de contraste utiliza un factor que depende del valor de contraste actual. Este factor se aplica a cada componente de color (rojo, verde y azul), ajustando su brillo en función del nivel de contraste.
Noise Slider
Para aquellos que quieren divertirse, hemos añadido un deslizador de ruido.Añadir ruido a una imagen ayuda a crear un efecto fotográfico vintage o hace que la imagen se sienta más "viva".Este efecto se utiliza para ocultar imperfecciones o agregar un toque artístico a la imagen.
How does the noise work?
El deslizador de ruido le permite controlar la cantidad de variaciones aleatorias aplicadas al color de cada píxel en la imagen.Cuanto mayor sea el valor de ruido, mayor será la cantidad de cambios aleatorios aplicados a la imagen.
Cuando se añade ruido a una imagen, se introducen pequeñas variaciones aleatorias en los valores RGB de cada píxel, resultando en un efecto de grano. Este efecto puede ser sutil o pronunciado, dependiendo de la cantidad de ruido aplicado. Esto puede ayudar a dar a la imagen un aspecto más texturizado o simular la apariencia de una foto vieja de baja resolución.
const applyNoise = (r, g, b, noise) => {
r += Math.random() * noise - noise / 2;
g += Math.random() * noise - noise / 2;
b += Math.random() * noise - noise / 2;
return [r, g, b];
};
Algorithm Description: de
Se añade un valor aleatorio a cada píxel dentro de un rango especificado. Esto crea el efecto de cambios aleatorios de color, dando a la imagen una apariencia ruidosa o granular. En nuestro caso, simplemente estamos simulando distorsiones, que no tienen ninguna relación con el grano real de la película o el ruido. Sin embargo, los primeros filtros digitales (como los utilizados en teléfonos móviles tempranos como elNoticias de Sony Ericsson W810) Trabajó sobre el mismo principio.
Al controlar la cantidad de ruido, los usuarios pueden experimentar con diferentes niveles de intensidad para lograr diversos efectos creativos o simular imperfecciones en una fotografía.
Y, por supuesto, hemos añadido un botón Reset Settings para borrar todos los filtros y volver a la imagen original.
A lo largo de nuestros artículos, hemos profundizado en los fundamentos de la corrección del color y hemos explorado varias herramientas y técnicas para aplicarlo.Hemos examinado cómo extraer y ajustar las paletas de colores, los efectos del contraste, la saturación y el ruido, y cómo trabajar con diferentes modelos de colores - RGB, LAB y HSV.
La corrección de colores es un aspecto crucial del procesamiento de imágenes, lo que nos permite mejorar la percepción visual, destacar ciertos elementos y lograr la armonía entre los colores.Hemos demostrado cómo ajustar el número de colores en una paleta o modificar los ajustes de contraste puede transformar completamente una imagen, haciéndola más expresiva y dinámica.
Es importante notar que los ajustes de color y contraste no solo afectan a la apariencia de una imagen, sino que también influyen en cómo se percibe.
