Objetos Gráficos en 2D



El lector debe consultar la página Gráficos 2D de la Documentación Técnica de Descartes 3 para estudiar los detalles de la configuración de los diversos tipos de objetos gráficos en dos dimensiones.

Como ya habíamos visto, los objetos gráficos a los cuales aquí referimos como gráficos 2D son los que se colocan en espacios 2D, y se seleccionan y configuran en el panel Gráficos.

Los gráficos 2D que existen en Descartes son los siguientes: ecuaciones, curvas, sucesiones, puntos, segmentos, flechas, polígonos, arcos, rellenos, textos, imágenes y macros.



Abajo aparece el panel de configuración de esta escena con la lista de todos sus gráficos.

Como en los otros paneles de configuración de Descartes, a la izquierda del panel Gráficos aparece la lista de todos los objetos gráficos 2D de la escena, donde se puede agregar un nuevo objeto pulsando ( + ) , agregar un objeto idéntico al marcado (copiar) pulsando ( * ), o eliminar el obeto marcado pulsando ( - ). Como veremos en la escena que se analizará a continuación, el orden de los objetos gráficos, o sea , su posición en la escena relativa a los demás objetos puede ser muy importante; esto se maneja mediante los pulsadores (las flechas) azul y rojo.

Recordemos que en los espacios 3D también existen gráficos dos-dimensionales, por ejemplo polígonos y polígonos regulares (polireg), sin embargo éstos se configuran en Descartes como gráficos 3D. Cuando planeamos construir una nueva escena que consiste en figuras dos-dimensionales, conviene considerar bien los requerimentos de la escenas antes de decidir si la escena se va a elaborar en un espacio 2D o 3D. En los espacios 3D, la manipulación de los objetos gráficos de 2 dimensiones es más rica y sofisticada, y existe funcionalidad, por ejemplo la rotación de figuras en el espacio, que no se logra en espacios 2D . Del otro lado, esta riqueza de configuración también la hace más compleja, por lo que, al no ser requeridos los efectos visuales propios a los espacios 3D, conviene optar por objetos gráficos 2D.

Como lo ilustra nuestra ya conocida escena de las piscinas: a pesar de no ser la escena visualmente más atractiva, ilustra bien el concepto para el que fue construida (la proporcionalidad) y fue relativamente fácil de construir.



Miremos cómo se construyeron los objetos gráficos de esta escena.

Cada una de estas escenas tiene una serie de objetos gráficos 2D:

Nota: También se había podido optar por un polígulo rectángulo que quedara debajo de los polígonos representando el agua y el fondo blanco de la piscina; sin embargo a continuación se aclarará por qué se optó por la configuración descrita.

Nota: Notamos que el agua de la piscina 2 también es un polígono de forma rectangular, pero cuya posición está detrás del pasto, por lo cual tiene otro aspecto visual. Esto hace más simple la configuración de este objeto gráfico y por tanto se optó por no configurar el polígono del pasto como un simple rectángulo.



Vale la pena detenernos un poco en las imágenes. Cómo haríamos para editar esta escena con más imagenes, afin de mejorar su aspecto gráfico?

Por ejemplo, si quisieramos representar el agua mediante una imagen, ¿cómo lo podríamos arreglar para que este gráfico siga “obedeciendo” al control “Agua”? Como vimos en la escena del pato, las imágenes se despliegan hacia la derecha y abajo desde un punto con coordenadas (x,y) o coordenadas absolutas (si se activa el interruptor coord_abs). En la escena abajo, hemos eliminado los polígonos turquesa y hemos insertado una imagen “images/AguaPiscinas.PNG” que se despliega a partir del punto con coordenadas (-10, d)





Antes de pasar a la edición de los aspectos más matemáticos y geometrícos de algunos otros objetos gráficos 2D, ilustremos con mayor detalle la configuración de familias de objetos gráficos.

Todos los objetos gráficos 2D pueden convertirse en familias de objetos. En la escena de las piscinas se utilizan varias familias de segmentos y puntos, algunos con textos. Veamos unos ejemplos sencillos de familias.

Ya conocemos la escena que se encuentra a continuación de la primera lección Modificaciones: se trata de un rectángulo que crece o disminuye cuando se pulse el control numérico n o se arrastre el control gráfico G, y se representan las unidades cuadradas de acuerdo con el movimiento del cuadrado.

¿Cómo se ha logrado esta figura? Es una figura que consiste en 3 objetos gráficos 2D: un polígono cuadrado con expresión (0,0)(n,0)(n,n)(0,n)(0,0), de relleno amarillo y contorno azul, y dos familias de segmentos del mismo color y tamaño que el contorno del cuadrado para dibujar las unidades dentro de este mismo.

Hay una familia de segmentos horizontales que cubren el intervalo [0,n] en n pasos. El parámetro s (que es el parámetro por defecto para las familias) se usará aquí para configurar la coordenada y de los puntos que conectan estos segmentos. Su expresión será entonces (0,s)(n,s).

La familia de segmentos verticales se ha configurado de la misma manera, con la diferencia de que aquí el parámetro s designa la coordenada x de los extremos de los segmentos.



Hay otra familia de gráficos en esta escena que son los números que se colocan dentro de los rectángulos cuando se elige la opción números=sí. Son puntos de tamaño cero con un texto cuyo contenido y posición dependen del parámetro s de la familia. Las coordenadas que dependen de s de una manera más o menos compleja, en sus expresiones se usan el módulo (%) y la división entera. Concretamente, la abscisa es igual a 0.25+(s-1)%n y la ordenada es 0.3+ent((s-1)/n, donde n es el tamaño del lado del rectángulo.

Como objetos gráficos, la escena que se muestra a continuación contiene dos ecuaciones cuyas expresiones están visibles en la escena. La ecuación cuya gráfica es amarilla es además editable: el usuario-alumno puede cambiar en ella los valores numéricos y aplicar los nuevos valores pulsando intro.

Los dominios en que se dibuja la gráfica se han restringido mediante el campo “dibujar-si”. Para la ecuación con gráfica amarilla, la restricción es “(x>-1)&(x<1)”, lo que en términos matemáticos equivale a “-1<x<1”. Sin embargo, en las condiciones booleanas una condición sólo puede contener un signo =, < , >,o # ( sus variaciones <= , >= y != también cuentan como un solo signo), por tanto si la restricción consiste en una combinación de condiciones, éstas se tienen que escribir separadamente entre paréntesis y se conectan con & (AND) o | (OR).

Notamos también que esta escena hace un buen uso de la red cartesiana en la cual se ha activado el despliegue de los números de las coordenadas, que se van ajustando de acuerdo con el cambio de escala, el cual se ha configurado en la animación.

Finalmente está el rectángulo cuya expresión está definida como 5 puntos con coordenadas absolutas. Por haberlo definido de esta manera, su tamaño no cambia con el cambio de escala de la red cartesiana, a diferencia de los objetos gráficos asociados a ella. Otra manera de editar la escena a fin de obtener un efecto similar sería definir un espacio del mismo tamaño pero en este caso no se puede obtener la semitransparencia lograda por el rectángulo.

Las gráficas de ecuaciones de la forma y=f(x) o x=f(y) son relativamente “inteligentes”. Por ejemplo, en la escena anterior no se dibujan los valores de la función en cada pixel y rectas entre dos pixeles consecutivos sino que cuando entre dos pixeles hay un máximo o un mínimo de la función, en uno de los pixeles se dibuja dicho valor para dar una mejor idea del aspecto de la gráfica. Otra de las sutilezas de las gráficas de funciones queda reflejada en la siguiente escena donde el programa mismo se encarga de reconocer que en ciertas regiones la función no está definida y sólo dibuja las gráficas en las zonas donde la función está definida. (Ojo esto puede fallar en algunos casos, por lo que es conveniente “ayudar” al programa dándole explícitamente los dominios de definición, ya sea al definir las funciones en auxiliares o en la condición “dibujar-si” del gráfico ecuación.

Las gráficas de ecuaciones no tienen que ser siempre de la forma
y = f(x) o x = f(y), sino que pueden ser ecuaciones implícitas. La siguiente escena ilustra este hecho así como los límites de aplicación de las ecuaciones implícitas, concretamente, el programa falla si hay demasiadas curvas solución ajenas, que no se tocan (por ejemplo con n>2.5 empieza a dejar de dibujar algunas ramas de la solución).



Pero para ecuaciones sencillas el dibujo de gáficas de ecuaciones implícitas funciona bastante bien, como puede verse en el siguiente ejemplo.



Los gráficos 2D pueden definirse usando números aleatorios. La siguiente escena, que ilustra la convergencia débil a 0.5 de la media de una muestra de lanzamientos de monedas, utiliza números aleatorios para generar las muestras.

Los macros son útiles para repreentar objetos gráficos complejos y pueden reutilizarse en varias escenas. Por ejemplo la siguiente escena utiliza un macro para representar la lente.

La siguiente escena “pop” utiliza dos macros, uno para representar el campo vectorial y otro que realiza los cálculos para encontrar la curva solución del sistema de ecuaciones diferenciales. El segundo macro no es propiamente un objeto gráfico sino más bien un conjunto de auxiliares, sin embargo se importa a la escena donde se aplica como un objeto gráfico.

Los macros se estudiarán en la última lección del curso.



Ejercicios



  1. En la escena de las piscinas, versión con imagen “AguaPiscinas.PNG”cambiar la configuración de esta imagen y de los polígonos blancos que representan el fondo de la piscina, para que sean estos últimos los que se mueven de acuerdo con el valor del control “Agua”, mientras que la imagen queda fija.

  2. Construir una escena con dos espacios, en uno de ellos debe haber una tabla de 2 líneas y varias columnas con un contenido de su propia elección pero que dependa de unos controles, en el otro debe haber una gráfica relacionada con los valores de la tabla.

  3. Construir una escena que muestre la solución de la ecuación de segundo grado similar a la que muestra la siguiente imagen:





Autores: José Luis Abreu León y Tine Stalmans