Metodología de la creación de escenas

La creación de una escena de Descartes rara vez se realiza partiendo de una escena vacía. Como vimos en la lección anterior, casi siempre el creador de una escena utiliza como base otra escena ya creada y la modifica agregando y quitando elelmentos. Sin embargo a veces sí se comienza desde cero y para esos casos es conveniente conocer la metodología recomendada.

La creación de una escena simple suele hacerse siguiendo los pasos que se indican a continuación y que se explican y ejemplifican a lo largo de esta página.

Pasos para crear una escena:

1. Definir la página web donde se va a insertar la escena e insertar en ella una escena vacía.

2. Configurar los botones.

3. Definir los espacios de la escena.

4. Crear los controles numéricos y gráficos.

5. Definir los auxiliares necesarios.

6. Crear los objetos gráficos.

7. Configurar la animación (si la hay).

   Cuando se va a crear una escena rara vez se cuenta con un diseño preciso que permita aplicar estos pasos en forma ordenada. En la práctica no siempre se aplican de manera ordenada, pero siempre conviene intentar seguir el orden indicado.

   Es fácil recordar estos pasos pues los del 2 al 7 corresponden uno a uno y en el mismo orden con los paneles del editor de escenas cuya imagen se muestra aquí:

   
   

   con la excepción del paso 6 que corresponde a los dos paneles Gráficos y gráficos 3D.

   A medida que se va avanzando en la construcción de la escena, deben probarse todas las adiciones que se hagan y que tengan una manifestación gráfica. En otras palabras, es conveniente pulsar frecuentemente el botón de aplicar o el de aceptar. También es conveniente guardar la escena en la página web cada vez que se completa un cambio significativo o al completar un paso. Estas recomendaciones deben considerarse como parte de la metodología recomendada.

   A continuación se presenta el desarrollo de una escena siguiendo estos siete pasos y aprovechando a explicar los detalles básicos que hay que considerar en cada uno. El objetivo será crear una escena concreta que es la que se ve aquí:

   Paso 1: Definir la página web donde se va a insertar la escena e insertar en ella una escena vacía.

   Para nuestro ejemplo vamos a usar una página web nueva con una escena vacía que vamos a nombrar SombraPentagonal.html y que vamos a colocar en la subcarpeta MisEjemplos. Para ello primero creamos la subcarpeta MisEjemplos en la carpeta donde se encuentra el archivo Descartes3.jar que es la carpeta que se considera el HOME de Descartes. Luego copiamos el archivo appletvacio.html (que como vimos en la página anterior se encuentra en la subcarpeta paginasweb) a esta carpeta y le cambiamos el nombre a SombraPentagonal.html.

   Si todo esto se ha hecho correctamente este enlace debe abrir la página indicada. Sin embargo no aparecerá la escena sino que se producirá un error debido a que el navegador no encuentra el código del applet. El codebase es la ruta donde el navegador va a buscar el código del programa que se encuentra en el archivo Descartes3.jar lo cual queda indicado en el código del applet por el parámetro archive=”Descartes3.jar”. Para que el navegador encuentre el código del applet es necesario cambiar el codebase del applet. El codebase es un código que indica al sistema dónde en la jerarquía de las carpetas y subcarpetas se encuentra el archivo “jar”, que es el intérprete de la escena. En la página original codebase=”.” que indica al navegador buscar en el mismo directorio de la página, pero como la página SombraPentagonal.html está en un subdirectorio de HOME, el codebase debe cambiarse a codebase=”../”.

   Si se hace este cambio correctamente el enlace mostrará la página con un rectángulo color turquesa. En ese caso ya podemos pasar al siguiente paso.

   El lector debe consultar la página Código de la Documentación Técnica para cualquier duda sobre el código de la escena, su significado y cómo insertarlo en una página web.

   Paso 2: Configurar los botones.

   La “configuración de botones” es muy sencilla, como puede verse en el panel de Botones:

   

   Sólo hay que seleccionar los botones predefinidos que deben aparecer en las esquinas de la escena y en la configuración de los espacios asignados a los controles que han de acomodarse en las orillas de la escena. En el caso de la escena que deseamos crear no hace falta hacer ningún cambio porque no tiene ningún botón en las esquinas ni controles en las orillas, sólo tiene un control interior.

   Paso 3: Definir los espacios de la escena.

   Nuestra escena “vacía” en realidad no está tan vacía, sino que tiene un espacio de dos dimensiones, como puede verse en el panel de Espacio.

   

   La escena que deseamos construir puede hacerse con un solo espacio de 3 dimensiones. Por tanto conviene eliminar el espacio de dos dimensiones, lo cual se hace seleccionándolo en la lista de la izquierda y pulsando el botón - . Luego se agrega un espacio de 3 dimensiones pulsando el botón + y eligiendo R3 cuando se nos pregunta el tipo de espacio. El nuevo espacio R3 tiene fondo blanco como requiere nuestra escena. Así que, por lo pronto, ésta es una buena configuración de espacios para nuestra escena.

   Paso 4: Crear los controles numéricos y gráficos.

   Nuestra escena sólo tiene un control y es un control numérico. Por tanto en el panel de Controles

   

   debemos agregar un solo control numérico. Hacemos esto pulsando el botón + . Cuando se nos pregunta el tipo de control, elegimos numérico y le ponemos el nombre h. Luego configuramos este control. Primero el tipo, que será pulsador. Luego decidimos dónde colocarlo. Elegimos la región interior y la posición pos=(20,150) que se mide en pixels de izquierda a derecha y de arriba a abajo. Luego debemos ponerle el valor inicial 2, esto se pone en el campo llamado valor. El mínimo debe ser 0.5 y el máximo 4. Todos estos datos podemos obtenerlos de la escena que estamos usando de muestra. No es necesario configurar más parámetros ni crear otro control.

   Paso 5: Definir los auxiliares necesarios.

   Este paso suele ser el más complicado. Algunas escenas no necesitan auxiliares, pero la mayoría sí los necesitan. Éste es el panel donde se definen los Auxiliares.

   

   Los auxiliares son las variables, constantes, vectores, funciones, algoritmos, etc... que utiliza la escena. Es donde residen los cálculos matemáticos. En este caso es necesario calcular el lado de la sombra del pentágono. Para ello es necesario determinar algunos parámetros. Digamos que el pentágono está inscrito en un círculo de radio 1 y la distancia del pentágono al suelo es 2. Si h es la altura de la fuente luminosa sobre el pentágono, por triángulos semejantes deducimos que el radio a del círculo dentro del cual está inscrita la sombra del pentágono es a=(h+2)/h. Conviene definir una variable a con esta expresión, como se muestra en la imagen abajo. No hacen falta más auxiliares en esta escena.

Paso 6: Crear los objetos gráficos.

Nuestra escena necesita sies objetos gráficos: dos textos, dos pentágonos regulares, un cono y un segmento. Como el único espacio de la escena es de 3 dimensiones, no debemos definir ningún objeto gráfico de dos dimensiones. Por tanto el panel Gráficos quedará vacío, tal como aparece en la figura.



Los cinco objetos gráficos los vamos a definir en el panel de gráficos3D que se ve así:



Comenzamos por definir los textos. Pulsando el botón + agregamos dos textos. El contenido de estos textos debe ser:

Lado del pentágono pequeño=1

Lado del pentágono grande=[a]

El primero puede colocarse en la posición [ 20,240] y el segundo en [20,300]. La posición de los textos se escribe en el campo expresión entre corchetes. El color de los textos lo elegimos negro.

Luego se agregan los pentágonos. Para agregar un pentágono lo más conveniente es agregar un objeto de tipo Polireg (un polígono regular) con número de lados Nu=5. Al primero que agregamos le ponemos ancho=2 y largo=2. El ancho y el largo corresponden a los ejes de una elipse dentro de la cual se inscibiría el polígono. Para realmente ser regulares los polígonos deben tener el mismo ancho que largo, es decir, estar inscrito en una circunferencia. El color del pentágono lo elegimos amarillo. Hay que definir dos colores que corresponden a las dos caras del pentágono, ambos los definimos amarillos. El segundo pentágono lo definimos igual que el primero excepto que ancho=2*a y largo=2*a para que sus dimensiones guarden la proporcionalidad adecuada, y le asignamos una posición inicial posini=(0,0,-2) para que esté dos unidades abajo del otro.

Lo único que falta ahora es construir el cono. Agregar un cono es fácil pues el objeto Cono es uno de los de la lista. Como queremos un cono de base pentagonal, ponemos Nu=5 y Nv=1. Nv aquí se refiere al número de particiones en la superficie del cono del vértice a la base, y conviene escoger la cantidad mínima requerida para preservar la agilidad de la escena.

Una vez agregado el cono habrá que dimensionarlo, girarlo y desplazarlo pues el cono aparece con el vértice abajo y sus caras no siendo paralelas a los lados de los pentágonos.

Dimensionar Cono. Las dimensiones serán ancho=largo=2*a para que la base del cono sea igual al pentágono inferior y alto=2+h para que la altura del cono sea la suma de la distancia entre los pentágonos (2) y la altura h de la fuente de luz sobre el pentágono superior.

Girar Cono. Dándole una rotación inicial rotini=(0,180,36) logramos invertir el cono pues girará 180 grados alrededor del eje y. Luego el giro de 36 grados alrededor del eje z hace que sus lados sean paralelos a los lados de los pentágonos.

Desplazar Cono. El cono queda centrado en el origen. Como hemos dejado que el centro del pentágono superior esté en el origen, hay que desplazar el cono para que su centro quede a una altura z del origen tal que h-z=(h+2)/2, por lo tanto z=(h-2)/2. Este desplazamiento se logra con posini=(0,0,(h-2)/2).

Podemos mirar todas estas configuraciones en esta figura:

Finalmente podemos agregar el segmento de longitud h que va de vértice del cono al centro del pentágono superior. Lo hacemos agregando un objeto gráfico de tipo segmento de color rojo con expresión (0,0,0)(0,0,h) y con texto h=[h].

Paso 7: Configurar la animación (si la hay).

Nuestra escena tiene una animación muy sencilla. Para configurar una animación lo primero que hay que hacer es marcar el selector Animación en el panel Animación. En este ejemplo no queremos que los controles se vean, por lo que debemos desmarcar el selector controles. Dejamos marcado el selector auto para que la animación comience automáticamente al iniciarse la escena. Finalmente hay que configurar el algoritmo de animación que en un ciclo. No hace falta escribir nada en el campo inicio, basta escribir E1.rot.z=E1.rot.z+2 en el campo hacer para que el espacio gire 2 grados cada vez. Y para que la animación continúe permanentemente hay que escribir 1 (o cualquier expresión booleana que dé valor falso o cualquier expresión numérica que dé valor > 0) en el campo mientras. Esto termina la configuración de la animación y la de toda la escena.



Como se explicó anteriormente, para guardar la configuración hay que obtener el código del applet pulsando el botón código en la parte superior derecha, copiar el código que aparece en la ventana de texto y pegarlo en su sitio en la pñagina web. Con esto queda completa la construcción de la escena.

El lector debe consultar la página Código de la Documentación Técnica para cualquier duda sobre la presentación de la escena en la página web.

Ejercicios

1. Hay un error en la escena desarrollada en este ejemplo. El lado del pentágono superior no es 1. Lo que mide 1 es el radio de la circunferencia que pasa por todos los vértices del pentágono. Calcule el verdadero valor del lado del pentágono, use un auxiliar para definir y calcular este valor y modifique la escena para que exhiba los valores correctos de los lados de ambos pentágonos.

2. Modifique la escena anterior para que la distancia entre los pentágonos en lugar de ser 2 sea variable y cree un control para que el usuario pueda modificar libremente este valor.

3. Modifique la escena para que en lugar de la sobre de un pentágono pueda verse la sombra de cualquier polígono regular desde un triángulo hasta un polígono de 20 lados. En la nueva escena debe haber un control que permita elegir el número de lados y los textos deben modificarse convenientemente para expresar correctamente lo que se está exhibiendo.

4. Cree una escena sencilla partiendo de un applet vacío siguiendo la metodología descrita en esta lección. Debe ser una escena que contenga al menos un control, al menos un auxiliar que realice un cálculo usando el id del control, y al menos un gráfico que dependa del auxiliar. Ponga su resultado en
   
   //jla_toshiba/ILCE/Entradas/<nombre>
   
   donde <nombre> es su propio nombre, apellido o apodo escrito sin espacios.

5. Intente convertir la escena obtenida en el Ejercicio 3 en una escena educativa interactiva que ilustre el concepto de proporcionalidad entre las dimensiones de una figura plana y las de su sombra proyectada sobre un plano paralelo al que contiene a la figura. Ponga su resultado en
   
   //jla_toshiba/ILCE/Entradas/<nombre>

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