Unidad 7

Actividad 01

Palabra como imagen (Word as Image)

👣 Pasos:

Explora los ejemplos: dedica tiempo a observar varios ejemplos del proyecto “Word as Image” de Ji Lee.
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?
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:

Palabra como Imagen

Palabras de JI LEE

Los ejemplos que más me llamaron la atención de su obra fueron: Gravity, Capitalism, Fast Food, Eclipse, considero que cada palabra de ellas se complementa muy bien con la animación propuesta, se ve muy genial como cada animación logra reforzar y transmitir el significado de cada una de las palabras
Gravity: En este caso realmente es algo bastante sencillo de ver, la palabra es gravity, y en lugar de quedarse flotando, la gravedad afecta directamente a todas las letras de su composición, haciendo que esta caiga en su totalidad al piso, a pesar de que como ya mencioné, es algo sencillo de ver y realmente diría que incluso algo muy literal y obvio, se ve genial.
Capitalism: Esta me parece muy chévere debido a que ya aunque a muchos les puede parecer obvio, puede que personas la vean y no les quede claro por qué esta animación es tan acertada y sencillamente brillante, pero la idea de hacer que una de las letras, tenga más peso, más tamaño, más protagonismo que las otras a pesar de que todas hacen parte de la misma palabra y en consecuencia tienen la misma jerarquía inicial, me parece algo bastante creativo. Es un ejemplo sencillo, que requiere unos pequeños conocimientos previos para entender el por qué, pero es brutal.
Fast Food: Esta me parece muy particular ya que es incluso un llamado a la reflexión, a medida que van apareciendo las letras, estas tienen un grosor cada vez mayor, lo cual es muy interesante, e incluso puede que se catalogue como una crítica a este tipo de comida y un llamado de atención a quienes la consumen en exceso, la obesidad es un problema real relacionado directamente con este tipo de comida, (Aunque no dependiente exclusivamente de esto) y mostrar como cada letra engorda con cada “bocado” se ve muy interesante, un concepto sencillo, pero ideal para la ocsaión.
Eclipse: Y llegamos a la última palabra de mi lista, esta me llamó la atención ya que es una narrativa real de toda la pantalla, no solo está en juego principalmente la lunita que se convierte en una C, sino también todo el canvas y la luz del mismo, esto es muy interesante de ver, es algo que a la vista es muy atractivo y le da un plus bastante interesante a la animación de la pantalla, complementa todo el concepto perfectamente.

Mi lista de palabras

Estuve pensando en 3 palabras, hice dos en español y una en inglés ya que realmente no estaba seguro de si esto tenía algo que ver, así que tuve la última opción en inglés por si acaso, mis palabras son Espacio, Paracaidismo y Pig, siendo la alteración visual la siguiente:
Espacio: Con esta me inspiré bastante en la de Gravity de Ji Lee, mi idea es que las letra floten por la pantalla, estas sean blancas y el fondo sea negro (U oscuro, no un negro total), si pueden haber “estrellas” puede ser un complemento interesante, sino de por sí, el hecho de que unas letras blancas floten por el canvas negro, siento que evoca muy bien lo que viene siendo el espacio exterior.
Paracaidismo: Esta es un poco más compleja, en cuanto a las letras no se cambia mucho, solo que la palabra en un principio estaría en la parte baja del canvas, pero faltaría la última i y la m, estando escrito en un principio solamente paracaid s o, y desde arriba a la izquierda se vería como la letra i, tendría de “paracaidas” a la letra m, y estas llegarían a acomodarse en la palabra.
Pig: En esta lo que pensé fue en alterar la última letra, y que hiciera una pequeña animación, la idea es que la g tenga en la parte de arriba un hocico de cerdito, y que su cola, sea enredada como la de un cerdo, y poco más, que el hocico se infle dos veces como si estuviera haciendo el “oink oink”.

Actividad 02

Investigación y experimentación con Matter.js

👣 Pasos:

Visualiza y lee: mira el video de Patt Vira completo. Explora los ejemplos básicos en el sitio web de Matter.js.
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.
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.
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:

Implementación de matter.js

Explicación de conceptos clave:

Engine: Es tal tal y como su nombre lo dice, el “motor” que pone todo a funcionar en Matter.js. Es el que se encarga de calcular todas las propiedades físicas: gravedad, colisiones, velocidad, etc. Cuando uno crea un Engine, básicamente está encendiendo el simulador del mundo físico, es fundamental.

World: Es básicamente el mundo, el espacio, el lugar, el contexto donde pasan las cosas. Ahí es donde se agregan todos los objetos (como cajas, círculos, el suelo, las cuerdas, todo). El mundo es parte del Engine, y sin él, los objetos no tienen dónde estar ni cómo interactuar entre sí.

Bodies: Son los objetos físicos que existen en el mundo y hay diferentes tipos: rectángulos, círculos, polígonos, son los bloques con los que se construyen las escenas físicas. Uno puede hacerlos dinámicos (que se muevan y caigan) o estáticos (que no se muevan, como el suelo), simplemente agregando una función.

Constraint: Es como una cuerda o conexión entre dos cuerpos, esta puede servir para que dos objetos se muevan juntos o con cierta restricción. Por ejemplo, una cuerda o una barra que une dos objetos, se puede usar para crear efectos como péndulos, grúas, o articulaciones.

MouseConstraint Es como una función que permite mover objetos con el mouse, básicamente uno puede agarrar un objeto con el clic y moverlo, y este se comporta como si lo estuvieras arrastrando físicamente,. con peso y todo, lo puedes tirar, empujar, de todo
Problemas encontrados

Uno de los problemas principales fue la referenciación en el archivo HTML, no sabía muy bien por qué muchas veces a pesar de haber puesto todos los js me seguía dando error de no encontrar la referencia, sin embargo, después de buscar el por qué de esto me di cuenta que el orden importa, cosa que honestamente ignoraba por completo, no sabía que era importante que el sketch fuera el último por ejemplo, y cosas así, ya que realmente con los códigos que había hecho hasta el momento, lo que hacía era duplicar el código base que se daba y se trabajaba en él, pero esto, al ser otra implementación tocó crear un archivo limpio y eso fue algo confuso.

Otro problema fue traducir algunas funciones al lenguaje de p5js, en el video de Patt esto fue explícito, pero aún así habían cosas que al ser a mi parecer redundantes, me confundían un poco.

- Experimentación con códigos

Código 1 - Cuadritos en un piso - Ejemplo del video de Patt Vira

Código 2 - Bolitas en rampa - Ejemplo de página web Matter.js

Código 1:

class Ground {
  constructor(x, y, w, h) {
    this.w = w;
    this.h = h;
    this.body = Bodies.rectangle(x, y, w, h, { isStatic: true });
    Composite.add(engine.world, this.body);
  }

  display() {
    let pos = this.body.position;
    push();
    fill(100);
    noStroke();
    rectMode(CENTER);
    rect(pos.x, pos.y, this.w, this.h);
    pop();
  }
}

class Rect {
  constructor(x, y, w, h) {
    this.w = w;
    this.h = h;
    this.body = Bodies.rectangle(x, y, w, h);
    Body.setAngularVelocity(this.body, random(0.05, 0.2)); // leve variación aleatoria
    Composite.add(engine.world, this.body);
  }

  display() {
    let pos = this.body.position;
    let angle = this.body.angle;

    push();
    translate(pos.x, pos.y);
    rotate(angle);
    rectMode(CENTER);
    stroke(50);
    fill(255);
    rect(0, 0, this.w, this.h);
    pop();
  }
}

const { Engine, Bodies, Composite, Body } = Matter;

let engine;
let ground;
let boxes = [];

function setup() {
  createCanvas(700, 700);
  engine = Engine.create();
  ground = new Ground(200, 380, 400, 20);
}

function draw() {
  background(240);
  Engine.update(engine);

  for (let i = 0; i < boxes.length; i++) {
    boxes[i].display();
  }

  ground.display();
}

function mousePressed() {
  boxes.push(new Rect(mouseX, mouseY, 30, 30));
}

Código 2:

class Ball {
  constructor(x, y, r) {
    this.r = r;
    this.color = random([
      color(255, 234, 167), // amarillo claro
      color(255, 255, 240), // blanco
      color(255, 107, 107), // coral
      color(255, 177, 66),  // naranja
      color(28, 40, 51)     // azul oscuro
    ]);
    this.body = Matter.Bodies.circle(x, y, r, {
      restitution: 0.6,
      friction: 0.1
    });
    Matter.Composite.add(world, this.body);
  }

  show() {
    let pos = this.body.position;
    push();
    noStroke();
    fill(this.color);
    circle(pos.x, pos.y, this.r * 2);
    pop();
  }
}

class Ramp {
  constructor(x, y, w, h, angle) {
    this.w = w;
    this.h = h;
    this.body = Matter.Bodies.rectangle(x, y, w, h, {
      isStatic: true,
      angle: angle
    });
    Matter.Composite.add(world, this.body);
  }

  show() {
    let pos = this.body.position;
    let angle = this.body.angle;

    push();
    translate(pos.x, pos.y);
    rotate(angle);
    noFill();
    stroke(180);
    strokeWeight(1);
    rectMode(CENTER);
    rect(0, 0, this.w, this.h);
    pop();
  }
}

let Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies;

let engine, world;
let balls = [];
let ramps = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
  engine = Engine.create();
  world = engine.world;
  let runner = Matter.Runner.create();
  Matter.Runner.run(runner, engine);


  ramps.push(new Ramp(width / 2, height * 0.3, width * 0.8, 20, -0.2));
  ramps.push(new Ramp(width * 0.6, height * 0.5, width * 0.5, 20, 0.15));
  ramps.push(new Ramp(width * 0.3, height * 0.7, width * 0.6, 20, -0.1));

  for (let i = 0; i < 50; i++) {
    let x = random(width / 4, (3 * width) / 4);
    let y = random(-200, 0);
    let r = random(10, 20);
    balls.push(new Ball(x, y, r));
  }
}

function draw() {
  background(12, 14, 23); // Oscuro

  for (let ball of balls) {
    ball.show();
  }

  for (let ramp of ramps) {
    ramp.show();
  }
}

function mousePressed() {
  let r = random(10, 20);
  balls.push(new Ball(mouseX, mouseY, r));
}

Actividad 03

Animando la tipografía semántica

👣 Pasos:

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”).
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)?
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.
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:

Animando mi palabra

Palabra escogida

En mi caso utilizaré la palabra “Espacio”, mi idea es complementar lo que ya había descrito en la actividad uno con lo siguiente: Hacer que la O se vuelva un sol al dar click en ella, que esta empiece a girar y las demás letras de la palabra a orbitar alrededor de ella, es decir, expicando todo nuevamente, la idea es que la palabra espacio, se encuentre en un entorno negro, un canvas casi totalmente oscuro, que estas letras empiecen a flotar libremente por el canvas sin salir de los límites, y que haya interacción del mouse específica y únicamente con la letra O, al dar click en esta, esta adoptará la forma de un sol y empezará a girar, y las demás letras asumirán una órbita alrededor de esta, haciendo de esto una especie de sistema solar.
Descripción técnica

Las letras fueron formadas como cuerpos circulares usando Matter.js, distribuidos inicialmente de manera horizontal y con físicas realistas como rebote (restitution) y resistencia al aire (frictionAir). Se añadieron cuerpos invisibles en los bordes para evitar que salieran del canvas. Las letras flotan aleatoriamente por el espacio gracias a pequeñas fuerzas generadas con ruido Perlin, simulando un ambiente con gravedad casi nula. Al hacer clic en la letra “O”, esta se transforma en un sol gráfico que rota y emite rayos, reemplazando el texto original. Las demás letras cambian su comportamiento para orbitar suavemente alrededor del sol, calculando su radio y ángulo de órbita en función de su posición actual. No se usaron restricciones (Constraint) porque los movimientos orbitantes se controlan manualmente mediante funciones de rotación.
Palabra ESPACIO
GIF en Acción

Código final:

class Letra {
  constructor(char, x, y, index) {
    this.char = char;
    this.body = Bodies.circle(x, y, 30, {
      restitution: 1,
      frictionAir: 0.05
    });
    this.radius = 30;
    this.index = index;
    this.angle = 0;
    this.isSol = false;
    this.orbitAngle = random(TWO_PI);
    this.orbitRadius = 100;
    this.noiseOffset = random(100);
    World.add(world, this.body);
  }

  contains(x, y) {
    let pos = this.body.position;
    return dist(x, y, pos.x, pos.y) < this.radius;
  }

  convertToSol() {
    this.isSol = true;
    this.radius = 50;
  }

  setOrbit(center) {
    let pos = this.body.position;
    let cx = center.body.position.x;
    let cy = center.body.position.y;
    this.orbitRadius = dist(pos.x, pos.y, cx, cy);
    this.orbitAngle = atan2(pos.y - cy, pos.x - cx);
  }

  orbitAround(center) {
    this.orbitAngle += 0.01;
    let r = this.orbitRadius;
    let cx = center.body.position.x;
    let cy = center.body.position.y;
    let x = cx + r * cos(this.orbitAngle);
    let y = cy + r * sin(this.orbitAngle);
    Body.setPosition(this.body, { x, y });
  }

  update() {
    if (!this.isSol && !clicked) {
      let n = noise(this.noiseOffset + frameCount * 0.005);
      let angle = n * TWO_PI;
      let forceMag = 0.0005;
      let fx = cos(angle) * forceMag;
      let fy = sin(angle) * forceMag;
      Body.applyForce(this.body, this.body.position, { x: fx, y: fy });
    }
  }

  display() {
    let pos = this.body.position;
    push();
    translate(pos.x, pos.y);

    if (this.isSol) {
      rotate(this.angle);
      fill(255, 204, 0);
      noStroke();
      for (let i = 0; i < 12; i++) {
        let len = 25 + 5 * sin(frameCount * 0.2 + i);
        let angle = TWO_PI / 5 * i;
        line(0, 0, len * cos(angle), len * sin(angle));
      }
      fill(255, 204, 0);
      ellipse(0, 0, this.radius * 2);
    } else {
      fill(255);
      noStroke();
      textAlign(CENTER, CENTER);
      textSize(32);
      text(this.char, 0, 0);
    }

    pop();
  }
}

const { Engine, World, Bodies, Body } = Matter;

let engine, world;
let letras = [];
let palabra = "ESPACIO";
let letraSol = null;
let clicked = false;
let dragging = false;
let offsetX = 0, offsetY = 0;
let bounds = [];

function setup() {
  createCanvas(1920, 1080);
  engine = Engine.create();
  world = engine.world;
  engine.world.gravity.y = 0;

  let thickness = 50;
  bounds.push(Bodies.rectangle(width / 2, -thickness / 2, width, thickness, { isStatic: true }));
  bounds.push(Bodies.rectangle(width / 2, height + thickness / 2, width, thickness, { isStatic: true }));
  bounds.push(Bodies.rectangle(-thickness / 2, height / 2, thickness, height, { isStatic: true }));
  bounds.push(Bodies.rectangle(width + thickness / 2, height / 2, thickness, height, { isStatic: true }));
  World.add(world, bounds);

  let startX = width / 2 - palabra.length * 40;
  for (let i = 0; i < palabra.length; i++) {
    let letra = palabra[i];
    let x = startX + i * 80;
    let y = height / 2 + random(-100, 100);
    letras.push(new Letra(letra, x, y, i));
  }
}

function draw() {
  background(10);
  Engine.update(engine);

  for (let letra of letras) {
    letra.update();
    letra.display();
  }

  if (clicked && letraSol) {
    letraSol.angle += 0.05;
    for (let letra of letras) {
      if (letra !== letraSol) {
        letra.orbitAround(letraSol);
      }
    }
  }
}

function mousePressed() {
  for (let letra of letras) {
    if (letra.contains(mouseX, mouseY) && letra.char === 'O' && !clicked) {
      letraSol = letra;
      letraSol.convertToSol();
      clicked = true;

      for (let l of letras) {
        if (l !== letraSol) {
          l.setOrbit(letraSol);
        }
      }
    }

    if (clicked && letra === letraSol && letra.contains(mouseX, mouseY)) {
      dragging = true;
      offsetX = mouseX - letra.body.position.x;
      offsetY = mouseY - letra.body.position.y;
    }
  }
}

function mouseReleased() {
  dragging = false;
}

function mouseDragged() {
  if (dragging && letraSol) {
    Body.setPosition(letraSol.body, { x: mouseX - offsetX, y: mouseY - offsetY });
  }
}

Actividad 04

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

👣 Pasos:

Reflexiona sobre el proceso técnico y conceptual:

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?
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?
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?
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?
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:

Consolidación y Metacognición

1. Primero que todo se configura el motor de Matter.js dentro del setup(), donde también creé los cuerpos físicos de cada letra usando Bodies.circle para que tuvieran un comportamiento realista. En el draw() actualizo el motor con Engine.update(engine) y luego dibujo las letras con funciones de p5.js en función de la posición de sus cuerpos, y ahí mismo aplico las fuerzas y comportamientos especiales, como la flotación libre y la órbita al activar la letra “O”.
1. La simulación física la controlé usando cuerpos invisibles y propiedades como frictionAir y restitution. Sin embargo, visualmente decidí no usar el texto directamente, sino dibujar las letras encima de cuerpos circulares, lo que me permitió tener más control visual. Un reto fue hacer que los dibujos se alinearan bien con los cuerpos físicos sin perder legibilidad, especialmente cuando orbitaban o rotaban, es por eso que tomé la decisión de dejarlas “rectas” o mejor dicho, alineadas y que estas no giraran también, como la O, sobre su eje, que era algo que tenía pensado hacer.
1. En lugar de formas complejas, opté por cuerpos simples (círculos) para representar cada letra como una entidad independiente. Lo complejo fue simular la forma del sol en la letra “O” cuando se hace clic. Para eso usé una figura de un circulito amarillo, reemplazando el texto tenía la intención de hacerle también los rayitos, sin embargo aún después de varios intentos, esto no funcionó y realmente la descarté para no seguir perdiendo el tiempo con algo que no sabía cómo hacer que funcionara. La limitación principal fue que Matter.js no permite cuerpos con formas de texto directamente, así que tuve que simularlo visualmente encima de cuerpos básicos.
1. La simulación física fue clave para representar el significado de la palabra “espacio”. Usar un entorno negro, gravedad mínima y movimiento flotante reforzó la sensación de vacío espacial. La órbita al hacer clic en la “O” transformándola en un sol refuerza el sentido de sistema solar. Este tipo de simulaciones físicas funciona muy bien para conceptos relacionados con movimiento, energía o entornos naturales. Sería más difícil aplicarlo a palabras abstractas como “soledad” o “memoria”, sin embargo, con los ejemplos de la primera actividad,, de Ji Lee es un hecho claro que todo lo que se necesita es poner a trabajar la creatividad.
1. Más allá de este reto, la combinación de p5.js y Matter.js abre muchas posibilidades creativas. Se podrían crear instalaciones interactivas, visualizaciones de palabras con comportamientos vivos o incluso poemas cinéticos. También es un gran espacio para explorar cómo el significado puede cambiar dependiendo del comportamiento físico de las letras o elementos visuales, llevando el lenguaje a un plano dinámico y sensible, incluso llegué a pensar en las palabras que tienen varios significados, y esta diferencia se puede mostrar con esto, aunque sea la misma palabra, el entorno podría reaccionar diferente dependiendo del signiicado al que se esté haciendo referencia.

Actividad 05

Autoevaluación del reto de diseño

👣 Pasos:

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

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?
É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?
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é?
Resolución de problemas: describe un problema específico (técnico o conceptual) que enfrentaste durante la Actividad 03 y cómo lo resolviste.
Aprendizaje principal: ¿Cuál consideras que fue tu aprendizaje más significativo en esta unidad?

🚀 Tu solución:

Autoevaluación

1. De manera general considero que comprendo bastante bien cómo funciona matter.js, en realidad no es commplicado entender que es una librería de físicas, y que básicamente hubo personas que dedicaron tiempo y esfuerzo a desarrollar herramientas y funciones que podemos aprovechar bastante para otro tipo de aplicaciones, esto no sólo nos ahorra tiempo, si no también hace que las posibilidades creativas aumenten exponencialmente, eso sin mencionar el mero hecho de que técnicamente nos podemos permitir otras cosas, combinando funciones y complementándolas entre sí, lo único que me sigue pareciendo confuso es eso de que por ejemplo para mostrar el canvas se puede hacer tanto desde el matter, como desde el p5, y así con muchas otras funciones, por lo cual no sé yo como podría aprender a distinguir cuando se usa la función de uno u otro.
1. Honestamente siento que lo hice de la mejor manera, incluso sin la interacción ya la palabra cobra bastante sentido, son letras flotando en un espacio oscuro, y si a eso le sumas esa interacción como sistema solar, nos da como resultado una aplicación que a mi parece transmite muy efectivamente el significado de la palabra, e incluso aquí podemos hablar de lo que ya mencioné en la actividad anterior, palabras con distintos significados, “espacio” no significa solamente aquello que está fuera de nuestra atmósfera, también puede ser la distancia entre dos cosas, y en ese orden de ideas podríamos usar la misma palabra pero hacer algo diferente con ella, se me ocurre rápidamente que entre letra y letra podemos hacer que la distancia sea cada vez mayor a medida que vayan apareciendo, o que sean distancias aleatorias, pero no iguales, y teniendo esto en cuenta considero que mi aplicación muestra perfectamente el significado de la palabra al que en este caso estamos haciendo alusión.
1. Me considero un creativo bastante bueno, que me surjan ideas no suele ser un trabajo complejo ni demorado para mí, y menos cuando hay tantas referencias como fue en este caso, de hecho tuve muchas mas ideas, pero claro, sólo teníamos que hacer una y documentar tres, así que por ese lado no me preocupo, al menos hasta ahora con las cosas que he tenido que hacer, sin embargo, en la parte técnica no soy muy bueno ya que en los entornos de programación no estoy tan capacitado, casi siempre debo buscar ayuda de IA, buscar en foros, etc, no soy muy bueno proramando de cero, normalmente lo que hago por mi cuenta es sobreescribir códigos y con eso no tengo problema, pero ya a la hora de hacer un código de cero, encontrar problemas y ver más allá de por qué no funciona una cosa u otra, me quedo un poco corto, es algo a lo que tristemente no le he dedicado suficiente tiempo y dedicación para entender mejor, y es una realidadd que no me enorgullece, pero no se puede tapar y tampoco es como que me averguence, después de todo, no es mi rama principal.
1. El problema principal fue como hacer las letras, debido a lo que había leído sobre cómo tenía que hacer las letras (Pieza por pieza, experimentando) creí que me iba a tardar una eternidad componiendo la palabra, sin embargo antes de proseguir me puse a buscar alternativas para esto, y pues lo terminé haciendo diferente, no con las formas específicas, sino conviritiendo círculos en el texto, mediante funciones, me parece que esto facilitó mucho todo el proceso de codificación de la palabra e hizo que me centrara un poco más en el comportamiento.
1. Realmente y siendo honestos, conocer matter.js, siento que es muy interesante y me hace pensar que claramente este no debe ser el único contexto en que pasa esto de que ya hay librerías pre hechas para complementar todas tus herramientas de trabajo, para optimizar flujos, dar lugar a creaciones más creativas, ahorrarse tiempo, etc. Matter.js me parece una herramienta sumamente potente para la simulación de físicas en programación, es loco ver todo lo que se puede lograr con sólo un par de comandos sólo por estar referencia a esta librería, eso es algo muy interesante y muy potente creativa y técnicamente hablando.

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:

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?
Introducción conceptual: ¿Fue útil la inspiración de Ji Lee para abordar el reto?
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?
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?
Ritmo: ¿Fue adecuado el tiempo dedicado a esta unidad y a sus diferentes fases?
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

1. Claro que sí, el reto fue totalmente claro, las referencias que hubo fueron más que suficientes para entender qué era lo que se necesitaba hacer, en general todo fue claro y fácil de entender respecto a las peticiones de la unidad, de las actividades, y de qué era lo que se esperaba lograr, la verdad lo único que puede no resultar claro en un principio es como funcionan las librerías, pero es cuestión de investigar, ver el tutorial sugerido completo el cual a pesar de ser básico cubre básicamente todo lo que hace falta para lo que se pide en la unidad, y en caso tal de esto no ser suficiente, está la página web entenra de Matter.js, y muchos otros tutoriales incluso de la misma chica del video sugerido, y todos con muy buena calidad y claridad en las explicaciones, así que sí, todo claro.
1. Claramente, de hecho fue inspirador para hacer ese tipo de cosas, no sólo con código, sino en otros contextos animados, quizá en 3D, me gustaría volver a estos recursos cuando sepa utilizar bastante bien los geometry nodes de blender para poder lograr algo bien chévere con las creaciones que se mostraron en el video de Ji Lee.
1. Sí fueron suficientes y apropiados los recursos que se sugirieron al principio de la unidad, y sí tuve que buscar otros tutoriales pero lo que ya dije en el punto #1, estaban todos en el mismo canal de la chica, muy bien explicados, todo muy claro de entender, e incluso ella dejaba links a los sketches en el editor de p5js, por lo cual realmente todo era de muy fácil acceso y no tuve problema buscando otras cosas que necesitaba para poder terminar de entender algunas cosas, y claro que la experimentación fue útil, es lo que puso las bases para poder hacer la actividad 3 de la unidad.
1. Me parece que fue suficiente el tiempo, ya he mencionado en otras retroalimentaciones que la forma en que está diseñado el curso da tiempo a hacerlo todo y sobra la verdad, es cuestión de aprovechar el tiempo en clase y de dedicar las horas necesarias por fuera del aula, y todo debería poder hacerse sin ningún inconveniente, y hay algo muy importante a tener en cuenta y es que si un trabajo te parece abrumador, puede que otro compense siendo muy sencillo, de esta manera recuperas el tiempo invertido en el que te resultó complicado, pero en este caso, no fue así, todo fue sencillo de entender en general.
1. Claro que si, dos semanas para realizar esto me parece tiempo suficiente, y más teniendo en cuenta que la primera actividad es de mera inspiración, y las últimas 2 son para dar opiniones y reflexiones personales, esto es algo que no se puede obviar y que a final de cuentas como tal se debe trabajar plenamente como en 2 actividades y hacer un esfuerzo un poco mayor en la de metacognición para poder sacar nuevamente todo eso que se aprendió, de resto, reflexionar o inspirarse en los ejemplos, se hace relativamente rápido.
1. Me parece que desde aquí podríamos dar un poco más de libertad en empezar a migrar a otros lugares, la unidad 8 se puede hacer en prácticamente cualquier entorno, siempre que se cumplan las características, y me parece que lo que se pedía aquí, se podría llevar mucho más lejos con otros programas, y no me refiero a que se haga donde quiera, si no que esto sea una opción para la actividad #3, para ya terminar el curso descansando un poquito del código para todos aquellos a los que se les dificulta un poco.

Unidad 7

Introducción 📜

¿Qué aprenderás en esta unidad? 💡

Actividad 01

Palabra como imagen (Word as Image)

🚀 Tu solución:

Palabra como Imagen

Investigación 🔎

Actividad 02

Investigación y experimentación con Matter.js

🚀 Tu solución:

Implementación de matter.js

- Experimentación con códigos

Aplicación 🛠

Actividad 03

Animando la tipografía semántica

🚀 Tu solución:

Animando mi palabra

Consolidación y metacognición 🤔

Actividad 04

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

🚀 Tu solución:

Consolidación y Metacognición

Actividad 05

Autoevaluación del reto de diseño

🚀 Tu solución:

Autoevaluación

Actividad 06

Retroalimentación para mejorar la unidad

🚀 Tu solución:

Retroalimentación