Saltearse al contenido
Simulación

Unidad 7

Introducción 📜

¿Qué aprenderás en esta unidad? 💡

Actividad 01

Palabra como imagen (Word as Image)

👣 Pasos:

  1. Explora los ejemplos: dedica tiempo a observar varios ejemplos del proyecto “Word as Image” de Ji Lee.
  2. Analiza la técnica: para 3-4 ejemplos que te llamen la atención, describe brevemente cómo la manipulación visual de la palabra refuerza o representa su significado. ¿Qué elementos gráficos o tipográficos utiliza?
  3. Genera tus propias ideas (estáticas): elige 2-3 palabras diferentes. Para cada una, piensa y describe (o haz un boceto muy simple) cómo podrías representarla visualmente siguiendo el concepto “Word as Image”, sin pensar aún en animación o física. ¿Cómo alterarías las letras o la composición para evocar el significado?

🚀 Tu solución:

Ejemplos

BALLLON

image

En este ejemplo se aborda de manera divertida la palabra Ballon pues toman el comportamiento de las bombas con helio y el cómo flotan y tienen a irse hacia arriba.

VAMPIRE

image

No podía dejar este ejemplo por fuera, pues aunque es simple logra captar la esencia de lo que en el imaginativo colectivo tenemos como características de los vampiros,sus colmullos sangrientos.

YOGA

image

Visualmente es muy divertido de observar pues como en el ejemplo de ballon, se trata de representar los comportamientos relacionados al concepto de manera divertida y creativa. Las personas que suelen practicar yoga realizan todo tipo de expresiones corporales para conectar con lo que están haciendo así que Ji Lee con tan solo una letra pudo evocar esto.

ZIPPER

image

La animación de este ejemplo me divirtió mucho porque justo la E encajaba con la representación visual de la palabra.

Mis propuestas

BRIDGE

image

Jugué con la ubicación de las letras para representar visualmente el concepto.

**LIGHT

image

image

JUMP

image

Investigación 🔎

Actividad 02

Investigación y experimentación con Matter.js

👣 Pasos:

  1. Visualiza y lee: mira el video de Patt Vira completo. Explora los ejemplos básicos en el sitio web de Matter.js.
  2. Identifica conceptos clave: mientras exploras, presta atención a estos conceptos fundamentales: Engine, World, Bodies (y sus tipos: rectángulos, círculos, polígonos), Constraint, MouseConstraint, Runner/Events.
  3. Experimenta con código:
    • Intenta replicar en p5.js al menos dos experimentos básicos mostrados en el video de Patt Vira o en los ejemplos del sitio web. Por ejemplo:
      • Crear un mundo con gravedad y añadir algunos cuerpos simples (círculos, cajas) que caigan y colisionen.
      • Crear cuerpos estáticos (como el suelo).
      • Implementar MouseConstraint para poder interactuar con los cuerpos usando el mouse.
      • (Opcional avanzado) Crear una restricción simple (Constraint) entre dos cuerpos.
  4. Explica los conceptos: basándote en tu experimentación y lectura, explica con tus propias palabras qué es y para qué sirve cada uno de los conceptos clave listados en el paso 2 (Engine, World, Bodies, Constraint, MouseConstraint).

🚀 Tu solución:

Apuntes del video de Patt Vira

BUILDING BLOCKS

  • Engine (motor) -> impulsa la simulación física
  • World (mundo) -> es el ambiente que contiene todos los objetos, cuerpos y restricciones
  • Body (cuerpo) -> es un objeto físico individual en la simulación
  • Bodies (cuerpos) -> es un espacio de nombres para crear tipos específicos de organismos con propiedades preestablecidas
  • Composite (compuesto) -> es un conjunto de cuerpos/organismos y restricciones gestionados como una sola unidad
  • Render -> visualiza la simulación física
  • Runner (runner) -> actualiza el motor a intervalos fijos

Experimentos

Solo Matter.js

image

Enlace aquí

P5.js y Matter.js

image

Enlace aquí

Retos enfrentados

  • La integración de Matter.js me resultó sencilla, Patt Vira explicó todo muy bien y me gustó mucho observar cómo funciona su estructira mental para resolver problemas que se van presentando de mano con la documentación.

Aplicación 🛠

Actividad 03

Animando la tipografía semántica

👣 Pasos:

  1. Elige tu palabra: selecciona una palabra cuyo significado te inspire una idea de animación física (ej: “caer”, “flotar”, “romper”, “elástico”, “rígido”, “conectar”, “repeler”).
  2. Diseña la animación física:
    • ¿Cómo representarás la palabra? ¿Usarás cuerpos de Matter.js para formar las letras?
    • ¿Qué comportamiento físico (caída, flotación, colisión, elasticidad, ruptura, conexión) representará el significado?
    • ¿Cómo configurarás el mundo de Matter.js (gravedad, límites) y las propiedades de los cuerpos (masa, fricción, restitución/elasticidad) para lograr ese comportamiento?
    • ¿Habrá alguna interacción del usuario (ej: click para iniciar la acción, mouse para perturbar)?
  3. Implementa en p5.js + Matter.js: escribe el código.
    • Configura el motor y mundo de Matter.js.
    • Crea los cuerpos (Bodies) que forman tu palabra. Esto puede requerir paciencia y experimentación para obtener las formas deseadas. Usa Constraint si necesitas unir partes.
    • Define las propiedades físicas y las condiciones iniciales.
    • Implementa la interacción si la diseñaste.
    • Dibuja los cuerpos de Matter.js en el canvas de p5.js en cada frame.
  4. Prueba y Refina: ejecuta tu sketch repetidamente. Ajusta la gravedad, las propiedades de los cuerpos, las restricciones y cualquier otro parámetro hasta que la animación física comunique efectivamente el significado de la palabra de una manera interesante.

🚀 Tu solución:

Tipografía animada

Palabra elegida: COLAPSAR

Representación:

  • La palabra “COLAPSAR” será representada mediante un conjunto de bloques dispuestos en una matriz que forma cada letra. Cada letra de la palabra está compuesta por varios bloques que se organizan según una cuadrícula (matriz) definida. Cada bloque es un cuerpo físico en Matter.js, lo que permite simular el comportamiento físico de la palabra cuando se colapsa.

Comportamiento físico

  • El comportamiento representado por el significado de “COLAPSAR” será la caída de los bloques de cada letra de manera desordenada. Al hacer clic, los bloques se convierten en dinámicos y caen, dispersándose y rebotando ligeramente gracias a la restitución (elasticidad), simulando un colapso o desmoronamiento.

Configuración de Matter.js

  • La gravedad se define en Matter.js por defecto, lo que asegura que los bloques caigan hacia el suelo. Puedes ajustar la gravedad si necesitas un comportamiento diferente.

  • El límite del mundo se define mediante el cuerpo estático ground, que actúa como el “suelo” sobre el cual los bloques caen y rebotan.

  • Los bloques inicialmente son estáticos y se convierten en dinámicos cuando se hace clic.

    • Cuando se hacen dinámicos, tienen:
      • La masa por defecto es determinada por Matter.js, pero se puede ajustar.
      • La fricción se ajusta a 0.3 en los bloques para que no se deslicen demasiado rápido.
      • La restitución de la elasticida se establece en 0.4 para que los bloques reboten ligeramente cuando caen.

Interacción

  • Cuando el usuario hace clic en el lienzo (mousePressed), los bloques de las letras se convierten de estáticos a dinámicos, lo que provoca el colapso de la palabra “COLAPSAR”. Al hacer clic, se aplica una pequeña fuerza hacia abajo (y ligeramente lateral) sobre cada bloque para simular el colapso desordenado.

Experimento

Enlace aquí

image

image

Consolidación y metacognición 🤔

Actividad 04

Consolidando la integración p5.js + Matter.js

👣 Pasos:

Reflexiona sobre el proceso técnico y conceptual:

  1. Flujo de trabajo: describe brevemente el flujo de trabajo que seguiste para integrar Matter.js en p5.js. ¿Qué se configura en setup()? ¿Qué sucede en draw() respecto a Matter.js (actualizar el motor) y al dibujo de los cuerpos?
  2. Representación visual vs. simulación física: ¿Cómo manejaste la relación entre los cuerpos físicos de Matter.js (que tienen posición, ángulo, vértices) y su representación visual en el canvas de p5.js? ¿Hubo algún desafío en “dibujar” los cuerpos correctamente?
  3. Creación de formas complejas: ¿Qué técnica utilizaste para crear las formas de las letras con Matter.js? ¿Fue fácil o difícil? ¿Qué limitaciones encontraste?
  4. Física para la semántica: ¿Qué tan efectivo crees que fue usar una simulación física para representar el significado de una palabra? ¿Qué tipo de significados crees que se prestan mejor a este enfoque? ¿Cuáles serían más difíciles?
  5. Potencial exploratorio: más allá de este reto, ¿Qué otras posibilidades creativas te sugiere la combinación de p5.js y Matter.js?

🚀 Tu solución:

Flujo de trabajo

Tuve que configurar el proyecto como lo había aprendido en el video de Vera para integrar Matter.js en p5.js

En el index.html:

  • Agregué la biblioteca
  <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.20.0/matter.min.js"></script>

En el setup():

  • Creé el motor de Matter.js con Matter.Engine.create() y el mundo con engine.world.
  • Configuré un cuerpo estático representando el suelo con la clase Ground, para que los bloques puedan caer y chocar con él.
  • Se invoca a createCOLAPSAR() para generar los bloques que forman las letras de la palabra “COLAPSAR”, organizados en una cuadrícula que representa cada letra.

En draw():

  • Se llama a Matter.Engine.update(engine) para actualizar el motor de física en cada fotograma, lo que permite que la simulación evolucione en tiempo real (es decir, que los bloques caigan y reaccionen a la gravedad).
  • Se dibujan los bloques y el suelo usando p5.js en cada fotograma. Para esto, se utiliza block.display() y ground.display(), que extraen la posición y el ángulo de los cuerpos de Matter.js y los traducen a coordenadas para dibujar las representaciones visuales en el canvas.

Representación visual vs. simulación física

  • Los cuerpos de Matter.js (los bloques) tienen propiedades físicas como posición, ángulo y forma, que deben ser trasladadas a la representación visual en p5.js.
  • En cada ciclo de draw(), la posición de cada bloque se obtiene a través de block.body.position y el ángulo con block.body.angle, luego se utilizan estas coordenadas para dibujar los bloques en el canvas con rect() en p5.js.

El principal desafío fue asegurarme de que los bloques se dibujaran correctamente en relación con la simulación física. Como los cuerpos en Matter.js tienen rotación y transformación de coordenadas, era necesario actualizar el ángulo y la posición en cada fotograma para que la visualización estuviera en línea con la física. Esto implica que no solo se debe tener en cuenta la posición, sino también la rotación de cada cuerpo para representar de forma precisa la dinámica de la simulación. Además hice muchas pruebas con otras palabras para otros experimentos y fue muy dificil crear una matriz coherente para las letras, con el experimento final pude lograrlo después de muchos intentos.

Creación de formas complejas

Técnicas usadas:

  • Utilicé un enfoque basado en matrices que describen la disposición de los bloques que forman cada letra (por ejemplo, la letra “C” está formada por varios bloques en una cuadrícula). Para cada letra, definí una estructura de matriz que indicaba las posiciones relativas de los bloques, y luego los bloques fueron colocados en el canvas en función de esa matriz.
  • Crear las formas fue un poco estresante porque aunque la matriz proporcionaba una forma clara de organizar los bloques, fue muy complicado que se dibujaran las letras de la palabra de manera coherente. La dificultad aumentó al intentar garantizar que los bloques se comportaran físicamente de manera realista cuando se colapsaran. También, manejar la alineación de los bloques y cómo se disponían en el espacio para formar las letras fue un desafío técnico, ya que no existe una “letra” estándar en el motor de física, y cada una tenía que construirse manualmente.

Limitaciones:

  • Una limitación fue que Matter.js, por defecto, solo trabaja con cuerpos rectangulares, lo que hace difícil crear formas de letras más complejas sin dividirlas en múltiples cuerpos más simples. La representación de letras como círculos, líneas o formas curvas sería más difícil de implementar sin crear cuerpos más personalizados.

Física para la semántica:

  • Usar una simulación física para representar el significado de una palabra, como “COLAPSAR”, fue bastante efectivo porque la acción de desintegración o desmoronamiento encaja bien con el concepto de la palabra. La caída desordenada y el colapso de los bloques ayudan a ilustrar la idea de ruptura o desorden implícita en la palabra.

Tipos de significados que se prestan mejor:

  • Los significados que involucren transformación, ruptura, destrucción o movimiento caótico, como “colapsar”, “desintegrar”, “explosión” o “desmoronarse”, son los que mejor encajan con una simulación física. Los conceptos que implican procesos visibles y dinámicos, como el cambio, la interacción y la colisión, son buenos candidatos.

Las palabras que describen conceptos abstractos o estáticos, como “éxito”, “paz” o “esperanza”, serían más difíciles de representar físicamente, ya que no tienen una acción o movimiento inherente.

Potencial exploratorio

La combinación de p5.js y Matter.js ofrece muchas posibilidades creativas más allá de este reto:

  • Se pueden crear escenas interactivas donde los usuarios manipulan objetos, experimentan con la física y modifican el comportamiento de las simulaciones. Por ejemplo, se podría crear un juego donde el jugador controla un objeto que interactúa con otros cuerpos.
  • Usar la física para crear arte abstracto, donde las formas cambian y evolucionan en tiempo real según las leyes de la física, sería una forma fascinante de combinar arte y simulación.
  • Integrar la física en videojuegos o experiencias interactivas, donde la simulación física sea parte esencial del juego o la narrativa.
  • Usar simulaciones físicas para enseñar conceptos científicos de manera interactiva, como la gravedad, la energía, la colisión de partículas, etc.

Actividad 05

Autoevaluación del reto de diseño

👣 Pasos:

Considera tu experiencia personal en esta unidad y responde con honestidad:

  1. Comprensión de Matter.js: después de la investigación y aplicación, ¿Qué tan bien sientes que comprendes los fundamentos de Matter.js para usarlo en proyectos futuros? ¿Qué áreas aún te parecen confusas?
  2. Éxito en la aplicación creativa: ¿Qué tan satisfecho estás con el resultado de tu animación de tipografía semántica? ¿Lograste comunicar el significado de la palabra a través de la física como te lo propusiste?
  3. Desafío técnico vs. creativo: ¿Qué te resultó más desafiante en este reto: la parte técnica de usar Matter.js y formar las letras, o la parte creativa de idear cómo la física podía representar el significado? ¿Por qué?
  4. Resolución de problemas: describe un problema específico (técnico o conceptual) que enfrentaste durante la Actividad 03 y cómo lo resolviste.
  5. Aprendizaje principal: ¿Cuál consideras que fue tu aprendizaje más significativo en esta unidad?

🚀 Tu solución:

Autoevaluación

Comprensión de Matter.js:

  • Debo confesar que no me siento del todo cómoda con la implementación de Matter.js porque fue bastante retador no la parte de configurarlo en p5.js si no de comprender las maneras en las que debía interpretarlo para integrarlo a p5.js; creo que es esta área del proceso la que me resulta más confusa. Supongo que si sigo practicando voy a poder crear una estructura mental que me permitar resolver los retos de matter.js con más confianza.

Éxito en la aplicación creativa:

  • Me siento satisfecha con mi aplición porque aunque es bastante sencilla, representa de manera física su significado semántico. La actividad 3 final fue el resultado de pruebas previas con la palabra “ARQUERA” así que al final cuando cambié la palabra pude representarla como quise.

Desafío técnico vs. creativo:

  • Antes de la palabra “COLAPSAR” lo intenté con la palabra “ARQUERA” y Dios mío. La parte creativa fue mi favorita, creé la imagen de referencia en Canva para entender visualmente cómo se vería, sin embargo, qué complejo resultó dibujar las letras para que una flecha las atravesara. Así que tuve que replantear mi selección de palabras porque quería enfocarmne en comprender cómo implementar las físicas y por ello seleccione “COLAPSAR” una palabra mucho más sencilla de representar y que con los intentos anteriores de aplicación me pareció fácil de ejecutar.

Resolución de problemas:

  • Cuando inicié la implementación técnica se me presentaron varios desafíos como el de formar la letra con cubos y otorgarles físicas a dichas figuras. El primer problema lo tuve que resolver con una matriz y con la estructura de un grid para que la palabra estuviera estática y que los cubos sí representaran visualment cada letra; el tema de las físicas no fue difícil de resolver porque apliqué gravedad y una pequeña fuerza que tira hacia abajo con más fuerza para que el colapso fuese más caótico (incluso se le restaura la eslaticidad para que los cubos reboten un poco).

Aprendizaje principal:

  • El aprendizaje más importante que tuve en esta unidad es que a veces me dejo llevar mucho por mi parte creativa, ignorando los limitante técnicos y de conocimiento sobre un tema. Probablemente con más prácticas hubiera podido ejecutar mi idea inicial, sin embargo, para la comprensión del concepto debía centrarme en mis posibilidades del momento. También estoy muy feliz de ser capaz de empezar de cero para replantear una nueva solución y no quedarme estancada en el proceso.

Actividad 06

Retroalimentación para mejorar la unidad

👣 Pasos:

Reflexiona sobre cómo fue tu experiencia personal al cursar esta unidad específica y responde:

  1. Claridad del reto: ¿Fue claro el enunciado del reto de diseño (Actividad 03)? ¿Entendiste bien la combinación esperada de “Word as Image” y Matter.js?
  2. Introducción conceptual: ¿Fue útil la inspiración de Ji Lee para abordar el reto?
  3. Investigación de Matter.js: ¿Fueron adecuados los recursos proporcionados (sitio web, video)? ¿Necesitaste buscar mucha más información por tu cuenta? ¿La actividad de experimentación te preparó bien para la aplicación?
  4. Dificultad técnica: ¿Cómo calificarías la dificultad de aprender y aplicar Matter.js en el tiempo de la unidad? ¿Hubo suficientes pistas o se sintió abrumador?
  5. Ritmo: ¿Fue adecuado el tiempo dedicado a esta unidad y a sus diferentes fases?
  6. Sugerencia Principal: si pudieras hacer una sugerencia principal para mejorar la experiencia de aprendizaje en esta unidad sobre tipografía semántica y física, ¿Cuál sería?

🚀 Tu solución:

Retroalimentación

Claridad del reto:

  • El enunciado del reto de diseño fue claro de entender porque previamente habíamos visto el trabajo de “Word as Image”.

Introducción conceptual:

  • Si no hubiera visto el trabajo de Ji Lee, resolver el reto creativo habría sido mucho más complejo. Así que sí, la inspiración del trabajo de Ji Lee es un gran aporte para la unidad.

Investigación de Matter.js:

  • En esta parte creo que me quedé un poco corta, el video y el sitio web fueron de gran utilidad pero sí necesité buscar mucha más información sobre la implementación y el uso de los matter.js en p5.js. Aunque la actividad de experimentación fue muy útil, me hubiera gustado experimentar más con pequeños ejercicios antes de iniciar con el reto creativo.

Dificultad técnica:

  • Le pondría un 5/10 porque aunque comprendí el concepto, las dificultades de aplicarlo fueron varias y sí me abrumé un poco.

Ritmo:

  • Me hubiera gustado tener más actividades de experimentación con matter.js antes del reto.

Sugerencia Principal:

  • Sería bueno tener actividades exploratorias de física en matter.js para ampliar la confianza al abordar el reto creativo.