Unidad 3

Introducción

En esta unidad, explorarás el concepto de fuerzas y cómo se aplican 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 utilizar las leyes de Newton para simular el movimiento de objetos en un entorno virtual. 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.

¿Qué aprenderás en esta unidad?

En esta fase inicial, establecerás las bases para comprender las fuerzas en sistemas interactivos. Despertarás la curiosidad y establecerás conexiones con conocimientos previos.

Actividad 01

Explorando las Fuerzas en el Mundo Real

Enunciado: observa a tu alrededor e identifica cinco ejemplos de fuerzas en acción. Describe cada ejemplo y explica qué tipo de fuerza está actuando (ej. gravedad, fricción, empuje). ¿Cómo se manifiesta visualmente cada fuerza?

Por ejemplo, considera un libro sobre una mesa:

• Fuerza en acción: gravedad.
• Descripción: la gravedad tira del libro hacia abajo, pero la mesa ejerce una fuerza de reacción normal que evita que caiga.
• Manifestación visual: el libro permanece en reposo sobre la mesa sin moverse.

¿Cómo conectamos esto con el arte y diseño generativo? Por ejemplo, una simulación de equilibrio y gravedad. En una simulación de arte generativo podrías pensar en algoritmos de simulación de cuerpos rígidos que calculan la estabilidad de estructuras apiladas. Como inspiración visual se podrían analizar obras que exploran la gravedad y el equilibrio, como las esculturas de Alexander Calder (móviles que juegan con la estabilidad y el contrapeso). Esto lo podrías aplicar a una simulación de un sistema generativo donde las formas geométricas se apilan siguiendo un modelo de fuerzas de reacción y colisión.

Entrega: una lista de cinco ejemplos de fuerzas del mundo real, con descripciones detalladas de cada fuerza, su manifestación visual y qué te inspira en términos de arte/diseño generativo algorítmico?

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 02

Explorando Posibilidades

Enunciado: te voy a presentar el estudio de diseño SOSO. Observa el proyecto Data Structure.

Tomando como inspiración el proyecto de Data Structure, explora cómo las experiencias digitales pueden manifestarse en el mundo físico. Esto puede lograrse mediante la creación de instalaciones interactivas que fusionen elementos digitales y físicos, utilizando técnicas como la proyección, la realidad aumentada y la fabricación digital.

Por ejemplo, se podría desarrollar una instalación donde los jugadores interactúen con proyecciones en superficies físicas, creando una experiencia de juego que trascienda la pantalla tradicional. Otra posibilidad es diseñar esculturas cinéticas controladas por algoritmos generativos, donde la animación digital influya directamente en el movimiento físico de la obra.

Entrega: un texto donde propongas una idea concreta, asociada con tus intereses o línea de énfasis, acerca de cómo difuminar la línea entre lo digital y lo tangible, ofreciendo experiencias inmersivas que involucren al espectador de manera multisensorial.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Investigación

En esta fase, profundizarás en la comprensión de las leyes de Newton y cómo se aplican en la simulación de fuerzas. Analizarás ejemplos de código y resolverás problemas para afianzar el conocimiento.

Actividad 03

Lectura Inicial Exploratoria

Enunciado: comienza dando una lectura inicial exploratoria a la unidad 2 del libro The nature of code. NO OLVIDES: inicial exploratoria (la idea es dedicarle solo 30 minutos). Mira de que se trata. Observa los ejemplos y lee las partes que más te llamen la atención.

Entrega: un texto donde:

• Expliques qué fue lo más te llamó la atención de la unidad
• ¿Por qué?
• ¿Qué relación observas entre la unidad anterior y esta en relación con el marco Motion 101?

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 04

Marco Motion 101

Entrega: ¿Recuerdas el marco motion 101 de la unidad anterior? Regresa y dale una mirada rápida si es del caso. Luego considera lo siguiente:

let mover;

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

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

.
.
.


update() {

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

Mira bien el código. ¿Dónde está el marco motion 101?

• En la unidad anterior tu definías la aceleración mediante algún algoritmo. ¿Cuáles eran? Muestra ejemplos de código de la unidad anterior (solo la parte donde se define la aceleración).
• En esta unidad tu vas a calcular la aceleración. ¿Qué tiene que ver esto con las leyes de movimiento de Newton?

Entrega: texto y fragmentos de código donde des respuesta a cada una de las preguntas anteriores.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 05

¿Y qué relación tiene esto de las leyes de Newton con al arte generativo?

Enunciado: analiza con detenimiento la siguiente idea.

Antes de comenzar, disfruta esta simulación donde puedes experimentar de manera creativa las leyes de la atracción. Ahora si, volviendo al lío de Monte Pío (pero no tanto).

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. En la unidad anterior tu 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 😹.

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) {
  this.acceleration = force;
}

Y listo ¿Cierto?

Entrega: ¿Qué problema le ves a este planteamiento? ¿Qué solución propones? ¿Cómo lo implementarías en p5.js?

Nota: no olvides que queremos calcular la aceleración en cada frame como la sumatoria de todas las fuerzas que actúan sobre un objeto.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 06

La fuerza neta debe ser acumulativa

Enunciado: ya te diste cuenta entonces que la fuerza neta es la sumatoria de todas las fuerzas que actúan sobre un objeto. Ahora, ¿Qué pasa si en un frame actúan sobre un objeto dos fuerzas? ¿Cómo calculas la aceleración resultante?

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

applyForce(force) {
  // Segunda ley de Newton, pero con acumulación de fuerza, sumando todas las fuerzas de entrada a la aceleración
  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()?

Entrega: un texto donde expliques por qué es necesario multiplicar la aceleración por cero al final de cada frame.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 07

En mi mundo los pixeles si tienen masa

Enunciado:

Como en tu mundo los pixeles tienen masa, entonces, ¿Qué pasa si en un frame actúan sobre un objeto dos fuerzas? ¿Cómo calculas la aceleración resultante?

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?

Entrega: un texto donde expliques qué problema le ves a este planteamiento y qué solución propones. ¿Cómo lo implementarías en p5.js?

Nota: recuerda, ¿Cuándo se pasa algo a un función por valor y cuándo 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?

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 08

Paso por valor y paso por referencia

Enunciado:

En el siguiente código:

let friction = this.velocity.copy();
let friction = this.velocity;

• ¿Cuál es la diferencia entre las dos líneas?
• ¿Qué podría salir mal con let friction = this.velocity;

De nuevo, toca repasar. ¿Cuál es la diferencia entre copiar por VALOR y por REFERENCIA?

• En el fragmento de código ¿Cuándo es por VALOR y cuándo por REFERENCIA.

Entrega: un texto donde expliques la diferencia entre paso por valor y paso por referencia. ¿Qué implica esto en el fragmento de código?

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 09

Creando fuerzas en tu mundo de pixeles

Enunciado:

En tu mundo de pixeles tu puedes crear las fuerzas o las puedes modelar.

Vamos a probar con lo segundo, modelar una fuerza. Ve a la sección Modeling forces del texto guía. Lee con detenimiento y responde:

Dada una fuerza que desees modelar para usar en tu simulación ¿Qué pasos hay que seguir?

Entrega: un texto donde expliques los pasos a seguir para modelar una fuerza en tu simulación.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Aplicación

En esta fase, aplicarás los conceptos aprendidos para crear simulaciones interactivas que involucren diferentes tipos de fuerzas.

Actividad 10

Modelando fuerzas

Enunciado: diseña varias simulaciones interactivas que muestren cómo modelar fuerzas en tu mundo de pixeles.

Las fuerzas que puedes modelar son las siguientes:

• Fricción.
• Resistencia del aire y de fluidos.
• Atracción gravitacional.

Entrega: el código de cada una de las simulaciones y un texto donde expliques cómo modelaste cada fuerza. Adicionalmente, no olvides incluir un enlace a cada simulación en el editor de p5.js. Para hacer esto recuerda que debes estar logueado en el editor de p5.js y que debes hacer clic en el botón “Save” para guardar los cambios. De esta manera, el enlace a tu simulación se actualizará en la barra de direcciones de tu navegador.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 11

El problema de los n-cuerpos

Enunciado: vas a diseñar una simulación interactiva, en la que se muestre el problema de los n-cuerpos. En el texto guía tienes una sección que te puede ayudar a entender cómo modelar este problema, pero la idea es que uses tu creatividad para crear algo diferente basado en ese concepto. ¿Qué tal si te inspiras en las esculturas cinéticas de Alexander Calder?

Entrega:

• El código de tu simulación
• Un texto donde expliques cómo modelaste el problema de los n-cuerpos.
• No olvides incluir un enlace a tu simulación en el editor de p5.js.
• Adicionalmente, captura una imagen del resultado.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Consolidación y metacognición

En esta fase final, reflexionarás sobre el proceso de aprendizaje y consolidarás los conocimientos adquiridos.

Actividad 12

Análisis de resultados

Enunciado: revisa los resultados de las actividades de la fase APPLY. ¿Qué desafíos encontraste al aplicar los conceptos aprendidos? ¿Qué aprendiste de estos desafíos?

Entrega: descripción de los desafíos encontrados y las lecciones aprendidas durante la fase APPLY. No olvides incluir ejemplos concretos de tu experiencia.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 13

Conexión con Diseño de Entretenimiento Digital

Enunciado: describe cómo los conceptos de esta unidad pueden ser utilizados en el diseño de videojuegos, experiencias interactivas o animaciones. Da ejemplos concretos.

Entrega: descripción de al menos tres aplicaciones de los conceptos aprendidos en el diseño de entretenimiento digital, con ejemplos concretos.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 14

Reflexión sobre el proceso de aprendizaje

Enunciado: reflexiona sobre tu propio proceso de aprendizaje durante esta unidad. ¿Qué estrategias te resultaron más efectivas para comprender los conceptos? ¿Qué podrías mejorar en futuras unidades?

Entrega:

• Descripción de las estrategias de aprendizaje utilizadas y su efectividad. No olvides mencionar de manera explícita en qué punto del proceso aplicaste estas estrategias, ilustrando con ejemplos concretos de tu trabajo en la unidad.
• Planteamiento de mejoras para futuras unidades.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 15

Autoevaluación

Enunciado: evalúa tu nivel de comprensión de los conceptos de la unidad en una escala del 1 al 5 (1: Nada de comprensión, 5: Dominio completo). Justifica tu autoevaluación con ejemplos concretos de tu trabajo en la unidad. Identifica áreas donde necesitas reforzar tu aprendizaje.

Entrega:

• Autoevaluación con justificación y ejemplos concretos de tu trabajo que sustenten.
• Identificación de áreas de mejora.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío