Skip to content

La Espiral de fibonacci

La construcción en GeoGebra

Animación en P5

Code (manim)

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
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
from manim import *

class Fibonacci(MovingCameraScene):
    #Dinuja cada cuadrado size: lado, pos1: movimiento1, pos2.movimiento2
    def sectionSquare(self, size, pos1, pos2, color):
        square = Square(size, fill_opacity=0.3)
        square.set_fill(color = color, opacity = 0.3)
        square.shift(pos1)
        square.shift(pos2)
        #self.play(Create(square))
        self.play(DrawBorderThenFill(square))
        self.writeNumber(size, pos1, pos2)
        return square

  def writeNumber(self, text, pos1, pos2):
      text = Text(str(text), font="Noto Sans")
      text.shift(pos1)
      text.shift(pos2)
      self.play(Write(text))

  def construct(self):
      #construcción de ejes y primera cámara
      self.ejes()

      self.play(self.camera.frame.animate.move_to(RIGHT).move_to(UP).set(width=6))
      #primer y sefgundo cuadrado
      #1
      square1=self.sectionSquare(1, RIGHT*1/2, UP*1/2, '#FF2135')
      self.play(self.camera.frame.animate.move_to(RIGHT).move_to(UP).set(width=6))
      #1
      square2 =self.sectionSquare(1, UP*1/2, RIGHT*3/2, '#FF2135')
      #centramos cámara
      self.play(self.camera.frame.animate.move_to(RIGHT).move_to(UP).set(width=9))
      #2
      square3=self.sectionSquare(2, 2*UP, 1*RIGHT, '#FF2135')

      self.play(self.camera.frame.animate.move_to(0.5*LEFT).move_to(1.5*UP).set(width=11))
      #3
      square4=self.sectionSquare(3, 1.5*UP, 1.5*LEFT, '#FF2135')

      self.play(self.camera.frame.animate.move_to(0.5*LEFT).move_to(DOWN).set(width=16))

      #5
      square5=self.sectionSquare(5, (5/2)*DOWN, LEFT*0.5, '#FF2135')

      self.play(self.camera.frame.animate.set(width=square1.width * 25))

      square6=self.sectionSquare(8, DOWN, RIGHT*6, '#FF2135')

      self.play(self.camera.frame.animate.set(width=square1.width * 60).move_to(square3))

      square7=self.sectionSquare(13, UP*9.5, RIGHT*3.5, '#FF2135')

      self.wait(1)
      self.play(self.camera.frame.animate.set(width=square1.width*15).move_to(square3))

      arco1=Arc(radius=-1, angle=PI, arc_center=[1, 1, 0.])
      self.play(Create(arco1))

      arco2=Arc(radius=2, angle=PI/2, arc_center=[0, 1, 0.])
      self.play(Create(arco2))

      arco3=Arc(radius=3, start_angle=PI/2, angle=PI/2, arc_center=[0, 0, 0.])
      self.play(Create(arco3))


      self.play(self.camera.frame.animate.set(width=square1.width * 25))


      arco4=Arc(radius=5, start_angle=PI, angle=PI/2, arc_center=[2, 0, 0.])
      self.play(Create(arco4))



      self.play(self.camera.frame.animate.set(width=square1.width * 25))


      arco5=Arc(radius=8, start_angle=3*PI/2, angle=PI/2, arc_center=[2, 3, 0.])
      self.play(Create(arco5))


      self.camera.frame.save_state()
      self.play(self.camera.frame.animate.set(width=square1.width * 70))

      #self.play(Restore(self.camera.frame))

      arco6=Arc(radius=13, start_angle=0, angle=PI/2, arc_center=[-3, 3, 0.])
      self.play(Create(arco6))

      self.play(self.camera.frame.animate.move_to(square7))
      self.play(self.camera.frame.animate.set(width=square1.width * 62))

      self.wait(3)



  def ejes(self):
      number_plane = NumberPlane(
          x_range=[-30, 30, 1],
          y_range=[-30, 30, 1],
          background_line_style={
              "stroke_color": '#4e9ed3',
              "stroke_width": 3  ,
              "stroke_opacity": 0.9
          }
      )
      dot = Dot(ORIGIN)
      self.add(number_plane, dot)

  def fibonacci(num):
      arr = [0,1]
      while(len(arr)<num):
          arr.append(0)
          if(num==0 or num==1):
              return 1
          else:
              arr[0]=0
              arr[1]=1
              for i in range(2,num):
                  arr[i]=arr[i-1]+arr[i-2]

Code (P5)

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
//I modified an original idea found here: https://github.com/AdityaRavi/Infinity-Fibonacci-Spiral Animation
//Adding the code for numbers and different colors

const CANVAS_WIDTH = 600
const CANVAS_HEIGHT = 600
let fibs = [1,1]
//la escala controla el tamaño de toda la animación. Se va haciendo pequeña a medida que nos
//acercamos al centro de la espiral
let scale = 1
let minScale
const colors = ['#e2711d', '#ff9505', '#ffb627', '#ffc971']

function setup () {
  createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT)
  angleMode(DEGREES)
  //incializamos los números de Fibonacci
  initFibs()
  setMinScale()
}


function draw () {
  //traslado el lugar de dibujo al centro de coordenadas
  translate(CANVAS_WIDTH/2, CANVAS_HEIGHT/2)

  //dibujo de las espirales
  for (let i = 0; i < fibs.length; i++) {
    const scaledFib = fibs[i]*scale*60
    const color = colors[i%4]
    fill(color)

    rect(0, 0, scaledFib, scaledFib)
    arc(scaledFib, 0, 2*scaledFib, 2*scaledFib, 90, 180)
    fill('black')
    textSize(scaledFib/4)
    textAlign(CENTER, CENTER);
    if(i%4==0){
      text(fibs[i], scaledFib/2, scaledFib/2);
    }
    if(i%4==1){
      rotate(90)
      text(fibs[i], scaledFib/2, -scaledFib/2);
      rotate(-90)
    }
    if(i%4==2){
      rotate(180)
      text(fibs[i], -scaledFib/2, -scaledFib/2);
      rotate(-180)
    }
    if(i%4==3){
      rotate(270)
      text(fibs[i], -scaledFib/2, scaledFib/2);
      rotate(-270)
    }

    fill(color)

    translate(scaledFib, scaledFib)
    rotate(-90)
  }


  if (scale <= minScale) {
    fibs = [1,1]
    initFibs()
    scale = 1
  } else {
    scale *=0.991
  }

}

//función recursiva que añade un nuevo número de fibonacci sumando
//los dos anteriores
function addFib () {
  const fibLen = fibs.length
  fibs.push(fibs[fibLen-1] + fibs[fibLen-2])
}


function initFibs () {
  for(let i = 0; i < 15; i++) {
    addFib()
  }
    setMinScale()
}

function setMinScale () {
  const fibLen = fibs.length
  minScale = fibs[fibLen-10]/fibs[fibLen-1]
}