Interesante guía de programación de procesamiento para el diseñador: control del color: 10 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:40

En capítulos anteriores, hemos hablado más sobre cómo usar el código para dar forma en lugar de puntos de conocimiento sobre el color. En este capítulo, vamos a explorar más profundamente este aspecto del conocimiento.

Paso 1: Conocimientos básicos sobre el color

El color, en cierto aspecto, ha superado la intuición humana. Varios hermosos colores que vemos a simple vista están compuestos por los mismos componentes. Solo con los tres colores claros de rojo, verde y azul, podemos crear todos los colores que pueden ser vistos por el ojo humano a través de la mezcla.

Las pantallas móviles y las pantallas de computadora que ve actualmente se crean sobre la base de este principio. El rojo, el verde y el azul se denominan los tres colores originales de la luz. A través de la proporción de los tres elementos, podemos asegurar un color determinado. Este método de descripción también se denomina modo RGB. Entre ellos, el rojo es R, el verde es G y el azul es B.

Excepto por el modo RGB, hay otro modo llamado modo CMYK. Suele combinarse con la impresión. En la impresión, también hay tres colores originales. Sin embargo, es diferente a los tres colores de luz originales. Son rojos, amarillos y azules por separado. Entre ellos, C es para cian, M es para magenta e Y es para amarillo. Teóricamente, solo con CMY, podemos mezclar la mayoría de los colores. Pero debido a la técnica de producción de la materia prima, difícilmente podemos lograr que la saturación de CMY alcance el 100%. Si mezclamos estos tres colores, no podemos obtener un color negro que sea lo suficientemente oscuro. Por lo tanto, hay una K adicional, que es para la tinta de impresión negra, como complemento de la impresión.

En cuanto a RGB y CMYK, solo tiene que saber que hay una diferencia más obvia en la naturaleza. RGB es el modo de color más, que aumenta el brillo al mezclar más colores. Mientras que CMYK es el modo de menos color, lo que aumenta la oscuridad al mezclar más colores. En la siguiente imagen, podemos ver visualmente las similitudes y diferencias de los dos modos. En la imagen de la izquierda, podemos imaginar que es una casa oscura con tres colores diferentes de linternas encendidas. En la imagen de la derecha, podemos considerarla como un papel de acuarela tras superponerse con tres pigmentos de rojo, verde y azul.

Si desea conocer más profundamente sus relaciones relativas entre los diferentes modos de color, puede abrir su Photoshop y elegir el selector de color. Luego, puede ver los valores de color de un mismo color en diferentes modos de color de forma intuitiva.

En el último, nos gustaría presentarle otro modo de color común, HSB. HSB no tiene el concepto de "color original". Se clasifica de acuerdo con los sentimientos de los ojos humanos por los colores. H significa tono, S para saturación y B es para brillo.

El tono representa la tendencia del color. Cada color tiene un cierto tipo de tendencia de color solo si no es negro, blanco o gris. El área de transición de color más rica del selector de color se utiliza para indicar el tono. Su valor en PS varía de 0 a 360.

La saturación significa la pureza del color. Una mayor pureza aporta colores más vivos. Su valor en PS varía de 0 a 100.

Brillo significa el grado de luminosidad del color, que va de 0 a 100.

En comparación con el modo RGB, las tres dimensiones de HSB son mucho más acordes con la sensación de los ojos humanos por los colores. Solo mire los valores HSB, generalmente puede imaginar qué tipo de color es.

En cuanto al mismo color, el valor de color en modo RGB es (255, 153, 71), mientras que en HSB es (27, 72, 100).

Es difícil juzgar cómo se verá después de mezclar los tres colores originales si solo miramos RGB. Pero HSB es diferente. Solo tienes que familiarizarte con los matices de colores como el rojo es 0, el naranja es 30 y el amarillo es 60, entonces sabrás que será un color naranja comparativamente saturado con alto brillo y un poco cercano al rojo cuando H es 27.

A continuación, corresponderemos las tres dimensiones de los dos modos en x, y, x en el espacio y dibujaremos un color cúbico para hacer la comparación.

RGB y HSB son solo métodos diferentes para describir colores. Podemos tomar la dirección como una metáfora. Suponga que si quiere decirle a otras personas la posición del palacio imperial, puede decir que está en el número 4 de Jingshan Front Street, área de Dongcheng, Beijing. O puede decir que está a 15 segundos, 55 minutos, 39 grados en la latitud norte y 26 segundos, 23 minutos, 116 grados en la longitud este. El método de descripción de HSB es similar al anterior. Si está familiarizado con el área relativa, generalmente puede conocer la posición de la dirección. Si bien RGB puede ser más preciso, es muy abstracto.

El modo HSB existía con el objetivo de ayudarnos a describir el color de manera más conveniente. Para mostrar un cierto tipo de color en la pantalla, finalmente tenemos que convertirlo primero en modo RGB.

En lo anterior, presentamos tres modos de color: RGB, HSB, CMYK. En el programa, solo debes enfocarte en dos modos: RGB y HSB. Tienen sus propias ventajas y sus propias aplicaciones al mismo tiempo. Si está familiarizado con él, satisfará la mayoría de sus requisitos de diseño.

Paso 2: Tipo de datos para almacenar colores

Para mostrar colores en el programa, usamos principalmente el modo RGB antes. Sin embargo, solo controlando las tres propiedades, ¿podemos mostrar colores? En la computadora, es así.

Nos hemos referido antes a que en Procesamiento, excepto para R, G, B, podemos designar un alfa (transparencia) para los colores. Pero el alfa no pertenece al componente del color. Su existencia es de conveniente mezcla con colores detrás. Por lo tanto, para que las computadoras describan un cierto tipo de color con precisión, tenemos que controlar las tres variables clave solamente.

A continuación, comenzamos a introducir una especie de tipo de datos Color, que se utiliza principalmente para almacenar colores. Es similar a los tipos de datos mencionados anteriormente como boolena, int, float.

Aquí, permítanme seguir explicando primero el uso real del color. Imagínese esto: suponga que si solo podemos usar los métodos previamente dominados para almacenar ciertos datos, ¿qué haremos?

Ejemplo de código (9-1):

[cceN_cpp theme = "amanecer"] int r, g, b;

configuración vacía () {

tamaño (400, 400);

r = 255;

g = 0;

b = 0;

}

vacío dibujar () {

fondo (0);

rectMode (CENTRO);

llenar (r, g, b);

rect (ancho / 2, alto / 2, 100, 100);

}

[/cceN_cpp]

En cuanto a los colores que tienen tendencia de color, necesitamos crear tres variables para almacenar datos en tres canales de color de rojo, verde y azul respectivamente. Más tarde, si queremos invocar este conjunto de datos de color, tenemos que escribirlo en relleno o trazo.

Pero encontrará que es demasiado problemático hacerlo porque los datos están interconectados. Si tiene idea de empaquetarlos en uso, será más conveniente. Por tanto, se crea color.

Ejemplo de código (9-2):

[cceN_cpp theme = "dawn"] color myColor;

configuración vacía () {

tamaño (400, 400);

myColor = color (255, 0, 0);

}

vacío dibujar () {

fondo (0);

rectMode (CENTRO);

llenar (myColor);

rect (ancho / 2, alto / 2, 100, 100);

} [/cceN_cpp]

Lo mismo ocurre con los tipos de datos como int, tenemos que usar "color myColor" al principio para crear variables.

En la configuración, usamos "myColor = color (255, 0, 0)" para asignar valor a la variable myColor. Mientras que la función color (a, b, c) representa correctamente que este conjunto de datos ha formado un tipo de color para importar la variable myColor. Si escribe “myColor = (255, 0, 0)”, el programa saldrá mal.

En el último, usamos fill () para realizar la operación de relleno de color. La función fill () y stroke () están habilitadas para superponerse. Según la cantidad y tipo de parámetros, tendrá diferentes efectos. Importando solo una variable entera, que representa que es un color con escala de grises solamente. Al importar un color variable, significa que la gama de colores será mayor. También puede importar una variable de color y una variable de número entero, cambiar la función fill () en lo anterior a fill (myColor, 150), luego puede controlar alfa con el segundo parámetro.

Paso 3: Método de relleno superpuesto

trazo, el fondo tiene el mismo método de superposición con el relleno.

Leer el valor del color del canal

Además de las asignaciones, también puede obtener de forma independiente el valor RGB en la variable de color

Ejemplo de código (9-3):

[cceN_cpp theme = "amanecer"] color myColor;

configuración vacía () {

myColor = color (255, 125, 0);

println (rojo (miColor));

println (verde (miColor));

println (azul (miColor));

}

[/cceN_cpp]

Resultado en la consola: 255, 125, 0.

La función red (), green (), blue () volverá relativamente al valor del canal rojo, verde y azul en myColor.

Asignación hexadecimal

Excepto por el uso de números decimales para mostrar RGB, también podemos usar hexadecimal. Decimal significa aumentar 1 cuando cumple con 10. Mientras que hexadecimal significa aumentar 1 cuando cumple con 16. Su relación relativa con decimal es: "0 a 9" corresponde a "0 a 9”,“A a F”corresponden a“10 a 15”.

La imagen a continuación es la ilustración del método de conversión.

Por supuesto, si obtenemos un conjunto de valores hexadecimales como ff7800, no tenemos que convertirlo manualmente. El programa asignará valores a las variables de color directamente. Es muy conveniente.

Podemos ver que muchas tarjetas de colores en línea adoptan el método hexadecimal para mostrar el color.

Al igual que el regate de la comunidad de diseño, las obras de arte se adjuntarán paletas de colores. Si ve un colorante favorito, puede aplicarlo al programa.

Ejemplo de código (9-4):

[cceN_cpp theme = "dawn"] color backColor, colorA, colorB, colorC;

configuración vacía () {

tamaño (400, 400);

rectMode (CENTRO);

noStroke ();

backColor = # 395b71;

colorA = # c4d7fb;

colorB = # f4a7b4;

colorC = # f9e5f0;

}

vacío dibujar () {

background (color de fondo);

relleno (colorA);

rect (200, 200, 90, 300);

relleno (colorB);

rect (100, 200, 90, 300);

relleno (colorC);

rect (300, 200, 90, 300);

} [/cceN_cpp]

Ahora, el color es mucho más cómodo y tiene un mejor efecto que ingresar valores al azar.

Agregue “#” antes del valor de color hexadecimal, luego puede asignar un valor a la variable de color directamente.

Paso 4: modo HSB

Además del modo RGB, a continuación vamos a hablar sobre el modo HSB. A continuación se muestra el método de asignación de valor del modo HSB.

Ejemplo de código (9-5):

[cceN_cpp theme = "dawn"] configuración vacía () {

tamaño (400, 400);

colorMode (HSB);

}

vacío dibujar () {

fondo (0);

rectMode (CENTRO);

para (int i = 0; i <20; i ++) {

color col = color (i / 20.0 * 255, 255, 255);

llenar (col);

rect (i * 20 + 10, altura / 2, 10, 300);

}

} [/cceN_cpp]

En Processing, para cambiar el modo HSB, solo tenemos que agregar una oración de colorMode (HSB). El uso de la función colorMode () es cambiar el modo de color. Si escribimos "HSB" en el corchete, entonces se establecerá en modo HSB; mientras escribimos “RGB”, se cambiará al modo RGB.

Lo que vale la pena prestar atención es que cuando escribimos colorMode (HSB), el valor máximo predeterminado de HSB es 255. Esto es bastante diferente al valor máximo en Photoshop. En Photoshop, el valor máximo de H es 360, el valor máximo de S y B son 100. Por lo tanto, necesitamos hacer una conversión.

Si el valor HSB en Photoshop es (55, 100, 100), cuando se convierte a Processing, este valor debe ser (55/360 × 255, 255, 255), es decir, (40, 255, 255).

colorMode () es una función que se puede superponer. A continuación, se lo presentaremos en detalle.

Paso 5: Método de superposición de ColorMode

Por lo tanto, si no desea convertir el valor HSB en Photoshop manualmente, puede escribir "colorMode ()" en "colorMode (HSB, 360, 100, 100)".

Caso de aplicación 1 del modo HSB

Debido a que el modo RGB no es muy conveniente para controlar los cambios de tono, en este momento, si desea controlar los colores de manera más flexible, puede considerar el modo HSB.

Ejemplo de código (9-6):

[cceN_cpp theme = "dawn"] configuración vacía () {

tamaño (800, 800);

fondo (0);

colorMode (HSB);

}

vacío dibujar () {

strokeWeight (2);

trazo (int (milis () / 1000.0 * 10)% 255, 255, 255);

flotar newX, newY;

newX = mouseX + (ruido (milis () / 1000.0 + 1.2) - 0.5) * 800;

newY = mouseY + (ruido (milis () / 1000.0) - 0.5) * 800;

línea (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Cuando controlamos H (matices) en el trazo, usamos millis (). Obtendrá el tiempo de funcionamiento desde el principio hasta el presente. Por lo tanto, al igual que con el tiempo que avanza, el valor de H (tono) aumentará automáticamente y luego cambiará el color.

La unidad de milis () es ms. Entonces, cuando el programa se ejecuta durante 1 segundo, el valor de retorno será 1000. Esto conducirá a un valor demasiado grande. Entonces tenemos que dividirlo por 1000.0.

Porque esperamos que los colores presenten una circulación periódica, por lo que tenemos que hacer una operación de módulo cuando finalmente escribimos el primer parámetro en trazo. Esto puede asegurar que comenzará desde 0 nuevamente cuando H (tono) haya superado 255.

La función strokeWeight () puede controlar el grosor de las líneas. La unidad correspondiente para los parámetros dentro del corchete es el píxel.

Paso 6: Caso de aplicación de modo 2

Ejemplo de código (9-7):

[cceN_cpp theme = "amanecer"] int num; // cantidad de líneas dibujadas actualmente

flotar posX_A, posY_A; // Coordenada del punto A

flotar posX_B, posY_B; // Coordenada del punto B

ángulo de flotación A, velocidad A; // Ángulo del punto A, velocidad

ángulo de flotaciónB, velocidadB; // Ángulo del punto B, velocidad

flotar radiusX_A, radiusY_A; // El radio del óvalo formado por el punto A en el eje X (Y).

flotar radiusX_B, radiusY_B; // El radio del óvalo formado por el punto B en el eje X (Y).

configuración vacía () {

tamaño (800, 800);

colorMode (HSB);

fondo (0);

velocidadA = 0,0009;

velocidadB = 0,003;

radiusX_A = 300;

radioY_A = 200;

radioX_B = 200;

radioY_B = 300;

}

vacío dibujar () {

traducir (ancho / 2, alto / 2);

para (int i = 0; i <50; i ++) {

ánguloA + = velocidadA;

ánguloB + = velocidadB;

posX_A = cos (ánguloA) * radioX_A;

posY_A = sin (ánguloA) * radioY_A;

posX_B = cos (ánguloB) * radioX_B;

posY_B = sin (ánguloB) * radioY_B;

trazo (int (num / 500.0)% 255, 255, 255, 10);

línea (posX_A, posY_A, posX_B, posY_B);

num ++;

}

} [/cceN_cpp]

Efecto de la operación:

Imagen de salida:

El patrón que ve es producido por una línea de movimiento a través de una superposición constante. Los trazos de los dos puntos finales de la línea son dos círculos por separado.

Mediante el modo HSB, hemos controlado los cambios de tonalidad. Con el aumento de líneas, el tono se compensará. Cuando se superponen líneas semitransparentes masivas, se creará un degradado de color muy rico.

Hemos incorporado un bucle for en la función draw con el objetivo de utilizar el bucle for para controlar la cantidad de línea. Es equivalente a que tengamos controlada la velocidad de dibujo. Al aumentar el valor de la condición de juicio en el bucle for, aumentará el filtrado de dibujo.

A continuación se muestra la figura esquemática. Puede ver el rastro de movimiento de los círculos con mayor claridad.

Ajuste diferentes velocidades y radios, los patrones formados también serán diferentes. Intente cambiar variables como ángulo, velocidad, radioX, radioY y vea qué sucede.

Paso 7: Modo de fusión de capas

Los distintos modos de color de los que hablamos antes se utilizan para colorear los componentes de los gráficos. Excepto para usar este método para controlar el color, Processing puede usar los modos de fusión de varias capas como Photoshop.

Abra la ventana de capa en PS, haga clic para elegir el modo de fusión de capas, luego podemos ver estas opciones.

Estos son modos de capa existentes en PS. En pocas palabras, el modo de fusión se puede considerar como una especie de modo de cálculo de color. Decidirá qué color se creará en el último cuando “color A” más “color B”. Aquí "color A" significa el color detrás de la capa actual (también llamado color base). “Color B” significa el color de la capa actual (también llamado color mezclado). El programa calculará para obtener el color C de acuerdo con el valor RGB y el alfa de los colores A y B. Se mostrará en la pantalla como color de resultado.

El modo de capa diferente significa diferentes métodos de cálculo. En la siguiente mitad de esta serie de artículos, lo explicaremos en detalle. Ahora solo tenemos que conocer su uso primero.

Veamos un ejemplo del uso del modo Agregar en el programa.

Ejemplo de código (9-8):

[cceN_cpp theme = "dawn"] PImage image1, image2;

configuración vacía () {

tamaño (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

vacío dibujar () {

fondo (0);

blendMode (AÑADIR);

imagen (imagen1, 0, 0, 400, 400);

imagen (imagen2, mouseX, mouseY, 400, 400);

}

[/cceN_cpp]

Resultado:

La función blendMode () se usa para configurar el modo de fusión de los gráficos. Completamos ADD detrás significa que hemos configurado Add Mode.

En el programa, no existe el concepto de capa. Pero debido a que existe una secuencia de dibujo de los componentes gráficos, cuando se combinan imágenes, la imagen 1 se considera como color base y la imagen 2 como color mezclado.

El modo AÑADIR pertenece a la "Clase de brillo". Después de usarlo, obtendrás un efecto de brillo.

A continuación se muestra un modo de fusión que se puede utilizar en Processing.

Paso 8: Procesamiento del modo de fusión

Podemos intentar cambiar diferentes modos de fusión para ver el efecto.

Cuando el ejemplo (9-8) ha adoptado el modo de superposición (el fondo debe establecerse en blanco):

Después de usar el modo de sustracción (el fondo debe establecerse en blanco):

Paso 9: Caso de aplicación del modo de fusión de capas

El modo de fusión no solo se puede utilizar para imágenes, sino que también es adecuado para todos los componentes gráficos del lienzo. A continuación se muestra un uso sobre el modo Agregar. Se puede utilizar para análogos de varios efectos de iluminación.

Ejemplo de código (9-9):

[cceN_cpp theme = "dawn"] configuración vacía () {

tamaño (400, 400);

}

vacío dibujar () {

fondo (0);

blendMode (AÑADIR);

int num = int (3000 * mouseX / 400.0);

para (int i = 0; i <num; i ++) {

si (aleatorio (1) <0.5) {

llenar (0, 50, 0);

}demás{

llenar (50);

}

elipse (aleatorio (50, ancho - 50), aleatorio (50, alto - 50), 20, 20);

}

}

[/cceN_cpp]

Aquí, a través de la función aleatoria, hemos mezclado el color verde y el color blanco, que ya han transportado alfa, en las partículas. Podemos usar el mouse para controlar la cantidad de círculo y observar el efecto de superposición.

ADD y SCREEN son bastante similares. Aunque es lo mismo iluminar, existen sutiles diferencias. Puede reemplazarlo a PANTALLA y hacer una comparación. Después de superponerse, la pureza y el brillo de ADD serán mayores. Es adecuado para la analogía del efecto de iluminación.

En cuanto al color, aquí llegamos a su fin en este capítulo. Para este "lenguaje", ya ha dominado suficientes vacabularios. ¡Apúrate a usar el código para disfrutar del mundo de la forma y el color!

Paso 10: Fuente

Este artículo es de:

Si tiene alguna pregunta, puede ponerse en contacto con: [email protected].