• Espacios R2 (bidimensionales)

    13 junio, 2014 Autor/a: José R Galo Sánchez
    Sin comentarios todavía

    Los espacios R2 o de dos dimensiones, son los más usados  habitualmente. Cuando se crea una escena nueva tiene por defecto un espacio R2, de identificador E1, de fondo blanco y dimensiones ancho y alto las de la escena.

    En la siguiente escena se han definido cuatro espacios R2, cada uno de características diferentes:

    (Puede descargar la escena anterior desde este enlace)

    A continuación se describen los campos configurables en los espacios R2 que has podido observar en la escena anterior:

    fijo
    		 Selector que impide que el usuario modifique la escala y la localización del origen arrastrando el ratón.
    escala
    		 Es el valor de la escala, es decir, el tamaño en pixeles de un segmento unitario (de longitud 1). Para modificar esta variable hay que referirse a ella como <id>.escala donde <id> es el identificador del espacio.Nota: Es por esto que es importante que los identificadores de espacios no contengan espacios ni símbolos de operadores.
    O.x
    O.y
    		 Es la distancia horizontal/vertical (en pixeles) del centro del espacio al punto donde se dibujará el origen de coordenadas.
    Para modificar esta variable hay que referirse a ella como <id>.Ox o <id>.Oy respectivamente, donde <id> es el identificador del espacio.
    imagen
    		 Campo de texto en el que puede escribirse el nombre de un archivo que contiene una imagen.
    Esta imagen se usará como fondo del espacio. Sólo pueden utilizarse archivos jpg y gif. Los archivos de imágenes deben colocarse en el mismo sitio donde se coloca el ajs o en subdirectorios a partir de ahí. En el nombre del archivo hay que incluir los subdirectorios.
    desp_imagen
    		 Es un selector con las siguientes opciones: arr_izq, expand., mosaico y centrada, que indican cómo se desplegará la imagen de fondo.
    fondo
    		 Es el color con que se pinta el fondo del espacio.
    Un clic sobre el botón activa el editor de colores (ver Colores). El valor por defecto es f0f8fa.
    red
    		 Es el color con que se pinta una red de rectas paralelas a los ejes de coordenadas que sirven como referencia.
    El selector sirve para decidir si la red se dibuja o no se dibuja. El botón llama al editor de colores. Los valores por defecto son el selector activado y el color b4c4c8.
    red10
    		 Es el color con que se pinta una red cada 10 unidades líneas de la anterior.
    El selector sirve para decidir si la red10 se dibuja o no se dibuja. El botón llama al editor de colores. Los valores por defecto son el selector desactivado y el color 889498.
    ejes
    		 Es el color con que se pintan los ejes de coordenadas.
    El selector sirve para decidir si los ejes se dibujan o no se dibujan. El botón llama al editor de colores. Los valores por defecto son el selector activado y el color 405860.
    texto
    		 Es el color con que se escriben las coordenadas al pulsar el botón izquierdo del ratón y al arrastrarlo.
    El selector sirve para decidir si las coordenadas se escriben o no se escriben. El botón llama al selector de colores. Los valores por defecto son el selector activado y el color 405860.
    números
    		 Es el selector para decidir si se escriben algunos valores de las coordenadas sobre los ejes.
    En caso de escribirse estas coordenadas aparecen en el mismo color que los ejes. Sólo pueden escribirse las coordenadas si los ejes se dibujan. El valor por defecto en un espacio nuevo es desactivado.
    eje-x
    eje-y
    		 Etiqueta que se dibujará a la derecha del espacio, justo abajo del eje-x, o en la parte superior justo a la izquierda del eje-y.
    El color en que se escribe la etiqueta es el de los ejes. Si el contenido es «no» entonces el eje no se dibuja. El selector sólo tiene efecto si el de ejes está activado.
    sensible_a_los_ movimientos_del_ratón
    		 Selector para decidir si el programa detectará los movimientos del ratón sobre este espacio.
    Cuando la casilla está activada, cada vez que se mueve el ratón sobre el espacio el programa refresca la escena y verifica los eventos.

  • Familias 3D

    25 abril, 2014 Autor/a: Juan Guillermo Rivera Berrío
    Sin comentarios todavía

    Los objetos gráficos 3D, al igual que los obtenidos en 2D, pueden ser tratados como familias. Esta opción permite repetir un gráfico varias veces como lo muestra la siguiente imagen.

    familia1

    Para lograr esta repetición de objetos gráficos, debemos activar el selector familia y configurar los siguientes atributos del objeto:

    • Parámetro. Variable con la que está parametrizada la familia de objetos gráficos 3D. Debe ser una sola palabra, de preferencia corta, por defecto es s. Esta variable determina, de acuerdo al intervalo, uno o varios atributos de los objetos a dibujar. El programa dibujará los gráficos con los valores del parámetro recorriendo el intervalo especificado en el número de pasos elegido.
    • Intervalo. Determina el recorrido de la variable. Debe contener dos expresiones reales entre corchetes y separadas por una coma [Li, Lf], el intervalo por defecto es [0,1].
    • Pasos. Número de subintervalos en los que se subdivide uniformemente el intervalo del parámetro para definir los elementos de la familia.

    En el ejemplo mostrado en la imagen anterior, la variable s determina la posición en z de la esfera, este parámetro recorre el intervalo definido entre 1 y 3. Sí nuestro deseo es que se dibujen tres esferas verticalmente, el números de pasos debe ser 2, puesto que entre s = 1 y s = 2 hay un paso, y entre s = 2 y s = 3 hay un segundo paso. En general, el número de elementos gráficos dibujados es igual a pasos + 1. En otras palabras, pasos es el número de subintervalos iguales en que se divide el intervalo.

    Volviendo al ejemplo, el atributo posini igual a (0, 0, a*s), es el que permite que las esferas se dibujen una tras otra verticalmente. Si el valor de la variable a es 2 y s varía en el intervalo [1, 3], entonces se dibujarán tres esferas de diámetro 2 en las posiciones (0, 0, 2), (0, 0, 4) y (0, 0, 6).

    Un segundo ejemplo, con a también igual a dos, se muestra en la siguiente imagen.

    familia2

    En este caso el número de objetos es cuatro, usando un posini igual a (s*(a/2+0.2), 0, 3); es decir, son cuatro paralelepípedos dibujados en el eje x, separados en un valor de 0.2. En este caso, la variable s determina la posición en x del paralelepípedo.

    Un tercer ejemplo es una familia de cubos. Aquí es muy importante comprender el atributo ancho del cubo, puesto que no se comporta como el ancho de un paralelepípedo, Descartes lo define como la diagonal del cubo; por lo tanto, el lado del cubo sería: L = a*sqrt(3)/3. Por ello, el posini definido para dibujar los cinco cubos es (0, s*L, 3), variando la posición en el eje y de acuerdo a la variable L y no con respecto a la variable a.

    familia3

    Observa la siguiente escena con los tres ejemplos anteriores, además de un cuarto ejemplo que se deja para tu análisis. Cada ejemplo muestra los atributos más importantes del objeto gráfico dibujado.

    El uso de familias 3D, nos permite construir escenas más elaboradas, pero con instrucciones simples, como la que se muestra a continuación:

    (Puede descargar esta escena y la anterior desde este enlace)

  • Espacios

    24 abril, 2014 Autor/a: María José García Cebrián
    Comentarios desactivados

    Los espacios son el marco en el que se visualizan los objetos de una escena: textos, gráficos e incluso controles si así se desea. Pueden ser de tipos: Espacios R2 o bidimensionales, R3 o tridimensionales y HTMLIframe.

    El panel de configuración de espacios se abre por defecto al pulsar el botón config del editor y tiene este aspecto: Panel de configuración de espacios A la izquierda aparece la lista de todos los espacios de la escena; y sobre ella unos botones que sirven para agregar un nuevo espacio ( + ) , para agregar un espacio idéntico al marcado ( * ), para cambiar el orden del espacio marcado (las flechas azul y roja) y para eliminar el espacio marcado ( – ). También aparece una etiqueta azul con letras blancas que dice «Espacio» y que, al pulsarla, abre una ventana de texto en donde puede editarse manualmente la configuración de los espacios.

    Al agregar un espacio pulsando en ( + ) aparece un cuadro de dialogo como se muestra en la imagen, en el que hay un selector que permite elegir entre R2 (espacio de 2 dimensiones), R3 (espacio de 3 dimensiones) o espacio HTMIFrame. Una vez seleccionado el tipo de espacio hay que editar el identificador del espacio, si es que se desea cambiar el que el programa ofrece por defecto, y pulsar aceptar. En el panel de configuración de un espacio se encuentran los campos para configurar dicho espacio. Todos los tipos de espacios tienen varios campos comunes:

    id
    		 El identificador del espacio. Es un campo de texto cuyo contenido es el nombre o identificador del espacio. El programa nombra por defecto los espacios como E1, E2, E3, etc  pero estos identificadores se pueden cambiar. Es importante tener en cuenta que el nombre de un espacio no puede contener espacios en blanco ni símbolos de operaciones.
    x y
    		 Son respectivamente la abscisa y la ordenada del extremo superior izquierdo de la ventana del espacio. Es decir, es su distancia al margen izquierdo de la escena. Se puede especificar con un número de pixeles (por ejemplo 20) o con un porcentaje (por ejemplo 10%) del ancho total de la escena.
    ancho alto
    		 Es el ancho/alto de la ventana del espacio. Se pueden especificar con un número de pixeles (por ejemplo 240) o con un porcentaje (por ejemplo 50%) del ancho total de la escena.
    dibujar-si
    		 Expresión matemática que determina si el espacio es visible o no. El espacio es invisible si y sólo si el valor de la expresión es cero. Si se deja en blanco este espacio siempre será visible.

  • Audio – Video

    23 abril, 2014 Autor/a: Elena Álvarez
    Sin comentarios todavía

    Los controles de audio y video permiten reproducir ficheros de sonido y de video incorporados en una escena.

    Este tipo de control tiene un panel de configuración como el que se muestra en la imagen siguiente:

    conContSon

    Los elementos a definir son:

    • id. Es el identificador del control.
    • (region). Región a la que se asigna el control numérico. las opciones son: norte, sur, este, oeste, exterior e interior.
      • La región norte es una o varias filas horizontales en la parte superior de la escena entre los botones de créditos y config.
      • La región sur es una o varias filas horizontales en la parte inferior de la escena entre los botones de inicio y limpiar.
      • Las regiones oeste y este son columnas a la izquierda y a la derecha de la escena.
      • La región exterior es una ventana que aparece cuando se hace un clic derecho sobre la escena.
      • La región interior es la escena. Cuando un control numérico se asocia a la región interior, entonces se puede colocar en cualquiera de los espacios de la escena y su posición ahí está determinada por el parámetro pos.
        El valor por defecto es “sur”.
    • espacio. Es un menú desplegable que permite elegir el espacio al que se desea asignar el control. Este parámetro sólo tiene sentido en controles numéricos asignados a la región interior (y en controles gráficos). El menú muestra los identificadores de todos los espacios definidos en la escena. En el caso de que el control sea interior se puede usar una expresión de cuatro valores (x,y,w,h) donde los primeros dos son las coordenadas del vértice superior izquierdo del control y los dos últimos son el ancho y el alto.
    • pos. Es el extremo superior izquierdo del control. Se expresa con dos números entre paréntesis separados por una coma. Los números pueden ser constantes o expresiones en las que intervienen constantes o parámetros definidos en controles anteriores. El valor por defecto es (0,0).
    • dibujar-si. Expresión booleana que determina cuándo el control es visible.El valor por defecto es vacío y en ese caso el control es siempre visible.
    • archivo. Dirección del archivo multimedia de audio o vídeo asociado al control.

    La siguiente escena muestra un control de audio y un control de vídeo que puede ser reproducido/pausado/parado bien desde el propio reproductor del control o a través de unos controles numéricos tipo botón. En este último caso, cuando se pulsa sobre el botón, se ejecutarían las funciones id.play(), id.pause() y id.stop() para, respectivamente, reproducir, pausar y parar el control. El valor de id es el identificador del control.

     La escena anterior puede descargarla desde este enlace.

    Comentario en relación a los formatos de los audios y de los vídeos y su compatibilidad con los navegadores.

    No todos los navegadores soportan los mismos formatos de vídeo. Este hecho es provocado principalmente por problemas con las patentes. En este enlace tenemos una detallada información sobre los formatos de audio y vídeo soportados en HTML5. Como ahí se describe pueden encontrarse incompatibilidades dependiendo de los codecs de audio y  vídeo que se utilicen y del tipo de contenedor para los mismos. Hay que convivir con ese hecho y buscar la máxima compatibilidad en el formato que se desee utilizar.

    Los formatos libres son Ogg/Theora y VP8/WebM y en este análisis, aunque algo antiguo dado que es de 2012, son los que se recomiendan. En la escena anterior hemos usado Ogg para audio y MP4 para el vídeo. Ambos han funcionado en Chrome, Firefox y Explorer (en estos dos últimos lo que no funcionó fue la parada del vídeo, sí la reproducción y la pausa).

    Conversores a diferentes formatos pueden encontrarse fácilmente en la web. Por ejemplo aquí hay tiene enlazado uno.

    Una alternativas que puede ayudar a salvar estas dificultades puede plantearse incluyendo los audios y vídeos en páginas que son abiertas a través de espacios HTMLIframe.

    Comentario sobre la no visualización de los controles de audio y vídeo en el editor de configuración.

    Al agregar un control se observa una ventana en la que se puede seleccionar el tipo de control deseado. Es lo que se observa en la siguiente imagen:

    Agregar un control

    Agregar un control

    Pero puede ser que en determinadas circunstancias contemple que las opciones de control tipo audio y vídeo no se muestran, tal y como se refleja a continuación:

    No se visualiza la selección de controles de audio y vídeo

    No se visualiza la selección de controles de audio y vídeo

    Esto es consecuencia de que tiene instalado el plugin de Descartes, es decir, en su ordenador tiene instalado un archivo DescartesLib.jar al que está accediendo el gestor de escenas y que es incompatible con la edición de audio y vídeo actual. Para solventar esto basta que desinstale el plugin, borrando ese archivo. En windows suele acontecer que hay ubicaciones o enlaces a dicho archivo creados por el propio sistema operativo siendo necesario utilizar un limpiador específico que puede encontrar en la parte final de esta página.

  • Botones

    22 abril, 2014 Autor/a: María José García Cebrián
    Sin comentarios todavía

    En el panel Botones se encuentran los campos para la configuración general de la escena, que son cuatro selectores para indicar si los botones de créditos, config, inicio y limpiar deben ser visibles o no, y cuatro campos de texto para controlar el tamaño de las cuatro regiones que rodean la escena, mismas en donde puede haber controles numéricos. Los dos primeros son para determinar el número mínimo de filas de controles numéricos que tendrán las regiones norte y sur, y los otros dos son para determinar la anchura en pixeles de las regiones oeste y este.

    panel_botones

    A continuación se detalla el significado de estos estos campos:

    créditos
    		 Determina si el botón «créditos» aparece en la escena.
    El botón «créditos» abre una ventana que tiene vínculos a la página principal de Descartes y muestra los nombres delos autores del applet.
    Por defecto está seleccionado.
    config
    		 Determina si el botón «config» aparece en la escena.
    El botón «config» abre la ventana de edición en la que se puede modificar la configuración de la escena.
    Por defecto está seleccionado.
    inicio
    		 Determina si el botón «inicio» aparece en la escena.
    El botón «inicio» devuelve la escena a su estado inicial reiniciando los valores de los controles auxiliares. Si hay animación automática, ésta comienza de nuevo.
    Por defecto está seleccionado.
    limpiar
    		 Determina si el botón «limpiar» aparece en la escena.
    El boton «limpiar» borra los rastros dejados por las gráficas que tienen la opción «rastro» activada.
    Por defecto está seleccionado.
    filas_norte
    filas_sur
     
    		 Número de filas que ocuparán los controles numéricos colocados en la región Norte/Sur.
    Si el valor es cero entonces (de haberse creado un control al norte/sur) habrá por lo menos una fila, si no, no habrá ninguna.
    El valor por defecto es cero.
    ancho_oeste
    ancho_este
    		 Ancho en pixeles de la región Oeste/Este para controles numéricos.
    El valor por defecto es 150, lo que quiere decir que si hay al menos un control numérico en la región Oeste/Este, entonces se adopta por defecto un valor de 150.
    alto
    		 Altura en pixeles de los controles numéricos en las regiones norte y sur. El valor predeterminado es 40.
    editor
    		 Activa (o desactiva) la edición por parte del usuario. Por defecto está activado.
    audio
    		 Activa la posibilidad de usar sonido en una escena.
    álgebra
    		 Activa la posibilidad de usar espacios algebraicos, aunque en la actualidad DescartesJS no contempla este tipo de espacios.
    RAD
    		 Activa el Registro de Actividades de Descartes para esta escena. Actualmente no contemplado para DescartesJS.
    infoind
    		 Área de texto para definir un texto con expresiones numéricas que describan el desempeño de un alumno en esta escena. No contemplado para DescartesJS.
    infoest
    		 Área de texto para definir un texto con expresiones que indiquen el comportamiento estadístico de la escena ante un grupo de alumnos. Ncontemplado para DescartesJS.
    signo decimal
    		 Permite elegir el signo decimal, es decir el símbolo que separa los enteros de los decimales en una expresión decimal, para su representación en un texto o en un campo de texto. Internamente, en el código de la escena, ha de usarse siempre el punto decimal como separador decimal.
    En España la RAE establece el uso de la coma, aunque se permite el punto utilizado en otros países.
    antialias
    		 Selector que activa (o desactiva) la propiedad de que los gráficos se dibujen suavemente. Por defecto está activado.
Página anterior Página siguiente