Familias de gráficos

¿Qué es un Control Tipo Gráfico?

Un control tipo gráfico en DescartesJS es un punto interactivo que puede moverse libremente por el espacio o restringirse a seguir una trayectoria específica. A diferencia de los controles numéricos, que ajustan valores mediante pulsadores o barras, los controles gráficos ofrecen una experiencia más intuitiva al permitir arrastrar elementos directamente con el ratón o en pantallas táctiles.
Para agregar un control gráfico, se oprime el botón + en el selector Controles y se selecciona la interfaz gráfico. Por defecto, los identificadores de estos controles empiezan con la letra g.

Parámetros del Control Gráfico

id: Identificador para referenciar el control (ej. g1).
espacio: Menú para escoger el espacio donde aparecerá el control.
expresión: Coordenada inicial del control, ej. (0,0).
tamaño: Radio en píxeles del círculo que representa al control.
constricción: Una de las propiedades más potentes. Es un campo donde se introduce una ecuación o inecuación que restringe el movimiento del control. Esto obliga al punto a "moverse" sobre una curva o dentro de una región.
x^2 + y^2 = 4 restringirá el control a una circunferencia de radio 2. y = x^2 o, equivalentemente, y - x^2 = 0 restringirá el control a una parábola. x^2 + y^2 <= 4 permitirá que el control se mueva libremente solo dentro de un círculo de radio 2 (compruébalo con el objeto interactivo de este apartado).
color, color interior, imagen: Opciones de personalización visual.

Familias de gráficos

Otra de las opciones interesantes de DescartesJS es el uso de familias para el diseño de gráficos. El funcionamiento de esta opción es similar al de un ciclo o bucle tipo Do-While. En DescartesJS, el segundo ejemplo Do-While en código JavaScript sería de la siguiente forma:

En el selector Gráficos hemos creado un rectángulo cuyas coordenadas varían con la variable s (observa que está activada la opción familia). Esta variable toma valores según el intervalo, es decir, desde un valor inicial que hemos llamado Inicia, hasta un valor final Fin, el incremento depende del número de Pasos definidos, que se calcularía así: Incremento = (Fin – Inicia)/Pasos.

Veamos un ejemplo interactivo para un intervalo [0,15] y diferentes valores de la variable Pasos:

Justificación

El uso de escenas interactivas tipo secuencia (como ordenación cronológica, causa-efecto o pasos de un proceso) en educación está ampliamente justificado por su capacidad para mejorar la comprensión, la retención y la participación activa del estudiante. Estas escenas permiten representar el conocimiento de manera estructurada y dinámica, lo cual resulta especialmente útil en áreas donde el orden de los eventos, conceptos o acciones es esencial para la comprensión.

✅ Favorecen el aprendizaje significativo: Al organizar elementos en una secuencia lógica, los estudiantes relacionan la nueva información con conocimientos previos, lo que facilita la construcción de esquemas mentales más sólidos.

✅ Desarrollan habilidades de pensamiento crítico y lógico: Ordenar una secuencia implica analizar, comparar y tomar decisiones, habilidades clave en el pensamiento analítico y en la resolución de problemas.

✅ Mejoran la retención y la memoria a largo plazo: La disposición temporal o secuencial ayuda a los estudiantes a recordar con mayor facilidad procesos, etapas o hechos históricos

Diseño de secuencias en DescartesJS - Parte 1

Ahora, vamos a nuestra actividad. Nuestra tarea es dibujar cuatro rectángulos que se constituirán en los contenedores en los cuales irán en orden secuencial las imágenes. Alguien podría decir que bastaría con dibujar cuatro rectángulos y olvidar lo de las familias, conclusión que es cierta, pero el uso de familias facilita el diseño de esta actividad, tal como lo veremos en la segunda parte.

Es muy importante que hayas practicado con la escena anterior, para comprender cómo generamos los contenedores y, además, que sepas diferenciar las coordenadas relativas de las absolutas. Observa, con cuidado, el video y empieza a diseñar tu secuencia.

Diseño de secuencias en DescartesJS - Parte 2

Es importante que comprendas que todo control gráfico tiene unas coordenadas asociadas. Si el control está identificado (id) como gn, sus coordenadas asociadas son (gn.x,gn.y). El tamaño de 60 para el control gráfico, ahora es comprensible. Obviamente, no nos interesa que el control se muestre en nuestro espacio de trabajo, por ello, dejaremos un valor cero (0) en la casilla dibujar si, que tendrá como efecto la desaparición visual de los controles.

Por otra parte, debemos garantizar que la imagen quede incrustada en alguno de los cuatro contenedores, para lo cual recurrimos al uso de varios condicionales, que fijan las abscisas y ordenadas al centro de los cajones. Observam entonces, con mucho cuidado, el segundo video de esta actividad.

A continuación, presentamos la escena interactiva obtenida según lo explicado en los dos videos.

Herramienta 56 de la caja de herramientas de IA de nuestra Red

¿Quiéres generar secuencias temporales con tres o cuatro momentos? Esta herramienta te ayudará en ello; para ello, haz clic sobre la imagen y sigue estas instrucciones:

1. Elige el número de momentos de la secuencia (3 o 4)
2. Selecciona el estilo artístico, para las imágenes
3. Incluye el tema, para que la IA genere las descripciones de cada momento, o ingresa las descripciones personalizadas (recomendado)
4. Cambia o acepta las imágenes generadas
5. Genera y descarga la secuencia

A continuación, presentamos dos ejemplos generados a partir de descripciones personalizadas. Es importante que sepas que la herramienta en enlazada a la imagen es el modelo premium, usando el modelo gptimage.

Secuencia alfabética

Seguro has notado que hemos llamado esta actividad "Secuencias"; sin embargo, la herramienta 56 habla de "secuencias temporales", denominación que recoge el nombre dado en las primeras plantillas publicadas en la RED. Pero, también has notado, que su campo de aplicación va más allá de lo cronológico. Tal es el caso de la siguiente secuencia, generada con estas cuatro descripciones: Letra G, Letra H, Letra I y Letra J, con estilo Pixar

Secuencia culinaria

Para este ejemplo, usamos estas descripciones: Reunir ingredientes de cocina, Preparar los ingredientes (cortar, picar), Cocinar el plato y Servir y comer, también con estilo Pixar.

En esta cuarta y última parte, agregamos a nuestro chatbot dos botones de descarga del historial en formato HTML y TXT. Incluimos, además, la posibilidad de generar imágenes.

En el siguiente video, puedes ver la explicación, paso a paso, de cómo implementar estas mejoras.