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.

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.

Seek: Investigación 🔎

Actividad 1

Te presente a Memo Akten

En esta actividad te presentaré a Memo Akten, un artista y programador que ha explorado las posibilidades de la inteligencia artificial en la creación de arte. Te voy a presentar una obra de Memo bajo el título sombrilla de Simple Harmonic Motion.

Solo para los curiosos: dale una mirada a la obra Superradiance. Te dejo por aquí un video reciente: SUPERRADIANCE. Chapters 1-2. Short (Performance) version. By Memo Akten & Katie Peyton Hofstadter. Youtube.

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.

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.

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.

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

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.

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

Actividad 8

Ondas

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

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

Actividad 9

Resortes

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

Actividad 10

Péndulos

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

Apply: Aplicación 🛠

Obra de arte generativa algorítmica interactiva en tiempo real

Diseña e implementa una obra de arte generativa algorítmica 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.

Evidencias 🗂️

En la segunda sesión de la semana del 1 de septiembre realizaremos la evaluación de la unidad. En esta sesión debes presentar tu obra a los compañeros del curso mientras el profesor realiza la evaluación usando la rúbrica propuestas.
Si omites, cualquiera, el enlace a tu obra, el código, la captura de pantalla, la descripción de la interacción o la explicación conceptual tendrás una penalización de 1 unidad en la nota final.
Si no sigues el formato propuesto en la bitácora tendrás una penalización de 1 unidad en la nota final.
Si no presentas tu obra en la última sesión de la unidad tendrás una penalización de 1 unidad en la nota final.

Escala de evaluación	Nota
Tu obra incluye el concepto de la unidad 4 y de las 3 unidades anteriores	5
Tu obra incluye el concepto de la unidad 4 y de dos unidades anteriores	4
Tu obra incluye el concepto de la unidad 4 y de una unidad anterior	3
Tu obra incluye el concepto de la unidad 4, pero ninguna de las anteriores	2
Tu obra no incluye claramente un concepto de la unidad 4	1
No entregas o tu obra no funciona	0

Reflect: Consolidación y metacognición 🤔

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

Realiza un diagrama conceptual donde incluyas todos los conceptos que has aprendido en las unidades 1 a 4 y los relaciones entre ellos.
¿Qué has venido haciendo bien en tu proceso durante el curso que debas mantener en la próxima unidad?
¿Qué has venido haciendo mal en tu proceso durante el curso que debas cambiar en la próxima unidad?