Manipular Geogebra con Javascript

bouncing ball

sábado 9 de xaneiro do 2016, por Horacio González Diéguez

Descargar Bouncing Ball de Horacio González Diéguez en formato Zip (5.7 KB)

CC by-nc-sa

Cargar una applet de Geogebra con Javascript

1. Cargar a librería deployggb

<script type="text/javascript" src="http://www.geogebratube.org/scripts/deployggb.js"></script>

2. Crear un elemento HTML para albergar cada applet

<div id="container_2409323"></div>

3. Cargar cada un dos applets de Geogebra e inicializalos despois de cargar a páxina

<script type="text/javascript">
        // Carga del Applet
        var ggbApplet_2409323 = new GGBApplet({material_id: "2409323"}, true);
        // Inicialización tras la carga de la pájina usando Jquery
        $(document).ready(function(){
                ggbApplet_2409323.inject('container_2409323', 'preferHTML5');
        });
</script>

Fonte: https://www.geogebra.org/wiki/en/Reference:Applet_Embedding

Script para facer unha pelota saltarina

1. En primeiro lugar creamos unha variable para almacenar una instancia de la función setInterval que nos permitira executar una función a intervalos regulares de tempo e así controlar o applet de Geogebra.

// variable para almacenar o obxecto Interval
var repite;

2. A continuación creamos variables para almacenar e controlar a posición e movemento da circunferencia: Raio, posición, aceleración e velocidade. Para definir as tres últimas utilizaremos vectores de dúas dimensións polo que faremos uso do obxecto Vector tomado da seguinte librería: Vector (2D)

// Pelota
var raio;
var posicion = new Vector();
var aceleracion = new Vector();
var velocidade = new Vector(0.1 - Math.random()*0.4, 0);

3. Para dotar de aparencia física ao movemento introduciremos a aceleración da gravidade e certo rozamento, definíndoos tamén como vectores. Para atopar mais información sobre o uso de vectores na definición de forzas e movementos en programación se pode consultar os capítulos I e II do libro The nature of code.

// Gravedade
var gravedade = new Vector(0.0, -0.1);
// coeficiente de absorción
var absorcion = 0.95;

4. Crearemos una función para ler a información procedente do applet coa funcion leePropiedades() e despois iniciar a animación establecendo que a función avanza() debe executarse a intervalos de 20 milisegundos.

// iniciar a animación
function iniciar() {
        leePropiedades();
        repite = setInterval(function (){
                avanza();
        }, 20);
}

5. Crearemos unha función para interromper a animación eliminando o intervalo almacenado na variable repite.

// parar a animación
function parar() {
        clearInterval(repite);
}

6. Crearemos unha función para ler a información procedente do applet que garde as coordenadas do punto O na variable posicion, que garde o valor do vector v na variable velocidade e que garde o valor do deslizador r na variable raio. Para isto será necesario facer referencia ao obxecto no que está almacenado o applet, ggbApplet, e facer uso dos métodos getXcoord("element") getYcoord("element") e getValue("element"). Todos os métodos do obxecto GGBApplet estan descritos na documentación de Geogebra.

// recoller a posición da circunferencia o seu raio e o valor do vector velocidade do applet
function leePropiedades() {
        posicion.cambia(ggbApplet.getXcoord("O"), ggbApplet.getYcoord("O"));
        velocidade.cambia((ggbApplet.getXcoord("B") - ggbApplet.getXcoord("A"))/4, (ggbApplet.getYcoord("B") - ggbApplet.getYcoord("A"))/4);
        raio = ggbApplet.getValue("r");
}

7. A función avanza é o motor na animación, recalcula cada 20 milisegundos os valores da aceleración, da velocidade e da posición do centro da circunferencia, comproba se a circunferencia chocou coa liña de terra e se saíu fora dos marxes do debuxo coas funcións comprobaChoque() e comprobaFora() e finalmente envía os novos valores de posición ao applet utilizando a función cambiarPropiedades().

// calcula o movemento da circunferencia
function avanza() {
        aceleracion.engade(gravedade);
        velocidade.engade(aceleracion);
        posicion.engade(velocidade);
        aceleracion.multiplicaPor(0);
        comprobaChoque();
        comprobaFora();
        cambiarPropiedades();
}

8. A función comprobaChoque() comproba se a circunferencia tocou a liña de terra mirando se a posición do centro circunferencia no eixo Y e menor ou igual que o seu raio. Se a circunferencia tocou a liña de terra, a función reduce e cambia o sentido da velocidade.

// comproba o choque coa liña de terra
function comprobaChoque() {
        if (posicion.y <= raio) {
                posicion.y = raio;
                velocidade.y *= -1 * absorcion;
                velocidade.x *= absorcion;
        }
}

9. A función comprobaFora() comproba se o centro da circunferencia está dentro dos marxes do debuxo mirando se a posición do centro circunferencia no eixo X e menor que 17 mai o raio e maior que -2 menos o raio. Se a circunferencia está fora dos marxes do debuxo, a función cambia a sua posición situándoa no lado contrario da mesma, para que ao continuar movéndose volva a entrar nos marxes do debuxo.

// comproba que a circunferancia esta fora dos marxes do debuxo
function comprobaFora() {
        if (posicion.x > 17 + raio) {
                posicion.x = (-2) - raio;
        } else if (posicion.x <  (-2) - raio) {
                posicion.x = 17 + raio;
        }
}

10. Finalmente a función cambiarPropiedades() lee a información contida na variable posicion de javascript e a garda no applet do mesmo xeito que facía á función leePropiedades(). É necesario facer referencia ao obxecto no que está almacenado o applet, ggbApplet, e facer uso do método setCoords("element", val, val). Todos os métodos do obxecto GGBApplet estan descritos na documentación de Geogebra.

// move a circunferencia
function cambiarPropiedades() {
        ggbApplet.setCoords("O", posicion.x, posicion.y);
}

11. Para rematar, despois de cargar e inicializar o applet unha vez a páxina web estea lista, usaremos jQuery para engadir un botón que teña asociada a función iniciar() co fin de activar a animación e para asociar ao click do rato no applet á interrupción da animación mediante función parar() .

$(document).ready(function(){
        ggbApplet.inject('applet_container_2409323', 'preferHTML5');
        $("#applet_container_2409323").after('<form><input type="button" value="iniciar" onclick="iniciar();"></form>');
        $("#applet_container_2409323").mousedown(function() {
                parar();
        });
});

Ver o código fonte orixinal: http://www.vhplab.net/squelettes/js/bouncing-ball.js

Aplicando este mesmo código a unha construcción mais complexa en perspectiva cónica os resultados son fabulosos. Con todo, a complexidade do debuxo compromente enormemente a eficiencia da animación e roza o límite da capacidade dos applets de Geogebra. A seguinte animación foi presentada no contexto dun curso de Xeometría Dinámica con Geogebra organizado por la Asociación Galega de Ensinantes de Debuxo e Artes, en Santiago de Compostela, en febreiro de 2014.

Pelota saltarina en perspectiva

Archivo para a práctica:

Zip - 909 bytes
<!DOCTYPE html>
<html>
        <head>
                <script type="text/javascript" language="javascript" src="jquery-2.0.3.min.js"></script>
                <script type="text/javascript" language="javascript" src="vector-gl.js"></script>
                <script type="text/javascript" src="http://www.geogebratube.org/scripts/deployggb.js"></script>
                <script src="http://www.vhplab.net/squelettes/js/jquery-1.8.3.min.js" type="text/javascript"></script>
                <script src="http://www.vhplab.net/squelettes/js/vector-gl.js" type="text/javascript"></script>
        </head>
        <body>
                <div id="container_2409323"></div>
                <script type="text/javascript">
                //<![CDATA[
                        $(document).ready(function(){
               alert('hola');
               });
                //]]>
                </script>
                <form>
                          <input type="button" value="Init" onclick="">
                </form>
        </body>
</html>

Referencia bibliográfica

“The nature of code”, Daniel Siffman, Theoklesia LLC; Edición, Grand Rapids, Michigan, USA, 2012. [ISBN 978-3-8228-7000-6]

2015 VHPLab. I 2014 I 2013 I
Español I English