Unidad 3

Introducción 📜

En esta unidad, explorarás el concepto de fuerzas y cómo se aplica en la creación de sistemas interactivos dinámicos. Partiendo de la manipulación de la aceleración vista en la unidad anterior, aprenderás a combinar diferentes tipos de fuerzas para generar comportamientos complejos y realistas en tus simulaciones. A través de ejercicios prácticos, comprenderás cómo las fuerzas influyen en la aceleración, velocidad y posición de los elementos visuales, y cómo modelar diferentes tipos de fuerzas, incluyendo la fricción, la resistencia y la gravedad. Además, explorarás la narrativa como un elemento clave para dar sentido y propósito a las interacciones entre los elementos de la simulación. Finalmente, integrarás la interactividad del usuario para enriquecer la experiencia y el control sobre el sistema.

Rúbrica de evaluación de la unidad 📝

Requisito de salida (condición necesaria)

Rúbrica analítica

Criterio (peso)	Cumple plenamente (5.0)	Se cumple medianamente (4.0)	Problemas importantes (3.0)	Falta comprensión básica (2.0)	No hay evidencia (0.0)
1. Aplicación + bitácora (40%)	La app se ejecuta sin fallos en el entorno acordado. Evidencia completa y verificable en bitácora. Todo consistente con lo mostrado en la demo.	La app funciona y cumple lo esencial. La bitácora permite verificar, pero hay 1–2 vacíos menores	La app funciona parcialmente o depende de condiciones no declaradas. Bitácora con vacíos importantes o incompleta.	La app no corre o no demuestra lo requerido. La bitácora no permite verificación de la app.	No se entregaron evidencias o no se puede acceder a ellas
Evaluación
2. Sustentación (60%)	Responde a las preguntas con precisión, conectando: (a) lo que se ve, (b) cómo está hecho, y (c) por qué. Usa su bitácora para justificar decisiones. Reconoce límites/errores y propone cómo probar/mejorar.	Respuestas correctas pero con imprecisiones menores o justificación superficial. Usa parcialmente la bitácora para sustentar.	Responde solo “qué hizo” pero le cuesta explicar “cómo” o “por qué”. Necesita guía para conectar con su propia evidencia/bitácora.	No logra responder de forma coherente o responde sin relación con lo presentado/documentado. Evidencia falta de comprensión básica del trabajo entregado.	No se entregaron evidencias o no se puede acceder a ellas
Evaluación

Set: ¿Qué aprenderás en esta unidad? 💡

En esta unidad manipularas la aceleración de los elementos visuales a través de la aplicación de fuerzas.

Actividad 01

Te presentaré un artista interesante que trabaja con sistemas dinámicos y fuerzas en sus piezas de arte generativo. Se trata de Robert Hodgin. Observa la obra Magnetosphere. También te dejaré aquí una charla reciente del artista para que conozcas un poco más sobre él.

Seek: Investigación 🔎

En esta unidad trabajarás alrededor de las ideas del capítulo de fuerzas del libro The Nature of Code.

Actividad 02

En esta actividad vamos a recordar el marco de movimiento que hemos venido explorando y lo vamos a extender para incluir fuerzas.

Marco Motion 101

Rerpasemo rápido de qué se trata:

let mover;

function setup() {
    createCanvas(640, 240);
    mover = new Mover();
}

function draw() {
    background(255);
    mover.show();
    mover.update();
    mover.checkEdges();
}

.
.
.

update() {

    /*
    .
    . Aquí calculo o me "invento" la aceleración.
    .
    */
    this.velocity.add(this.acceleration);
    this.velocity.limit(this.topSpeed);
    this.position.add(this.velocity);
}
.
.
.

Ahora, le que queremos explorar en esta unidad es cómo calcular o “inventar” la aceleración. En la unidad anterior, tú definías en cada frame de la simulación un algoritmo para la aceleración. Ahora, la aceleración en cada frame la calcularemos como la influencia de todas las fuerzas sobre nuestros elementos gráficos.

Un ruta para abordar la cuestión anterior es visitar las leyes de Newton. ¿Y qué relación tiene esto de las leyes de Newton con lo que estamos haciendo? Pues, la segunda ley de Newton es la que nos da la relación entre fuerza, masa y aceleración.

La ecuación vectorial de la segunda ley de Newton se expresa como:

Donde:

La fuerza neta o la sumatoria de todas las fuerzas que actúan sobre un objeto:
Masa del objeto:
Aceleración del objeto:

Nota entonces que:

Y lo siguiente lo dejaré a tu criterio, finalmente tu eres quien toma las decisiones en tu mundo de arte generativo ¿Qué tal si la masa es igual a 1? Yo no veo por qué no, finalmente, en el mundo de los pixeles el artista manda (¿O no?) 😉.

Entonces ya tenemos la relación.

Si volvemos a nuestro texto guía: The Nature of code, verás que un elemento gráfica que se mueva en el canvas tendrá mínimo estas propiedades:

class Mover {
  constructor() {
    this.position = createVector();
    this.velocity = createVector();
    this.acceleration = createVector();
  }
}

Ahora, considera que en un frame actúan sobre este elemento dos fuerzas: viento y gravedad. Por tanto, en ese frame aplicarás las dos fuerzas:

mover.applyForce(wind);

y luego:

mover.applyForce(gravity);

Finalmente, en el método applyForce de la clase Mover tendrás algo como:

applyForce(force) {
  // Recuerdo, estamos asumiendo que la masa es 1, entonces no es necesario dividir la fuerza por la masa.
  this.acceleration.add(force);
}

Te diste cuenta qué pasó aquí con respecto a la actividad anterior? Vuelve a mirar.

Entonces en cada frame, la aceleración se calcula como la sumatoria de todas las fuerzas que actúan sobre un objeto:

mover.applyForce(wind);
mover.applyForce(gravity);
mover.update();

Y en el método update() se actualiza la velocidad y la posición del objeto:

update() {
    this.velocity.add(this.acceleration);
    this.position.add(this.velocity);
    this.acceleration.mult(0);
}

Pero calma. Notaste algo raro al final de update()?

¿Por qué es necesario multiplicar la aceleración por cero en cada frame?

¿Por qué se multiplica por cero justo al final de update()?

Te dejo las preguntas para que pares y reflexiones.

Antes de seguir, pensemos qué pasa si no queremos asumir que la masa es igual a 1.

En este caso tendríamos:

mover.applyForce(wind);
mover.applyForce(gravity);

applyForce(force) {
    // Asume que la masa es 10
    force.div(10);
    this.acceleration.add(force);
}

¿Y listo cierto? Pues ¡No! 🤣

¿Qué ves raro?

Recuerda esta cuestión por favor: paso por valor y paso por referencia. En este caso, force es objeto de la clase p5.Vector, es decir, es un objeto que se pasa por referencia. ¿Qué implica esto?

Entonces cómo debería ser el método applyForce para que funcione correctamente sin asumir que la masa es igual a 1?

applyForce(force) {
    // Asume que la masa es 10
    let f = p5.Vector.div(force, 10);
    this.acceleration.add(f);
}

Actividad 03

Vamos a crear fuerzas

Cuando cramos fuerzas en nuestras obras generativas, tenemos dos opciones:

Nos inventamos la fuerza.
Modelamos una fuerza que existe en el mundo real.

Vamos a analizar juntos ambas opciones usando el material de The Nature of Code.

Apply: Aplicación 🛠

Es hora de regalarte la oportunidad de amazar arcilla digital y moldear tu propia obra de arte generativo.

Actividad 04

Creación de obra generativa

Vas a crear una obra generativa interactivo en tiempo real que explore el uso de fuerzas para manipular la aceleración de los elementos visuales. Sin embargo, para este ejercicio te pediré que hagas algo distinto. Parte de una “HISTORIA” que quieres contar, pero deja que tu obra generativa la narre por ti. Recuerda que estamos construyendo sistemas generativos. Tu definierás la historia como las reglas del sistema, y el sistema generativo, narrará la historia. ¿Nos dejamos sorprender? De todas maneras no olvides algo importante. Debes incluir interactividad para que el usuario pueda influir en el sistema.