ProgramaciónTecnologíaWeb

Serie de Fibonacci visualizada en HTML, Python y Flask.

Introducción

La espiral de Fibonacci es una fascinante manifestación visual de la famosa secuencia de Fibonacci. En este artículo, exploraremos cómo crear una representación gráfica de esta espiral utilizando Python y Flask, una poderosa herramienta para construir aplicaciones web.

Descripción de la Aplicación:

Crearemos una aplicación web simple que genera y muestra una espiral de Fibonacci. La aplicación utiliza Python como lenguaje de programación y Flask como el framework web. La espiral se genera dinámicamente basándonos en la secuencia de Fibonacci

Los números de Fibonacci son los números de la siguiente secuencia entera. 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, …….. En términos matemáticos, la secuencia Fn de los números de Fibonacci está definida por la relación de recurrencia.

Fn = Fn-1 + F n-2

con valores semilla : F0 = 0 y F1 = 1.

Cómo esta explicación es un poco abstracta la expresaré en términos más sencillos, así para los mortales:

La secuencia de Fibonacci es una serie de números donde cada número es la suma de los dos anteriores. Comienza con 0 y 1, y los siguientes números son 1, 2, 3, 5, 8, 13, 21, 34, y así sucesivamente. En términos simples, cada número en la serie es la suma de los dos números que lo preceden.

Volviendo a lo complejo, el atractivo de la serie de Fibonacci en relación a modelos de progresión en la naturaleza radica en su presencia en diversos patrones, su relación con la Proporción Áurea, y cómo estos elementos se manifiestan en fenómenos biológicos y geométricos, creando una conexión visual y matemática fascinante.

Este atractivo se debe a varias razones:

  1. Proporción Áurea (Phi): La relación entre números sucesivos en la serie de Fibonacci se aproxima a la Proporción Áurea (Phi), que es aproximadamente 1.618. La Proporción Áurea es conocida por su estética agradable y se encuentra en muchos aspectos de la naturaleza, en el crecimiento de plantas, la disposición de hojas en tallos, la formación de espirales en caracoles y girasoles, entre otros.
  2. Paterns y Simetría: La secuencia de Fibonacci crea patrones interesantes y simetrías en su representación visual, como espirales logarítmicas y formas geométricas. Estos patrones son observados en conchas de moluscos, ramas de árboles, girasoles, etc.
  3. Eficiencia en el Empaquetamiento: En la naturaleza, los patrones de la serie de Fibonacci también se relacionan con la eficiencia en el empaquetamiento. Por ejemplo, la disposición de las semillas en un girasol sigue un patrón de espiral de Fibonacci, lo que maximiza el espacio y la eficiencia en el crecimiento.
  4. Diversidad y Complejidad: La serie de Fibonacci representa un equilibrio entre crecimiento exponencial y restricciones ambientales. Este equilibrio es un tema común en muchos sistemas naturales donde hay una tensión entre el crecimiento ilimitado y los recursos limitados.

La visualización de la serie de Fibonacci a través de la tecnología web combina la elegante simplicidad de los números de Fibonacci con el poder de las herramientas modernas. Utilizando Python y bibliotecas como Matplotlib, podemos calcular y representar gráficamente esta serie de manera interactiva. En este contexto, Python se convierte en la fuerza motriz detrás del cálculo de los términos de la secuencia, mientras que Matplotlib se encarga de la creación visual del gráfico.

Mediante Flask, un marco web ligero de Python, podemos diseñar una interfaz web que presenta la secuencia de Fibonacci de manera dinámica. Al acceder a la página web, el código Python calcula los primeros términos de la secuencia y genera un gráfico interactivo utilizando Matplotlib. Los usuarios pueden explorar visualmente la progresión de la serie y apreciar la conexión matemática y estética que la hace tan intrigante en la naturaleza. Este enfoque proporciona una experiencia práctica y educativa, fusionando la belleza de la serie de Fibonacci con la accesibilidad y la potencia de las herramientas tecnológicas contemporáneas.

Primeramente vamos a crear nuestro proyecto Flask con el editor de código o IDE de tu preferencia, en nuestro caso usaremos PyCharm Pro, e instalaremos las librerías requeridas y crearemos la base para una aplicación web con Flask:

pip install Flask
pip install matplotlib
from flask import Flask, render_template
import matplotlib.pyplot as plt
import io
import base64

app = Flask(__name__)


@app.route('/')
def hello_world():  # put application's code here
    return 'Hello World!'


if __name__ == '__main__':
    app.run()

Entoncdes ya podemos empezar a crear nuestras funciones. La primera. llamada «fibonacci» realiza el cálculo de la serie usando recursividad:

def fibonacci(n):
    fib_sequence = [0, 1]
    while len(fib_sequence) < n:
        fib_sequence.append(fib_sequence[-1] + fib_sequence[-2])
    return fib_sequence

Luego creamos la función «plot_fibonacci» que permite a matplotlib crear una gráfica a partir de los resultados que obtiene de la función fibonacci:

def plot_fibonacci(n):
    sequence = fibonacci(n)
    plt.plot(sequence, marker='o')
    plt.title('Secuencia de Fibonacci')
    plt.xlabel('Índice')
    plt.ylabel('Valor')
    plt.grid(True)
    
    # Guardar la figura en un objeto BytesIO
    img = io.BytesIO()
    plt.savefig(img, format='png')
    img.seek(0)
    
    # Codificar la imagen en base64 para mostrarla en la página web
    encoded_img = base64.b64encode(img.read()).decode('utf-8')
    
    plt.close()  # Cerrar la figura para liberar recursos
    
    return encoded_img

Vamos a utilizar la función «index» para acceder a nuestra aplicación web a través de la ruta «/»:

@app.route('/')
def index():
    n = 10  # Puedes ajustar este valor para obtener más o menos términos de la secuencia
    encoded_img = plot_fibonacci(n)
    return render_template('index.html', image=encoded_img)

Para poder visualizar errores que hayamos cometido agrega el parámetro «debug=True» a la función App-run(). Esto para temas de depuración de código, dedazos, y detalles así. Adicionalmente, cuando debug está habilitado, Flask monitorea los archivos de tu aplicación en busca de cambios y hace recarga automática de la aplicación.

if __name__ == '__main__':
    app.run(debug=True)

Procedemos a crear la carpeta templates en el mismo directorio que tu script Python y crea un archivo llamado index.html dentro de esta carpeta con el siguiente contenido:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secuencia de Fibonacci</title>
</head>
<body>
    <h1>Secuencia de Fibonacci</h1>
    <img src="data:image/png;base64,{{ image }}" alt="Secuencia de Fibonacci">
</body>
</html>

Ejecuta la aplicación desde tu IDE o ve a la URL proporcionada en la consola, que por defual será http://127.0.0.1:5000:

Verás el gráfico creado por matplot para la serie de Fibonacci.

Sin embargo, esto no no ofrece un panorama muy «artístico» de la serie, en la cual podamos ver su efecto geométrico. Así que haremos unos cambio para mejorar nuestros cálculos y la gráfica que extraemos de ella.

Generación de la Secuencia de Fibonacci

  • Mantenemos nuestra función en Python para generar la secuencia de Fibonacci. Comenzamos con los primeros dos números (0 y 1) y continuamos añadiendo números a la secuencia sumando los dos números anteriores.
def fibonacci(n):
    fib_sequence = [0, 1]
    while len(fib_sequence) < n:
        fib_sequence.append(fib_sequence[-1] + fib_sequence[-2])
    return fib_sequence

Creación de la Espiral

  • Utilizamos otra función para generar la espiral en función de la secuencia de Fibonacci. Ajustamos el ángulo y la escala para obtener una representación visualmente atractiva.
def espiral_matplotlib(n):
    fig, ax = plt.subplots()
    ax.set_aspect('equal', 'box')
    ax.axis('off')

    fib_sequence = fibonacci(n)

    # Calcular las coordenadas para la espiral de Fibonacci con un ángulo gradual y desfase
    x = []
    y = []
    for i in range(n):
        angle = i * 0.3 + i * 0.1  # Ajustar el ángulo y el desfase para obtener una espiral asimétrica
        x.append(i * np.cos(angle))
        y.append(i * np.sin(angle))

    ax.plot(x, y, color='SteelBlue', linewidth=2)

    img = io.BytesIO()
    plt.savefig(img, format='png', bbox_inches='tight', pad_inches=0)
    img.seek(0)

    encoded_img = base64.b64encode(img.read()).decode('utf-8')
    plt.close()

    return encoded_img

Configuración de Flask y Visualización en la Web

  • Utilizamos Flask para crear una aplicación web simple. Configuramos una ruta principal que renderiza una plantilla HTML y muestra la espiral generada, y pasamos un valor no muy alto para efectos visualizar el grafico con facilidad (n=20):
from flask import Flask, render_template
import io
import base64
import matplotlib.pyplot as plt
import numpy as np
@app.route('/')
def index():
    n = 20  # Ajusta según sea necesario
    encoded_img = espiral_matplotlib(n)
    return render_template('index.html', image=encoded_img)

if __name__ == '__main__':
    app.run(debug=True)

Plantilla HTML

  • Mantenemos nuestra plantilla HTML básica para mostrar la espiral generada. La imagen de la espiral está incrustada en la página web.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Espiral de Fibonacci</title>
</head>
<body>
    <h1>Espiral de Fibonacci</h1>
    <img src="data:image/png;base64,{{ image }}" alt="Espiral de Fibonacci">
</body>
</html>

Ejecutamos la aplicación desde el IDE o desde a la URL proporcionada en la consola haciendo control + click, que por defual será http://127.0.0.1:5000:

n = 14
n = 20
n = 25
n = 27

Conclusión

Este proyecto ilustra cómo la secuencia de Fibonacci, una joya matemática, se puede representar visualmente mediante una espiral. La combinación de Python, Flask y conceptos matemáticos nos permite crear una aplicación web interactiva que hace que la belleza de la secuencia de Fibonacci cobre vida.

Experimenta con los parámetros, ajusta la escala y explora la versatilidad de esta espiral para obtener resultados aún más fascinantes. ¡Esperamos que disfrutes explorando la espiral de Fibonacci con esta aplicación!

Repositorio de código: https://github.com/DaveSV/fibonacci_flask_matplot/blob/main/README.md

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *