bouncing ball
1. Cargar a librería deployggb
<script type="text/javascript" src="https://cdn.geogebra.org/apps/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
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:
<!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="https://cdn.geogebra.org/apps/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>“The nature of code”, Daniel Siffman, Theoklesia LLC; Edición, Grand Rapids, Michigan, USA, 2012. [ISBN 978-3-8228-7000-6]