• Estás aquí : 
  • DescartesJS
  • /Artículos con etiqueta [ gráficos ]

  • Arco 2-D

    3 abril, 2014 Autor/a: Montserrat Gelis Bosch
    Sin comentarios todavía

    El panel de configuración específico del tipo arco tiene este aspecto:

    graficos_arco

    La siguiente tabla explica los campos específicos.

    Campo Descripción
    centro Debe ser un par ordenado de expresiones (X, Y) que representará el punto que es el centro del arco.
    radio Es el radio del arco. Puede ser una expresión real arbitraria.
    inicio Es el inicio del arco. Hay dos opciones. Puede ser una expresión real arbitraria que se interpretará como el ángulo inicial en grados sexagesimales, o puede ser una expresión de la forma (x1,y1) que se interpretará como un punto.En el segundo caso el arco comienza en el segmento que une al centro (X,Y) con el punto (x1,y1).
    fin Es el final del arco. Hay dos opciones. Puede ser una expresión real arbitraria que se interpretará como el ángulo final en grados sexagesimales, o puede ser una expresión de la forma (x2,y2) que se interpretará como un punto.En el segundo caso el arco termina en el segmento que une al centro (X,Y) con el punto (x2,y2).
    vectores Determina que el lado inicial y final del arco se obtenga de dos vectores que parten del centro del arco y no de dos puntos del plano.
    ancho

    Es el ancho o grueso del trazo en píxeles. El valor por defecto es 1.

    Se recomienda utilizar poco los anchos diferentes de 1 pues ralentizan el dibujo.
    relleno Si el selector relleno está activado, el programa rellena el interior del arco.
    texto

    Es una etiqueta que acompaña al objeto gráfico y se escribe cerca de su posición o algo que puede  considerarse como su posición.  Los textos por defecto se dibujan en el mismo color que el objeto gráfico.

    Los textos pueden tener varias líneas y además pueden incluir valores numéricos variables (ver Textos).

    El valor por defecto es vacío.

  • Relleno 2-D

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

    El panel de configuración específico del tipo relleno tiene este aspecto:

    graficos_relleno

    Como puede verse, se trata únicamente de un punto y un color. El punto funciona como la semilla o punto inicial de un proceso de relleno o coloreado, que llena, con el color seleccionado, la región cerrada dentro de la cual se encuentra el punto. Los gráficos que son de fondo no cuentan como fronteras para el relleno, a menos que el relleno mismo sea de fondo.

    El único campo específico de este objeto es:

    expresión

    Es un campo de texto. Su contenido es un par ordenado de expresiones que indica el punto que será la semilla del relleno.

    En la siguiente escena podemos ver una aplicación del objeto relleno para colorear diversas provincias de España.

    (Puedes descargar esta escena desde este enlace)

    Aquí podemos ver la escena en otra ventana

    Lo que se ha hecho es utilizar una imagen sin color y poner una semilla en cada región que quiere colorearse. El código correspondiente está reflejado en la siguiente imagen:
    Código del uso de relleno

    El relleno de una región arbitraria a partir de una semilla, en general, tiene una carga computacional alta, especialmente en el contexto de DescartesJS, ya que internamente requiere ir comparando pixel a pixel si está en la región deseada y cambiar su atributo color en caso de que sea así. Por ello, en los casos que sea posible, es aconsejable usar el relleno de polígonos ya que esta acción sí está incluida en el propio Canvas. Por esta particularidad la opción de añadir el rastro del relleno está deshabilitada para el intérprete en javascript.

    Adicionalmente, nos encontramos con un problema al utilizar el navegador Chrome cuando una escena que usa el relleno se ejecuta en local. Chrome restringe la modificación de los atributos de los píxeles en local por cuestiones de seguridad. En la siguiente imagen podemos observar la escena anterior al abrirla en local con Chrome (a la izquierda) y con Firefox (a la derecha). En Chorme la escena no termina de cargarse y consultando la consola podemos observar el error que acontece, sin embargo en Firefox no existe esa restricción y la escena también funciona en local.
    Error en Chrome

    Desde Descartes, obviamente, no es posible salvar esta restricción, por tanto si se desea trabajar en local con Chrome únicamente procede que el desarrollador de la escena use otros objetos cartesianos para conseguir el mismo objetivo. Una posibilidad es la superposición o capas de imágenes que es lo que se realiza en la siguiente escena:

    (Puedes descargar esta escena desde este enlace)

    Aquí podemos ver la escena en otra ventana

    Aquí se han superpuesto imágenes en las que está coloreada una de cada provincia que se desea colorear. El código correspondiente es:
    Capas de imágenes

    Veamos una aplicación del relleno en un objeto educativo:

    (Puedes descargar esta escena desde este enlace)

    Aquí podemos ver la escena en otra ventana

  • Texto 2-D

    3 abril, 2014 Autor/a: Montserrat Gelis Bosch
    Sin comentarios todavía

    El panel de configuración específico del tipo Texto tiene este aspecto:

    graficos_texto

    La siguiente tabla explica los campos específicos.

    Campo Descripción
    expresión

    Es un campo de texto. Su contenido debe ser un par ordenado de expresiones que indica la posición donde se ubicará el texto. La primera expresión indica el número de píxeles hacia a derecha y la segunda el número de píxeles hacia abajo tomando como origen la esquina superior izquierda del espacio en el que se sitúa el texto.
    texto

    Es el texto a escribir

    Los textos pueden tener varias líneas y además pueden incluir valores numéricos variables (ver Textos). El valor por defecto es vacío.
    decimales Es el número de decimales con los que se escribirán los números incluidos en el texto.
    Puede ser cualquier número o expresión. Al evaluarse se redondea para decidir el número de decimales. Su valor por defecto es 2.

  • Curva 2-D

    3 abril, 2014 Autor/a: Montserrat Gelis Bosch
    Sin comentarios todavía

    El panel de configuración específico del tipo curva tiene este aspecto:

    graficos_curva

    La siguiente tabla explica los campos específicos.

    Campo Descripción
    expresión

    Es un campo de texto cuya expresión debe tener la forma (f(t), g(t)), donde f y g son funciones cualesquiera del parámetro t.
    parámetro Debe ser una sola palabra, de preferencia corta. Por defecto es t. El programa dibujará el polígono con vértices: (f(t),g(t)) para t entre el primero y el último de los valores del intervalo, con incrementos iguales a la longitud del intervalo entre el número de pasos. No confundir este parámetro con el correspondiente a las familias.
    intervalo Debe contener dos expresiones ti y tf reales entre corchetes y separadas por una coma, es decir, [ti,tf]. El intervalo por defecto es [0,1]. El parámetro recorre el intervalo definido entre ti y tf en el número de pasos especificado.
    pasos El parámetro recorre el intervalo definido entre el primero y el segundo valor en el número de pasos especificado y dibuja la curva como un polígono con vértices (f(t),g(t)) con
    t = ti,
    t = ti+(tf-ti)/pasos,
    t = ti+2*(tf-ti)/pasos,
    etc… hasta llegar a
    t = ti+pasos*(tf-ti)/pasos = tf.
    En otras palabras, pasos es el número de subintervalos iguales en que se divide el intervalo. y el parámetro pasa por los extremos de los subintervalos.
    ancho

    Es el ancho o grueso del trazo en píxeles. El valor por defecto es 1.
    Se recomienda utilizar poco los anchos diferentes de 1 pues ralentizan el dibujo.
    relleno Si el selector relleno está activado, el programa rellena el interior de la curva (considerada como un polígono). Si la curva no tiene un interior bien definido, el resultado puede ser algo extraño.

  • Ecuación 2-D

    3 abril, 2014 Autor/a: Montserrat Gelis Bosch
    Sin comentarios todavía

    Los lugares geométricos determinados por las ecuaciones en x e y dan lugar a gráficos. Estos son los gráficos del tipo ecuación.

    El panel de configuración específico del tipo ecuación tiene este aspecto:

    panel_graficos

    La siguiente tabla explica los campos específicos.

    Campo Descripción
    expresión Es un campo de texto. Su contenido debe ser una ecuación en las variables x e y. Las posibilidades serían :
    y=f(x) Se calcula la abscisa x de cada pixel, se calcula y=f(x) y se dibujan líneas entre un punto y el siguente. La gráfica no se dibuja en los valores x que no están en el dominio de f. Cuando hay una singularidad entre dos pixeles consecutivos, el programa busca los valores límite por la izquierda y la derecha y los usa para dibujar, pero no une la gráfica entre ellos.
    x=f(y) Se calcula la ordenada y de cada pixel, se calcula x=f(y) y se dibujan líneas entre un punto y el siguente. La gráfica no se dibuja en los valores y que no están en el dominio de f .Cuando hay una singularidad entre dos pixeles consecutivos, el programa busca los valores límite por la arriba y abajo y los usa para dibujar, pero no une la gráfica entre ellos.
    f(x,y)=g(x,y) El programa define F(x,y) = f(x,y) – g(x,y) y busca las soluciones de F(x,y)=0 usando un método de Newton en dos dimensiones. Cuando encuentra un cero de F, sigue la trayectoria de ceros en las direcciones perpendiculares al gradiente.La búsqueda de ceros se inicia en una red de 8 x 8 puntos distanciados unos de otros por lo menos 3 pixeles. Si una ecuación tiene curvas cerradas como soluciones y éstas son pequeñas o tiene muchas soluciones a poca distancia unas de otras, es posible que el programa no las encuentre todas.
    ancho

    Es el ancho o grueso del trazo en píxeles. El valor por defecto es 1. Se recomienda utilizar poco los anchos diferentes de 1 pues ralentizan el dibujo.
    relleno+

    Si la ecuación es de la forma y=f(x) y el selector relleno+ está activado, el espacio entre el eje x y la gráfica, arriba del eje x, se colorea del color seleccionado.

    Si la ecuación es de la forma x=g(y) y el selector relleno+ está activado, el espacio entre el eje y y la gráfica, a la derecha del eje y, se colorea del color seleccionado.
    relleno-

    Si la ecuación es de la forma y=f(x) y el selector relleno- está activado, el espacio entre el eje x y la gráfica, abajo del eje x, se colorea del color seleccionado.

    Si la ecuación es de la forma x=g(y) y el selector relleno- está activado, el espacio entre el eje y y la gráfica, a la izquierda del eje y, se colorea del color seleccionado.
    visible Si este selector está seleccionado, en la parte inferior de la escena aparecerá un campo de texto donde se ve la expresión de la ecuación en el mismo color de la gráfica y con el color de fondo de la escena. Por defecto este selector aparece activado. Si hay varias ecuaciones o curvas en una escena, abajo de ella aparecen los campos de texto de todas y cada una de las que son visibles. Si son muchas los campos pueden resultar demasiado pequeños, por lo que se recomienda no dejar visibles los campos de texto de más de tres o cuatro ecuaciones o curvas.
    editable Este campo sólo se puede utilizar si visible está selecionado. Cuando editable se activa, el contenido del campo de texto que aparece bajo la escena con la ecuación (o curva) puede ser modificado por el usuario. Esta opción puede ser útil cuando se desea que el alumno practique la escritura de fórmulas.

    Nota: Hay un pequeño conjunto de formas canónicas de ecuaciones de la recta y de las curvas, que reciben un tratamiento especial. Su utilidad radica en que los dibujos se realizan muy rápidamente. Estas son las formas canónicas que Descartes reconoce:

    y=m*x+b

    x=m*y+a

    A*x+B*y=C

    e=sqrt((x-Fx)^2+(y-Fy)^2/(d+(x-Fx)*cos(t)+(y-Fy)*sen(t))

    e=sqrt((x-Fx)^2+(y-Fy)^2)/(d-((x-Fx)*(Dx-Fx)+(y-Fy)*(Dy-Fy))/d)

    Si se escriben exactamente tal como aparecen (sin cambiar una sola letra), el programa las reconoce y hace el dibujo de la recta o curva cónica con un procedimiento muy rápido. La única utilidad de estas formas radica en la rapidez con que se dibujan, cosa que puede aprovecharse en alguna escena específica sobre rectas y cónicas para mejorar la interactividad (ver por ejemplo Excentricidad y Directriz).

     

Página anterior Página siguiente