GeoJS: Llença’t a programar en JavaScript!

Llançament de pes femení (font: http://www.boston.com/sports/blogs/bigshots/2009/03/big_shots_for_march_10_2009.html#photo4 )Has fet mai llençament de pes? Saps quina trajectòria segueix la bola?

Treu-te un pes de sobre i llença’t a programar en JavaScript per visualitzar la trajectòria dins de Geogebra. Podràs preveure on caurà el pes o a quina alçada arribarà. Preparat? Llestos? Ja!

Guió de la sessió presencial: Llença’t a programar en JavaScript!

iniAbans de començar

Fitxa Didàctica (general)

Proposta de Dossier per a l’Alumne (.pdf)

  • Cal estar familiaritzat amb el JavaScript dins de Geogebra. Si no és així, es recomana fer primer l’activitat Hola món! i les altres prèvies.
  • Obre el Geogebra amb la Zona Gràfica, el Full de Càlcul i l’editor de JavaScript (com en aquesta imatge, +info).
  • Pla de treball:
  • Mira d’assolir els reptes que hi ha a continuació tu sol/a, i si no saps com fer-ho, mira les idees. Si encara et cal una mica més d’ajuda, pots fer una ullada a les pistes.
  • Els docents disposeu d’informació sobre l’estructura de les activitats i d’una Fitxa Didàctica general.

petjadaPas 1: Dibuixa la trajectòria del pes

Ja saps quina trajectòria segueix? Pots començar el teu programa dibuixant la trajectòria i així més tard hi podràs destacar alguns punts d’aquesta (com ara la màxima alçada).

  • interrogantPregunta 1: Quina trajectòria segueix la bola d’un llençament de pes? De què depèn?
  • puzzleRepte 1: Fer un programa que demani les dades de velocitat i angle inicial per mostrar-les de nou a l’usuari.
    • Obre l’editor de JavaScript (recorda que has de tenir l’entorn com en aquesta imatge, si no és així mira aquestes indicacions), i crea un programa que:
      • obtingui la velocitat inicial (en m/s) preguntant-la a l’usuari a través d’una finestra emergent.
      • obtingui l’angle inicial (en graus) d’una cel·la del full de càlcul de Geogebra.
      • mostri al full de càlcul la velocitat inicial introduïda.
      • mostri en una finestra emergent l’angle inicial.
    • Es suggereix fer una plantilla al full de càlcul del Geogebra tipus:
      • A B
        1 Entrada
        2 Angle (graus): 30
        3
        4 Sortida
        5 Velocitat (m/s):
      • Pots usar “copiar i enganxar” per transferir-hi totes les dades de cop. Si teniu problemes amb alguna versió de Geogebra per a fer el “copiar i enganxar”, podeu fer-lo primer sobre un programa de full de càlcul (ex. LibreOffice Calc) i després copiar columna a columna des d’aquest full de càlcul al full de càlcul del Geogebra.
    • definitionLabel (font: http://findicons.com/icon/156894/label )  Variable: en programació s’usa la paraula variable per referir-se a un símbol (l’identificador de la variable, que pot constar de diversos caràcters) que pot emmagatzemar un valor, i aquest es pot modificar o consultar al llarg del programa. Els identificadors no poden començar per un número i no poden tenir espais en blanc, accents, ni caràcters especials (ex. no poden contenir %, $, &, @, #, +, -, /, {, ]… però sí poden contenir guions baixos _).  +info
    • bombetaIdees:
      • Exemple per obtenir/mostrar una dada amb una finestra emergent:
        /* Preguntar amb una finestra emergent */
        var nombre = prompt("Entra un nombre:")
        
        /* Mostrar en una finestra emergent */
        alert("El nombre és:" + nombre)
        
      • Exemple per obtenir/mostrar una dada amb el full de càlcul:
        /* Definim g per abreujar ggbApplet */
        const g = ggbApplet
        
        /* Obtenir dada del full de càlcul cel·la A1 */
        var valor = g.getValue("A1")
        
        /* Mostrar el triple a la cel·la A2 */
        g.evalCommand("A2 =" + (valor * 3) )
        
        • El prefix ggbApplet permet enviar manipular el Geogebra des del codi en JavaScript.
        • En els següents exemples, si cal manipular el Geogebra des del codi, s’usarà g com a abreviatura (suposant que a l’inici del programa en JavaScript, s’ha definit com en aquest exemple).
      • Recorda com pots executar el teu programa per provar el que has fet.
  • interrogantPregunta 2: Si considerem que el llençador està de peus sobre l’origen de coordenades, la trajectòria del pes s’inicia al (0,0)? Al programa anterior, li cal alguna altra dada d’entrada?
  • puzzleRepte 2: Dibuixar el vector velocitat a partir de la posició de sortida del pes.
    • Modifica el tu programa per a que demani l’altura inicial (l’alçada de l’esportista) i dibuixi el vector velocitat inicial a partir de la posició inicial del pes.
    • Per comoditat, pots fer que totes les dades es demanin i es mostrin a través del full de càlcul. D’aquesta manera, quan facis proves consecutives del teu programa, no et caldrà tornar a introduir-les totes en finestres emergents.
    • definitionLabel (font: http://findicons.com/icon/156894/label )  Depurar: en programació s’usa la paraula depurar (o debug en anglès) per referir-se a buscar errors en un programa quan no fa el que es desitja. Una tècnica bàsica de depuració consisteix a mostrar el valor de les variables amb els càlculs intermitjos per comprovar que el contenen és coherent amb el que s’espera que tinguin.
    • bombetaIdees:
      • Exemple d’ús de funcions i constants matemàtiques:
        var result = Math.sin(Math.PI * Math.pow(3,2))
        
        • Totes les funcions trigonomètriques funcionen amb radians.
        • En JavaScript no s’usa “^2” per elevar al quadrat, sinó que cal cridar a la funció potència (pow) indicant la base i l’exponent.
        • Aquí podeu trobar informació sobre totes les funcions matemàtiques del mòdul Math.
      • Exemple per dibuixar un vector en Geogebra:
        /* Comanda de Geogebra: vector (3,5)
           dibuixa un vector des del (0,0)  */
        g.evalCommand("v=(3,5)")
        
        /* Podem construir la comanda amb el
           resultat de càlculs del programa */
        var w_x = 2
        var w_y = Math.sqrt( w_x )
        g.evalCommand("w=("+w_x+", "+w_y+")")
        
        /* Si volem dibuixar el vector a
           partir d'un altre punt, cal usar
           la comanda Vector[ p_ini, p_end ] */
        g.evalCommand("u=Vector[(0,2),(3,8)]")
        
        • Geogebra interpreta que definim un vector quan usem un identificador en minúscula (ex. “v”). Si executem el mateix codi usant un identificador en majúscula (ex. “V”), aleshores Geogebra interpreta que definim un punt.
        • En Geogebra podem emprar els dos punts “:” o l’igual “=” per definir elements. Per exemple, el vector v també es podia haver definit posant “v: (3, 5)”.
        • La funció evalCommand permet enviar comandes a Geogebra des del codi en JavaScript.
        • En els següents exemples, si tan sols s’indica una comanda de Geogebra, és possible que es mostri directament sense la resta del codi en JavaScript (suposant que en el vostre programa usareu evalCommand per executar-la).
    • lupaPistes:
      • angleRadians = angleGraus * PI / 180
        v_x = v_inicial * cos( angleRadians )
        v_y = v_inicial * sin( angleRadians )
        mostra les variables al full de càlcul i comprova que
          el contingut és correcte
        h és l'alçada inicial
        v = Vector[ (0, h), (v_x, v_y+h) ]
        
  • puzzleRepte 3: Dibuixar la trajectòria del pes.
    • definitionLabel (font: http://findicons.com/icon/156894/label ) Funció: en programació s’usa la paraula funció per referir-se a un conjunt d’instruccions que s’executen cada cop que s’invoca el nom de la funció. Convé que aquest nom (o identificador) indiqui què efectuen aquestes instruccions. +info
    • Crea una funció que donades les dades inicials recollides anteriorment, dibuixi la trajectòria del pes a la zona gràfica (p.ex. es pot dir dibuixaTrajectoria). El teu programa principal doncs, demanarà primer les dades i després cridarà aquesta funció per tal que es dibuixi la trajectòria.
    • Pots partir de les equacions paramètriques de les coordenades en funció del temps (G és la constant de la gravetat):
       \begin{cases} x = v_x \cdot t \\ y = v_y \cdot t - \frac{1}{2} \cdot G \cdot t^2 \end{cases}

      • definitionLabel (font: http://findicons.com/icon/156894/label ) Constant: en programació s’usa la paraula constant per referir-se a un símbol (l’identificador) que pot emmagatzema un valor inicial, el qual es pot consultar al llarg del programa però no modificar. +info
    • interrogantPregunta 3: Pots expressar la coordenada vertical en funció de l’horitzontal y=f(x) enlloc del temps?
    • bombetaIdees:
      • Exemple funció que rep informació (paràmetres):
        /* Definim una funció amb dos paràmetres */
        function dibuixaRecta( m, n ) {
          /* Aquesta funció dibuixa una recta r amb
             el pendent m i l'ordenada en origen n */
          g.evalCommand("r: y = " + m + "*x + "+ n)
        }
        
        /* Programa principal */
        
        var pendent = prompt("Pendent?")
        
        /* Cridem la funció */
        dibuixaRecta( pendent, 3 )
        
        • És un conveni que totes les instruccions de dins d’una funció vagin indentades (amb un espai a l’inici que es pot fer amb la barra espaiadora o usant la tecla de tabulació).
        • Convé definir totes les funcions a l’inici del programa, abans de ser usades.
        • Si es defineix una funció però no es crida, les instruccions que conté no s’executen.
        • Fixeu-vos que la comanda de Geogebra per dibuixar la recta, comença amb l’identificador d’aquesta recta r. Convé posar identificador a tots els objectes que dibuixeu a Geogebra.
      • Exemple definició/ús d’una constant (un valor que no canviarà durant tot el programa):
        /* Definició d'una constant */
        const K = 3
        
        /* Ús d'una constant */
        alert("Doble de la constant: " + (2*K) )
        
        • Al fer un programa, hi ha el conveni d’usar majúscules en els noms (identificadors) de les constants.
        • Convé definir totes les constants a l’inici del programa, i en qualsevol cas, cal definir-les abans de ser usades.
    • lupaPistes:
      • trajectoria: y= velocitat_y·x -(1/2)·g·x^2 + alturaPersona
        
  • puzzleRepte 4: Comprovar l’angle inicial de la trajectòria usant les eines de Geogebra
    • En executar el teu programa al repte anterior, haurà quedat dibuixada la trajectòria del pes a la zona gràfica. Ara, usa les eines de mesura de Geogebra per validar que l’angle inicial correspon a l’indicat per l’usuari.
    • lupaPistes:
      • 1. Crea un punt sobre la paràbola:
        1.1. Eines punts / Eina "Punt sobre objecte"
        1.2. Fes un clic sobre la paràbola
        2. Mesura el pendent en el nou punt:
        2.1. Eines rectes / Eina "Tangents"
        2.2. Fes clic en el punt i després a la paràbola
        2.3. Eines mesura / Eina "Angle"
        2.4. Fes clic a l'eix OX i després a la recta tangent
        3. Mesura el pendent a l'inici del llençament
        3.1. Mou el punt sobre la paràbola fins l'inici
        3.2. Fes la conversió entre graus i radians
        

petjadaPas 2: Identifica els extrems de la trajectòria

Ara que ja tens la trajectòria, pots identificar els extrems d’aquesta, com ara en quin punt el pes caurà a terra o assolirà la màxima altura.

  • puzzleRepte 1: Calcular i dibuixar on cau el pes.
    • Crea una funció que donades les dades que necessiti (hauràs de pensar quines), retorni a quina distància horitzontal caurà el pes. El programa principal cridarà a aquesta funció i guardarà el resultat en una variable. Aleshores, dibuixarà un punt sobre la trajectòria en el moment que el pes toqui el terra (d’aquesta forma, pots comprovar visualment si el càlcul és correcte).
    • definitionLabel (font: http://findicons.com/icon/156894/label )  Comentari: és convenient afegir comentaris al codi d’un programa per fer més entenedora la seva estructura (aquests ajuden a entendre el programa i no són processats per l’ordinador). Fixa’t que en els exemples mostrats s’usen aquests comentaris entre els símbols /* … */ per indicar les idees principals. +info
    • bombetaIdees:
      • Exemple de definició i crida d’una funció que retorna un valor:
        /* Definició */
        function doble( original ) {
            var resultat = original * 2
            return resultat
        }
        
        /* Crida */
        var r = doble( 3 )
        
        /* Mostrem el resultat en finestra emergent */
        alert("Resultat: "+r)
        
      • interrogantPregunta 4: quan talla l’eix de les X una paràbola?
      • Exemple per dibuixar un punt en Geogebra:
        /* Comanda de Geogebra: punt (3,5) */
        g.evalCommand("P=(3,5)")
        
        /* Podem construir la comanda amb el
           resultat de càlculs del programa.
           Exemple punt Q=(3, 9) */
        var q_x = 3
        var q_y = Math.pow( q_x , 2 )
        g.evalCommand("Q=("+q_x+", "+q_y+")")
        
        • Geogebra interpreta que definim un punt quan usem un identificador en majúscula (ex. “P”).
        • Recordeu que en JavaScript no s’usa “^2” per elevar al quadrat, sinó que cal cridar a la funció potència (pow) indicant la base i l’exponent.
    • lupaPistes:
      • Equació y=f(x):
         f(x) = v_y/v_x · x- (G/(2·v_x^2))·x^2 + h
         f(x) = 0
          (v_y/v_x) · x - (G/(2·v_x^2))·x^2 + h = 0
         -(v_y/v_x) · x + (G/(2·v_x^2))·x^2 - h = 0
         (G/(2·v_x^2))·x^2 -(v_y/v_x) · x   - h = 0
        
        Eq.2n grau: (només arrel positiva)
         x = ( (v_y/v_x)
               + sqrt( (v_y/v_x)^2 - 4·(-h)·(G/(2·v_x^2)) )
             )
             / (2* (G/(2·v_x^2)) )
         x = ( (v_y/v_x) +sqrt( (v_y/v_x)^2 +(h·G /v_x^2)))
             / ( G/v_x^2)
        
  • puzzleRepte 2: Calcular i dibuixar on el pes assoleix la màxima altura.
    • Crea una funció que donades les dades que necessiti, retorni les coordenades del punt en que el pes assoleix la màxima altura. El programa principal cridarà a aquesta funció i guardarà el resultat en dues variables. Aleshores, dibuixarà el punt corresponent sobre la trajectòria.
    • bombetaIdees:
      • Exemple de definició i crida d’una funció que retorna dos valors:
        /* Definició */
        function divisio( dividend, divisor ) {
            var quocient = parseInt(dividend / divisor)
            var residu   = dividend % divisor
            return [quocient, residu]
        }
        
        /* Crida */
        var [q, r] = divisio( 5, 2 )
        
        /* Mostrem resultat en finestra emergent */
        alert("Quocient="+q+" ; Residu="+r)
        
      • interrogantPregunta 5: en quina coordenada x té el vèrtex una paràbola?
    • lupaPistes:
      • Equació y=f(x):
         f(x) = v_y/v_x · x- (G/(2·v_x^2))·x^2 + h
        
        Coordenada X del vèrtex d'una paràbola:
         (usant fórmula de memòria)
         x = -b / 2a
         x = -(v_y/v_x) / ( -2·(G/(2·v_x^2)) )
         x =  (v_y/v_x) / (    (G/(  v_x^2)) )
         x =  (v_y · v_x) / G
        
        Coordenada X del vèrtex d'una paràbola:
         (usant la derivada)
         f'(x) = v_y/v_x - (G/(2·v_x^2))·2*x
         f'(x) = v_y/v_x - (G/(v_x^2))·x
         f'(x) = 0
         0 = v_y/v_x - (G/(v_x^2))·x
         (G/(v_x^2))·x = v_y/v_x
         x = (v_y/v_x)·(v_x^2 / G)
         x = (v_y · v_x) / G
        
        Coordenada Y del vèrtex d'una paràbola:
         y = v_y/v_x · x - (G/(2·v_x^2))·x^2 + h
        
  • puzzleRepte 3: Descobrir quin és l’angle inicial que fa que el pes arribi més lluny.
    • Fes proves amb el programa que has creat per veure, donada una velocitat inicial fixa de 10m/s, amb quin angle s’ha de llençar el pes per a què arribi el més lluny possible.
    • interrogantPregunta 6: Com afecta l’angle inicial a la distància on cau el pes?
  • interrogantPregunta 7: Com afecta la velocitat inicial a la distància on cau el pes?

interrogantPregunta de Síntesi: En veuries capaç de descriure un parell de situacions on et podrien ser útils les tècniques que has après en aquesta activitat? Descriu-les per tal de compartir-les en grup.

mesI després…

GeoJS-LlencamentPes-FinalFelicitats! Has acabat la teva pràctica de JavaScript dins de Geogebra.

Així que amb aquesta activitat has après com:

  • Obrir l’entorn de programació JavaScript dins de Geogebra.
  • Agafar i mostrar dades a través de finestres emergents i del full de càlcul.
  • Dibuixar des del JavaScript a la zona gràfica i fer comprovacions amb les eines de Geogebra.
  • Fer càlculs usant funcions matemàtiques.
  • Definir i cridar funcions que rebin i retornin informació.

Ara pots continuar amb altres activitats, o pots posar el teu programa a prova amb dades diferents de les que segurament has previst. En alguns casos, pots deixar documentat en quin rang de dades funciona el teu programa, i en altres casos pots modificar el programa per fer que accepti un nombre major de casos. Endavant!

  • Repte Extra 1: Fer que el programa accepti un angle obtús.
  • Repte Extra 2: Fer que el programa accepti un angle recte.
  • Repte Extra 3: Fer que el programa no dibuixi quan el pes està sota en nivell del terra ni tampoc abans del llençament.

feather Autoria: Manel Martínez i Pascual, i Jordi Campos i Miralles.

Licencia de Creative CommonsPodeu usar el contingut i modificar-lo d’acord amb la Llicència Creative Commons Reconeixement-CompartirIgual 4.0.

Anuncis

Deixa un comentari

Fill in your details below or click an icon to log in:

WordPress.com Logo

Esteu comentant fent servir el compte WordPress.com. Log Out / Canvia )

Twitter picture

Esteu comentant fent servir el compte Twitter. Log Out / Canvia )

Facebook photo

Esteu comentant fent servir el compte Facebook. Log Out / Canvia )

Google+ photo

Esteu comentant fent servir el compte Google+. Log Out / Canvia )

Connecting to %s