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:

Análisis de ejemplos del proyecto de Ji Lee

🔚 Palabra: “EXIT”

La letra “X” parece estar corriendo o saliendo de la palabra, lo que representa perfectamente la acción de escapar o abandonar un lugar.

👚 Palabra: “ZIPPER”

Las letras “E” se alinean como los dientes de un cierre, simulando visualmente cómo se cierra un zipper. Esta transformación convierte una palabra común en una imagen reconocible, usando repetición y disposición precisa para representar una acción típica del objeto al que hace referencia.

🍌 Palabra: “CONDOM”

La “C” se alarga y se curva hacia arriba, transformándose visualmente en la forma de un condón. Esta modificación no solo representa el objeto de forma clara, sino que también introduce un toque de humor y creatividad, utilizando solo una letra para generar una imagen completa.

🐇 Palabra: “RABBIT”

La letra “R” aparece saltando, simulando el movimiento ágil de un conejo. Esta sencilla inclinación y elevación le da vida a la palabra.

Mis propias ideas (representaciones estáticas)

🎈 Palabra: “GOMA” o “BUBBLE GUM”

La palabra se infla como si fuera un globo de chicle, hasta que una de las letras (por ejemplo, la “O” o la “U”) se estira, se expande y finalmente “explota” o se deforma como si el chicle reventara. Esta transformación transmite perfectamente la textura, elasticidad y comportamiento juguetón del chicle, utilizando expansión tipográfica y posible deformación para evocar lo blando y explosivo del material.

🔫 Palabra: “PISTOLA” o “GUN”

En la palabra “PISTOLA”, la letra “I” se transforma en el cañón de una pistola, disparando una pequeña línea o chispa como si fuera una bala. En la versión “GUN”, la “U” puede alzarse como si fueran dos brazos sosteniendo un arma, con un pequeño destello que simula un disparo.

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:

Matter.js

Probar fisica realista para representar colisiones, friccion, gravedad entre objetos rigidos(rectangulos, circulos,cuadrados,poligonos) Seven keys components

Conceptos clave:

  • Engine: El corazon del sistema,tiene métodos para crear y manipular motores. Un motor es un controlador que gestiona la actualización de la simulación del mundo. Es el cerebro de todo el proceso que calcula cómo se mueven los objetos, las colisiones, la gravedad, etc. Sin el Engine, no tendrías ninguna física en la simulación.

  • World: Es el espacio donde se colocan todos los cuerpos y restricciones. Se crea automáticamente al inicializar el Engine. Todo lo que se ponga en el World va a interactuar y seguir las reglas de física que el Engine determina.

  • Body: Objeto individual dentro de la simulación. Es como una letra o un objeto físico que se comporta según las leyes de la física. Puede ser una figura sencilla como un círculo, un rectángulo o una forma más compleja. Cada Body tiene propiedades como masa, tamaño y forma.

  • Bodies (y sus tipos: rectángulos, círculos, polígonos): métodos de fábrica para crear modelos de cuerpo rígido con configuraciones de cuerpo de uso común (como rectángulos, círculos y otros polígonos).Matter.Bodies. No es un solo cuerpo, sino un conjunto de funciones para crear diferentes tipos de cuerpos físicos.

  • Constraint: Métodos para crear y manipular restricciones. Las restricciones se utilizan para especificar que se debe mantener una distancia fija entre dos cuerpos (o entre un cuerpo y una posición fija en el espacio universal). La rigidez de las restricciones se puede modificar para crear muelles o elásticos.Matter.Constraint.

  • MouseConstraint: Métodos para crear restricciones del ratón. Las restricciones del mouse se utilizan para permitir la interacción del usuario, proporcionando la capacidad de mover cuerpos a través del mouse o el tacto.Matter.MouseConstraint

  • Runner/Events: Render es el componente visual que dibuja la simulación en la pantalla.Matter.Events. El Runner asegura que el motor de física se actualice de manera constante, lo que permite que las animaciones y simulaciones sigan funcionando sin interrupciones. Esto hace que la experiencia de usuario sea más fluida, porque el motor se sincroniza con la velocidad de fotogramas (FPS) del navegador.

p5.js

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

Experimentación con código 🐊

1. Un mundo con gravedad y añadir cuerpos simples (poligonos) que caigan y colisionen.

Ejemplo1

!Image

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:

Bubble 🫧

Las burbujas son ligeras, flotan y explotan. Esta palabra inspira una animación donde las letras de la palabra “BUBBLE” se comportan como burbujas flotantes que se inflan y explotan.

1. Diseña la animación física

Representación de la palabra “BUBBLE”

Usaré círculos para representar las letras de la palabra “BUBBLE”. Cada letra será una burbuja que se infla, flota y explota.

Comportamiento físico

  • Flotación: Las burbujas flotarán en el aire, sin gravedad o con muy poca gravedad, para simular la ligereza de las burbujas.
  • Inflado: Cuando el usuario mantenga presionado el clic sobre una letra, esta se inflará gradualmente hasta alcanzar un tamaño máximo.
  • Explosión y desaparición: Cuando la burbuja llegue a su tamaño máximo, explotará y desaparecerá de la pantalla.

Configuración del mundo de Matter.js

  • Gravedad: Se establecerá gravedad baja o nula, para que las burbujas flotan sin caer.
  • Límites: Configuraremos los límites del canvas para evitar que las burbujas se salgan del área visible.
  • Propiedades de los cuerpos:
    • Masa: Muy baja, para que las burbujas sean ligeras.
    • Elasticidad (restitución): Alta elasticidad, para que las burbujas puedan inflarse sin que se rompan antes de tiempo.
    • Fricción: Muy baja, para que las burbujas se deslicen de manera ligera por el canva

¿Habrá interacción del usuario?

  • Cuando el usuario mantenga presionado el clic, la letra se irá inflando poco a poco.
  • Cuando la letra alcance su tamaño máximo (el límite de inflado), explotará.

Aplicación

!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 Para integrar Matter.js con p5.js, primero configuré el motor de física en setup() usando Engine.create(). También creé los muros del canvas como límites físicos y las letras como cuerpos circulares. En draw(), actualizo el motor de Matter.js con Matter.Runner.run(engine) (una sola vez) y luego, en cada frame, uso la posición y el ángulo de cada cuerpo para dibujar las letras con p5.js.

Representación visual vs. simulación física Cada burbuja (letra) tiene un cuerpo físico de Matter.js y una visualización personalizada con ellipse() y text() en p5.js. Usé body.position y body.angle para alinear correctamente las letras en el canvas. Un reto fue escalar los cuerpos cuando crecen (al mantener clic) y sincronizarlo visualmente sin que se deformaran o rompieran la simulación.

Creación de formas complejas Para representar las letras usé círculos simples, y sobre ellos dibujé el carácter con text().

Física para la semántica Usar física fue muy efectivo para representar la palabra “BUBBLE” porque las burbujas se mueven, flotan y explotan como se espera de una burbuja real. Este tipo de enfoque funciona bien con conceptos relacionados con movimiento, ligereza, caos o interacción (como “SALTO”, “CAER”, “GLOBO”). Sería más difícil representar palabras abstractas o estáticas como “CALMA” o “SILENCIO”.

Potencial exploratorio La combinación de p5.js y Matter.js permite crear experiencias interactivas, educativas y artísticas. Se podría explorar tipografía reactiva al sonido, juegos con palabras que se destruyen o se arman, instalaciones digitales donde el público mueve letras con el cuerpo (usando cámaras), o visualizaciones de emociones con física.

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 del reto de diseño

1. Comprensión de Matter.js:

Después de investigar y aplicar Matter.js, siento que comprendí bien los fundamentos básicos como la creación de cuerpos (Bodies.circle, World.add), la gravedad, el uso del motor (Engine.update) y cómo conectar la simulación con p5.js para visualizarla. Aún me parecen un poco confusas las transformaciones avanzadas de cuerpos (como escalar dinámicamente o manejar colisiones complejas), pero con más práctica puedo dominarlas.

2. Éxito en la aplicación creativa:

Estoy satisfecha con el resultado de mi animación. Elegí la palabra “BUBBLE” y traté de que las letras se comportaran como burbujas reales: flotaban, crecían y explotaban. Creo que logré comunicar bien la idea del concepto “burbuja” tanto visual como físicamente, de forma divertida y dinámica.

3. Desafío técnico vs. creativo:

Lo más desafiante fue la parte técnica, sobre todo integrar bien p5.js con Matter.js sin errores. Me costó entender cómo controlar el crecimiento y explosión de las burbujas sin que el motor colapsara o se repitieran cosas. La parte creativa fue más fluida y facil, porque ya tenía una idea clara desde el principio (burbuja = flotante + explosiva).

4. Resolución de problemas:

Un problema específico que enfrenté fue cuando quise que las letras crecieran al hacer clic y explotaran al llegar a cierto tamaño, haciendo que las otras burbujas se salieran del plano y desaparecieran. Ya que la burbuja que iba a explotra como que daba muhca potencia.

5. Aprendizaje principal:

Aprendí a pensar en “física con propósito”, es decir, usar las propiedades físicas no solo por realismo, sino para comunicar algo con significado.

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:

1. Claridad del reto:

Sí, el enunciado del reto fue bastante claro. Entendí que la idea era combinar el concepto de “Word as Image” con simulación física usando Matter.js. Lo que más ayudó fue tener ejemplos visuales de Ji Lee y la posibilidad de reinterpretar una palabra a través del comportamiento físico.

2. Introducción conceptual:

La inspiración de Ji Lee fue muy útil para entender que no se trata solo de decorar palabras, sino de darles una personalidad visual que refuerce su significado. Me encanto ver sus ejemplos, me inspiro a crear los míos.

3. Investigación de Matter.js:

Los recursos proporcionados fueron buenos, especialmente el sitio web oficial y el video. Sin embargo, sí tuve que investigar por mi cuenta en varios momentos.

4. Dificultad técnica:

Diría que fue de dificultad media. Ya que era la idea de uno, y pues uno imaginar que quiere, pero tratar de hacerlo en codigo es muy duro.

5. Ritmo:

El tiempo dedicado a la unidad me pareció perfecto. Al principio sentí algo de presión por entender Matter.js rápido, pero después todo fluyó mejor. Poder trabajar por etapas fue lo que ayudó a no sentirme abrumada.

6. Sugerencia principal:

Nothing, es una unidad de la creatividad de cada uno y ya. Con los ejemplos de Ji Lee es todo lo que se sabe que se va a hacer.