Unidad 4

Introducción 📜

En las unidades anteriores has explorado el movimiento con el marco motion 101 manipulando la posición de los elementos gráficos. En esta unidad explorarás el movimiento angular u oscilatorio.

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? 💡

• Comprender los conceptos básicos del movimiento angular y oscilatorio.
• Explorar cómo se pueden aplicar estos conceptos en la creación de obras generativas interactivas en tiempo real.

Actividad 01

Te presente a Memo Akten

En esta actividad te presentaré a Memo Akten. Te voy a presentar una obra de Memo bajo el título sombrilla de Simple Harmonic Motion relacionada con el trabajo que haremos en esta unidad.

📤 Bitácora

Documenta en tu bitácora de aprendizaje los aspectos que más te llamaron la atención de la obra de Memo.

Seek: Investigación 🔎

Actividad 2

Conceptos fundamentales

Analiza las siguientes simulaciones y responde las preguntas.

Te voy a proponer un par de simulaciones para que analices.

Primero mira esta simulación para el manejo de ángulos.

• ¿Qué está pasando en esta simulación? ¿Cuál es la interacción?
• Nota que en cada frame se está trasladando el origen del sistema de coordenadas al centro de la pantalla. ¿Por qué crees que se hace esto?
• Cuál es la relación entre el sistema de coordenadas y la función rotate().

Nota esta parte del código:

  line(-50, 0, 50, 0);
  stroke(0);
  strokeWeight(2);
  fill(127);
  circle(50, 0, 16);
  circle(-50, 0, 16);

Observa que al dibujar los elementos gráficos parece que se está dibujando en la posición (0, 0) del sistema de coordenadas. ¿Por qué crees que se hace esto? y ¿Por qué aunque en cada frame se hace lo mismo, los elementos gráficos rotan?

Ahora analiza una simulación que muestra cómo puedes hacer para que los elementos gráficos de la simulación apunten en la dirección del movimiento.

• Identifica el marco motion 101. ¿Qué es lo que se está haciendo en este marco?

Observa detenidamente este fragmento de código de la simulación:

  display() {
    let angle = this.velocity.heading();

    stroke(0);
    strokeWeight(2);
    fill(127);
    push();
    rectMode(CENTER);
    translate(this.position.x, this.position.y);
    rotate(angle);
    rect(0, 0, 30, 10);

    pop();
  }

• ¿Qué hace la función heading()?
• ¿Qué hace la función push() y pop()? Realiza algunos experimentos para entender su funcionamiento.
• ¿Qué hace rectMode(CENTER)? Realiza algunos experimentos para entender su funcionamiento.
• ¿Cuál es la relación entre el ángulo de rotación y el vector de velocidad? Trata de dibujar en un papel el vector de velocidad y cómo se relaciona con el ángulo de rotación y la operación de traslación y rotación.

📤 Bitácora

Documenta en tu bitácora de aprendizaje las respuestas a las preguntas anteriores.

Actividad 3

Practica un poco

Ahora es momento de practicar los conceptos anterior. Crea una simulación de un vehículo que puedas conducir por la pantalla utilizando las teclas de flecha: la flecha izquierda acelera el vehículo hacia la izquierda, y la flecha derecha acelera hacia la derecha. El vehículo tendrá forma triangular y debe apuntar en la dirección en la que se está moviendo actualmente.

📤 Bitácora

Documenta en tu bitácora de aprendizaje tu proceso de creación de la simulación.

Actividad 4

Relación con el marco motion 101

Es momento de retomar lo que has aprendido en las unidades previas e integrarlo con los nuevos conceptos de esta unidad. Observa detenidamente la siguiente simulación: Motion 101 con fuerzas

• Identifica motion 101. ¿Qué modificación hay que hacer al motion 101 cuando se quiere agregar fuerzas acumulativas? Trata de recordar por qué es necesario hacer esta modificación.
• Identifica dónde está el Attractor en la simulación. Cambia el color de este.
• Observa que el Attractor tiene dos atributos this.dragging y this.rollover. Estos atributos no se modifican en el código, pero permitirían mover el attractor con el mouse y cambiar su color cuando el mouse está sobre él. ¿Cómo podrías modificar el código para que esto funcione? considera las funciones que ofrece p5.js para interactuar con el mouse.

📤 Bitácora

Documenta en tu bitácora de aprendizaje las respuestas a las preguntas anteriores.

Actividad 5

Coordenadas polares

Explora otro sistema de coordenadas útil cuando se trabaja con ángulos. Se trata de las coordenadas polares.

Considera esta simulación de coordenadas polares:

• Observa de nuevo esta parte del código ¿Cuál es la relación entre r y theta con las posiciones x y y? Puedes repasar entonces la definición de coordenadas polares y cómo se convierten a coordenadas cartesianas.

function draw() {
  background(255);
  // Translate the origin point to the center of the screen
  translate(width / 2, height / 2);
  // Convert polar to cartesian
  let x = r * cos(theta);
  let y = r * sin(theta);
  fill(127);
  stroke(0);
  strokeWeight(2);
  line(0, 0, x, y);
  circle(x, y, 48);
  theta += 0.02;
}

Modifica la función draw():

 function draw() {
  background(255);
  // Translate the origin point to the center of the screen
  translate(width / 2, height / 2);
  let v = p5.Vector.fromAngle(theta);
  fill(127);
  stroke(0);
  strokeWeight(2);
  line(0, 0, x, y);
  circle(v.x, v.y, 48);
  theta += 0.02;
}

¿Qué ocurre? ¿Por qué?

Ahora realiza esta modificación:

 function draw() {
  background(255);
  // Translate the origin point to the center of the screen
  translate(width / 2, height / 2);
  let v = p5.Vector.fromAngle(theta,r);
  fill(127);
  stroke(0);
  strokeWeight(2);
  line(0, 0, v.x, v.y);
  circle(v.x, v.y, 48);
  theta += 0.02;
}

• ¿Qué ocurre aquí? ¿Por qué?

📤 Bitácora

Documenta en tu bitácora de aprendizaje las respuestas a las preguntas anteriores.

Actividad 6

Funciones sinusoides

Repasa la función sinusoide aquí.

• Recuerda estos conceptos: velocidad angular, frecuencia, periodo, amplitud y fase.
• Realiza una simulación en la que puedas modificar estos parámetros y observar cómo se comporta la función sinusoide.

Por ejemplo, te doy ideas, si juego solo con la fase, mira este ejemplo.

📤 Bitácora

Documenta tus reflexiones sobre la función sinusoide en tu bitácora de aprendizaje.

Actividad 7

Repasa conceptos de las unidades anteriores

Aplica conceptos de la unidades anteriores tomando como base esta simulación. La idea es que la modifiques incluyendo un concepto de la unidad 1 (aleatoriedad, distinta a random) y la unidad 3 (fuerzas).

📤 Bitácora

Documenta en tu bitácora de aprendizaje el proceso de modificación de la simulación.

Actividad 8

Ondas

Vas a observar este código que simula una onda.

El reto es que hagas que esta onda se mueva como una ola.

📤 Bitácora

Documenta en tu bitácora de aprendizaje el proceso de modificación de la simulación.

Actividad 9

Resortes

Modifica esta simulación para crear un sistema de dos resortes conectados en serie.

📤 Bitácora

Documenta en tu bitácora de aprendizaje el proceso de modificación de la simulación.

Actividad 10

Péndulos

Modifica esta simulación para crear un sistema de dos péndulos conectados en serie.

📤 Bitácora

Documenta en tu bitácora de aprendizaje el proceso de modificación de la simulación.

Apply: Aplicación 🛠

Actividad 11

Creación de obra generativa

Crea una obra generativa interactiva en tiempo real en p5.js que cumpla con los siguientes requisitos:

• Selecciona uno de los conceptos con los que experimentaste en la fase de investigación y propón la obra alrededor de este.
• Incorpora en tu obra al menos un concepto de cada una de las unidades 1, 2 y 3.
• La obra debe ser interactiva en tiempo real. Puedes usar teclado, mouse, música, el micrófono, video, sensor o cualquier otro dispositivo de entrada.

📤 Bitácora

En tu bitácora:

1. Describe el concepto de tu obra generativa. Recuerda que desde la unidad anterior añadimos la idea de narrativa a la obra generativa, para guiar algunas de las decisiones en la definición de reglas del sistema generativo. PERO OJO, no estamos contando una historia, estamos usando la narrativa como herramienta de diseño para la definición de reglas.
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 🤔

Una vez termines esta unidad invierte en ti unos minutos para reflexionar sobre tu proceso de aprendizaje.

Actividad 12

1. Realiza un diagrama conceptual (puedes usar excalidraw si quieres) donde incluyas todos los conceptos que has aprendido en las unidades 1 a 4. Relaciona los conceptos entre ellos. Si no sabes por donde comenzar ve al sitio web del libro guía y mira la tabla de contenidos de cada unidad, esto te puede servir de guía.

2. Con todo lo que has aprendido hasta ahora, te voy a pedir que pienses cómo lo podrías aplicar a tu perfil profesional. ¿En dónde ves oportunidades?

📤 Bitácora

Documenta tu diagrama conceptual en tu bitácora de aprendizaje.