Taller 3 Aspectos técnicos de DGPad Imantación Programación de listas- Widgets - Atributos condicionales

Transcripción

1 Taller 3 Aspectos técnicos de DGPad Imantación Programación de listas- Widgets - Atributos condicionales Actividad 1. Imantación y programación booleana de puntos. (Simulación para media) Actividad de simulación, realizada por el profesor para la clase Queremos hacer una simplificación de esta figura: Se trata de hacer reflexionar a los alumnos sobre el hecho que si H es ortocentro de ABC, entonces todo punto de la figura es ortocentro de los otros tres porque las rectas quedan fijas. Matemáticamente, se juega con la simetría de la relación de perpendicularidad. Visualmente vamos a preparar una figura con puntos que se mueven sobre una configuración fija. Etapa 1: Imantación previa 1.a. construir un triángulo MNP y U su ortocentro (con las 3 alturas). Construir U como intersección de dos alturas, luego construir la tercera altura. 1.b. Tomar un punto H (rojo y relleno), e imantar H a los puntos M, N, P, U con una fuerza de 500 pixeles. Etapa 2: construcción de los vértices condicionados (o booleanos). Ahora queremos construir A, B, C respectivamente sobre M, N y P, salvo si A está sobre el punto. Por ejemplo A estará sobre M salvo si H está sobre M, caso en el que A estará sobre H. Como los puntos están imantados, la distancia de H al punto sobre el cual se encuentra es nula. Podemos entonces utilizar esta propiedad de distancia nula para condicionar su posición. En otras palabras, A es el punto U*(d(H,M)==0)+M*(!d(H,M)==0) Es decir A está en U si H está en M, si no A está en M 2.a. Organización de la escritura (a causa de un bug de DGPad sobre la ambigüedad en las expresiones) Para el punto A Ocultar P y colocar H sobre P. Crear un punto A. «Tocar» el punto y abrir la expresión (calculadora), suprimir las coordenadas (el punto A desaparece) y escribir la expresión anterior (utilizando el teclado matemático) sin él! que no existe. Colocar el! con el teclado estándar después de escribir todo. Validar. 2.b. Hacer lo mismo para B y C (con el teclado estándar se puede copiar/pegar la fórmula y modificar los términos, lo cual evita mover H y ocultar el punto que está debajo). Para B : U*(d(H,N)==0)+N*(!d(H,N)==0) Para C : U*(d(H,N)==0)+N*(!d(H,N)==0) 2.c. Ocultar finalmente los 4 puntos M, N, P, U. (Mover H para ocultar el punto que está debajo). Construir y colorear el triángulo ABC.

2 Actividad 2. El objeto «lista» de DGPad. Programación de listas (simulación en secundaria) Las expresiones de DGPad pueden contener programas. Trabajaremos con un solo ejemplo, para mostrar el método y abordar el tratamiento de listas. El tema: la modelación del corazón de girasol. Está dada por los puntos Pk de afijo C ke ik donde está relacionado con el número áureo por 2, aproximadamente 1 137,5. 1.a. Comenzar creando un cursor llamado and, de 120 a 160. Será un ángulo en grados que habrá que transformar en radianes para la escritura polar compleja en forma cartesiana. En el siguiente cuadro está la escritura de la construcción. La estudiaremos y comentaremos en detalle. var tab=[];for (var k=1;k<=500;k++){var u=0.2*sqrt(k);var a=k*ang*π/180; var v=[u*cos(a),u*sin(a)];tab.push(v);};tab La sintaxis de una expresión-programa es la siguiente Se crea una lista interna (en JavaScript), todo el JS está disponible antes del último punto y coma (con simplificaciones como sqrt() o π en lugar de Math.sqrt() y Math.PI). Esta lista será enviada a DGPad en la variable colocada después del último «;». 1.b. Escribir esa expresión, eventualmente en un archivo texto y copiar/pegar (con el teclado estándar). Si no tiene problemas de sintaxis la expresión se convierte en una lista de 500 puntos. Aparecen entonces dos herramientas: : Seleccionar el segmento, luego ir al inspector de objetos: allí se puede cambiar el tamaño de los segmentos y los puntos (a la izquierda segmento está en 0, a la derecha segmento está en 0,2 y punto en 0).

3 1.c. Usar el cursor Actividad 3. Los Widgets Un widget es la reunión de tres herramientas: HTML (botón JS), KaTeX (botón TeX) y la posibilidad de lanzar scripts (botón exp). Como pueden mezclarse los tres, es necesario adquirir práctica. Por el momento no hay una documentación suficiente de esas herramientas. Para esta tercera actividad nos limitaremos a explorar el TeX, y enriquecerlo con HTML (color). TeX La herramienta más simple es el LaTeX para escribir algunas fórmulas matemáticas. KaTex es una versión reciente en JavaScript, 30 veces más rápida que MathJax que era la versión anterior pero que aun no tiene todos los ítems LaTeX (en particular no contiene \overrightarrow{}, para vectores de dos letras como Escriba aquí la ecuacio n.). También pueden incluirse valores numéricos en un texto en TeX, con una variable entre dos %. Vamos a realizar en detalle esta figura donde N está imantado por las dos soluciones de la igualdad de razón: 1.a. Realizar la figura de base con N imantado por las dos soluciones. 1.b. Añadir un widget que comprende el siguiente código (sin Enter) que contiene dos veces un código de color, luego una línea de TeX con el valor aproximado. <span style="font-size:24px;color:#760011"> $\frac{am}{ab}\approx\frac{%d(a,m)%}{%d(a,b)%}\approx%d(a,m)/d(a,b)%$</sp an> <span style="font-size:24px;color:#006633"> $\frac{an}{ac}\approx\frac{%d(a,n)%}{%d(a,c)%}\approx%d(a,n)/d(a,c)%$ </span>

4

5 Insertar una figura DGPad en un widget. Probablemente uno de los intereses didácticos más inmediatos de los widget, por ejemplo para dar un trabajo una figura que hay que construir cuyo modelo puede ser manipulable, sin poder copiarlo. Principio: Hacer la figura, Exportarla en versión «html+js» Copiar TODO el código Insertarlo en un widget Nota : si se desea poner un título como el de la imagen precedente, añadir una línea del tipo: <span style='font-size:28px;color:#aa0000'>applet DGPad dans DGPad</span> Actividad 4. Las propiedades condicionales Proponemos esto sólo como información, para comentarlo si tenemos tiempo. La figura manipulable está en la carpeta. Estas son las principales propiedades parametrables A.setHidden(E1); Poly1.setHidden(E1); Poly1.setOpacity(E3); B.setOpacity(E3); Poly1.setRGBColor(r,g,b); S1.setPrecision(E5); A.setFontSize(E6); B.setShowName(E7); C.setxy(E8,C.gety()); S1.setSize(E9); " haga clic para ver el programa" En la expresión programa no se cambia de línea Siempre terminar con un comentario entre comillas que es el cuerpo visible de la expresión en la página DGPad.