Colores, gradientes y patrones

Joel Espinosa Longi

Al crear recursos interactivos es importante presentarlos de una forma visualmente atractiva, como dice el dicho: “de la vista nace el amor”. En este sentido la herramienta Descartes desde sus inicios ha proporcionado un mecanismo para agregar colores a los diversos elementos visuales que se crean (). En general poco ha cambiado el editor de colores de DescartesJS, .

Editor de colores original de Descartes.
Editor de colores en DescartesJS.

Aprovechando las funcionalidades que proporciona el elemento canvas de HTML, sobre el cual se basa el dibujado de la mayoría de los elementos presentados por DescartesJS, a partir de la versión 1.2 del editor de DescartesJS y la versión del 20 de noviembre de 2022 del interprete de DescartesJS () se incorpora un nuevo editor de colores , el cual permite al igual que el original, editar colores en formato RGB, pero además incluye la capacidad de utilizar gradientes e imágenes para rellenar el dibujo de espacios, controles y gráficos.

Información de la versión 1.2 de DescartesJS.

En el nuevo editor de colores se presenta en la parte superior tres pestañas para seleccionar el tipo de relleno que se utilizará para colorear algún elemento. La primer pestaña, RGB (), preserva el funcionamiento original, donde se pueden especificar colores a partir de sus componentes de color rojo, verde y azul, así como su transparencia.

Nuevo editor de colores en DescartesJS, pestaña RGB.

En la pestaña Gradiente (), se presenta una barra debajo de los botones Copiar y Pegar, donde se muestra una vista previa del gradiente. Después se encuentran cuatro campos de texto que especifican las coordenadas de dos punto que definen un segmento de recta que determina la posición y dirección del gradiente.

Nuevo editor de colores en DescartesJS, pestaña Gradiente.

La razón de utilizar las coordenadas de dos puntos (x1, y1) y (x2, y2) viene de la especificación del elemento canvas para crear gradientes, https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient, donde se utiliza un segmento que determina la posición y dirección en la que se crea el gradiente. Estás coordenadas se establecen de forma absoluta respecto al canvas donde se dibuja, en el siguiente interactivo () modifica las coordenadas (x1, y1) y (x2, y2) y observa como cambia la dirección del gradiente utilizado como color de fondo del espacio.

Coordenadas (x1, y1) y (x2, y2) de un gradiente.

Para los gráficos contenidos en un espacio las coordenadas de (x1, y1) y (x2, y2), siempre son absolutas respecto al espacio que contiene el gráfico. En el siguiente ejemplo () las coordenadas del segmento son iguales a las del gradiente, por lo que parece que el gradiente se mueve junto con el segmento al cambiar las coordenadas.

Un gradiente sobre un segmento de coordenadas (x1, y1) y (x2, y2).

Hay que mencionar que DescartesJS utiliza un canvas para dibujar cada espacio así como los elementos gráficos que viven en él, mientras que cada control utiliza su propio canvas para dibujarse.

Al utilizar un gradiente como el color de un control, las coordenadas se refieren al área de dibujo del propio control y son independientes del espacio donde vive, en el siguiente ejemplo () se observa el uso de un gradiente como el color de fondo de un botón. En controles los gradientes se pueden utilizar para colorear las etiquetas o texto de los mismos.

Las coordenadas (x1, y1) y (x2, y2) del gradiente al utilizarse en un control dependen de las coordenadas propias del canvas donde se dibuja.

Por último debajo de los campos de texto para especificar las coordenadas (x1, y1) y (x2, y2), aparece un botón de “+” (más) que permite agregar una parada de color en el gradiente.

Al presionar al botón “+” aparece un conjunto de controles para especificar las características de la parada (), en primer lugar aparece un campo de texto donde se especifica un porcentaje (en decimal) que corresponde a la posición dentro del segmento (especificado por (x1, y1) y (x2, y2)) donde se coloca el color indicado, a continuación se presenta un botón que permite seleccionar un color (el cual utiliza un mecanismo proporcionado por el propio sistema operativo), y por último se muestra un botón “-” (menos) con el que se puede eliminar la parada correspondiente.

Controles para especificar una parada dentro del gradiente.

Es indispensable que la especificación de un gradiente cuente con al menos dos paradas para que funcione. Los porcentajes de cada parada deben especificarse como un valor, es decir, no se aceptan expresiones para su definición y en caso de salirse del rango [0, 1], los valores se truncan para quedar dentro de dicho rango.


Ejemplo de configuración de un gradiente donde se utilizan tres paradas, la primera en el 0% utiliza un color rojo, la segunda en el 50% utiliza un color verde y la tercera en el 100% utiliza un color azul.

La última pestaña, Patrón, permite especificar una imagen para rellenar el color de un elemento gráfico (), siguiendo la especificación del elemento canvas, https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createPattern. En esta pestaña solo se incluye un campo de texto donde se especifica la dirección de la imagen que se utilizará para rellenar el elemento gráfico, ya sea un espacio, un gráfico, o un control. Debajo del campo de texto aparece una vista previa de la imagen, en caso de que la imagen exista y su dirección se escriba directamente; en caso de que no exista la imagen o que se especifique como una variable (por ejemplo, [nombre_imagen]) se mostrará una cruz roja en la vista previa.

Nuevo editor de colores en DescartesJS, pestaña Patrón.

Las imágenes del patrón siempre se comienzan a dibujar desde la esquina superior izquierda del canvas donde se dibuja el elemento gráfico.

En la siguiente escena interactiva se muestra un octágono construido por medio de un gráfico de tipo curva, que utiliza un relleno de tipo patrón. El espacio donde se dibuja la curva no se encuentra fijo, por lo que al mover el espacio se puede observar como la imagen se comienza a dibujar desde la esquina superior izquierda del espacio (el origen del canvas que contiene el gráfico); esto debido a la especificación dada directamente por el API de programación del canvas.

Imagen del patrón obtenida de Pixabay

Al igual que los gradientes, las imágenes como patrón se pueden utilizar para espacios, elementos gráficos y controles. Con las mismas consideraciones del elemento canvas que contiene el elemento a dibujarse.