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:
1. Gravedad
- Descripción: La gravedad es la fuerza que atrae a los objetos hacia el centro de la Tierra. Es responsable de que los objetos caigan cuando se sueltan.
- Tipo de fuerza: Gravitacional
- Manifestación visual: Se puede observar cuando una manzana cae de un árbol o cuando una persona salta y vuelve al suelo. Visualmente, la trayectoria de caída es una parábola.
- Inspiración en arte/diseño: La gravedad puede inspirar obras que exploren la caída y el movimiento, utilizando algoritmos que simulen trayectorias de objetos en caída libre, creando patrones visuales dinámicos.
2. Fricción
- Descripción: La fricción es la fuerza que se opone al movimiento de dos superficies en contacto. Por ejemplo, cuando empujas un libro sobre una mesa, la fricción entre el libro y la mesa resiste el movimiento.
- Tipo de fuerza: Fuerza de fricción
- Manifestación visual: Se puede ver cuando un objeto se detiene al ser empujado o cuando las ruedas de un automóvil chirrían al frenar. Visualmente, puede manifestarse como marcas en el suelo o el desgaste de los materiales.
- Inspiración en arte/diseño: La fricción puede inspirar diseños que jueguen con la resistencia y el movimiento, utilizando algoritmos que simulen la interacción entre diferentes texturas y superficies.
3. Empuje
- Descripción: El empuje es la fuerza que se aplica para mover un objeto en una dirección. Por ejemplo, cuando empujas un carrito de compras, aplicas una fuerza de empuje.
- Tipo de fuerza: Fuerza de empuje
- Manifestación visual: Se observa cuando un objeto se mueve hacia adelante, como un barco que navega en el agua. Visualmente, se puede representar con flechas que indican la dirección y la magnitud del empuje.
- Inspiración en arte/diseño: El empuje puede inspirar obras que exploren la dirección y la fuerza, utilizando algoritmos que generen patrones de movimiento en respuesta a fuerzas aplicadas, creando efectos visuales fluidos.
4. Tensión
- Descripción: La tensión es la fuerza que se ejerce a través de un cable, cuerda o cadena cuando se tira de ambos extremos. Por ejemplo, cuando un arco se tensa al ser preparado para disparar una flecha.
- Tipo de fuerza: Fuerza de tensión
- Manifestación visual: Se puede ver en cuerdas que se estiran o en cables de puentes. Visualmente, se manifiesta como líneas rectas que se tensan y se deforman.
- Inspiración en arte/diseño: La tensión puede inspirar obras que exploren la elasticidad y la deformación, utilizando algoritmos que simulen la tensión en estructuras, creando formas que cambian dinámicamente.
5. Fuerza Normal
- Descripción: La fuerza normal es la fuerza que actúa perpendicularmente a la superficie de contacto de un objeto. Por ejemplo, cuando un libro descansa sobre una mesa, la mesa ejerce una fuerza normal hacia arriba.
- Tipo de fuerza: Fuerza normal
- Manifestación visual: Se observa como la resistencia que un objeto experimenta al estar en reposo sobre una superficie. Visualmente, puede representarse con flechas que apuntan hacia arriba desde la superficie.
- Inspiración en arte/diseño: La fuerza normal puede inspirar obras que exploren el equilibrio y la estabilidad, utilizando algoritmos que generen estructuras que se mantengan en equilibrio bajo diferentes fuerzas.
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:
Un Bosque Digital: Un viaje inmersivo a través de la naturaleza y la tecnología
La idea: Un bosque digital, una instalación interactiva que fusiona la belleza natural de un bosque con la magia de la tecnología. Los visitantes se adentran en un espacio físico rodeado de árboles y vegetación, pero la experiencia se transforma gracias a la tecnología.
La experiencia:
- Proyecciones dinámicas: Los árboles se convierten en lienzos para proyecciones de luz, creando paisajes oníricos que cambian con la interacción del público. Cada paso, cada movimiento, genera cambios en la vegetación digital, creando un efecto de respuesta en tiempo real.
- Realidad aumentada: A través de dispositivos móviles o gafas de realidad aumentada, los visitantes pueden descubrir criaturas digitales que habitan el bosque. Estas criaturas interactúan con el entorno físico, creando un juego de capas entre lo real y lo virtual.
- Música interactiva: Los sonidos del bosque, como el canto de los pájaros o el crujir de las hojas, se mezclan con música generativa que reacciona a la presencia del público. La música cambia de ritmo y tonalidad dependiendo de la interacción del visitante con la instalación, creando una banda sonora única para cada experiencia.
- Esculturas cinéticas: En el centro del bosque, una escultura cinética gigante se mueve de forma orgánica, controlada por algoritmos que simulan la vida de un árbol. Sus ramas se doblan, sus hojas se agitan y su tronco se ilumina con diferentes colores, creando un espectáculo visual impresionante.
Cómo se difumina la línea entre lo digital y lo tangible:
- La instalación crea una experiencia multisensorial: El público se involucra con la instalación a través de la vista, el oído, el tacto y el movimiento. La tecnología se integra de forma natural en el entorno, creando una experiencia inmersiva que fusiona lo real y lo virtual.
- La interacción es clave: Cada movimiento del visitante genera cambios en la instalación, creando una sensación de conexión y control sobre el entorno digital.
- El juego es una herramienta: La instalación se inspira en los videojuegos para crear una experiencia lúdica y atractiva, utilizando la tecnología para generar desafíos y recompensas.
Inspiración:
- El proyecto Data Structure: La instalación se inspira en la idea de conectar estructuras de datos con el mundo físico, creando un espacio donde la información se representa de forma tangible y dinámica.
- La naturaleza: El bosque es un espacio natural que invita a la exploración y la interacción. La instalación busca recrear la belleza y la magia del bosque, pero con un toque tecnológico que la hace única.
Conclusión:
El Bosque Digital es una propuesta que explora la relación entre la tecnología y la naturaleza, creando una experiencia inmersiva que fusiona lo digital y lo tangible. Es un ejemplo de cómo la tecnología puede utilizarse para crear experiencias multisensoriales que involucren al público de forma creativa y significativa.
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:
Que me llamo la atención
Me llamo la atención el como se calcula y programa la gravedad
Relación
Las Leyes de Newton
- Primera Ley de Newton (Ley de Inercia): Un objeto en reposo permanece en reposo, y un objeto en movimiento permanece en movimiento a una velocidad constante en línea recta, a menos que una fuerza externa actúe sobre él.
- Segunda Ley de Newton (Ley de la Aceleración): La aceleración de un objeto es directamente proporcional a la fuerza neta que actúa sobre él e inversamente proporcional a su masa. ( \textbf{F} = m \textbf{a} )
- Tercera Ley de Newton (Ley de Acción y Reacción): Por cada acción, hay una reacción igual y opuesta.
Vectores
- Definición: Un vector es una cantidad física que tiene magnitud y dirección. Se representa gráficamente como una flecha.
- Ejemplos: Fuerza, desplazamiento, velocidad, aceleración.
Relación entre las Leyes de Newton y los Vectores
- Fuerza: La fuerza es un vector, es decir, tiene magnitud y dirección. La Segunda Ley de Newton nos dice que la fuerza neta aplicada a un objeto es igual a la masa del objeto multiplicada por su aceleración.
- Aceleración: La aceleración también es un vector, ya que tiene magnitud (la tasa de cambio de la velocidad) y dirección.
- Masa: La masa es una cantidad escalar, es decir, solo tiene magnitud.
- Desplazamiento: El desplazamiento es un vector que representa el cambio de posición de un objeto.
Ejemplos:
- Un objeto en caída libre: La fuerza de gravedad actúa sobre el objeto, lo que le da una aceleración hacia abajo. Ambos, la fuerza de gravedad y la aceleración, son vectores.
- Un automóvil que acelera: La fuerza del motor del automóvil actúa sobre el vehículo, lo que le da una aceleración en la dirección del movimiento. Tanto la fuerza del motor como la aceleración son vectores.
En resumen:
Las leyes de Newton describen cómo las fuerzas afectan el movimiento de los objetos. Las fuerzas, la aceleración y el desplazamiento son cantidades vectoriales, lo que significa que tienen magnitud y dirección. Los vectores son una herramienta fundamental para comprender y aplicar las leyes de Newton.
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:
algoritmo aceleración
Aceleracón al mouse
// Calcular la diferencia entre la posición del mouse y el objeto let distance = mouseX - x;
// La aceleración será proporcional a la distancia entre el objeto y el mouse // Ajustar la constante de proporcionalidad para controlar la velocidad de respuesta a = distance * 0.001; // Multiplicamos por un factor para controlar la aceleración
// Actualizar la velocidad (v = v + a) v += a;
// Actualizar la posición (x = x + v) x += v;
Aceleración normal
// Cambiar la aceleración aleatoriamente en cada fotograma a = random(-0.1, 0.1); // Aceleración aleatoria entre -0.1 y 0.1, tambien se puede dar un valor fijo
v += a;
x += v;
if (x > width) { x = 0; // Resetea la posición a la izquierda }
if (x < 0) { x = width; // Resetea la posición a la derecha }
¿que tiene que ver con las leyes de newton?
-
Primera Ley de Newton: Esta ley nos dice que un objeto en reposo permanece en reposo y un objeto en movimiento permanece en movimiento a una velocidad constante en línea recta, a menos que una fuerza externa actúe sobre él. En otras palabras, si no hay fuerza neta actuando sobre un objeto, su aceleración es cero.
-
Segunda Ley de Newton: Esta ley establece que la fuerza neta que actúa sobre un objeto es directamente proporcional a la aceleración que experimenta y es inversamente proporcional a su masa.
- ( \textbf{F} = m \textbf{a} )
- Esta ecuación nos dice que si aplicamos una fuerza mayor a un objeto, este acelerará más. Si la masa del objeto es mayor, necesitará una fuerza mayor para lograr la misma aceleración.
-
Tercera Ley de Newton: Esta ley nos dice que por cada acción hay una reacción igual y opuesta. En términos de aceleración, esto significa que si un objeto A ejerce una fuerza sobre un objeto B, el objeto B ejercerá una fuerza igual y opuesta sobre el objeto A. Ambos objetos experimentarán una aceleración, pero en direcciones opuestas.
Ejemplos:
- Un automóvil que acelera: La fuerza del motor del automóvil actúa sobre el vehículo, lo que le da una aceleración en la dirección del movimiento.
- Una pelota que cae: La fuerza de gravedad actúa sobre la pelota, lo que le da una aceleración hacia abajo.
- Un patinador sobre hielo que se detiene: La fuerza de fricción entre los patines y el hielo actúa sobre el patinador, lo que le da una aceleración en dirección opuesta a su movimiento, hasta que se detiene.
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:
Problema detectado:
En el método applyForce(force)
, la línea this.acceleration = force;
sobrescribe la aceleración anterior en lugar de acumular las fuerzas aplicadas. Esto contradice el objetivo de calcular la aceleración como la sumatoria de todas las fuerzas en cada frame, ya que cada fuerza debería ser acumulativa.
Solución propuesta:
Para solucionar este problema, necesitamos acumular las fuerzas aplicadas antes de calcular la aceleración. Esto puede lograrse sumando las fuerzas aplicadas al vector de aceleración existente en cada frame. Luego, al finalizar el frame, reseteamos la aceleración para que las fuerzas aplicadas en el siguiente frame no se acumulen con las anteriores.
Implementación en p5.js
:
Aquí tienes una solución corregida para el método applyForce
:
applyForce(force) { this.acceleration.add(force); // Sumamos las fuerzas aplicadas}
Luego, en el método principal que actualiza la posición del objeto, reseteamos la aceleración después de actualizar la velocidad y posición:
update() { this.velocity.add(this.acceleration); // La velocidad es afectada por la aceleración this.position.add(this.velocity); // La posición es afectada por la velocidad this.acceleration.mult(0); // Reseteamos la aceleración para el siguiente frame}
Código completo ajustado:
Para mayor claridad, así quedaría la clase Mover
:
class Mover { constructor() { this.position = createVector(random(width), random(height)); this.velocity = createVector(0, 0); this.acceleration = createVector(0, 0); this.mass = 1; // Asignamos una masa, aunque sea 1 }
applyForce(force) { let f = p5.Vector.div(force, this.mass); // Consideramos la masa, por si cambia en el futuro this.acceleration.add(f); // Sumamos las fuerzas }
update() { this.velocity.add(this.acceleration); this.position.add(this.velocity); this.acceleration.mult(0); // Reseteamos la aceleración }
display() { fill(255); ellipse(this.position.x, this.position.y, 16, 16); }}
Explicación adicional:
- La aceleración es acumulada en cada frame con todas las fuerzas aplicadas (
applyForce
). - La masa se incluye en la fórmula para mayor flexibilidad, aunque en este ejemplo es constante e igual a 1.
- Reseteamos la aceleración al finalizar cada frame (
this.acceleration.mult(0);
).
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é es necesario multiplicar la aceleración por cero
La aceleración en un frame está determinada por la sumatoria de todas las fuerzas aplicadas al objeto durante ese frame. Si no se resetea la aceleración al final del frame, esta seguiría acumulándose indebidamente en los frames siguientes, lo que causaría un comportamiento erróneo y físicamente incoherente. En la vida real, las fuerzas que actúan sobre un objeto en un instante determinado no se “recuerdan” en los siguientes instantes; cada nuevo instante (frame) parte de una nueva evaluación de las fuerzas.
Al multiplicar la aceleración por cero, aseguramos que:
La aceleración acumulada de un frame no influya en los cálculos de los siguientes frames.
Cada frame sea independiente en cuanto a la aplicación de fuerzas, replicando con precisión cómo se comportarían los objetos según las leyes de Newton.
Por qué justo al final de update() La razón por la cual este reset ocurre al final del método update() es porque, en este punto, la aceleración ya ha cumplido su propósito en el cálculo de la velocidad y, posteriormente, de la posición del objeto. Multiplicar la aceleración por cero antes de actualizar la velocidad y la posición invalidaría su efecto, lo que daría lugar a que el objeto no responda correctamente a las fuerzas.
En esencia:
Primero se suma la aceleración a la velocidad.
Luego, la velocidad se suma a la posición.
Por último, la aceleración se resetea para el próximo frame.
Este orden respeta la secuencia lógica y asegura que el movimiento del objeto refleje correctamente las fuerzas que actuaron sobre él en ese frame.
Conclusión
Multiplicar la aceleración por cero no es un acto arbitrario, sino un procedimiento esencial para mantener el flujo correcto del cálculo físico en cada frame. Este paso permite que las fuerzas se acumulen solo durante el frame actual y se reinicien para el siguiente, proporcionando un comportamiento natural y controlado en simulaciones físicas.
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:
El planteamiento tiene un problema clave: el objeto force
es un vector de la clase p5.Vector
que se pasa por referencia. Esto significa que cualquier modificación que hagas al vector dentro del método applyForce()
afectará al objeto original que se pasó como argumento. En este caso, al dividir force
por 10 con force.div(10);
, no solo estás escalando el valor dentro del método, sino que también estás alterando permanentemente el vector original. Esto puede causar problemas si el mismo vector force
necesita ser reutilizado en otros cálculos o contextos fuera del método applyForce()
.
Problema detectado
- Modificación permanente de
force
: Dado queforce
se pasa por referencia, al dividirlo por 10, se está alterando el vector original para siempre, lo cual no es deseable si necesitas usarlo nuevamente en su forma original. - Implicación conceptual: En física, las fuerzas son independientes entre sí y no deberían ser modificadas dentro de este contexto.
Solución propuesta
Para evitar modificar el vector original, debes crear una copia del objeto force
antes de manipularlo. Esto asegura que la fuerza original permanezca intacta mientras aplicas las transformaciones necesarias.
Implementación en p5.js
Aquí está cómo podrías implementar una solución adecuada:
applyForce(force) { let f = force.copy(); // Crear una copia del vector force f.div(this.mass); // Aplicar la segunda ley de Newton: F = m * a, o a = F / m this.acceleration.add(f); // Acumular la fuerza en la aceleración}
Explicación del código
- Copia del vector: Se utiliza el método
copy()
dep5.Vector
para generar un duplicado del vectorforce
, asegurando que los cálculos dentro deapplyForce()
no modifiquen el vector original. - División por masa: El vector copiado,
f
, se escala dividiéndolo por la masa del objeto, respetando la segunda ley de Newton. - Acumulación de fuerzas: La aceleración acumulativa se calcula sumando este vector
f
a la aceleración actual.
Código completo ajustado
Aquí tienes un ejemplo del flujo completo:
class Mover { constructor() { this.position = createVector(random(width), random(height)); this.velocity = createVector(0, 0); this.acceleration = createVector(0, 0); this.mass = 10; // Masa del objeto }
applyForce(force) { let f = force.copy(); // Crear una copia para evitar modificar el original f.div(this.mass); // Considerar la masa this.acceleration.add(f); // Acumular la fuerza }
update() { this.velocity.add(this.acceleration); this.position.add(this.velocity); this.acceleration.mult(0); // Resetear la aceleración para el siguiente frame }
display() { fill(255); ellipse(this.position.x, this.position.y, 16, 16); }}
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
Cuando un dato se pasa por valor, se crea una copia independiente del valor original. Cualquier modificación hecha a la copia no afecta al valor original. Esto ocurre generalmente con tipos de datos primitivos (como números, strings, booleanos) en lenguajes como JavaScript.
Por ejemplo:
let a = 10;let b = a; // Se copia el valor de 'a'b = 20; // Cambiar 'b' no afecta 'a'console.log(a); // Imprime: 10
Paso por referencia
Cuando un dato se pasa por referencia, no se copia el dato, sino que se comparte una referencia al valor original en memoria. Por lo tanto, cualquier cambio hecho a través de una referencia afecta también al valor original. Esto sucede con objetos y arrays en JavaScript.
Por ejemplo:
let objA = { x: 10 };let objB = objA; // Ambas variables apuntan al mismo objetoobjB.x = 20; // Cambiar 'objB' afecta 'objA'console.log(objA.x); // Imprime: 20
Diferencia en el fragmento de código
En el código dado:
let friction = this.velocity.copy(); // Copia por valorlet friction = this.velocity; // Copia por referencia
-
let friction = this.velocity.copy();
- Aquí se crea una copia independiente del vector
this.velocity
. Esto significa que cualquier cambio hecho al vectorfriction
no afectará athis.velocity
, ya que son objetos distintos en la memoria.
- Aquí se crea una copia independiente del vector
-
let friction = this.velocity;
- En este caso,
friction
es una referencia al mismo objeto quethis.velocity
. Por lo tanto, cualquier modificación afriction
también cambiaráthis.velocity
, lo que podría causar problemas inesperados sithis.velocity
se utiliza en otros cálculos o contextos.
- En este caso,
Problemas con let friction = this.velocity
El problema principal al usar let friction = this.velocity
es que cualquier cambio en friction
alterará directamente this.velocity
. Esto puede llevar a errores difíciles de rastrear, especialmente en un contexto de simulaciones físicas donde la integridad de las propiedades como velocity
es crucial.
Por ejemplo, si intentas modificar friction
para simular una fuerza de rozamiento y divides su valor, terminarás modificando también this.velocity
, lo cual distorsionará el comportamiento del objeto.
let friction = this.velocity; // Copia por referenciafriction.mult(-1); // Esto cambiará también 'this.velocity' accidentalmente
Conclusión e implicaciones
En el fragmento de código:
-
friction = this.velocity.copy()
implica una copia por valor y es la forma adecuada para trabajar con vectores en este caso, ya que garantiza quefriction
sea independiente y no afectethis.velocity
. -
friction = this.velocity
implica una copia por referencia, lo que puede provocar errores si se modificafriction
, ya que también cambiaráthis.velocity
.
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.
🚀 Tu solución:
Para modelar una fuerza en una simulación utilizando p5.js, un entorno de programación en JavaScript para crear gráficos interactivos, animaciones y simulaciones, seguimos una serie de pasos que permiten representar las fuerzas de manera efectiva. A continuación te explico el proceso básico para lograrlo.
Pasos para modelar una fuerza en una simulación 2d
-
Entender el concepto de fuerza: Una fuerza es una magnitud vectorial que tiene tanto módulo (intensidad) como dirección. En simulaciones físicas, se modelan las fuerzas como vectores que afectan el movimiento de un objeto. Las fuerzas más comunes son la gravedad, fricción, empuje, etc.
-
Definir el objeto sobre el que actuará la fuerza: Debemos crear un objeto que se moverá debido a la aplicación de la fuerza. Este objeto tendrá propiedades como la posición, velocidad y aceleración. Vamos a usar una partícula o un cuerpo en movimiento.
-
Crear una clase para el objeto: En p5.js, creamos una clase para nuestro objeto con propiedades básicas como posición, velocidad y aceleración. Esta clase también tendrá métodos para actualizar su estado y aplicar la fuerza.
class Particle {constructor(x, y) {this.position = createVector(x, y); // Posición inicialthis.velocity = createVector(0, 0); // Velocidad inicialthis.acceleration = createVector(0, 0); // Aceleración inicialthis.mass = 1; // Masa del objeto}applyForce(force) {// F = m * a, a = F / mlet f = force.copy(); // Copiar la fuerzaf.div(this.mass); // Dividir la fuerza por la masa para obtener aceleraciónthis.acceleration.add(f); // Sumar la aceleración resultante}update() {// Actualizar la velocidad y la posiciónthis.velocity.add(this.acceleration);this.position.add(this.velocity);this.acceleration.mult(0); // Reseteamos la aceleración}display() {ellipse(this.position.x, this.position.y, 20, 20); // Dibujar el objeto}} -
Aplicar una fuerza a través de un vector: Una fuerza se puede representar como un vector que tendrá magnitud y dirección. Usaremos
createVector()
de p5.js para crear el vector de la fuerza. Por ejemplo, si queremos aplicar una fuerza de gravedad hacia abajo:let gravity;function setup() {createCanvas(400, 400);particle = new Particle(200, 200);gravity = createVector(0, 0.1); // Fuerza gravitacional hacia abajo}function draw() {background(255);particle.applyForce(gravity); // Aplicar la gravedad al objetoparticle.update(); // Actualizar el objetoparticle.display(); // Mostrar el objeto}En este caso, la fuerza de gravedad es un vector con una dirección hacia abajo (eje Y positivo) y una magnitud de 0.1, lo que implica que el objeto caerá lentamente.
-
Simulación de interacciones y fuerzas adicionales: Si quieres simular otras fuerzas, como la fricción o la resistencia al aire, puedes añadir esos efectos a tu simulación. Por ejemplo, la fricción es una fuerza que se opone al movimiento y tiene una dirección opuesta a la velocidad del objeto:
let friction;function setup() {createCanvas(400, 400);particle = new Particle(200, 200);gravity = createVector(0, 0.1); // Gravedad}function draw() {background(255);friction = particle.velocity.copy(); // Copiar la velocidadfriction.normalize(); // Normalizar el vector de velocidadfriction.mult(-0.01); // Escalar el vector de fricciónparticle.applyForce(gravity); // Aplicar gravedadparticle.applyForce(friction); // Aplicar fricciónparticle.update();particle.display();} -
Ajustar los parámetros: Después de aplicar las fuerzas, ajustar los parámetros del objeto (como la masa o la fuerza aplicada) para observar cómo cambian el movimiento y las interacciones en la simulación.
- Crear un objeto (como una partícula o cuerpo).
- Aplicar fuerzas utilizando vectores.
- Actualizar la aceleración, velocidad y posición del objeto.
- Visualizar el objeto en pantalla.
- Ajustar las fuerzas y parámetros para observar diferentes comportamientos.
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:
1. Fricción
Descripción: Esta simulación muestra un objeto que se mueve sobre una superficie con fricción. Puedes ajustar la fuerza de fricción y observar cómo afecta la velocidad y la distancia que recorre el objeto.
Código:
let x = 100;let y = 100;let vx = 5;let vy = 0;let friction = 0.05; // Fuerza de fricción
function setup() { createCanvas(400, 400);}
function draw() { background(220);
// Calcular la fuerza de fricción let fx = -vx * friction; let fy = -vy * friction;
// Aplicar la fuerza de fricción a la velocidad vx += fx; vy += fy;
// Mover el objeto x += vx; y += vy;
// Dibujar el objeto ellipse(x, y, 20, 20);}
Enlace: https://editor.p5js.org/Teo-Diaz/sketches/XfBKSYQPD
Explicación:
- La variable
friction
representa la fuerza de fricción. Puedes modificarla para ver cómo afecta el movimiento del objeto. - En cada cuadro, se calcula la fuerza de fricción en las direcciones horizontal (
fx
) y vertical (fy
). - La fuerza de fricción se aplica a la velocidad del objeto, reduciendo su velocidad gradualmente.
2. Resistencia del aire
Descripción: Esta simulación muestra un objeto que se mueve a través del aire, experimentando resistencia del aire. Puedes ajustar la densidad del aire y observar cómo afecta la velocidad terminal del objeto.
Código:
let x = 100;let y = 100;let vx = 10;let vy = 0;let gravity = 0.1; // Fuerza de gravedadlet airDensity = 0.1; // Densidad del airelet dragCoefficient = 0.5; // Coeficiente de arrastre
function setup() { createCanvas(400, 400);}
function draw() { background(220);
// Calcular la fuerza de resistencia del aire let speed = sqrt(sq(vx) + sq(vy)); let dragForce = -0.5 * airDensity * dragCoefficient * speed * speed; let fx = dragForce * vx / speed; let fy = dragForce * vy / speed;
// Aplicar la fuerza de resistencia del aire y la gravedad a la velocidad vx += fx; vy += fy + gravity;
// Mover el objeto x += vx; y += vy;
// Dibujar el objeto ellipse(x, y, 20, 20);}
Enlace https://editor.p5js.org/Teo-Diaz/sketches/fllE1QVNy
Explicación:
- La variable
airDensity
representa la densidad del aire. Puedes modificarla para simular diferentes ambientes. - La fuerza de resistencia del aire se calcula usando la fórmula ( F_d = \frac{1}{2} \rho v^2 C_d A ), donde ( \rho ) es la densidad del aire, ( v ) es la velocidad del objeto, ( C_d ) es el coeficiente de arrastre y ( A ) es el área de la superficie frontal del objeto.
- En esta simulación, se asume que el área de la superficie frontal del objeto es constante, por lo que el coeficiente de arrastre se ajusta para representar la forma del objeto.
3. Atracción gravitacional
Descripción: Esta simulación muestra dos objetos que se atraen mutuamente debido a la fuerza gravitacional. Puedes ajustar la masa de los objetos y observar cómo afecta la fuerza de atracción.
Código:
let x1 = 100;let y1 = 100;let vx1 = 0;let vy1 = 0;let mass1 = 10; // Masa del objeto 1
let x2 = 300;let y2 = 100;let vx2 = 0;let vy2 = 0;let mass2 = 5; // Masa del objeto 2
let G = 0.1; // Constante gravitacional
function setup() { createCanvas(400, 400);}
function draw() { background(220);
// Calcular la distancia entre los objetos let dx = x2 - x1; let dy = y2 - y1; let distance = sqrt(sq(dx) + sq(dy));
// Calcular la fuerza gravitacional let force = G * mass1 * mass2 / sq(distance);
// Calcular las componentes de la fuerza let fx1 = force * dx / distance; let fy1 = force * dy / distance; let fx2 = -fx1; let fy2 = -fy1;
// Aplicar la fuerza gravitacional a la velocidad de los objetos vx1 += fx1 / mass1; vy1 += fy1 / mass1; vx2 += fx2 / mass2; vy2 += fy2 / mass2;
// Mover los objetos x1 += vx1; y1 += vy1; x2 += vx2; y2 += vy2;
// Dibujar los objetos ellipse(x1, y1, 20, 20); ellipse(x2, y2, 10, 10);}
Enlace https://editor.p5js.org/Teo-Diaz/sketches/IATq9HvsR
Explicación:
- La variable
G
representa la constante gravitacional. Puedes modificarla para simular diferentes ambientes. - La fuerza gravitacional se calcula usando la fórmula ( F = G \frac{m_1 m_2}{r^2} ), donde ( G ) es la constante gravitacional, ( m_1 ) y ( m_2 ) son las masas de los objetos y ( r ) es la distancia entre ellos.
- La fuerza gravitacional se aplica a la velocidad de los objetos, haciendo que se atraigan mutuamente.
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:
Simulación:
Código:
let bodies = [];let G = 4.9; // Constante gravitacional
function setup() { createCanvas(800, 600); background(25);
// Crear 10 cuerpos con diferentes masas y posiciones aleatorias for (let i = 0; i < 10; i++) { bodies.push({ x: random(width), y: random(height), vx: random(-2, 2), vy: random(-2, 2), mass: random(5, 20), color: color(random(255), random(255), random(255)) }); }}
function draw() { background(25, 10);
// Calcular las fuerzas gravitacionales entre cada par de cuerpos for (let i = 0; i < bodies.length; i++) { for (let j = i + 1; j < bodies.length; j++) { let body1 = bodies[i]; let body2 = bodies[j];
let dx = body2.x - body1.x; let dy = body2.y - body1.y; let distance = sqrt(sq(dx) + sq(dy));
// Evitar división por cero if (distance < 1) { distance = 1; }
let force = G * body1.mass * body2.mass / sq(distance);
// Aplicar la fuerza a la velocidad de cada cuerpo body1.vx += force * dx / body1.mass / distance; body1.vy += force * dy / body1.mass / distance; body2.vx -= force * dx / body2.mass / distance; body2.vy -= force * dy / body2.mass / distance; } }
// Actualizar las posiciones de los cuerpos for (let i = 0; i < bodies.length; i++) { bodies[i].x += bodies[i].vx; bodies[i].y += bodies[i].vy; }
// Dibujar los cuerpos como círculos con colores aleatorios for (let i = 0; i < bodies.length; i++) { fill(bodies[i].color); noStroke(); ellipse(bodies[i].x, bodies[i].y, bodies[i].mass * 2, bodies[i].mass * 2); }}
Explicación:
- La simulación crea un conjunto de cuerpos con diferentes masas y posiciones aleatorias.
- La fuerza gravitacional se calcula entre cada par de cuerpos usando la ley de gravitación de Newton: ( F = G \frac{m_1 m_2}{r^2} ).
- La fuerza se aplica a la velocidad de cada cuerpo, haciendo que se atraigan mutuamente.
- Los cuerpos se dibujan como círculos con diferentes colores para destacar su movimiento.
Imagen:
Enlace https://editor.p5js.org/Teo-Diaz/sketches/tldUYnJVt
Inspiración de Calder:
La simulación busca capturar la esencia del movimiento y el equilibrio de las esculturas cinéticas de Calder. Los cuerpos en movimiento, con sus diferentes masas y colores, crean un espectáculo dinámico y fascinante que evoca la complejidad del universo.
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:
debido a mis conocimientos previos de fisica y las unidades anteriores no fue dificil lograr los ejercicios planteados, por ejemplo en el ejercicio de los n-cuerpos simplemente fue aplicar las formulas de atraccion gravitaria para lograr el programa
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:
Los conceptos físicos de Newton, especialmente sus tres leyes del movimiento, tienen diversas aplicaciones en el diseño de entretenimiento digital. Estas leyes se utilizan para simular movimientos, interacciones y dinámicas realistas en videojuegos, películas de animación y simuladores. Aquí te dejo tres ejemplos concretos:
1. Simulación de movimiento en videojuegos: Leyes de Newton para crear físicas realistas
Los videojuegos de acción, carreras o simuladores utilizan las leyes de Newton para simular el movimiento de los personajes, vehículos u objetos en un entorno virtual. La Primera Ley de Newton (o Ley de la inercia) y la Segunda Ley de Newton (F=m*a) son fundamentales para que los objetos continúen su movimiento hasta que una fuerza externa actúe sobre ellos, como la fricción o las colisiones.
Ejemplo: En juegos de carreras como Gran Turismo o Forza Horizon, el comportamiento de los coches se modela mediante ecuaciones físicas que incluyen la aceleración, la inercia y la resistencia del aire, entre otras. La velocidad del coche cambia en función de las fuerzas aplicadas (aceleración, fricción con el asfalto, etc.), lo que crea una experiencia realista para el jugador. La simulación de los choques y las maniobras de derrape también se basan en las interacciones entre los vehículos y el terreno, utilizando las leyes de Newton para determinar el comportamiento de los objetos al interactuar.
2. Animación física en películas y series: Dinámica de cuerpos en movimiento
En el diseño de animaciones digitales para películas y series, las leyes de Newton permiten simular la dinámica de los cuerpos en situaciones de interacción, caídas o colisiones, proporcionando un realismo físico en los movimientos de personajes y objetos.
Ejemplo: En Toy Story (Pixar), los personajes y los objetos interactúan en un entorno que simula las leyes de la física, como las caídas de los juguetes o las colisiones entre ellos. La Tercera Ley de Newton (acción y reacción) se aplica a los movimientos cuando los personajes impulsan o empujan objetos, como cuando Woody empuja a Buzz Lightyear o cuando los juguetes interactúan con otros objetos en el entorno. Este tipo de animación no solo se basa en la física, sino también en cómo esa física afecta las emociones de los personajes (por ejemplo, los movimientos de Woody al ser lanzado).
3. Simuladores de física en aplicaciones educativas: Enseñanza interactiva
En aplicaciones educativas y simuladores, las leyes de Newton se emplean para enseñar conceptos de física de manera interactiva, permitiendo a los usuarios experimentar con el comportamiento de los objetos bajo diferentes condiciones.
Ejemplo: En simuladores como PhET Interactive Simulations (desarrollado por la Universidad de Colorado Boulder), se utilizan las leyes de Newton para crear simulaciones de dinámica de partículas, movimiento de proyectiles, y otros experimentos físicos. Los usuarios pueden modificar variables como la masa, la velocidad o las fuerzas aplicadas, y observar cómo estos cambios afectan el movimiento de los objetos en la simulación. Este tipo de aplicaciones enseña de manera visual y práctica conceptos clave de la física, como la relación entre la fuerza, la masa y la aceleración (Segunda Ley de Newton).
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:
las estrategias de aprendizage fueron leer y prueba y error con algo de ayuda de ias como chat gpt y copilot, principalmente cuando tenia errores que no comprendia o no tenia claro por donde encarar un problema, de esa forma comprendia mejor las cosas y podia aplicarlas.
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:
Nota
4