Unidad 2

Introducción 📜

En esta unidad repasarás el concepto de vector y algunas de sus operaciones básicas y experimentarás con conceptos matemáticos y físicos, como velocidad y aceleración. Estos conceptos te permitirán controlar el movimiento de tus elementos gráficos en tus proyectos interactivos.

Veamos juntos este hermoso video Tom Mohr How Particle Life emerges from simplicity que conecta la unidad anterior cuando hablamos de sistemas generativos y esta unidad donde exploraremos vectores y movimiento.

Rúbrica de evaluación de la unidad 📝

Transparencia

Esta rúbrica se socializa antes de la sustentación. La sustentación se basa en lo presentado en la aplicación y lo documentado en la bitácora.

Requisito de salida (condición necesaria)

Para poder cerrar la evaluación y registrar la nota

La bitácora de reflexión debe estar diligenciada antes de terminar la sesión y debe ser enseñada al profesor antes de abandonar el aula. La presentación de la bitácora de reflexión es un requisito indispensable para montar la nota final en la plataforma académica. Si no se cumple este requisito, la nota final de la unidad será 0.0.

---

Rúbrica analítica

Evidencias evaluadas

1. Funcionamiento de la aplicación + documentación en bitácora.
2. Sustentación a partir de la app y la bitácora

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

---

Cálculo de la nota

---

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

En esta unidad aprenderás una técnica fundamental para controlar el movimiento de los objetos visuales de tus creaciones interactivas. Se trata del marco motion 101. Este marco no solo será útil en esta unidad, sino que también te acompañará en las siguientes unidades, ya que es una técnica esencial para el desarrollo de proyectos interactivos. Y no solo eso, sino que podrás aplicar esta técnica en cualquier lenguaje de programación, o entorno de desarrollo, ya que es un concepto universal en la programación de gráficos y animaciones. Lo mejor de todo es que para aplicar esta técnicas no necesitas un motor de físicas.

Actividad 01

Exploración de artistas que usan vectores y movimiento

Te presentaré algunos artistas que utilizan conceptos de vectores, velocidad y aceleración en sus obras.

• Raven Kwok. Puedes ver algunos trabajos en su sitio web y también en openprocessing: Raven Kwok en OpenProcessing. Algunos ejemplos: Procedural Animation, Noise Turbulence Doodles Redux (2025), Iridescence, Vimeo.
• Zach Lieberman. Te dejo material para que veas: Artist Zach Lieberman: Making something everyday,
• Jared Tarbell.Algunos ejemplos: Substrate, sandTraveler, Substrate algorithm with Touchdesigner, Jared Tarbell at ARTSLab (12/5/24), Generative Spaces - Jared Tarbell - btconfDUS2018. Vimeo.

📤 Bitácora

Distruta esta actividad como quieras. Busca inspiración. Te deseo que te enamores del tema, es irresistible. Te pediré que me cuentes qué trabajo te gustó más y por qué.

Seek: Investigación 🔎

Vas a indagar y a experimentar con los conceptos fundamentales de la unidad 1 del texto guía. En particular, queremos explorar los conceptos de vector, velocidad y aceleración y cómo los podemos usar para controlar el movimiento de objetos gráficos en un entorno interactivo.

Actividad 02

Introducción a los vectores

En esta actividad vamos a repasar algunos conceptos básicos de los vectores. Te propondré que analicemos juntos algunos de los ejemplos del texto de guía.

Comencemos por el ejemplo: Example 1.2: Bouncing Ball with Vectors!

📤 Bitácora

1. ¿Cómo funciona la suma dos vectores en p5.js?
2. ¿Por qué esta línea position = position + velocity; no funciona?

Actividad 03

Repasa

Realiza este ejercicio del libro Exercise 1.1

📤 Bitácora

1. ¿Qué tuviste que hacer para hacer la conversión propuesta?
2. Escribe el código que utilizaste para resolver el ejercicio.

Actividad 04

Experimenta

Dale una mirada a este código:

let position;

function setup() {
    createCanvas(400, 400);
    position = createVector(6,9);
    console.log(position.toString());
    playingVector(position);
    console.log(position.toString());
    noLoop();
}

function playingVector(v){
    v.x = 20;
    v.y = 30;
}

function draw() {
    background(220);
    console.log("Only once");
}

📤 Bitácora

1. ¿Qué resultado esperas obtener en el programa anterior?
2. ¿Qué resultado obtuviste?
3. Recuerda los conceptos de paso por valor y paso por referencia en programación.
4. ¿Qué tipo de paso se está realizando en el código?
5. ¿Qué aprendiste?

Actividad 05

Explora posibilidades

Vamos a darle una mirada a la clase p5.Vector aquí.

📤 Bitácora

1. ¿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?
2. ¿Para qué sirve el método normalize()?
3. 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?
4. El método dot() tiene una versión estática y una de instancia. ¿Cuál es la diferencia entre ambas?
5. 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.
6. ¿Para que te puede servir el método dist()?
7. ¿Para qué sirven los métodos normalize() y limit()?

Actividad 06

Interpolamos?

Vas a tomar como inspiración este ejemplo de la referencia de p5.js:

function setup() {
    createCanvas(100, 100);
}

function draw() {
    background(200);

    let v0 = createVector(50, 50);
    let v1 = createVector(30, 0);
    let v2 = createVector(0, 30);
    let v3 = p5.Vector.lerp(v1, v2, 0.5);
    drawArrow(v0, v1, 'red');
    drawArrow(v0, v2, 'blue');
    drawArrow(v0, v3, 'purple');
}

function drawArrow(base, vec, myColor) {
    push();
    stroke(myColor);
    strokeWeight(3);
    fill(myColor);
    translate(base.x, base.y);
    line(0, 0, vec.x, vec.y);
    rotate(vec.heading());
    let arrowSize = 7;
    translate(vec.mag() - arrowSize, 0);
    triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    pop();
}

Vas a modificarlo para generar este resultado:

• Analiza cómo funciona el método lerp().
• Nota que además de la interpolación lineal de vectores, también puedes hacer interpolación lineal de colores con el método lerpColor().

Dedica un tiempo a estudiar cómo se dibuja una flecha en el método drawArrow().

📤 Bitácora

En tu bitácora escribe:

1. El código que genera el resultado que te pedí.
2. ¿Cómo funciona lerp() y lerpColor().
3. ¿Cómo se dibuja una flecha usando drawArrow()?

Actividad 07

Motion 101

En la sección del texto guía llamada Motion with vectors, el autor propone un marco de movimiento llamado motion 101. Así mismo, el ejemplo 1.7 muetra cómo se aplica este marco en un ejemplo simple.

📤 Bitácora

1. Cuál es el concepto del marco motion 101 y cómo se interpreta geométricamente.
2. ¿Cómo se aplica motion 101 en el ejemplo?

Actividad 08

Experimentando con la aceleración

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.

📤 Bitácora

1. ¿Qué observaste cuando usas cada una de las aceleraciones propuestas?

Apply: Aplicación 🛠

En esa fase vas a aplicar los conceptos investigados y vas a crear una pieza de arte generativo interactivo en tiempo real usando vectores y el marco motion 101.

Actividad 09

Creación de obra generativa

Vas a crear una obra generativa interactivo en tiempo real que utilice los conceptos de motion 101. La idea de este sistema generativo es experimentar con reglas distintas de manipulación para la aceleración.

Recuerda que tu obra debe ser interactiva y generativa en tiempo real. Puedes usar el mouse, el teclado o cualquier otro sensor de entrada para interactuar con la obra.

📤 Bitácora

En tu bitácora:

1. Describe el concepto de tu obra generativa. Explica el concepto de tu obra generativa, qué regla aplicaste para la aceleración y por qué, si fue una decisión de diseño, o qué te evoca, si fue una exploración artística.
2. El código de la aplicación.
3. Un enlace al proyecto en el editor de p5.js.
4. Selecciona capturas de pantalla representativas de tu pieza de arte generativa.

Reflect: Consolidación 🤔

Es momento de consolidar lo aprendido en esta unidad.

Actividad 10

Para esta última actividad de la unidad te pediré que regreses a uno de los ejemplos del texto guía. Se trata del Ejemplo 1.10. Estudia en detalle el código. Ahora te pediré que revices en detalle una parte de la charla del artista Jared Tarbell que encontrarás aquí en el minuto 49:38 hasta el 54:02. Luego de esto revisa el proyecto original que menciona Jared. Se trata del trabajo Clusters del artista Jeffrey Ventrella. Puedes encontrar una explicación del propio artista aquí.

Enriquecido con esta información, te perdirá que crees algo inspirado en:

1. Las ideas de Jared y Jeffrey
2. En lo que trabajaste en esta unidad sobre vectores y motion 101.

📤 Bitácora

En tu bitácora de aprendizaje:

1. Describe el concepto de tu obra generativa. Explica el concepto de tu obra generativa.
2. El código de la aplicación.
3. Un enlace al proyecto en el editor de p5.js.
4. Selecciona capturas de pantalla representativas de tu pieza de arte generativa.