Saltar a contenido

Magic Juggling

Animación

Construcción en p5.js

See the logo study in P5

Estudio de la animación en GeoGebra

Magic Juggling: Una Ilusión Óptica en Movimiento

Introducción

Magic Juggling es una animación que juega con la percepción visual del espectador. A primera vista, parece que una serie de bolas se mueven en líneas rectas por la pantalla. Sin embargo, al observar con más detalle, se revela que estas bolas en realidad están siguiendo una trayectoria circular que rota. Este efecto crea una ilusión óptica fascinante, donde el movimiento rectilíneo aparente se combina con un patrón circular subyacente.

Estudio en GeoGebra

Antes de implementar la animación en código, realicé un estudio en GeoGebra para analizar las trayectorias y comprender cómo se produce esta ilusión óptica. En GeoGebra, exploré:

  • La relación entre el radio del círculo principal y el radio de las trayectorias de las bolas.
  • Cómo la rotación del círculo afecta la posición de las bolas.
  • La superposición de líneas rectas y círculos para crear el efecto visual.

Este análisis me permitió trasladar los principios geométricos a una implementación en p5.js, donde desarrollé la animación interactiva.

Concepto de la Animación

La animación se basa en los siguientes elementos clave:

  1. Círculo Principal: Un círculo grande que actúa como eje de rotación.
  2. Bolas en Movimiento: Ocho bolas que giran alrededor del círculo principal, siguiendo trayectorias circulares.
  3. Ilusión Óptica: Aunque las bolas se mueven en círculos, su movimiento combinado con la rotación del círculo principal crea la ilusión de que se desplazan en líneas rectas.

Code (p5.js)

Text Only
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
  Radio=300
  Radio2=Radio-30
  RadioC=13
  Radio3=Radio2+RadioC

 opacidad=255;
  let button;
  let button2;
  var mostrar=false;
  var mostrar2=true;
  paso=0

  function mostrarlinea(){
  if(mostrar) mostrar=false;
  else mostrar=true;
 }

  function mostrarlinea2(){
    if(mostrar2) mostrar2=false;
    else mostrar2=true;
}


  function setup() {
  createCanvas(2*Radio+100, 2*Radio+100);
  button = createButton('Mostrar líneas');
  button2 = createButton('Mostrar círculo');
  button2.position(130, 2*Radio+100-40);
    button.position(20, 2*Radio+100-40);

    button.mousePressed(mostrarlinea);
    button2.mousePressed(mostrarlinea2);

  }

  function draw() {
  background(0);
  fill(255,0,0)
  ellipse(Radio, Radio, 2*Radio3, 2*Radio3);
  fill(0)

  if(mostrar){
    for(t=0;t<1;t=t+0.01){
      strokeWeight(t);
      line(0,0,(2*Radio),(2*Radio))
      line(Radio-(Radio*tan(PI/8)),0,Radio+(Radio*tan(PI/8)),(2*Radio))
      line(Radio,0,Radio,(2*Radio))
      line(Radio+(Radio*tan(PI/8)),0,Radio-(Radio*tan(PI/8)),(2*Radio))
      line((2*Radio),0,0,(2*Radio))
      line(0,Radio-(Radio*tan(PI/8)),(2*Radio),Radio+(Radio*tan(PI/8)))
      line(0,Radio,(2*Radio),Radio)
      line(0,Radio+(Radio*tan(PI/8)),(2*Radio),Radio-(Radio*tan(PI/8)))
  }
  }

  strokeWeight(1);
  xdibujo=Radio+Radio2/2*cos(paso)
  ydibujo=Radio+Radio2/2*sin(paso)



  paso=paso+PI/180

  if(mostrar2){
    noFill()
  ellipse(xdibujo, ydibujo,Radio2,Radio2);
  }

  //ellipse(Radio, Radio, Radio2, Radio2);

  fill(255)
  for(i=0;i<8;i++){
    xdibujo2=xdibujo+(Radio2/2)*cos(i*PI/4-paso)
    ydibujo2=ydibujo+(Radio2/2)*sin(i*PI/4-paso)
  ellipse(xdibujo2, ydibujo2, 2*RadioC, 2*RadioC)
  }
  }