En esta unidad, te sumergirás en el fascinante mundo de los vectores, las fuerzas invisibles
que dan vida a tus creaciones digitales. Experimentarás con conceptos matemáticos y físicos,
como velocidad y aceleración, para controlar el movimiento en tus proyectos interactivos.
Aprenderás a manipular vectores en p5.js, pero recuerda que este conocimiento es aplicable
a cualquier lenguaje de programación.
¿Qué aprenderás en esta unidad?
En esta fase, vas a revisar algunos conceptos básicos de vectores que ya conoces tu paso
por ciencia básica.
// Instead of a bunch of floats, you now have just two variables.
let position;
let velocity;
functionsetup() {
createCanvas(640,240);
// Note that createVector() has to be called inside setup().
position=createVector(100,100);
velocity=createVector(2.5,2);
}
functiondraw() {
background(255);
position.add(velocity);
// You still sometimes need to refer to the individual components of a p5.Vector and can do so using the dot syntax: position.x, velocity.y, and so forth.
if (position.x>width||position.x<0) {
velocity.x=velocity.x*-1;
}
if (position.y>height||position.y<0) {
velocity.y=velocity.y*-1;
}
stroke(0);
fill(127);
circle(position.x,position.y,48);
}
¿Cómo funciona la suma dos vectores?
Ocurre justo en la función draw() del código
position.add(velocity);
position es un vector con coordenadas (x,y)
Velocity es otro vector con coordenadas (vx, vy)
La suma de vectores se hace sumando cada componente individualmente (x + vx, y + vy).
El método .add() en p5.Vector suma cada componente del vector actual con las componentes de otro vector.
“Toma el vector position y agrégale el vector velocity, sumando x con vx y y con vy.”
xnuevo = xactual + vx
ynuevo = yactual + vy
Internamente lo que hace .add() es:
position.x=position.x+velocity.x;
position.y=position.y+velocity.y;
¿Por qué esta línea position = position + velocity; no funciona?
Esta línea no funcionaría porque “position” y “velocity” son objetos tipo p5.vestor por lo que en Javascript no se pueden sumanr objetos directamente con el +.
¿Cómo se hace correctamente?
Usar el método .add() para modificar el vector original (como en el código analizado)
Usar p5.Vector.add() crea un nuevo objeto (pero usas más espacio en la memoria)
let newposition = p5.Vector.add(position, velocity);
Actividad 02
Repasa
Enunciado: realiza este ejercicio del libro Exercise 1.1
¿Que tuviste que hacer para hacer la conversión propuesta?
direction.setMag(random(1, 3)); // Normalizar y ajustar magnitud
} else {
// Movimiento aleatorio después de llegar al centro
direction=p5.Vector.random2D();
direction.setMag(2); // Hacer que el movimiento sea constante
}
// Comprobar si está lo suficientemente cerca del centro
if (!this.reversed&&this.position.dist(center) <5) {
this.reversed=true;
}
// Aplicar el movimiento
this.position.add(direction);
}
}
⭐ Cambios realizados
this.position almacena la posición como un vector en lugar de dos variables separadas.
p5.Vector.sub(center, this.position) obtiene un vector que apunta hacia el centro.
.setMag(random(1, 3)) ajusta la magnitud del vector, controlando la velocidad.
Se reemplazaron los múltiples if para mover x e y manualmente con una sola operación vectorial.
Se usa p5.Vector.random2D() para generar direcciones aleatorias.
Se creó un array de walkers, eliminando las variables individuales (walker1, walker2, etc.).
Al usar p5.Vector, p5.js trata la posición y el movimiento como objetos, lo que permite manipularlos con métodos incorporados en lugar de
manejar manualmente cada componente (x e y).
Investigación
¡Es hora de explorar! En esta fase, profundizarás en la teoría y práctica de los vectores a
través de la lectura del capítulo 1 del libro “The Nature of Code”.
Realizarás experimentos, analizarás ejemplos y te familiarizarás con las diferentes funciones de p5.js
para manipular vectores.
Actividad 03
Experimenta
Enunciado: dale una mirada a este código
let position;
functionsetup() {
createCanvas(400,400);
posicion=createVector(6,9);
playingVector(posicion);
noLoop();
}
functionplayingVector(v){
v.x=20;
v.y=30;
}
functiondraw() {
background(220);
console.log("Only once");
}
Para este experimento puedes usar las funciones console.log() y print() para imprimir mensajes en la consola del navegador. También puedes usar el método toString() de la clase p5.Vector para imprimir el vector en la consola.
¿Qué resultado esperas obtener?
¿Qué resultado obtuviste?
Recuerda los conceptos de paso por valor y paso por referencia en programación. Muestra ejemplos de este concepto en
javascript.
¿Qué tipo de paso se está realizando en el código?
Si le agrego console.log(posicion.toString()); en diferentes partes del código, puedo ver el comportamiento de la posición en algunas partes del código.
¿Qué resultado obtuviste?
Recuerda los conceptos de paso por valor y paso por referencia en programación. Muestra ejemplos de este concepto en javascript.
En paso por valor, la función recibe una copia de la variable original, por lo que cualquier cambio no afecta el valor original.
Tipos de datos a los que aplica: Number, String, Boolean, Undefined, Null, Symbol…
let a = 10;
let b = a; // Se copia el valor
b=20; // Solo cambia 'b', 'a' sigue siendo 10
console.log(a); // 10
console.log(b); // 20
En paso por referencia, la función recibe una referencia (una dirección en memoria) al objeto original, lo que significa que cualquier cambio
dentro de la función afectará la variable original.
Tipos de datos a los que aplica: Object (p5.Vector entra en esta categoría), Array, Function
¿Qué tipo de paso se está realizando en el código?
Los cambios en la posición del vector se dan debido a que es un objeto, y los objetos en JavaScript se pasan por referencia, lo que significa que cualquier modificación dentro de playingVector(v)
afecta directamente la variable posicion.
¿Qué aprendiste?
p5.Vector se comporta como un objeto en JavaScript, por lo que cualquier modificación dentro de una función afecta la variable original.
Usar console.log() con .toString() es útil para depurar y entender cómo cambian los valores en el código.
Los números y strings en JavaScript se pasan por valor (se copia el dato).
Los objetos, arreglos y vectores de p5.js se pasan por referencia, lo que significa que modificar un objeto dentro de una función modifica el original.
Actividad 04
Explora posibilidades
Enunciado: dale una mirada a la clase p5.Vector aquí.
¿Para qué sirve el método mag()? Nota que hay otro método llamado magSq(). ¿Cuál es la diferencia entre ambos? ¿Cuál es más eficiente?
¿Para qué sirve el método normalize()?
Te encuentras con un periodista en la calle y te pregunta ¿Para qué sirve el método dot()? ¿Qué le responderías en un frase?
El método dot() tiene una versión estática y una de instancia. ¿Cuál es la diferencia entre ambas?
Ahora el mismo periodista curioso de antes te pregunta si le puedes dar una intuición geométrica acerca del producto cruz. Entonces te pregunta ¿Cuál es la interpretación geométrica del producto cruz de dos vectores? Tu respuesta debe incluir qué pasa con la orientación y la magnitud del vector resultante.
¿Para que te puede servir el método dist()?
¿Para qué sirven los métodos normalize() y limit()?
¿Para qué sirve el método mag()? Nota que hay otro método llamado magSq().
¿Cuál es la diferencia entre ambos? ¿Cuál es más eficiente?
Método mag(): Devuelve la magnitud (o norma) del vector, es decir, su longitud en el espacio calculando la raíz cuadrada de las dimensiones del vector.
Método magSq(): Devuelve la magnitud al cuadrado del vector, sin calcular la raíz cuadrada.
Diferencias
mag() calcula la raíz cuadrada, lo cual consume más recursos computacionales.
magSq() es más eficiente si solo necesitas comparar magnitudes (evitando la raíz cuadrada innecesaria).
⭐El método más eficiente es magSq() porque consume menos recursos al no calcular la raíz cuadrada
¿Para qué sirve el método normalize()?
Ajusta el vector para que tenga una magnitud de 1, sin cambiar su dirección.
La versión estática de la función -> p5.vector.normalize(v), devuelve un nuevo vector sin modificar el original.
Te encuentras con un periodista en la calle y te pregunta ¿Para qué sirve el método dot()? ¿Qué le responderías en un frase?
El método dot() es como una entrevista: mide qué tanto coincide la dirección de tus preguntas (un vector) con las respuestas del entrevistado (otro vector). Si el resultado es alto, están alineados; si es cero, no hay relación; y si es negativo, van en direcciones opuestas.
El método dot() tiene una versión estática y una de instancia. ¿Cuál es la diferencia entre ambas?
Versión
Sintaxis
¿Cómo funciona?
¿Cuándo usala?
Instancia
vectorA.dot(vectorB)
Se llama desde un vector específico
Cuando ya tienes un vector base y quieres compararlo con otro
Estática
p5.Vector.dot(vectorA, vectorB)
Se llama desde p5.Vector y usa dos vectores dados
Cuando quieres calcular el producto escalar sin depender de un vector en particular
Ahora el mismo periodista curioso de antes te pregunta si le puedes dar una intuición geométrica acerca del producto cruz. Entonces te pregunta ¿Cuál es la interpretación geométrica del producto cruz de dos vectores? Tu respuesta debe incluir qué pasa con la orientación y la magnitud del vector resultante.
El producto cruz entre dos vectores es una operación que produce un nuevo vector perpendicular al plano definido por los dos vectores originales.
Geometría del producto cruz
Magnitud: La magnitud del vector resultante es igual al área del paralelogramo formado por los dos vectores originales.
Si los vectores son paralelos, el área es cero y el producto cruz también.
Si son perpendiculares, el área es máxima.
Dirección (Orientación):
La dirección del vector resultante sigue la regla de la mano derecha:
El pulgar apuntará en la dirección del vector resultante.
En 3D, el vector resultante es perpendicular al plano definido por los dos vectores originales.
En 2D, el producto cruz da un escalar (no un vector), que representa cuánto “gira” un vector respecto al otro.
¿Para que te puede servir el método dist()?
El método dist() calcula la distancia entre dos puntos en un espacio 2D o 3D. Es útil para: Detectar colisiones entre objetos, medir la proximidad entre dos elementos y aplicar reglas basadas en distancia (por ejemplo, hacer que un personaje se mueva solo si está cerca de un objetivo).
¿Para qué sirven los métodos normalize() y limit()?
normalize() - Convertir un vector en unitario
El método .normalize() transforma un vector en un vector unitario, es decir, un vector con la misma dirección, pero con magnitud 1.
¿Por qué es útil?
Se usa cuando solo te interesa la dirección y no la magnitud.
Permite manejar direcciones sin alterar la escala de otros cálculos.
limit() - Restringir la magnitud de un vector
El método .limit(max) asegura que la magnitud de un vector no supere un valor dado.
¿Para qué sirve?
Evita que un objeto se mueva demasiado rápido en una simulación.
Controla la velocidad de partículas o agentes en inteligencia artificial.
Actividad 05
Interpolamos?
Enunciado: vas a tomar como inspiración este ejemplo de la referencia de p5.js:
let v3 = p5.Vector.lerp(v1, v2, t); // Punto animado sobre el vector verde
v1: representa el punto de inicio del movimiento
v2: indica el punto final del movimiento
t: es un valor entre 0 y 1 que indica cuánto se ha movido entre los dos puntos
Cuando t = 0, v3 es igual a v1 (inicio del vector verde).
Cuando t = 1, v3 es igual a v2 (final del vector verde).
Cuando t = 0.5, v3 es exactamente la mitad del camino entre v1 y v2.
Como t oscila entre 0 y 1, el vector morado se mueve de ida y vuelta sobre el vector verde.
lerpColor()
let currentColor = lerpColor(colorStart, colorEnd, t); // Interpolación de color
Cuando t = 0, currentColor es morado (colorStart).
Cuando t = 1, currentColor es cian (colorEnd).
Cuando t = 0.5, currentColor es una mezcla entre ambos (azulado-lila).
Como t oscila entre 0 y 1, el color cambia de ida y vuelta entre morado y cian.
¿Cómo se dibuja una flecha usando drawArrow()?
Para dibujar una flecha usando la función drawArrow(), debes proporcionar tres parámetros:
base: La posición inicial de la flecha (un p5.Vector).
vec: La dirección y magnitud del vector (también un p5.Vector).
myColor: El color de la flecha.
functiondrawArrow(base, vec, myColor) {
push();
stroke(myColor); // Color de la línea
strokeWeight(3); // Grosor de la línea
fill(myColor); // Color de la punta de la flecha
translate(base.x,base.y); // Mueve el origen al punto base
line(0,0,vec.x,vec.y); // Dibuja la línea de la flecha
rotate(vec.heading()); // Rota el sistema para apuntar en la dirección del vector
let arrowSize = 7; // Tamaño de la punta de la flecha
translate(vec.mag() -arrowSize,0); // Posiciona la punta al final de la línea
triangle(0,arrowSize/2,0,-arrowSize/2,arrowSize,0); // Dibuja la punta
pop();
}
Cuando invocamos la función para crear un nuevo vector es cuando le pasamos los parámetros para que pueda realizar las operaciones correspondientes.
Actividad 06
Hagamos que todo se mueva
Enunciado: modifica de nuevo el programa de la actividad anterior, pero esta vez cambia la base de las flechas y la escala de los vectores usando el mouse.
¿Cómo agregué los cambios y solucioné los problemas?
Cambiar las bases de las flechas al usando el mouse
Antes la base de los vectores estaba fija en el centro del lienzo.
Esto significa que todas las flechas partían del mismo punto, sin importar la posición del cursor.
Ahora en casa frame (draw()), se actualiza la posición del mouse:+
base.set(mouseX, mouseY);
Adaptar la escala de los vectores
En lugar de usar un valor constante, scaleFactor ahora depende del mouseX. Se usa map(mouseX, 0, width, 5, 20) para interpolar la escala en un rango específico.
Se mantiene la lógica de interpolación (lerp) para el vector intermedio (v3).
Se combina con lerpColor(colorStart, colorEnd, t) para cambiar de color gradualmente.
Actividad 07
Motion 101
Entrega: ahora vas a leer y analizar con mucho detenimiento la sección
Motion with vectors. El autor propone un
marco de movimiento llamado motion 101.
¿En qué consiste motion 101?
Entrega: la respuesta a la pregunta e ilustra con un ejemplo.
Es un algoritmo que permite simular el movimiento de los objetos en un espacio digital empleando principios físicos básicos como la velocidad, posición y la aceleración. Para ello se ayuda de vectores que representen estas magnitudes físicas, al ser vectores (objetos en p5.js) se pueden manipular con operaciones matemáticas básicas.
¿Cómo se simula el movimiento?
Se crea una clase Mover que contiene atributos de posición, velocidad y aceleración.
Se actualiza la posición del objeto en cada frame aplicando las ecuaciones anteriores.
Se usa acceleration para modificar el comportamiento del objeto (por ejemplo, que se mueva hacia el mouse o de manera aleatoria).
Uno de mis intereses es la pastelería así que quise usar algunos de sus conceptos para poder ilustrarme a mi misma la utilidad de Motion 101. Para realizar tortas suelo usar una batidora de mano, para poder simular el movimiento de este implemento debería prestar atención a su funcionamiento.
📍 Posición
La batidora está en un punto fijo dentro del tazón, pero sus aspas giran en círculos.
Si mueves la batidora dentro del tazón, también cambia su posición.
⚡ Velocidad
Cuando enciendes la batidora en velocidad baja, las aspas comienzan a girar lentamente.
Aumentas la velocidad para mezclar mejor y las aspas giran más rápido.
🚀 Aceleración
Si pasas de velocidad 1 a velocidad 5, la batidora no cambia instantáneamente.
Va aumentando poco a poco hasta alcanzar la velocidad deseada.
Esto es aceleración, un cambio progresivo en la velocidad.
🌀Inercia
Cuando apagas la batidora, no se detiene de inmediato.
Las aspas siguen girando un poco antes de parar completamente.
Esto ocurre porque los objetos en movimiento tienden a seguir moviéndose (primera ley de Newton).
Actividad 08
Experimenta
Enunciado: realiza un experimento para basado en el ejemplo 1.7.
Entiende el ejemplo.
Vas a proponer una modificación mediante esta pregunta que te harás: ¿Qué pasa si…?
¿Qué te imaginas que pasará?
¿Qué pasó?
¿Por qué?
Concluye
Entrega: la respuesta a las cuestiones anteriores.
Que pasaría si cada vez que el objeto desaparezca pueda tener una ligera variación de color (utilizando el random gaussian para mantener una paleta de color análoga a los lilas)
Que pasaría si en cada paso de la bola por el canvas se va dibujando el camino por el que pasa justo con el color que tenga en ese momento, que al reaparecer la bola de otro color se mantenga el rastro de la anterior y así sucesivamente para poder crear una obra de arte generativo
¿Qué te imaginas que pasará?
Espero que se pueda crear una obra abstracta interactiva con los colores que tenga la bola en cada generación.
¿Qué pasó?
Primera versión
Sí se estaban generando los rastros del paso de cada círculo generadop pero de una manera lenta y monótona, así que decidí modificarlo un poco porque el código no estaba variando la velocidad y la variación de la velocidad era corta.
A esta segunda versión le implementé los siguientes cambios:
Aumenté el rango de la velocidad inicial de un random(-2,2) a un random(-5,5) para que el movimiento sea más rápido.
Para la aceleración empleé el ruido de Perlin para que las variaciones sean más fluidos y naturales.
Limité la velocidad para evitar movimientos extremadamente caóticos.
Hay un pequeño cambio dinámico en el tamaño del círculo
¿Por qué?
En la primera versión estaba implementando el concepto pero de manera muy “tiesa”, no le estaba dando tanta vida a las generaciones por lo que eran aburridas y monótonas. Para la segunda versión quise ver cómo podría implementar los conceptos de manera divertida y que parecielas “Hilos que tejen” para darle un poco de vida al ejemplo.
Concluye
Darle vida al concepto hizo que pensara en ideas divertidas para tener proyectos personales, quisiera implementar el concepto en el desarrollo de una idea relacionada con el crochet que quiero seguir explorando.
Actividad 09
Experimentando con la aceleración
Enunciado: en el libro proponen una regla (que eventualmente se rompe cuando conviene :)):
The goal for programming motion is to come up with an algorithm for calculating acceleration and then let the trickle-down effect work its magic.
Para investigador el significado de esta frase te propone que construyas un experimento donde analices cómo se comporta un objeto en movimiento con:
Aceleración constante.
Aceleración aleatoria.
Aceleración hacia el mouse.
Entrega:
Reporta que encontraste para cada una de las posibles aceleraciones
Para realizar el experimento pensé en crear una simulación que contuviera tres circulos y que cada uno de ellos tuviese un tipo de aceleración de acuerdo a las instrucciones (Aceleración constante, Aceleración aleatoria y Aceleración hacia el mouse). Su aparición en pantalla es simultánea para poder realizar las comparaciones, el canvas se divide en tres franjas verticales y en cada franja estará una bolita que al tocar la franja límite que le corresponde debe rebotar para mantenerse dentro de dicho limite.
Observaciones
Aceleración constante: La bolita comienza con un pequeño impulso y va ganando velocidad de manera progresiva en una dirección fija. Rebota en los bordes, pero su movimiento es predecible y suave. En este caso, la aceleración es una constante fija en el eje X, lo que hace que la velocidad aumente de forma continua. Como la aceleración no cambia de dirección, el movimiento es uniforme y estable.
Aceleración aleatoria: La bolita se mueve de manera errática, cambiando constantemente de dirección y velocidad. No sigue un patrón definido y puede parecer caótica. Cada ciclo de dibujo, la aceleración se elige aleatoriamente, lo que afecta la velocidad y dirección del movimiento. Esto simula un comportamiento más desordenado, similar al movimiento de partículas en un líquido o gas.
Aceleración hacia el mouse: La bolita se mueve de manera fluida y se dirige hacia el cursor del mouse. Si el mouse se mueve rápidamente, la bolita tarda en alcanzarlo debido a la inercia. Aquí, la aceleración está determinada por la diferencia entre la posición de la bolita y la del mouse. Al hacer que esta diferencia sea un vector de aceleración, la velocidad se ajusta para que la bolita siempre intente alcanzar el mouse, simulando un efecto de atracción.
Aplicación
En esta fase, aplicarás tus conocimientos sobre vectores para crear arte generativo algorítmico.
Pondrás en práctica los conceptos aprendidos en las fases anteriores.
Actividad 10
Diseño: exploración de la idea
Enunciado: diseña una aplicación interactiva en tiempo que utilice
los conceptos que investigaste. La aplicación debe:
Generar una pieza de arte generativo algorítmico.
Debes aplicar el marco MOTION 101.
El contenido generado debe ser interactivo. Puedes utilizar mouse, teclado, cámara, micrófono,
etc, para variar los parámetros del algoritmo en tiempo real.
Entrega:
Un texto donde expliques tu intención de diseño.
¿Cómo piensas aplicar el marco MOTION 101 y por qué estos?
Reporta los referentes que usaste para inspirarte.
Quisiera explorar con la recreación de patrones de crochet para poder realizar una obra de arte interactiva en la que el usuario al presionar click pueda ir “tejiendo” un granny o recuadro de crochet.
¿Cómo piensas aplicar el marco MOTION 101 y por qué estos?
Aplicar Motion 101 hace que el crochet generativo sea más natural, dinámico e interactivo. La idea es que con cada click también varíe la velocidad de la generación de puntos que se dará en forma de espiral como sucede algunas veces en proyectos de tejido. Cada punto del crochet crecerá con una velocidad variable en lugar de hacerlo de forma uniforme. La aceleración influirá en cómo se expanden los patrones, haciendo que algunos crezcan rápido y otros más lento.
El concepto varió un poquito (mucho :) ), sigue conservando la idea de crochet pero en lugar de crear las cadenas caracteríticas de los proyectos de tejido ahora hay punzadas circulares similares al tejido de anillos mágicos en los que se teje de manera circular.
Los códigos de prueba para simular el tejido no salieron como esperaba porque eran aburridos y no simulaba realmente el tejido sino que eran figuras, así que cambié el enfoque para tratar de simular el tejido de una trenza y de allí surgieron las ideas de ondas sinusoidales que se transformaron en punzadas de color.
En cuanto a la aplicación del Motion 101, cada puntada se crea en la posición del mouse, pero su crecimiento y forma se ven afectados por la velocidad y la aceleración, lo que genera una variación orgánica en el movimiento de cada “puntada”.
Cada braid (punzada) se genera en una posición específica dentro de una cuadrícula, asegurando que los puntos sigan una estructura ordenada.
Cada punzada crece y se expande a una velocidad aleatoria entre 0.5 y 2, lo que hace que cada una tenga un ritmo único.
Cuando la punzada alcanza su tamaño máximo, la velocidad cambia de signo (* -0.3), haciendo que la forma “rebote” y oscile en tamaño.
En cada frame, la velocidad de crecimiento aumenta debido a una aceleración aleatoria entre 0.01 y 0.05.
La interacción ya no depende de los clicks que pueda dar el usuario sino del movimiento del mouse sobre el canvas pues me resultaba más cómodo para evitar el pulso repetitivo y el molesto sonido del click después de un tiempo.
Consolidación y matacognión
En esta fase final, reflexionarás sobre tu proceso de aprendizaje. Analizarás tus logros,
identificarás áreas de mejora y consolidarás tu comprensión de los vectores y su aplicación.
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.
¿Qué desafíos encontraste al aplicar los conceptos aprendidos?
El mayor desafío que encontré fue la aplicación del concepto debido al tema central de inspiración que tomé (tejido de crochet) pues la idea era simular la construcción de un tejido pero a la hora de iniciar el proyecto, los borradoores no captaban la idea sino que simplemente dibujaban figuras que no integraban de todo MOtion 101 así que básicamente tuve que enfrentarme a la frustración de no poder transferir de manera correcta la idea en mi cabeza
al canvas. La idea final surgió luego de pasar horas analizando qué camino tomar sin perder el rumbo del concepto final, comprender el concepto de posicón, velocidad y aceleración fue divertido pero la fase aplicación fue un poco frustrante.
¿Qué aprendiste de estos desafíos?
No está mal cambiar de ideas durante la fase de aplicación, me costó mbastante dejar mi idea inicial y por ello tomé un rumbo alterno, sin embargo, reconozco que para las futuras unidades quisiera no tener tanto conflicto con avanzar y probar cosas nuevas si es necesario.
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.
escribe cómo los conceptos de esta unidad pueden ser utilizados en el diseño de videojuegos, experiencias interactivas o animaciones. Da ejemplos concretos.
VIDEOJUEGOS
En juegos como Hollow Knight o Celeste, el personaje no cambia su velocidad de inmediato cuando el jugador presiona un botón de dirección. En su lugar, la velocidad aumenta progresivamente debido a la aceleración.
Aplicación del Motion 101:
velocity+=acceleration; // El personaje aumenta de velocidad gradualmente
position+=velocity; // Se actualiza la posición del personaje
Cuando el jugador presiona izquierda o derecha, la velocidad del personaje aumenta gradualmente en lugar de hacerlo instantáneamente.
Al soltar la tecla, la aceleración negativa hace que el personaje frene suavemente en lugar de detenerse bruscamente.
Al saltar, la gravedad afecta la aceleración de manera fluida, creando un arco natural en la caída.
EXPERIENCIAS INTERACTIVAS
Imagina una experiencia interactiva donde los botones o elementos de la interfaz no reaccionan de manera rígida al clic del usuario, sino que se estiran y rebotan suavemente, como si estuvieran hechos de un material flexible.
Aplicación del Motion 101:
let stretch = 0;
let velocity = 0;
let acceleration = 0;
let damping = 0.9; // Reduce el movimiento con el tiempo
functiononClick() {
acceleration=random(0.5,1.5); // Variación de fuerza según el clic
}
functionupdate() {
velocity+=acceleration;
stretch+=velocity;
velocity*=damping; // Simulación de amortiguación
}
Cada vez que un usuario hace clic en un botón, este se deforma brevemente y luego regresa a su forma original con una oscilación amortiguada.
La aceleración y la velocidad del rebote dependen de la intensidad del clic (si el usuario mantiene presionado, el rebote es más fuerte).
Se pueden aplicar fuerzas de fricción para evitar oscilaciones infinitas y hacer que la interfaz se sienta más realista.
ANIMACIÓN
Motion 101 es clave para simular movimientos celestes realistas, como el de planetas, lunas o asteroides alrededor de un cuerpo masivo en el espacio. En lugar de usar trayectorias predefinidas, podemos aplicar aceleración y velocidad para generar órbitas dinámicas y realistas.
Aplicación del Motion 101:
let planet = { x: 200, y: 100, vx: 2, vy: 0 };
let sun = { x: 300, y: 300, mass: 10000 };
functionupdate() {
let dx = sun.x - planet.x;
let dy = sun.y - planet.y;
let distance = sqrt(dx * dx + dy * dy);
let force = sun.mass / (distance * distance); // Ley de gravitación
let ax = force * (dx / distance);
let ay = force * (dy / distance);
planet.vx+=ax;
planet.vy+=ay;
planet.x+=planet.vx;
planet.y+=planet.vy;
}
Cada planeta tiene una velocidad inicial y es afectado por la gravedad del sol (aceleración dirigida hacia el centro).
Se usa la ley de la gravitación de Newton para calcular la atracción entre cuerpos en tiempo real.
Si el usuario lanza un planeta con poca velocidad, este caerá al sol. Si lo hace con suficiente velocidad tangencial, entrará en órbita.
Se puede agregar fricción atmosférica si el planeta pasa cerca de una estrella, alterando su trayectoria.
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.
¿Qué estrategias te resultaron más efectivas para comprender los conceptos?
Leer el libro guía, interpretar lo que estaba leyendo y luego hacerle preguntas a ChatGPT sobre las dudas que me surgieron, también se me facilitó poder hacer paralelismos con cosas relacionadas a mi contexto como hobbies o actividades diarias.
¿Qué podrías mejorar en futuras unidades?
Realizar esta unidad me tomó más tiempo de lo esperado, creo que la comprensión del concepto me tomó más tiempo que en la unidad anterior así que solía tardar más completando las actividades. Para la próxima unidad debería comenzar a emplear el temporizador para fijar los límites de tiempo correspondientes para cada actividad.
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.
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.
Operación con vectores: 5
Ya tenía una noción al respecto por las clases de Geometría analítica y Álgebra lineal así que el reto que presenté fue aplicarlo directamente a códigos, pero me siento conforme con ello.
Entrega:
Interpolaciones: 5
También era un concepto que ya había puesto en práctica con las clases de animación, fue muy divertido de aplicar.
Motion 101: 4
Este fue un concepto que pude relacionar con las clases de Física mecánica pero a la hora de aplicarlo me enredé mucho y eso me desanimó un poco, sin embargo pude cumplir con la actividad pero quisiera seguir aplicándolo más para sentirme más cómoda.
