Unidad 8

Actividad 01

Inspiración audiovisual - Alba G. Corral

👣 Pasos:

Observa y escucha: mira fragmentos de al menos dos performances diferentes (Sonar+D, Le Parody, Dimension N) y explora brevemente su blog. Presta atención a la relación entre lo que escuchas y lo que ves.
Analiza la conexión Sonido-Imagen: ¿Cómo parecen conectarse los visuales con la música? ¿Responden al ritmo, a la intensidad, a las frecuencias (graves/agudos), a la atmósfera general? ¿De qué manera?
Identifica elementos generativos: ¿Qué aspectos de los visuales te parecen “generativos”? ¿Ves patrones que evolucionan, elementos que aparecen y desaparecen, texturas que cambian? ¿Parece que cada performance sería diferente aunque la música fuera la misma?
Reflexiona sobre la “Liveness”: ¿Qué sensación te transmite el hecho de que los visuales se generen (probablemente) en tiempo real junto con la música?
(Opcional) Si viste la conferencia: ¿Qué ideas clave sobre el uso de Processing (similar a p5.js) para gráficos generativos te llamaron la atención?

🚀 Tu solución:

1. Análisis de la conexión Sonido-Imagen

En ambas performances que observé, la conexión entre el sonido y la imagen es muy fuerte. Los visuales parecen seguir el ritmo de la música, respondiendo a los cambios de intensidad y de frecuencia. Por ejemplo, cuando la música se vuelve más profunda o intensa, los gráficos se expanden, se aceleran o cambian de forma y color. También hay una sincronía evidente entre los golpes rítmicos y la aparición de ciertos elementos visuales. La atmósfera general de la música influye directamente en la estética visual, manteniendo una coherencia emocional entre lo que se escucha y lo que se ve.

2. Elementos generativos

Los visuales muestran características generativas muy claras. Se nota que no están pregrabados, sino que evolucionan con el tiempo y se adaptan a la música. Aparecen patrones que cambian, líneas que se transforman, y formas que emergen y desaparecen como si fueran creadas en ese mismo instante. Esta variación constante, aunque mantiene una estética unificada, hace que cada momento visual sea único. Incluso si la música se repitiera, es probable que los visuales cambiaran, porque parecen generarse a partir de procesos vivos y variables.

3. Reflexión sobre la Liveness

La sensación de “liveness” en estas performances es muy fuerte. Saber que los visuales están siendo generados en tiempo real aporta una dimensión adicional a la experiencia. No se siente como ver un videoclip, sino como presenciar una creación viva, donde sonido e imagen se están construyendo juntos. Esta conexión directa entre ambos medios genera una experiencia inmersiva y única, que hace que el público se sienta parte del momento presente.

Actividad 02

Diseño del concepto y selección de inputs

👣 Pasos:

Define el concepto visual: ¿Qué tipo de atmósfera o estética visual quieres crear? ¿Abstracta, orgánica, geométrica, caótica, tranquila? ¿Hay alguna metáfora o idea que quieras explorar visualmente en respuesta a la música? Escribe una breve descripción de tu concepto.
Selecciona la música:
- Elige una pieza musical que te inspire y sobre la que trabajarás. Proporciona un enlace o el archivo si es posible. Debe tener variaciones interesantes (dinámica, ritmo, textura).
Identifica los inputs de audio: ¿Qué características específicas del sonido usarás para controlar tus visuales? Considera al menos dos:
- Amplitud (volumen): ¿Cómo usarás el nivel general de volumen? (Ej: para controlar tamaño, brillo, cantidad de elementos).
- Análisis de frecuencia (FFT): ¿Utilizarás datos del espectro de frecuencias? (Ej: energía en graves para controlar un color, energía en agudos para la velocidad de partículas, distribución general para la complejidad). Especifica qué bandas o datos del FFT planeas usar.
Define inputs de interacción:** ¿Cuáles serán las formas de interacción del usuario además del audio? (Ej: mouse cambia paleta de colores, teclas ajustan sensibilidad).
Documenta los inputs: resume claramente tu concepto, la fuente de audio elegida y la lista detallada de inputs (audio y la interacción) que alimentarán tu sistema generativo.

🚀 Tu solución:

1. Define el concepto visual

Quiero crear una atmósfera fluida, linda y orgánica que refleje la delicadeza emocional de la música. La estética visual estará compuesta por formas suaves y ondulantes, como si fueran olas de seda o agua moviéndose lentamente. En los momentos más intensos y rápidos del piano,quiero que surjan brillitos y partículas luminosas, como si la música hiciera brillar el aire.

Este concepto busca representar visualmente el sentimiento de amor, de intensidad, de suavidad.

2.Selecciona la música

Canción: Je te laisserai des mots
Versión: Solo piano
Motivo: Es una pieza suave, delicada y emocional con secciones que tienen variaciones rítmicas, especialmente en una parte rápida que inspira la aparición de elementos brillantes y dinámicos.

3. Identifica los inputs de audio

A. Amplitud (volumen)

Usaré la amplitud para controlar:

El movimiento de las ondas: a mayor volumen, las ondas serán más rápidas o más pronunciadas.
El brillo general de la escena: cuando la música sube, todo se vuelve ligeramente más luminoso o saturado.

B. Análisis de frecuencia (FFT)

Usaré la energía de distintas bandas para activar diferentes efectos:

Graves (20–250 Hz): modificarán el color de fondo o el tamaño general de las formas ondulantes.
Agudos (2000–8000 Hz): activarán la aparición de partículas brillantes en la parte rápida del piano, que flotan suavemente y se desvanecen.

4. Define inputs de interacción

Además del audio, el usuario podrá interactuar de las siguientes formas:

Mouse: Al mover el mouse, cambiará la paleta de colores (por ejemplo, de tonos cálidos a fríos).
Teclado:
- Solo flecha arriba → cambia la sensibilidad del volumen (más partículas/destellos).
- Solo flecha abajo → disminuye la sensibilidad del volumen.
- Shift + flecha arriba → aumenta la amplitud de las olas.
- Shift + flecha abajo → disminuye la amplitud de las olas.
- Tecla r reiniciará la escena visual, limpiando las partículas acumuladas.

Actividad 03

Diseño del algoritmo generativo (proceso y outputs)

👣 Pasos:

Diseña el proceso generativo: ¿Cuál será la lógica central que genere los visuales?
- Elige uno o varios conceptos/técnicas de simulación o generación del curso que se alineen con tu concepto visual (ej: sistema de partículas cuyas fuerzas son moduladas por el FFT, un flow field cuya dirección cambia con la amplitud, agentes tipo boids cuya cohesión depende de los graves, formas que crecen usando ruido Perlin modificado por el ritmo…).
- Describe cómo los inputs de audio y de interacción modularán los parámetros clave de tu algoritmo generativo. Sé específico (ej: “La amplitud controlará el número de partículas emitidas”, “La energía en los agudos del FFT aumentará la velocidad máxima de los agentes”, “El mouseX cambiará el factor de ruido en el flow field”).
- Asegúrate de que tu diseño incluya elementos generativos que hagan que la visualización no sea idéntica cada vez, incluso con la misma música (ej: uso de aleatoriedad controlada, ruido, condiciones iniciales variables).
Define los outputs visuales:
- ¿Qué elementos visuales específicos se generarán? (partículas, líneas, formas, colores, texturas…).
- ¿Qué propiedades de estos elementos serán controladas dinámicamente por el proceso generativo (y, por ende, por los inputs)? (posición, tamaño, color, opacidad, velocidad, conexión, etc.).
Documenta el diseño: describe tu algoritmo (proceso) y los visuales resultantes (outputs) de forma clara. Puedes usar:
- Texto detallado.
- Pseudocódigo para la lógica clave.
- Diagramas de flujo o conceptuales que muestren cómo los inputs afectan al proceso y éste a los outputs.

🚀 Tu solución:

1. Diseña el proceso generativo

¿Cuál será la lógica central que genere los visuales?

Ondas orgánicas que se mueven suavemente en el fondo, como una tela o superficie líquida. Se generan con una malla de puntos deformada por ruido Perlin, cuya intensidad cambia con el volumen (amplitud) de la música.
Partículas brillantes que aparecen durante los momentos de alta energía en las frecuencias agudas (como la parte mas rapida). Las partículas flotan suavemente hacia arriba, con trayectorias afectadas por ruido y una ligera fuerza de dispersión.
Destellos suaves que surgen aleatoriamente, influenciados por el análisis de frecuencia completo (FFT). Se usan para dar una sensación de “respirar” junto con la música.

Esta lógica busca mantener una visualización fluida, dinámica y siempre cambiante, en línea con el piano emocional y orgánico de Je te laisserai des mots.

2. Elige conceptos/técnicas de simulación o generación

Ruido Perlin deformando una malla de ondas

Crearé una red de puntos que se moverá suavemente como olas.

El ruido Perlin se usará para animar las posiciones en y de los puntos, generando ese movimiento ondulante natural.
Este ruido estará modulado por la amplitud de la música: a mayor volumen, más intensidad en la deformación.

Sistema de partículas luminosas

Se generarán partículas que nacen en momentos de alta energía en las frecuencias agudas (FFT).

Estas partículas tendrán:

Movimiento suave hacia arriba.
Variación de tamaño y velocidad.
Opacidad que disminuye con el tiempo.

Aleatoriedad controlada + fuerzas suaves

Las trayectorias de las partículas usarán:

Fuerza suave hacia arriba.
Desviaciones con ruido Perlin (ligeros desvíos horizontales).

3. Diseño documentado del algoritmo generativo

Inputs

Amplitud (volumen):

Modula la intensidad de las ondas en el fondo.
Cambia el tamaño y brillo de las partículas.

FFT (análisis de frecuencias):

Agudos (2000–8000 Hz): disparan partículas brillantes.
Medios: afectan color y cantidad de destellos suaves.

Interacción del usuario:

mouseX: cambia la paleta de colores.
flechas ↑↓: modifican la sensibilidad al volumen.
Tecla r: reinicia la visualización.

Proceso generativo

Fondo ondulante (Olas)

Se crea una malla 2D de puntos.
Cada punto se mueve en y usando ruido Perlin:

y = baseY + noise(x, tiempo) * amplitud * factor
La amplitud de la música modifica el factor.

Partículas brillantes

En cada frame, si FFT.agudos > threshold, se generan partículas:

Posición inicial: zona inferior.
Velocidad: vertical hacia arriba.
Desviación horizontal con Perlin o ruido simple.
Desvanecimiento de opacidad.

Destellos suaves

Basado en energía media (FFT), se generan destellos:

Se colocan aleatoriamente en la escena.
Escala y transparencia varían suavemente.
Se usan como respiraciones visuales del piano.

Pseudocódigo clave

// Fondo
for (let x = 0; x < cols; x++) {
  for (let y = 0; y < rows; y++) {
    let yOffset = noise(x * escala, y * escala, tiempo);
    puntos[y][x].pos.y = baseY + yOffset * amplitud * 100;
  }
}

// FFT agudos genera partículas
if (fft.getEnergy(6000) > umbral) {
  generarParticula(random(ancho), altura);
}

// Actualizar partículas
for (let p of particulas) {
  p.vel.y -= gravedad;
  p.vel.x += noise(p.pos.x, tiempo) * 0.5;
  p.update();
  p.display();
}

Actividad 04

Implementación

👣 Pasos:

Configura p5.sound:
- Carga el archivo de música elegido.
- Inicializa los objetos de análisis que necesitas (p5.Amplitude, p5.FFT).
Implementa el algoritmo generativo (proceso):
- Traduce la lógica de tu diseño (Actividad 03) a código p5.js. Crea las clases o funciones necesarias para tus partículas, agentes, sistemas, etc.
- En draw(), obtén los valores actuales de los inputs de audio.
- Usa esos valores de audio para modular en tiempo real los parámetros de tu algoritmo generativo, tal como lo diseñaste.
Genera los outputs visuales:
- Implementa el código de dibujo que genera los elementos visuales (partículas, líneas, formas…).
- Asegúrate de que las propiedades visuales (color, tamaño, posición, etc.) sean controladas por el estado de tu algoritmo generativo.
Implementa la interacción: añade los manejadores de eventos (mousePressed, mouseMoved, keyPressed, etc.) para los inputs de interacción que diseñaste.
Prueba, depura y refina: ejecuta tu sketch con la música.
- Verifica que el análisis de audio funciona y que los visuales responden a los cambios en la música como esperabas.
- Ajusta la sensibilidad de la respuesta al audio, los parámetros del algoritmo y la estética visual hasta que estés satisfecho con el resultado. Asegúrate de que se perciba la naturaleza generativa (no exactamente igual cada vez).

🚀 Tu solución:

Configuración de p5.sound

1. Carga del audio:

function preload() {
  soundFormats('mp3');
  song = loadSound('Piano.mp3', () => { loaded = true; }, err => console.error('Error al cargar audio:', err));
}

Uso loadSound para cargar el archivo Piano.mp3 antes de empezar.
Marco loaded para saber cuándo el audio está listo.

2. Inicialización en setup():

fft = new p5.FFT(0.8, 512);       // Para análisis de frecuencias
amplitude = new p5.Amplitude();  // Para medir nivel general de volumen

p5.FFT permite obtener espectro de frecuencias (bass, mid, treble).
p5.Amplitude mide la amplitud (nivel global de volumen).

3.Extracción de datos de audio y uso en el algoritmo

function analyzeAudio() {
  fft.analyze();                       // Actualiza análisis de frecuencias
  bass = fft.getEnergy("bass");       // Extrae energía en banda baja (graves)
  mid = fft.getEnergy("mid");         // Extrae energía en banda media
  level = amplitude.getLevel();       // Obtiene nivel global de volumen

  for (let i = 0; i < waves.length; i++) {
    waves[i].amplitude = (40 + bass / 5 + i * 10) * amplitudeSensitivity;  // Modula la amplitud de las ondas con bass y sensibilidad
    waves[i].freqMod = map(mid, 0, 255, 1.5, 3.5);                         // Modula frecuencia con energía media
  }
}

bass modula la amplitud vertical de cada ola para hacerlas más grandes cuando hay más graves.
mid modula la frecuencia (número de oscilaciones) para hacer las olas más rápidas o lentas.
level (amplitud general) controla la cantidad y velocidad de partículas y destellos.

4. Uso de datos de audio para controlar outputs visuales

Olas que varían en tamaño y frecuencia:

for (let w of waves) {
  w.update();  // Calcula puntos usando amplitude y freqMod que vienen del audio
}
- Partículas emitidas según nivel de volumen:

let particlesToEmit = floor(level * 15 * volumeSensitivity);
for (let i = 0; i < particlesToEmit; i++) {
  let w = random(waves);
  w.emitParticles(particles);
}

Destellos arriba que aumentan con volumen:

let sparkleCount = floor(level * 100 * volumeSensitivity);
for (let i = 0; i < sparkleCount; i++) {
  if (random() < 0.3) {
    topSparkles.push(new TopSparkle(random(width), random(0, height * 0.2), level));
  }
}

Resumen

p5.sound da análisis espectral y amplitud.
Use bandas específicas (bass, mid) para modular la forma y comportamiento de las ondas.
Use el nivel general (level) para modular la cantidad e intensidad de partículas y destellos.
Todo esto genera una visualización fluida, dinámica y sensible a la música en tiempo real.

App

Porfin

VIDEO DEMO]((https://youtu.be/2aHCPocPvCQ)

!Image

Actividad 05

Consolidando la experiencia audiovisual generativa

👣 Pasos:

Reflexiona sobre el proceso y el resultado de este reto final:

Conexión sonido-visión: ¿Qué tan efectiva crees que fue la conexión entre las características del audio que elegiste y los parámetros visuales que controlaban? ¿Lograste una respuesta visual que se sintiera “musical” o sincronizada? ¿Qué fue lo más difícil de esta conexión?
Generatividad vs. Control: ¿Cómo balanceaste la necesidad de que los visuales respondieran al audio (control) con el objetivo de que fueran generativos y no repetitivos? ¿Qué técnicas usaste para introducir variación o aleatoriedad controlada?
Integración de conceptos: ¿Cómo aplicaste o combinaste conceptos de unidades anteriores (fuerzas, sistemas, agentes, física, etc.) en tu algoritmo generativo para este proyecto?
Desafíos de p5.sound: ¿Encontraste alguna dificultad particular al usar p5.sound para el análisis de audio en tiempo real (rendimiento, precisión, complejidad de la API)?
Resultado final: ¿El resultado final se acerca a tu concepto visual original? ¿Qué aspecto de tu simulación te enorgullece más? ¿Qué mejorarías si tuvieras más tiempo?

🚀 Tu solución:

Conexión sonido-visión

La conexión fue bastante efectiva porque utilicé las bandas de frecuencia (graves, medios) y el volumen general para controlar parámetros visuales clave como la amplitud y frecuencia de las ondas, y la cantidad de partículas. Esto generó una respuesta visual que se siente sincronizada y “musical”, porque las formas cambian dinámicamente según la música. Lo más difícil fue que no se sintiera monotono, siempre sentia que le falta algo. Como un movimiento diferente.

Generatividad vs. Control

Para balancear control y generatividad, usé la información del audio como base pero agregué aleatoriedad controlada en la posición y velocidad de partículas, y en la creación de destellos. Así, aunque las visuales respondían al audio, no eran repetitivas ni predecibles. También varié parámetros como la amplitud y frecuencia dentro de rangos, permitiendo cambios suaves y orgánicos.

Integración de conceptos

Combiné conceptos de unidades anteriores como:

Fuerzas y física: para el movimiento natural y rebote de partículas.
Sistemas y agentes: cada partícula y ola se comporta como un agente autónomo con reglas simples que generan un sistema complejo.
Simulación interactiva: la visualización responde en tiempo real al input del audio, que es un sistema externo.

Desafíos de p5.sound

Un reto fue mantener buen rendimiento porque el análisis FFT y la generación de muchas partículas consumen recursos y se me buggeaba el programa. También la precisión del análisis depende de la calidad del audio. La API es sencilla pero requiere práctica para interpretar bien las bandas y niveles para que la visualización sea fluida.

Resultado final

El resultado se acerca mucho a la idea visual original de un flujo orgánico y musical que reacciona al piano. Me gusto cómo las ondas y partículas se sienten vivas y sincronizadas con el audio. Si tuviera más tiempo, mejoraría la optimización para tener más partículas y agregaría más variedad visual para que la experiencia sea aún más rica y menos repetitiva.

Actividad 06

Autoevaluación del reto final y del curso

👣 Pasos:

Considera tu experiencia en este último reto y en el curso completo:

Aplicación del conocimiento: ¿Qué tan capaz te sentiste de aplicar los diversos conceptos y técnicas aprendidos a lo largo del curso para resolver este reto final? ¿Qué temas te resultaron más útiles?
Gestión de la complejidad: este proyecto integró varios componentes (audio, algoritmo, visuales, interacción). ¿Cómo manejaste esta complejidad durante el diseño y la implementación? ¿Qué estrategias usaste?
Logro del objetivo: ¿Consideras que tu proyecto final cumple los requisitos clave del reto (respuesta al audio, generatividad, tiempo real, interactividad)? ¿En qué medida?
Evolución personal: mirando hacia atrás desde la Unidad 1 hasta ahora, ¿cómo ha evolucionado tu comprensión de la simulación, el diseño generativo y la programación creativa? ¿Qué habilidades clave sientes que has ganado o reforzado?
Confianza y próximos pasos: ¿Qué tan confiado te sientes ahora para abordar proyectos similares de forma independiente? ¿Hay áreas específicas del curso o temas relacionados que te gustaría seguir explorando por tu cuenta?

🚀 Tu solución:

Aplicación del conocimiento:

Me sentí capaz de aplicar los conceptos y técnicas del curso. Todo lo relacionado con p5.js, p5.sound y la idea de sistemas interactivos fue muy útil. En este reto final, me sirvieron especialmente los temas de sistemas de particulas, ruido Perlin, lerpColor,vectores, fuerzas. Pude combinar lo aprendido para lograr una visualización que responde al sonido en tiempo real.

Gestión de la complejidad:

Fue un reto integrar audio, visuales y comportamiento interactivos. Usé todo en un mismo archivo pero me enfoque primero que funcionara el audio, luego los efectos visuales, y al final los detalles interactivos.

Logro del objetivo:

Sí, creo que el proyecto cumple con los requisitos:

Respuesta al audio: las cintas y partículas reaccionan al volumen y la forma de la onda.
Generatividad: los efectos visuales cambian en cada momento según el sonido.
Tiempo real: todo se genera y responde al instante.
Interactividad: hay reacción visual al movimiento del mouse y las teclas. En general, el proyecto está completo y funciona como una pieza interactiva en tiempo real.

Evolución personal:

Desde la Unidad 1 hasta ahora, mi forma de pensar en programación cambió mucho. Al inicio veía el código como algo rígido, pero ahora lo entiendo como una herramienta para crear cosas expresivas y dinámicas. He mejorado en organización del código, uso de objetos, y también en cómo pensar visualmente y traducir ideas en simulaciones. Siento que desarrollé habilidades en diseño generativo, uso de librerías creativas y en cómo conectar código con experiencias visuales.

Confianza y próximos pasos:

Me siento mucho más confiada para crear proyectos interactivos por mi cuenta. Entiendo cómo empezar, cómo dividir un proyecto, y cómo ir probando por partes. Me gustaría seguir explorando temas como visualización musical avanzada, shaders, y combinar todo esto con 3D en el futuro (usando p5.js o herramientas como TouchDesigner o Three.js).

Actividad 07

Retroalimentación final para mejorar el curso

👣 Pasos:

Reflexiona sobre toda tu experiencia en el curso:

Estructura y flujo general: ¿Te pareció lógica la progresión de temas a lo largo de las unidades? ¿La estructura introducción, investigación, aplicación y reflexión fue útil para tu aprendizaje?
Equilibrio teoría/práctica: ¿Consideras que hubo un buen equilibrio entre la comprensión de conceptos (basados en The Nature of Code, etc.) y la aplicación práctica en los retos y actividades?
Dificultad y ritmo: ¿Cómo percibiste el nivel de dificultad general del curso y su ritmo? ¿Hubo unidades particularmente intensas o lentas?
Recursos y apoyo: ¿Fueron adecuados los recursos proporcionados? ¿Sentiste que tenías suficiente apoyo para resolver dudas o dificultades?
Aspecto más valioso: ¿Qué fue lo más valioso que aprendiste o experimentaste en este curso?
Sugerencia de mejora general: si pudieras sugerir un cambio significativo para mejorar la experiencia general del curso para futuros estudiantes, ¿Cuál sería? (Puede ser sobre contenido, estructura, evaluación, herramientas, etc.).

🚀 Tu solución:

Estructura y flujo general:

Sí, la progresión fue lógica. La estructura de introducción, investigación, aplicación y reflexión ayudó a entender mejor cada tema.

Equilibrio teoría/práctica:

Sí, hubo buen equilibrio. La teoría fue clara y se aplicó directamente en los retos.

Dificultad y ritmo:

El curso tuvo un ritmo adecuado. Algunas unidades fueron más intensas, como la 3 y la 5.

Recursos y apoyo:

Sí, los recursos fueron suficientes y el apoyo estuvo disponible cuando lo necesité.

Aspecto más valioso:

Aprender a combinar arte, código y sonido para crear piezas interactivas en tiempo real.

Sugerencia de mejora general:

Creo que todo estuvo bien, buenos ejemplos visualemtne para inspirar y uno crearse la pelicula de que puedo lograr algo bacano
La pagina de The Nature of Code tiene una forma de explicar muy bacana, o sea codigo pero con ejemplos de la vida real, me gusto.

Unidad 8

Introducción 📜

¿Qué aprenderás en esta unidad? 💡

Actividad 01

Inspiración audiovisual - Alba G. Corral

🚀 Tu solución:

Investigación 🔎

Actividad 02

Diseño del concepto y selección de inputs

🚀 Tu solución:

Actividad 03

Diseño del algoritmo generativo (proceso y outputs)

🚀 Tu solución:

1. Diseña el proceso generativo

2. Elige conceptos/técnicas de simulación o generación

3. Diseño documentado del algoritmo generativo

Aplicación 🛠

Actividad 04

Implementación

🚀 Tu solución:

Configuración de p5.sound

App

Consolidación y metacognición 🤔

Actividad 05

Consolidando la experiencia audiovisual generativa

🚀 Tu solución:

Conexión sonido-visión

Generatividad vs. Control

Integración de conceptos

Desafíos de p5.sound

Resultado final

Actividad 06

Autoevaluación del reto final y del curso

🚀 Tu solución:

Aplicación del conocimiento:

Gestión de la complejidad:

Logro del objetivo:

Evolución personal:

Confianza y próximos pasos:

Actividad 07

Retroalimentación final para mejorar el curso

🚀 Tu solución:

Estructura y flujo general:

Equilibrio teoría/práctica:

Dificultad y ritmo:

Recursos y apoyo:

Aspecto más valioso:

Sugerencia de mejora general: