Posicionar puntos en coordenadas de la ventana en Geogebra

Este tutorial lo he compilado en Latex también: Descárgalo aquí

La idea original para esta construcción está tomada de esta entrada de Michel Horvath. Si quieres descargar un recurso donde se haya implementado, puedes hacerlo aquí.

Y esta construcción que ves a continuación lo hace de forma aleatoria.

Introducción

Cuando queremos situar un punto en Geogebra lo hacemos empleando el sistema de posicionamiento de Geogebra. Este sistema se basa en el eje de coordenadas del programa, es decir, los puntos se posicionan respecto a los ejes x e y. Sin embargo, hay ocasiones en que queremos colocar los puntos en función de la ventana visible, por ejemplo, para posicionar un punto en una región visible.

En resumen, para crear un sistema de posicionamiento en píxeles en Geogebra debemos relacionar dos sistemas de posicionamiento: el sistema propio del programa (ejes coordenados) y el sistema de la pantalla (píxeles).

Sistema de coordenadas de Geogebra

Para saber el ancho y alto de la pantalla en un momento dado necesitamos las esquinas de la ventana activa (en coordenadas de Geogebra). Usaremos la función Corner con los números del 1 al 4 para obtener estas coordenadas.

Ejecuta los comandos siguientes en Geogebra usando la barra de entrada:

corner1 = Corner(1)
corner2 = Corner(2)
corner3 = Corner(3)
corner4 = Corner(4)

Hemos definido las variables corner1, corner2, corner3 y corner4 que representan las cuatro esquinas de la ventana de Geogebra. Observa cómo se disponen:

Ahora que tenemos las esquinas podemos calcular el ancho total de la ventana pero no en pixeles sino en coordenadas de Geogebra. Esto lo hacemos usando el comando distance que nos da la distancia entre dos puntos. Vuelve a usar la barra de entrada de Geogebra para introducir los comandos siguientes:

distX = Distance(corner1, corner2)
distY = Distance(corner1, corner4)

Y por último vamos a almacenar en estas variables los valores de las coordenadas x e y de las esquinas. Las usaremos para posicionar puntos correctamente.

valuexcorner1 = x(corner1)
valueycorner4 = y(corner4)

El comando corner(5) crea un punto con las coordenadas de la venta. Vamos a ejecutar un comando en Geogebra para almacenar los valores de la venta.

window = Corner(5)

Ya podemos calcular el alto y ancho de la ventana con estos comandos (en píxeles)

winHeight=y(window)
winWidth=x(window)

Factores de conversion

Dado que queremos hacer una conversión entre ambos sistemas de posicionamiento, lo que pretendemos es transformar las coordenadas de un punto de la ventana (y por tanto en píxeles) en un punto en coordenadas de Geogebra (por tanto en coordenadas de los ejes de coordenadas de Geogebra). Supongamos que quiero colocar un punto en el centro de la pantalla. Como conozco el tamaño de la venta en pixeles, sé que el punto se encuentra en:

\[ \displaystyle \Big(\frac{winWidth}{2}, \frac{winHeight}{2} \Big)=(x_1, y_1) \]

Pero ese sistema en píxeles no me vale para posicionar el punto. Necesito convertirlo a coordenadas de Geogebra. Fijémonos en la coordenada \(x_1\) del punto y establezcamos la siguiente proporción:

\[ \displaystyle \frac{x_1 \hspace{2mm} pixeles}{winWidth \hspace{2mm} pixeles }=\frac{x \hspace{2mm}unidades \hspace{2mm}ejes }{distX \hspace{2mm} unidades\hspace{2mm}ejes} \]

Despejando en la igualdad tenemos que el valor que estamos buscando es:

\[ \displaystyle x=\frac{x_1 \cdot distX }{winWidth} \]

Luego es fácil ver que el factor de conversión para pasar de coordenadas en pixeles a coordenadas en los ejes es:

$ \displaystyle factorX=\frac{distX}{winWidth}$

Análogamente:

\(\displaystyle factorY=\frac{distY}{winHeight}\)

Dado que ambos factores son iguales, sólo vamos calcular uno de ellos al que llamaremos \(factorXY\):

Ejecuta ahora el comando:

factorXY=distX / winWidth

Empleando Javascript

Ahora puedes usar Javascript en un elemento del escenario (por ejemplo un botón) para crear nuevos elementos y posicionarlos en relación a la ventana.

```javascript
//definimos el applet 
var ap=ggbApplet;

//obtengo las unidades en píxeles
var ancho=ap.getValue("winHeight");
var alto=ap.getValue("winWidth");

//obtengo los factores de conversión calculados en Geogebra (pixels/unidad real)
var factorX=ap.getValue("factorXY");

//Las esquinas contienen las coordenadas de los extremos usadas para situar el punto
var valuexcorner1=ap.getValue("valuexcorner1");
var valuexcorner4=ap.getValue("valuexcorner4");

//dados dos valores x,y en píxeles, los convertimos a coordenadas de los ejes de Geogebra haciendo la siguiente conversión. 
x=valorxdeEsquina1+x+factorXY;
y=valorydeEsquina4-y*factorXY;
```

Ahora que lo hemos entendido, para facilitarnos el proceso, crearemos una función en Javascript que hace el proceso más sencillo. La función recibe las coordenadas de los puntos x e y en píxeles y las convierte a coordenadas de los ejes.

function pointToWindow(x, y){
var point= new Array();
//definimos el applet 
var ap=ggbApplet;

//obtengo las unidades en píxeles
var ancho=ap.getValue("winHeight");
var alto=ap.getValue("winWidth");

//obtengo el factor de conversión calculado en Geogebra (pixels/unidad real)
var factorXY=ap.getValue("factorXY");

//Las esquinas contienen las coordenadas de los extremos 
var valuexcorner1=ap.getValue("valuexcorner1");
var valueycorner4=ap.getValue("valueycorner4");

//Dados dos valores x,y en píxeles, los convertimos a coordenadas de los ejes de Geogebra haciendo la siguiente conversión. 
point[0]=valuexcorner1+x*factorXY;
point[1]=valueycorner4-y*factorXY;

return(point)
}

Si quieres crear una sencilla aplicación para generar puntos aleatorios que siempre se sitúen en la zona visible lo puedes hacer con siguiente código. Y el ejemplo para descargar lo puedes encontrar aquí: Aplicación en GeoGebra

var ap=ggbApplet;

//obtengo las unidades en píxeles de la ventana
var winWidth=ap.getValue("winWidth");
var winHeight=ap.getValue("winHeight");

//cordenadas del punto que quiero situar en la pantalla (en pixeles)
var x=getRandomArbitrary(0, winWidth);
var y=getRandomArbitrary(0, winHeight);

//lo transformo a coordenadas de los ejes de Geogebra
var point= new Array();
point=pointToWindow(x,y);
//alert(point[0]+" "+ point[1]);

//situamos el punto en Geogebra
var nuevoPunto=ap.evalCommandGetLabels("("+point[0]+","+point[1]+")");

//ocultamos la etiqueta del punto
ap.evalCommand("ShowLabel("+nuevoPunto+","+false+")");



function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}


function pointToWindow(x, y){
var point= new Array();
//definimos el applet 
var ap=ggbApplet;

//obtengo las unidades en píxeles
var ancho=ap.getValue("winHeight");
var alto=ap.getValue("winWidth");

//obtengo el factor de conversión calculado en Geogebra (pixels/unidad real)
var factorXY=ap.getValue("factorXY");

//Las esquinas contienen las coordenadas de los extremos 
var valuexcorner1=ap.getValue("valuexcorner1");
var valueycorner4=ap.getValue("valueycorner4");

//Dados dos valores x,y en píxeles, los convertimos a coordenadas de los ejes de Geogebra haciendo la siguiente conversión. 
point[0]=valuexcorner1+x*factorXY;
point[1]=valueycorner4-y*factorXY;

return(point)
}