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?

🚀 Tu solución:

Ejemplos:

1. El viento moviendo las hojas de un árbol

Fuerza en acción: Fuerza del viento (empuje + resistencia del aire).
Descripción: El viento empuja las hojas y ramas, haciendo que se balanceen o se desprendan. La resistencia del aire también juega un papel en la forma en que caen las hojas.
Manifestación visual: Movimientos ondulantes y caóticos, dependiendo de la intensidad del viento.
Inspiración generativa: Una simulación con partículas que reaccionan a una fuerza direccional y turbulencias aleatorias, imitando la forma en que el viento interactúa con objetos livianos. Se podría usar Perlin noise para crear patrones de flujo orgánico, similar a cómo el viento forma remolinos.

2. Un imán atrayendo clips metálicos

Fuerza en acción: Fuerza magnética.
Descripción: Un imán genera un campo de fuerza que atrae objetos metálicos cercanos, como clips o limaduras de hierro.
Manifestación visual: Los objetos se mueven aceleradamente hacia el imán, creando líneas de fuerza invisibles.
Inspiración generativa: Se podría simular un sistema de partículas que se agrupan según una fuerza atractiva central, similar a la atracción gravitatoria pero con movimientos más dinámicos.

3.Una pelota rebotando en el suelo

Fuerza en acción: Gravedad + fuerza normal + elasticidad.
Descripción: La gravedad atrae la pelota hacia el suelo, pero al impactar, la fuerza normal y la elasticidad de la pelota hacen que rebote antes de volver a caer.
Manifestación visual: Movimiento oscilante que disminuye con el tiempo hasta que la pelota se detiene.
Inspiración generativa: Un sistema de partículas con simulación de rebotes y pérdida de energía, aplicando leyes de conservación del movimiento, y usando un squash strecht. Inspiración en instalaciones interactivas donde los espectadores pueden alterar trayectorias de movimiento, como las obras cinéticas de Jesús Rafael Soto.

4. Un barco flotando en el agua

Fuerza en acción: Fuerza de flotación (principio de Arquímedes).
Descripción: El agua ejerce una fuerza hacia arriba sobre el barco, contrarrestando su peso y permitiendo que flote.
Manifestación visual: Movimiento de balanceo suave por las olas, con pequeñas oscilaciones verticales.
Inspiración generativa: Simulación de objetos flotantes con físicas de fluido y fuerzas de empuje. Se podría representar con puntos de control de Bezier para generar superficies de onda en movimiento. Inspiración en obras de arte generativo que capturan patrones ondulatorios.

5.Una persona empujando una puerta para abrirla Fuerza en acción: Fuerza aplicada + fricción en las bisagras. Descripción: La persona aplica una fuerza sobre la puerta, venciendo la resistencia de las bisagras y la fricción con el aire, permitiendo que gire. Manifestación visual: Movimiento de rotación con aceleración inicial y desaceleración por fricción. Inspiración generativa: Una simulación con sistemas de pivotes y rotación en torno a ejes, aplicando modelos físicos realistas de torsión. Inspiración en obras de arte cinético como las de Jean Tinguely, donde mecanismos interactivos responden a fuerzas externas.

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.

🚀 Tu solución:

Asociación

Sushi Interactivo: Una Experiencia Sensorial Animada

Imaginar un restaurante donde cada plato de sushi cobra vida a través de la animación y la interacción digital. Al colocar una pieza en el plato, proyecciones animadas se activan, mostrando la historia detrás de los ingredientes, el viaje del pescado desde el océano hasta la mesa o incluso criaturas marinas que reaccionan a los movimientos del comensal.

Esta experiencia multisensorial difumina la línea entre lo digital y lo tangible mediante proyecciones interactivas y sensores de movimiento. Cada rollo podría desencadenar una animación diferente según su tipo, permitiendo que los comensales “jueguen” con la comida sin alterarla físicamente.

Este concepto no solo hace que comer sushi sea más divertido y envolvente, sino que también educa sobre la cultura gastronómica japonesa y la sostenibilidad de los ingredientes de una manera visual y dinámica. Con esta propuesta, la animación deja de ser solo un elemento visual en pantallas para convertirse en parte de la experiencia física del usuario, transformando una simple comida en una aventura interactiva.

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?

🚀 Tu solución:

comprender cómo se mueven los objetos alrededor de un lienzo, respondiendo a una variedad de fuerzas ambientales.

Las fuerzas y las leyes del movimiento de

Una fuerza es un vector que hace que un objeto con masa se acelere.

Primera ley de Newton

Un objeto en reposo permanece en reposo, y un objeto en movimiento permanece en movimiento.
Un objeto en reposo permanece en reposo, y un objeto en movimiento permanece en movimiento, a una velocidad y dirección constantes, a menos que actúe sobre él una fuerza desequilibrada.
La velocidad de un objeto permanecerá constante solo en ausencia de fuerzas o solo si las fuerzas que actúan sobre él se cancelan entre sí, lo que significa que la fuerza neta suma cero.
El vector de velocidad de un objeto permanecerá constante si está en un estado de equilibrio. Mover
- Todas las fuerzas que actúan sobre un objeto suman cero, el objeto experimenta un estado de equilibrio (es decir, sin aceleración).

Segunda ley de Newton La mas importante en p5.js

La fuerza es igual a la masa por la aceleración------ la aceleración es igual a la suma de todas las fuerzas dividida por la masa.
La aceleración es directamente proporcional a la fuerza e inversamente proporcional a la masa. Ejemplo, cuanto más fuerte te presionen, más rápido acelerarás o disminuirás la velocidad (acelerarás). Por otro lado, cuanto más grande eres, ¡menos efectiva es una fuerza para acelerarte!
La masa es una medida de la cantidad de materia en un objeto (medida en kilogramos).
El peso, aunque a menudo se confunde con la masa, es técnicamente la fuerza de gravedad sobre un objeto.

Ejemplo: mover.applyForce(wind); Tercera ley de Newton
Para cada acción, hay una reacción igual y opuesta.
Las fuerzas siempre ocurren en pares. Las dos fuerzas son de igual fuerza pero en direcciones opuestas.
Si calcula a llamada que representa una fuerza del objeto A sobre el objeto B, también debe aplicar la fuerza opuesta que el objeto B ejerce sobre el objeto A.

Ejemplo: .p5.Vectorfp5.Vector.mult(f, -1)

La aceleración es igual a la suma de todas las fuerzas dividida por la masa

La fuerza neta es igual a la masa por la aceleración.
las fuerzas deben acumularse, o sumarse.

Ejemplos: código que cree una ráfaga de viento al mantener presionado el mouse:acceleration0update() if (mouseIsPressed) { let wind = createVector(0.5, 0); mover.applyForce(wind); }

Datos:

La masa es un escalar, no un vector, ya que es solo un número que describe la cantidad de materia en un objeto.
Crear 2 objetos

// A large mover on the left side of the canvas
let moverA = new Mover(100, 30, 10);
// A smaller mover on the right side of the canvas
let moverB = new Mover(400, 30, 2);

Cuando son dos obejtos o masas tener en cuenta que cada operación en el código se escribe dos veces, una para y otra para
Gravedad escalada por la masa

Fricción

Fuerza de fricción: Comencemos con la fricción y sigamos los pasos anteriores. Cada vez que dos superficies entran en contacto, experimentan fricción. La fricción es una fuerza disipadora, lo que significa que hace que la energía cinética de un objeto se convierta en otra forma, dando la impresión de pérdida o disipación.

N se refiere a la fuerza normal, la fuerza perpendicular al movimiento del objeto a lo largo de una superficie.
Cuanto mayor sea la fuerza gravitatoria, mayor será la fuerza normal.

Expliques qué fue lo más te llamó la atención de la unidad

Lo que más me llamó la atención de la unidad fue la forma en que diferentes fuerzas, como la gravedad, la fricción y el viento, afectan el movimiento de los objetos en función de su masa. Me pareció muy interesante ver cómo objetos con distinta masa rebotaban de manera diferente y cómo ciertas superficies, como las viscosas, podían modificar drásticamente su comportamiento. También me sorprendió cómo la simulación de fuerzas en p5.js permite crear interacciones realistas con pocos cálculos, haciendo que los objetos respondan de manera convincente a su entorno.

¿Por qué?

Además, al aplicar estos conceptos en p5.js, se pueden crear animaciones más dinámicas y creíbles. Entender cómo las fuerzas afectan los objetos también me ayuda en animación, ya que puedo hacer que los movimientos de los personajes y su interacción con el entorno sean más realistas.

¿Qué relación observas entre la unidad anterior y esta en relación con el marco Motion 101?

Veo que ambas unidades trabajan el movimiento, pero desde perspectivas diferentes. En la unidad anterior, con Motion 101, aprendimos sobre interpolación y cómo suavizar transiciones usando lerp() y lerpColor(), lo que permite crear movimientos fluidos y controlados. En esta unidad, se introduce un enfoque más basado en las leyes físicas, donde el movimiento no solo es interpolado sino que responde a fuerzas externas como la gravedad y la fricción. Ambas unidades se complementan, ya que Motion 101 da herramientas para controlar el movimiento de forma predecible, mientras que la aplicación de fuerzas permite que las simulaciones sean más dinámicas e interactivas.

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.

🚀 Tu solución:

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);
}
.
.
.

El marco motion 101

El marco Motion 101 se basa en la idea de que el movimiento en simulaciones se maneja con la relación entre posición, velocidad y aceleración. En el código dado, se pueden identificar estos elementos:

Posición: this.position.add(this.velocity);
Velocidad: this.velocity.add(this.acceleration);
Aceleración: Se debe calcular antes de actualizar la velocidad.

Motion 101 establece que:

La aceleración afecta la velocidad.
La velocidad afecta la posición.
Los objetos se mueven con estos principios básicos de movimiento.

En la unidad anterior, tú definías la aceleración mediante algún algoritmo. ¿Cuáles eran?

1. Aceleración constante Esto se logra al asignar un vector de aceleración fijo.

this.acceleration = createVector(0.01, 0); // Aceleración constante hacia la derecha

Aceleración hacia el mouse: se calcula como un vector que apunta hacia la posición del mouse.

let mouse = createVector(mouseX, mouseY);
this.acceleration = p5.Vector.sub(mouse, this.position);
this.acceleration.setMag(0.1); // Controlamos la magnitud

Aceleración aleatoria: Cada frame se genera una aceleración en una dirección aleatoria.

this.acceleration = p5.Vector.random2D();
this.acceleration.mult(0.5); // Reducimos la magnitud

¿Qué tiene que ver esto con las leyes de movimiento de Newton?

La aceleración está directamente relacionada con la Segunda Ley de Newton, que es F= m x a. Esto significa que la aceleración de un objeto depende de la fuerza aplicada sobre él y de su masa. En el codio se presenta asi:

let force = createVector(0.2, 0); // Fuerza aplicada
this.acceleration = p5.Vector.div(force, this.mass); // a = F / m

En esta unidad, en lugar de definir la aceleración directamente, se calcula a partir de las fuerzas.

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.

🚀 Tu solución:

¿Qué relación tienen las leyes de Newton con el arte generativo?

El arte generativo se basa en reglas y sistemas para crear imágenes, animaciones o estructuras visuales. Las leyes de Newton nos permiten diseñar sistemas donde los elementos gráficos reaccionan de forma natural a fuerzas simuladas, como la gravedad, el viento o la atracción entre partículas.

En la unidad anterior, definíamos la aceleración directamente en cada frame. Ahora, en lugar de establecerla manualmente, la calculamos como la sumatoria de todas las fuerzas que afectan a un objeto, siguiendo la Segunda Ley de Newton: 𝐹=𝑚⋅𝑎 Si en nuestro mundo de arte generativo decidimos que la masa es 1, la ecuación se simplifica a: 𝑎=𝐹

Esto significa que la aceleración será exactamente igual a la fuerza aplicada, lo que hace más sencillo calcular el movimiento en nuestras simulaciones.

¿Qué problema le ves a este planteamiento?

El problema con eL código es que la función applyForce(force) está sobrescribiendo el valor de this.acceleration en lugar de sumarlo. Esto significa que si aplicamos primero mover.applyForce(wind); y luego mover.applyForce(gravity);, la aceleración solo tomará el valor de gravity, perdiendo completamente el efecto del wind.

applyForce(force) {
 this.acceleration = force; // Esto borra cualquier otra fuerza aplicada antes
}

¿Qué solución propones?

En lugar de sobrescribir la aceleración, debemos sumarle todas las fuerzas aplicadas en cada frame. Esto se logra acumulando las fuerzas en el vector de aceleración:

 applyForce(force) {
  this.acceleration.add(force); // Sumar fuerzas en lugar de reemplazar
}

Entonces la aceleración será la suma de todas las fuerzas que actúan sobre el objeto en ese frame.

¿Cómo lo implementarías en p5.js?

class Mover {
 constructor() {
   this.position = createVector(width / 2, height / 2);
   this.velocity = createVector(0, 0);
   this.acceleration = createVector(0, 0);
 }

 applyForce(force) {
   this.acceleration.add(force); // Se suman todas las fuerzas aplicadas
 }

 update() {
   this.velocity.add(this.acceleration);
   this.position.add(this.velocity);
   this.acceleration.mult(0); // Se reinicia la aceleración en cada frame
 }

 show() {
   fill(0);
   ellipse(this.position.x, this.position.y, 20, 20);
 }
}

let mover;

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

function draw() {
 background(255);

 let gravity = createVector(0, 0.1);
 let wind = createVector(0.05, 0);

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

 mover.update();
 mover.show();
}

applyForce(force) → Suma la fuerza a la aceleración en lugar de sobrescribirla.
update()
- La aceleración se suma a la velocidad.
- La velocidad se suma a la posición.
- Se reinicia la aceleración (acceleration.mult(0);) para el siguiente frame.
Se aplican múltiples fuerzas en cada frame (gravity y wind).

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.

🚀 Tu solución:

¿Por qué multiplicamos la aceleración por cero al final de update()?

Es necesario multiplicar la aceleración por cero porque, a diferencia de la velocidad y la posición, la aceleración no tiene memoria. La aceleración en cada frame depende únicamente de las fuerzas que están actuando en ese momento. Si no la reiniciamos, las fuerzas de los frames anteriores seguirían acumulándose, lo que haría que el objeto se acelerara de manera irreal.

En otras palabras, cada frame debe calcular la aceleración desde cero, sumando solo las fuerzas actuales. Esto garantiza que el comportamiento del objeto siga las leyes del movimiento de Newton de forma correcta.

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

Se multiplica por cero justo al final de update() porque en este método primero se actualiza la velocidad y la posición del objeto usando la aceleración acumulada en el frame actual. Una vez que se han aplicado todas las fuerzas y el objeto se ha movido, la aceleración debe reiniciarse para el siguiente frame.

Si lo hiciéramos antes, la aceleración ya no estaría disponible para actualizar la velocidad y la posición en ese frame. Por eso, la operación this.acceleration.mult(0); se coloca al final de update(), asegurando que las fuerzas acumuladas solo afecten el movimiento del objeto en ese instante y no en los frames siguientes.

Esto permite que cada frame sea independiente y que la simulación refleje correctamente la influencia de las fuerzas en el momento en que actúan.

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?

🚀 Tu solución:

¿Qué problema tiene este planteamiento?

force.div(10) modifica directamente el vector de fuerza original porque los objetos en JavaScript, como los de la clase p5.Vector, se pasan por referencia y no por valor
Esto significa que cuando se divide force por la masa dentro de applyForce(), estamos modificando la fuerza original fuera de la función, lo que puede causar efectos no deseados en otras partes del código.
Si otro objeto intenta usar la misma fuerza (por ejemplo, si tenemos múltiples objetos en la escena con la misma fuerza de gravedad o viento), estos se verán afectados de manera incorrecta porque la fuerza ya fue alterada en el primer objeto que la recibió.

Solución

Crear una copia del vector antes de dividir por la masa, para no modificar la original
Escalar la fuerza por la masa → En lugar de dividir dentro de applyForce(), primero multiplicamos la fuerza original por la masa de cada objeto y luego la aplicamos.

applyForce(force) {
    let f = force.copy();  // 🔹 Creamos una copia de la fuerza para no modificar la original
    f.div(this.mass);      // 🔹 Escalamos la fuerza por la masa del objeto
    this.acceleration.add(f);
}

Ejemplo en p5.js

en codigo de mover js

class Mover {
  constructor(x, y, m) {
    this.mass = m;
    this.radius = m * 8;
    this.position = createVector(x, y);
    this.velocity = createVector(0, 0);
    this.acceleration = createVector(0, 0);
  }

  applyForce(force) {
    let f = force.copy(); // Se copia la fuerza para evitar modificar la original
    f.div(this.mass); // Se divide la fuerza por la masa
    this.acceleration.add(f); // Se acumula la fuerza en la aceleración
  }

  update() {
    this.velocity.add(this.acceleration);
    this.position.add(this.velocity);
    this.acceleration.mult(0); // Se resetea la aceleración cada frame
  }

  display() {
    stroke(0);
    strokeWeight(2);
    fill(127, 127);
    ellipse(this.position.x, this.position.y, this.radius * 2);
  }

  checkEdges() {
    if (this.position.x > width - this.radius) {
      this.position.x = width - this.radius;
      this.velocity.x *= -1;
    } else if (this.position.x < this.radius) {
      this.position.x = this.radius;
      this.velocity.x *= -1;
    }
    if (this.position.y > height - this.radius) {
      this.position.y = height - this.radius;
      this.velocity.y *= -1;
    }
  }
}

Ejemplo

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?

🚀 Tu solución:

Diferencia entre Paso por Valor y Paso por Referencia

Paso por Valor

Se crea una copia independiente del valor original.
Si la copia cambia, el valor original no se ve afectado.
Se aplica a tipos de datos primitivos (números, booleanos, strings, etc.).

Paso por Referencia

Se asigna una referencia a la ubicación en memoria del objeto original.
Si el valor cambia en la copia, también cambia en el original.
Se aplica a objetos (como p5.Vector, arreglos, y objetos en general).

let friction = this.velocity.copy();  // ✅ PASO POR VALOR (se crea una copia independiente)
let friction = this.velocity;        // ❌ PASO POR REFERENCIA (apunta al mismo objeto)

let friction = this.velocity.copy();

this.velocity.copy() crea un nuevo objeto p5.Vector con los mismos valores.
friction es ahora un objeto independiente.
Si modificamos friction, this.velocity no cambiará.

let friction = this.velocity;

friction no es una copia; simplemente apunta a this.velocity.
Cualquier cambio en friction también afectará this.velocity, ya que ambos son el mismo objeto en memoria.
Esto puede causar errores inesperados, como modificar velocity sin intención

¿Qué podría salir mal con let friction = this.velocity

Si queremos calcular la fricción y modificamos friction, en realidad estamos alterando this.velocity, lo que distorsionaría el movimiento del objeto.

Actividad 09

Creando fuerzas en tu mundo de pixeles

Enunciado:

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

La fuerza

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.

🚀 Tu solución:

Modelar una fuerza en una simulación de sistemas interactivos implica representar matemáticamente cómo actúa una influencia externa sobre los objetos en movimiento. En p5.js y otros entornos de simulación, esto se basa en principios físicos, pero puedes modificar o inventar fuerzas para lograr efectos visuales interesantes.

Conceptos clave para modelar una fuerza

Fuerza como vector:

En una simulación, una fuerza se representa como un vector con magnitud y dirección.
En p5.js, se usa createVector(x, y) para definirla.

Segunda Ley de Newton:

La aceleración de un objeto es directamente proporcional a la fuerza aplicada e inversamente proporcional a su masa: 𝐹=𝑚⋅𝑎⇒𝑎=𝐹𝑚
Si un objeto tiene más masa, la misma fuerza tendrá menos efecto en su movimiento.

Acumulación de fuerzas:

Las fuerzas no reemplazan la velocidad, sino que se suman como aceleraciones.
Se aplican en cada frame antes de actualizar la posición.
Cuando modelamos fuerzas en una simulación interactiva, necesitamos traducir fórmulas físicas en código que pueda aplicarse a los objetos en movimiento. Esto requiere entender no solo la ecuación matemática, sino también cómo convertirla en instrucciones para nuestro sistema.

Pasos para Modelar una Fuerza en una Simulación

1. Comprender el concepto detrás de la fuerza

Identificar qué tipo de fuerza se desea modelar (gravedad, fricción, resistencia, etc.).
Entender cómo actúa en el mundo real para replicar su comportamiento en la simulación.

2. Descomponer la fórmula de la fuerza

Determinar cómo se calcula la dirección de la fuerza.
Determinar cómo se calcula la magnitud de la fuerza.

3.Escribir la ecuación de la fuerza

Seguir la estructura matemática adecuada
Considerar si la fuerza es un vector o un escalar.
Asegurarse de que todos los valores y unidades sean consistentes.

4. Traducir la ecuación a código en p5.js

Implementar la ecuación en código para calcular la fuerza en cada fotograma de la simulación.
Usar vectores para representar la fuerza si es necesario.
Multiplicar correctamente los valores en la ecuación.

5. Aplicar la fuerza al objeto en la simulación

Usar el método applyForce() en el objeto en movimiento.
Asegurar que la fuerza se suma correctamente a la aceleración.

6.Ajustar y probar la simulación

Verificar que el comportamiento de la fuerza sea el esperado.
Modificar valores y parámetros si es necesario para mejorar la precisión

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.

🚀 Tu solución:

Fricción 🤸

En la simulación de los globos con fricción y viento, hemos modelado diferentes fuerzas utilizando vectores en p5.js

Cuando mezclamos todas estas fuerzas:

Gravedad hace que los globos caigan.
Viento empuja los globos de forma dinámica.
Fricción ralentiza los globos cuando tocan el suelo.
Rebote impide que los globos salgan del canvas.

1. Gravedad: La gravedad es una fuerza que siempre apunta hacia abajo, empujando los objetos hacia la parte inferior del canvas.

let gravedad = createVector(0, 0.2);
globo.applyForce(gravedad);

Explicación: Se crea un vector de gravedad con dirección hacia abajo (0,0.2) y se aplica a cada globo.

2.Fuerza viento: El viento es una fuerza horizontal que empuja los globos hacia la derecha cuando hacemos click.

function mousePressed() {
  let viento = createVector(random(3, 5), random(-1, 1));
  for (let globo of globos) {
    globo.applyForce(viento);
  }
}

Explicación: Al presionar el mouse, se genera un vector de viento con una dirección aleatoria hacia la derecha y un ligero movimiento vertical. Esto hace que el comportamiento del viento sea más dinámico.

3. Fuerza de Fricción: La fricción es una fuerza que se opone al movimiento cuando los globos tocan el suelo.

let c = 0.1;
let friction = this.velocity.copy().mult(-1);
friction.setMag(c);
this.applyForce(friction);

Explicación: Se toma la velocidad actual del globo, se invierte su dirección (para que se oponga al movimiento) y se ajusta su magnitud usando el coeficiente de fricción. Luego, la fuerza se aplica al objeto.

Ejemplo 1

Resistencia del aire y de fluidos

1. Gravedad: La gravedad es una fuerza constante que tira del barco hacia abajo. En la simulación, esta fuerza se modela como un vector que apunta hacia abajo con una magnitud de 0.3.

let gravedad = createVector(0, 0.3);
barco.applyForce(gravedad);

2. Resistencia aire: Antes de que el barco toque el agua, el aire ejerce una resistencia que se opone a su movimiento. La resistencia se basa en la velocidad del barco, aplicando una fuerza en la dirección opuesta.

if (barco.position.y < aguaNivel) {
  let aire = barco.velocity.copy().mult(-0.03);
  barco.applyForce(aire);
}

Esta resistencia evita que el barco caiga demasiado rápido y simula el efecto del aire al moverse.

3. Resistencia del Agua: Cuando el barco toca el agua, la resistencia es mayor debido a la densidad del líquido. Se modela de manera similar a la resistencia del aire, pero con un coeficiente mayor para representar el arrastre del agua.

if (barco.position.y >= aguaNivel) {
  let agua = barco.velocity.copy().mult(-0.2);
  barco.applyForce(agua);
}

4. Flotabilidad: Si el barco se hunde demasiado, el agua ejerce una fuerza de flotabilidad hacia arriba. La magnitud de esta fuerza es proporcional a la profundidad a la que se encuentra el barco bajo el nivel del agua.

let profundidad = barco.position.y - aguaNivel;
let flotabilidad = createVector(0, -0.25 * profundidad);
barco.applyForce(flotabilidad);

Esto impide que el barco se hunda completamente y genera un efecto de oscilación sobre las olas. Ademas, esta fuerza ralentiza el movimiento del barco en el agua.

5. Viento (cuando el usuario mantiene presionado el clic): El viento se modela como una fuerza horizontal que empuja el barco hacia la derecha. En lugar de aplicarse solo cuando el usuario hace clic, se mantiene mientras el mouse esté presionado.

if (mouseIsPressed) {
  let viento = createVector(0.5, 0);
  barco.applyForce(viento);

Ejemplo 2

Atracción gravitacional:

En esta simulación, se modelo un sistema de partículas (movers) que son atraídas por un centro de gravedad (attractor), simulando la dinámica de un tornado con un efecto de rotación adicional.

1. Fuerza Gravitacional: La atracción entre el tornado y las partículas se basa en la Ley de la Gravitación Universal, donde la fuerza de atracción entre dos objetos depende de sus masas e inversamente del cuadrado de la distancia entre ellos. Se calcula con la fórmula:

𝐹=𝑀𝑚/𝑑^2

M es la masa del tornado (attractor)
m es la masa de la partícula (mover)
d es la distancia entre ellos (limitada para evitar fuerzas extremadamente altas o débiles).

2. Efecto de Rotación: Para imitar la naturaleza giratoria de un tornado, modificamos la dirección de la fuerza gravitacional con un pequeño desplazamiento angular. Esto se hace al sumar un ángulo al vector de fuerza original, generando un efecto de curva en el movimiento de las partículas:

let angle = QUARTER_PI / 2;
let rotatedForce = p5.Vector.fromAngle(force.heading() + angle);
rotatedForce.setMag(force.mag());
return rotatedForce;

3. Actualización de Movimiento: Cada partícula (mover) responde a la fuerza aplicada según la Segunda Ley de Newton:

𝐴=𝐹/𝑚

let f = p5.Vector.div(force, this.mass);
this.acceleration.add(f);

Después, se actualiza su velocidad y posición en cada fotograma:

this.velocity.add(this.acceleration);
this.position.add(this.velocity);
this.acceleration.mult(0);

El Attractor se representa como un círculo azul en el centro.
Los Movers son pequeños círculos rojos que orbitan y convergen en espiral.

Ejemplo 3

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.

🚀 Tu solución:

¿Qué sucede cuando muchos objetos atraen a muchos objetos?

Tecer ley de Newton, todas las fuerzas ocurren en pares: si un atractor atrae a un motor, entonces ese motor también debería atraer al atractor ------ MoverAttractorBody
Consiste en resolver el movimiento de un grupo de objetos que interactúan a través de fuerzas gravitatorias.
Eliminar la clase Attractor y hacer que los Mover se atraigan entre sí.
Modificar la clase Mover para que contenga la lógica de atracción entre cuerpos.
Actualizar el bucle principal en draw() para que cada Mover aplique fuerzas a todos los demás.

Codigo

// Clase Firework que representa cada partícula de los fuegos artificiales
class Firework {
  constructor(x, y, vx, vy, m, color) { // Motion 101
    this.pos = createVector(x, y); // Posición inicial
    this.vel = createVector(vx, vy); // Velocidad inicial
    this.acc = createVector(0, 0); // Aceleración inicial
    this.mass = m; // Masa de la partícula
    this.r = sqrt(this.mass) * random(1.5, 3); // Radio basado en la masa
    this.color = color;
    this.lifespan = 255; // Duración de la partícula
  }

  // Aplicar una fuerza externa considerando la masa
  applyForce(force) {
    let f = p5.Vector.div(force, this.mass); // F = ma -> a = F/m
    this.acc.add(f); // Sumar aceleración
  }

  // Aplicar fricción para reducir la velocidad gradualmente
  applyFriction() {
    let friction = this.vel.copy(); // Copiar velocidad actual
    friction.mult(-0.02); // Aplicar fricción en dirección opuesta
    this.applyForce(friction);
  }

  // Atracción entre partículas basada en la Ley de Gravitación Universal, modificada por color
  attract(firework) {
    let force = p5.Vector.sub(this.pos, firework.pos); // Vector de atracción
    let distanceSq = constrain(force.magSq(), 50, 500); // Limitar distancia mínima y máxima
    let colorSimilarity = this.getColorSimilarity(firework.color); // Factor de atracción basado en color
    let strength = (G * this.mass * firework.mass * colorSimilarity) / distanceSq; // Fuerza de atracción
    force.setMag(strength); // Ajustar magnitud
    firework.applyForce(force); // Aplicar la fuerza
  }

  // Calcular similitud entre colores (cuanto más parecidos, mayor atracción)
  getColorSimilarity(otherColor) {
    let diffR = abs(this.color[0] - otherColor[0]);
    let diffG = abs(this.color[1] - otherColor[1]);
    let diffB = abs(this.color[2] - otherColor[2]);
    return 1 - (diffR + diffG + diffB) / 765; // Normalización entre 0 y 1
  }

  // Actualizar posición y disminuir vida útil
  update() {
    this.vel.add(this.acc); // Aplicar aceleración a la velocidad
    this.pos.add(this.vel); // Aplicar velocidad a la posición
    this.acc.set(0, 0); // Reiniciar aceleración para el siguiente frame
    this.lifespan -= random(2, 5); // Reducir vida útil
  }

  // Dibujar la partícula en pantalla
  show() {
    noStroke();
    fill(this.color[0], this.color[1], this.color[2], this.lifespan);
    ellipse(this.pos.x, this.pos.y, this.r * 2);
    fill(255, this.lifespan / 2);
    ellipse(this.pos.x, this.pos.y, this.r * 3);
  }
}

// Lanzar un fuego artificial en la posición del clic
function mousePressed() {
  launchFirework(mouseX, mouseY);
}

// Controles de teclado para modificar parámetros
function keyPressed() {
  if (key === 'A' || key === 'a') {
    numExplosions++; // Aumentar cantidad de explosiones
  } else if (key === 'D' || key === 'd') {
    numExplosions = max(1, numExplosions - 1); // Disminuir cantidad de explosiones
  } else if (key === 'W' || key === 'w') {
    windStrength += 0.01; // Aumentar viento
  } else if (key === 'S' || key === 's') {
    windStrength = max(0, windStrength - 0.01); // Reducir viento
  }
}

// Definición de variables globales
let fireworks = []; // Array que almacena las partículas de los fuegos artificiales
let G = 0.2; // Constante gravitacional usada para la atracción entre partículas
let numExplosions = 4; // Número de explosiones activas
let windStrength = 0.02; // Intensidad del viento

function setup() {
  createCanvas(600, 400); // Crear el lienzo de 600x400 píxeles
  for (let i = 0; i < numExplosions; i++) {
    launchFirework(); // Generar explosiones iniciales
  }
}

function draw() {
  background(0, 25); // Fondo con transparencia para efecto de estela

  // Aplicar atracción entre partículas (Ley de gravitación modificada por color)
  for (let firework of fireworks) {
    for (let other of fireworks) {
      if (firework !== other) {
        firework.attract(other);
      }
    }
  }

  // Aplicar fuerzas externas como viento y fricción
  let wind = createVector(windStrength, 0); // Vector de viento en la dirección X
  for (let firework of fireworks) {
    firework.applyForce(wind); // Aplicar fuerza del viento
    firework.applyFriction(); // Aplicar fricción para disminuir velocidad
    firework.update(); // Actualizar la posición y velocidad
    firework.show(); // Dibujar la partícula
  }

  // Eliminar partículas que han desaparecido
  fireworks = fireworks.filter(firework => firework.lifespan > 0);

  // Generar nuevas explosiones periódicamente
  if (frameCount % 30 === 0) {
    while (fireworks.length < numExplosions * 50) { // Asegurar número de partículas por explosión
      launchFirework();
    }
  }

  // Mostrar controles en pantalla
  fill(255);
  textSize(12);
  textAlign(LEFT);
  text("A: Aumenta el número de explosiones", 10, height - 50);
  text("D: Disminuye el número de explosiones", 10, height - 35);
  text("W: Aumenta la fuerza del viento", 10, height - 20);
  text("S: Reduce la fuerza del viento", 10, height - 5);
}

// Función para lanzar fuegos artificiales con alturas controladas por Perlin Noise
function launchFirework(x = random(width), y = map(noise(frameCount * 0.1), 0, 1, height * 0.2, height * 0.5)) {
  let baseColor = [random(150, 255), random(150, 255), random(150, 255)]; // Color base aleatorio

  for (let i = 0; i < 50; i++) { // Crear múltiples partículas por explosión
    let angle = random(TWO_PI); // Ángulo aleatorio
    let speed = random(2, 6); // Velocidad inicial
    let vx = cos(angle) * speed; // Componente X de la velocidad
    let vy = sin(angle) * speed - random(1, 3); // Componente Y de la velocidad con un ligero impulso hacia arriba
    let color = [
      lerp(baseColor[0], random(255), 0.5),
      lerp(baseColor[1], random(255), 0.5),
      lerp(baseColor[2], random(255), 0.5)
    ];
    fireworks.push(new Firework(x, y, vx, vy, random(2, 5), color)); // Agregar nueva partícula
  }
}

Problema de los n-cuerpos

En esta simulación de fuegos artificiales, modelamos un sistema de múltiples partículas que interactúan entre sí bajo diferentes fuerzas físicas. El problema de los n-cuerpos surge al considerar cómo cada partícula es influenciada por la atracción de las demás, además de otras fuerzas como la gravedad, el viento y la fricción. Cada fuego artificial es tratado como una colección de partículas independientes que explotan desde un punto inicial y luego se ven afectadas por diversas fuerzas.

Fuerzas Aplicadas en el Sistema

Gravedad: Se aplica a cada partícula para hacer que sus trayectorias sigan una curva descendente realista después de la explosión.
Atracción entre partículas (N-cuerpos): Cada partícula atrae a las demás usando una ecuación basada en la ley de gravitación, pero con una intensidad modificada según la similitud de colores, lo que genera agrupamientos dinámicos.
Viento: Se modela como una fuerza constante en la dirección horizontal, afectando la trayectoria de las partículas.
Fricción: Reduce la velocidad de las partículas para que eventualmente se detengan, evitando que se muevan indefinidamente.

[Aplicación](https://editor.p5js.org/Majogc8/sketches/Oagj9ZWsP

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.

🚀 Tu solución:

¿Qué desafíos encontraste al aplicar los conceptos aprendidos?

Comprensión de las fuerzas en sistemas interactivos, ya que son conceptos muy teoricos y uno solo lo ve como matematicamnete. Al principio, las fuerzas como la gravedad, la fricción o el viento se sentían más como ecuaciones que como elementos dinámicos dentro de una simulación y como nos pueden ayudar con la creatividad de nuestras aplicaciones.
Manejo de fuerzas y estabilidad del sistema: Uno de los principales retos fue equilibrar las fuerzas físicas (gravedad, viento, fricción y atracción entre partículas) para evitar que las partículas se movieran de forma caótica o artificial. Aprendí que ajustar la magnitud de las fuerzas y limitar su alcance es clave para mantener la estabilidad. Ejemplo: al principio, la atracción entre partículas era demasiado fuerte, lo que hacía que se agruparan en exceso; ajustando los límites de distancia, se logro un efecto más realista.
La atraccion gravitacional: Generalmente, asociamos la gravedad con el movimiento de planetas alrededor del Sol, lo que hacía difícil visualizar su aplicación en otros contextos.

¿Qué aprendiste de estos desafíos?

El desarrollo de esta simulación y de toda la Unidad nos mostró que conceptos físicos pueden utilizarse de maneras inesperadas en el diseño de experiencias interactivas. Más allá de su ecuaciones y formulas matemáticas, comprender la interacción entre fuerzas me ayudó a generar efectos visuales y dinámicos más atractivos y a hacer que nuestro sistema se sintiera más orgánico. Además, la interactividad permitió modificar parámetros en tiempo real.

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.

🚀 Tu solución:

Conexión con Diseño de Entretenimiento Digital

Gravedad y salto en plataformas 🎮

Aplicar las leyes de Newton permite hacer saltos más naturales.

Ejemplo: En Super Mario Odyssey, la gravedad escalada por la masa afecta el peso de los personajes, haciendo que Mario salte más alto en la Luna.

Fricción y control en conducción 🚗

La fuerza de fricción define cómo un auto derrapa o frena en juegos de carreras.

Ejemplo: En Mario Kart 8, la fricción varía según el terreno (hielo, asfalto, tierra), afectando el control de los vehículos.

Atracción gravitacional en entornos dinámicos 🪐

Permite crear sistemas donde los objetos se atraen entre sí, generando movimientos complejos.

Ejemplo: Ejemplo: En Angry Birds Space, los planetas ejercen atracción gravitacional, afectando la trayectoria de los disparos y obligando al jugador a calcular los ángulos con precisión.

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.

🚀 Tu solución:

Reflexión

Como he dicho soy más visual, por lo que entender las fuerzas solo con ecuaciones hubiera sido aburrido. La explicación del profe sobre cómo aplicarlas a cosas interactivas me ayudó mucho. También leer bien la guía y ver los ejemplos fue clave.

Visualización y ejemplos interactivos: Ver cómo las fuerzas afectan objetos en simulaciones y juegos hizo que los conceptos fueran más fáciles de entender.
Aplicación práctica: Programar la simulación de fuegos artificiales ayudó a conectar la teoría con algo tangible.
Explicaciones no tan matemáticas: Si me hubiera quedado solo con fórmulas, hubiera sido más difícil.

Mejoras para futuras unidades:

No depender tanto de chat jajajaj
Relacionar más conceptos con videojuegos o animaciones que ya conozco.

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.

🚀 Tu solución:

Autoevaluación:

Nivel de comprensión: 4/5

Logré aplicar conceptos como gravedad, fricción y fuerzas de atracción en la simulación de fuegos artificiales. Por ejemplo, ajusté la atracción gravitacional para que las partículas no se agruparan demasiado.
Incorporé interacción con teclas para modificar fuerzas en tiempo real, algo que antes no había hecho.

Áreas de mejora:

Profundizar más en la resistencia al aire y cómo se modela en diferentes medios.
Explorar más ejemplos fuera de simulaciones, como en animaciones o mecánicas de videojuegos.