{"id":826,"date":"2014-04-04T22:04:22","date_gmt":"2014-04-04T21:04:22","guid":{"rendered":"http:\/\/descartesjs.org\/documentacion\/?p=826"},"modified":"2021-08-07T16:20:44","modified_gmt":"2021-08-07T15:20:44","slug":"animaciones-las-ilusiones-de-koffka-y-de-haze","status":"publish","type":"post","link":"https:\/\/reddescartes.org\/documentacion\/animaciones-las-ilusiones-de-koffka-y-de-haze\/","title":{"rendered":"Animaciones – Las ilusiones de Koffka y de Haze"},"content":{"rendered":"

El anillo de Koffka<\/b><\/span><\/h2>\n

Esta ilusi\u00f3n la realizaremos utilizando tres animaciones.<\/p>\n

Espacio. <\/b>Creamos una escena de 600×400 y un espacio 2D, tal como aparece en la imagen.<\/p>\n

\"koffka1\"<\/p>\n

<\/b>Controles.<\/b> Usaremos tres controles interiores tipo bot\u00f3n (n1, n2, y n3): el primer bot\u00f3n (n1) es para iniciar la segunda animaci\u00f3n (la primera se ejecuta al inicio de la escena), el segundo bot\u00f3n (n2) es para ejecutar la tercera animaci\u00f3n y el tercero es un bot\u00f3n de inicio (regresa a la primera animaci\u00f3n).<\/p>\n

\"koffka2\"<\/p>\n

Bot\u00f3n Ilusi\u00f3n 1. <\/b>Su configuraci\u00f3n se muestra en la imagen anterior. Observemos que se dibuja si cumple con la siguiente condici\u00f3n: (d=0) & (k2=0) & (h1<1.1), donde d y h1 son variables de desplazamiento horizontal y vertical respectivamente, y k2 es una variable cuyos valores (0 \u00f3 1) determinan si se inicia o no la animaci\u00f3n dos. Los colores quedan a nuestra discreci\u00f3n.<\/p>\n

Bot\u00f3n Ilusi\u00f3n 2. <\/b>Tiene las mismas propiedades del anterior, excepto por el nombre (Ilusi\u00f3n 2), el color, el dibujar-si<\/b> que es igual a (d>.3) & (k1=1) y el par\u00e1metro<\/b> de c\u00e1lculo que es k2=1 \\nn=55.<\/p>\n

Bot\u00f3n inicio. <\/b>Tiene las mismas propiedades de los anteriores, excepto por el nombre (Inicio), el color, el dibujar-si<\/b> que es igual a (h2<.1)&(k2=1) y el par\u00e1metro<\/b> de c\u00e1lculo que es k2=0 \\nk1=0 \\nn=0 \\nd=0 \\nh1=5 \\nh2=5.[1]<\/a><\/p>\n

Algoritmo de inicio. <\/b>Creamos tres variables: h1 = 5, h2 = 5 y n = 0. Las dos primeras las usaremos en la construcci\u00f3n de la gr\u00e1fica y variar\u00e1n en la animaci\u00f3n. La \u00faltima es una variable de control para las animaciones.<\/p>\n

\"koffka3\"<\/p>\n

Gr\u00e1ficos.<\/b> Utilizaremos siete gr\u00e1ficos: dos pol\u00edgonos, cuatro arcos y un texto.<\/div>\n
<\/div>\n
\"koffka4\"<\/div>\n
\n

Pol\u00edgonos. <\/b>Corresponden a los dos rect\u00e1ngulos sobre los que se superpondr\u00e1 el anillo de Koffka. El primero estar\u00e1 definido por las coordenadas:<\/p>\n

(-3-d, 5.5)(-d, 5.5)(-d, -3)(-3-d, -3)(-3-d, 5.5)<\/p>\n

Su color es la combinaci\u00f3n RGB 555555 (ver imagen siguiente)[2]<\/a>.<\/p>\n

\"koffka6\"<\/p>\n

El segundo pol\u00edgono (del lado derecho) estar\u00e1 definido por las coordenadas:<\/p>\n

(3+d, 5.5)(d, 5.5)(d, -3)(3+d, -3)(3+d, 5.5) y color gris claro.<\/p>\n

Observemos que los rect\u00e1ngulos incluyen, en su definici\u00f3n, la variable d<\/b>. Eso significa que si d>0 entonces el primer pol\u00edgono se desplazar\u00e1 a la izquierda y el segundo a la derecha.<\/p>\n


\n\"koffka7\"El anillo.<\/b> Lo construiremos con cuatro arcos para poder realizar las animaciones correspondientes. Habr\u00e1, entonces, dos arcos mayores y dos arcos menores. Los arcos menores tendr\u00e1n un relleno igual al color del rect\u00e1ngulo donde se superponen (ver imagen derecha) y los arcos mayores un color gris uniforme.<\/p>\n

En la siguiente tabla se indican las propiedades de cada arco:<\/span><\/p>\n

\"koffka8\"<\/a><\/p>\n

Observemos que los arcos dependen de la variable <\/span>d<\/b> para su desplazamiento horizontal y de las variables <\/span>h1<\/b> y <\/span>h2 <\/b>para el desplazamiento vertical. En la primera y segunda animaci\u00f3n h1 = h2 (ver <\/span>escena al final de este apartado), en la tercera sus valores son diferentes.<\/span><\/p>\n

\u00a0El texto.<\/b> Insertamos un texto para el t\u00edtulo de la escena. El tama\u00f1o, tipo de letra y color, es a nuestra discreci\u00f3n.<\/p>\n

<\/b>Animaciones.<\/b> Usaremos tres animaciones en una sola, utilizando controles booleanos. En la imagen siguiente podemos observar, inicialmente, que:<\/p>\n

Se encuentran activadas las casillas Animaci\u00f3n, auto <\/b>y repetir<\/b>. Esta activaci\u00f3n es parte clave para nuestras animaciones. Auto<\/b> permite que la escena se inicie con la primera animaci\u00f3n y repetir<\/b> permite que el ciclo hacer \u2013 mientras<\/b> se repita indefinidamente. Es decir, n<\/b> inicia en cero y se incrementa hasta un valor de 80; luego se repite continuamente este proceso.<\/p>\n

\"koffka9\"<\/p>\n

Durante la ejecuci\u00f3n de los ciclos se realizan las siguientes animaciones:<\/p>\n

Animaci\u00f3n 1. <\/b>Esta animaci\u00f3n se logra a trav\u00e9s de las instrucciones:<\/p>\n

h1=h1-.1*(n<40)<\/p>\n

h2=h2-.1*(n<40)-.1*(n>70)*(n<81)*(k2=1)<\/p>\n

Recordemos que \u00a0definimos h1 = h2 = 5 y n = 0, esto significa que los arcos se encuentran en la ordenada cinco. Al ser verdadera la expresi\u00f3n n<40<\/b>, entonces, durante el primer proceso de auto animaci\u00f3n<\/b> los valores de h1 y h2 se reducir\u00e1n en una d\u00e9cima por cada ciclo, hasta que n sea igual a 40; es decir, los valores de h1| y h2 se reducir\u00e1n en 40*.1 = 4, hasta quedar en la ordenada uno. La animaci\u00f3n consiste en deslizar verticalmente hacia abajo el anillo de Koffka. Cada vez que hagamos clic en el bot\u00f3n inicio, h1 y h2 volver\u00e1n a tomar el valor de cinco y n el de cero, repitiendo la animaci\u00f3n.<\/p>\n

Animaci\u00f3n 2. <\/b>Esta animaci\u00f3n se logra a trav\u00e9s de la instrucci\u00f3n:<\/p>\n

d=d+.1*(n>50)*(n<55)*(k1=1)<\/p>\n

El valor de la variable d<\/b> se incrementa cuando k1 = 1; es decir, cuando hacemos clic sobre el bot\u00f3n \u201cIlusi\u00f3n 1\u201d. Este incremento es s\u00f3lo de cinco d\u00e9cimas \u00bfpor qu\u00e9?<\/p>\n

Animaci\u00f3n 3. <\/b>Esta animaci\u00f3n es m\u00e1s interesante, en tanto que junta de nuevo arcos y pol\u00edgonos y, desplaza la segunda mitad del anillo hacia abajo. Se logra a trav\u00e9s de las instrucciones:<\/p>\n

h2=h2-.1*(n<40)-.1*(n>70)*(n<81)*(k2=1)<\/p>\n

d=d-.1*(n>55)*(n<60)*(k2=1)<\/p>\n

Observemos que la variable d<\/b> vuelve a recuperar las cinco cent\u00e9simas perdidas en la animaci\u00f3n anterior y que h2 se reduce en la misma cantidad. Si analizamos con cuidado ambas instrucciones, notaremos que:<\/p>\n