Clase 2. Controles gráficos, constantes y puntos.

Desarrollo

1. Ejecutemos el Gestor de escenas Descartes: crea un nuevo archivo llamado baricentro.html y guárdalo en la carpeta Unidad02 (no olvides recordar la ubicación donde vas recopilando tus evidencias de aprendizaje).
2. Personaliza la escena cambiando el color de fondo, desactivando los ejes, etc. Es importante que conozcas los diferentes caminos que puedes seguir para desarrollar una escena. Conforme avancemos en el curso podrás usar las herramientas que consideres de acuerdo a tus necesidades.

3. Observa la escena anterior, en ella existen tres puntos movibles, estos puntos se denominan Controles gráficos, y en nuestra escena fungen como vértices del triángulo, permitien cambiar su tamaño y posición.

   En el siguiente video se explica cómo añadir Controles gráficos. Presta atención a aquellos parámetros que son suceptibles de modificarse.

   Panel Controles: Controles gráficos.

   Una vez que hayas finalizado la explicación del video, agreguemos tres controles gráficos: A, B y C; elimina los controles numéricos que se crean junto con cada control gráfico; posiciona los controles de tal manera que formen un triángulo. En el caso de la escena anterior las coordenadas iniciales de cada control son las siguientes: Para el control A (-1.5,3), para B (-3,0) y para C (0,0).

4. El siguiente paso es unir los controles gráficos con segmentos para que se trace el triángulo, recuerda que un segmento esta formado por dos puntos, el inicial y el final; en este caso, los puntos son las coordenadas de los controles gráficos, por ejemplo: para agregar un segmento que vaya del control A al control B, el punto inicial sería (A.x,A.y) y el final (B.x,B.y). Construye los tres segmentos y comprueba que al arrastrar un control, los segmentos también cambian de posición y se sigue formando el triángulo. A.x es el valor que tiene el control A en x,A.y el valor del control A en y.

   

5. ¡Muy bien! Ahora calculemos los puntos medios. Para realizar los cálculos haremos uso de un auxiliar de Descartes llamado constante, en el siguiente video podrás observar el funcionamiento de este auxiliar con mayor detenimiento.

   Panel Auxiliares: Constantes y variables.

   Vamos a dibujar el segmento que va del punto A al punto medio del segmento BC (que es el lado opuesto al vértice A), necesitamos las coordenadas del punto medio del segmento BC. En una variable llamada PmBC.x guardaremos el valor en x de nuestro punto; para obtenerlo, hay que sumar el valor de B en x (B.x) más el valor en C en x (C.x) y dividirlo entre dos.

   Para obtener el valor del punto medio en y sumamos el valor de B en y (B.y) más el valor del control C en y (C.y) y dividimos entre dos.

   Dibuja el segmento que va de A al punto medio de BC, y presiona Aceptar.

   

6. ¡Excelente! Ahora construiremos cuatro constantes: dos para guardar las coordenadas del punto medio del segmento AB, y dos para el punto medio del segmento AC, la evaluación de las constantes tendrá que ser siempre.

   

7. Una vez que hayas finalizado la construcción de las constantes puedes dibujar las dos medianas que faltan, la que va del control B al punto medio del segmento AC, y la que va del control C al punto medio del segmento AB.

   

8. Ahora sí vamos a calcular el baricentro; como sabes, el baricentro es el punto de intersección de las medianas. Agrega dos constantes: una para calcular la coordenada en x del punto -a esta primera llámala baricentro.x- es en la que se calcula el valor en x del baricentro, y a la otra, para calcular su valor en y, llamémosla baricentro.y.

   Podemos obtener la coordenada en x del baricentro, restándole al valor en x del control A el punto medio del segmento BC en x, el resultado de eso lo dividimos entre 3, y sumamos el valor del punto medio en x del mismo segmento BC. Repite el procedimiento para calcular el valor en y del baricentro.

   

9. Por último desde el panel Gráficos agregaremos un punto, cuyas coordenadas serán: (baricentro.x,baricentro.y)

   

   Para auxiliarte en el procedimiento de cómo agregar un punto ponemos a tu disposición el siguiente video:

   Panel Gráficos: Puntos y Vectores.

   Personaliza tu escena cambiando colores, agregando textos en los vértices y también una instrucción. Publícala en la carpeta correspondiente.