Unidad 1

Introducción

La aleatoriedad es un concepto fundamental en la simulación de sistemas interactivos, ya que permite modelar comportamientos impredecibles y variabilidad en los sistemas. En esta unidad, explorarás cómo generar y utilizar números aleatorios en tus simulaciones, comprendiendo su importancia y aplicaciones. A través de ejemplos como los paseos aleatorios, aprenderás a implementar movimientos y comportamientos que emulan la aleatoriedad presente en la naturaleza. Este conocimiento te proporcionará las herramientas necesarias para desarrollar simulaciones más realistas y dinámicas.

¿Qué aprenderás en esta unidad?

Vas a explorar la aleatoriedad como una herramienta fundamental en la simulación de sistemas interactivos. Esta herramienta te permitirá producir comportamientos impredecibles y variabilidad.

Actividad 01

Arte generativo

Enunciado: vas a observar con detenimiento los siguientes videos y vas a reflexionar la relación que esto podría tener con tu perfil profesional:

• Generative Art Exploration Chapter I Tracing the Roots: The History of Generative Art
• Generative Art Exploration Chapter V: The Life and Work of Vera Molnár
• How To Draw With Code | Casey Reas
• Artist Spotlight | Who is Refik Anadol?

Entrega: escribe un texto corto donde expliques qué potencial crees que pueda tener el arte generativo y algorítmico en tu perfil profesional.

🚀 Tu solución:

Estudiante

Actividad 1

Para diseño

Permite tener erramientas que de forma automatizada y aleatoria acelere procesos creativos permitiendo explorar infinidad de opciones, que se pueden reinterpretar por el artista para lograr patrones y formas unicos con los cuales experimentar. la capacidad de generar de forma dinamica y adaptable contenido permite generar piezas con mensajes más efectivos y atractivos.

Solución

Retroalimentación

Actividad 02

Diseño generativo

Enunciado: vas a observar con detenimiento el siguiente video que habla acerca del diseño generativo

• GENERATIVE DESIGN, INTRO & Patrik Hübner

Recursos:

• Proyecto de marca hecho con diseño generativo
• Simulación

Entrega: escribe un texto corto donde reflexiones acerca de esta pregunta ¿Cómo se conecta lo anterior como mis intereses? O tal vez ¿Esto abre la puerta a la exploración de otras posibilidades?

🚀 Tu solución:

Estudiante

Actividad 2

¿Cómo se conecta lo anterior con mis intereses? O tal vez ¿Esto abre la puerta a la exploración de otras posibilidades?

Al ser una simulación que se puede editar en tiempo real de forma sencilla perimite explorar varias opciones para lograr imagenes y conceptos distintos, por ejemplo relacionado a mis intereses me podria aportar en la creacion de mapas o texturas de forma rapida si en algun momento me quedo sin ideas para ello

Solución

Retroalimentación

Investigación

Vas a indagar y a experimentar con los conceptos fundamentales de la unidad 0 del texto guía.

Actividad 03

Caminatas aleatorias

Enunciado: analiza el código del ejemplo Example 0.1: A Traditional Random Walk

Vas a realizar un experimento con el código:

• Comprende el código, entiende lo que pasa y cómo se está aplicando el concepto.
• Luego harás una modificación al código. Te harás esta pregunta ¿Qué pasaría si?
• Trata de lanzar una hipótesis de lo que crees que ocurrirá.
• Realiza la modificación.

Vas a documentar

• Describe el experimento que vas a realizar.
• ¿Qué pregunta quieres responder con este experimento?
• ¿Qué resultados esperas obtener?
• ¿Qué resultados obtuviste?
• ¿Qué aprendiste de este experimento?

Entrega: los asuntos que te pido documentar en el enunciado, el código con las modificaciones y una captura de pantalla que muestre el resultado del experimento.

🚀 Tu solución:

Estudiante

Actividad 3

que pregunta me hice ¿que pasaria si cambio las probabilidades de cada direccion?

¿Que paso? logre hacer que camine en diagonales agregando un if (else) y luego lo puse a moverse exclusivamente a la derecha Codigo original:

let walker;

function setup() {
  createCanvas(640, 240);
  walker = new Walker();
  background(255);
}

function draw() {
  walker.step();
  walker.show();
}

class Walker {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
  }

  show() {
    stroke(0);
    point(this.x, this.y);
  }

  step() {
    let xstep = random(-2.75, 3);
    let ystep = random(-2.75, 3);
    this.x += xstep;
    this.y += ystep;
  }
}

Edite “step” para tener probabilidades personalizadas :D

step() {
    let r = random(1);

    if (r < 0.4) {
      this.x++;
    } else if (r < 0.6) {
      this.x--;
    } else if (r < 0.8) {
    }

Solución

Retroalimentación

Actividad 04

Distribuciones de probabilidad

Enunciado: analiza detenidamente este ejemplo.

En tus palabras cuál es la diferencia entre una distribución uniforme y una no uniforme de números aleatorios. Modifica el código de la caminata aleatoria para que utilice una distribución no uniforme, favoreciendo el movimiento hacia la derecha.

Entrega:

• Explicación de la diferencia entre distribuciones uniformes y no uniformes.
• Código modificado y captura de pantalla de la caminata con distribución no uniforme.

🚀 Tu solución:

Estudiante

Actividad 4

Solucion

let walker;

function setup() {
  createCanvas(640, 240);
  walker = new Walker();
  background(255);
}

function draw() {
  walker.step();
  walker.show();
}

class Walker {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
  }

  show() {
    stroke(0);
    point(this.x, this.y);
  }

  step() {
    let xstep = random(-2.75, 3);
    let ystep = random(-2.75, 3);
    this.x += xstep;
    this.y += ystep;
  }
}

Solución

Retroalimentación

Actividad 05

Distribución Normal

Enunciado: implementa un ejemplo que genere números aleatorios con una distribución normal (gaussiana). Visualiza la distribución utilizando figuras geométricas.

Entrega:

• Código del ejemplo
• Captura de pantalla
• Una breve explicación de cómo se refleja la distribución normal en la visualización.

🚀 Tu solución:

Estudiante

Actividad

Codigo

let walker;
let points = [];

function setup() {
  createCanvas(640, 240);
  walker = new Walker();
  background(255);
}

function draw() {
  walker.step();
  walker.show();

  // Almacenar las posiciones de los puntos
  points.push(createVector(walker.x, walker.y));

  // Limitar el número de puntos para evitar sobrecargar el canvas
  if (points.length > 1000) {
    points.shift();
  }

  // Mostrar los puntos con una figura geométrica
  for (let i = 0; i < points.length; i++) {
    let pt = points[i];
    let r = map(i, 0, points.length, 1, 5);  // Tamaño de los círculos
    noStroke();
    fill(0, 10);
    ellipse(pt.x, pt.y, r, r);
  }
}

class Walker {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
  }

  show() {
    stroke(0);
    point(this.x, this.y);
  }

  step() {
    // Usar randomGaussian() para la distribución normal
    let xstep = randomGaussian();
    let ystep = randomGaussian();

    // Escalar el paso para que no sea tan grande
    xstep *= 2;
    ystep *= 2;

    this.x += xstep;
    this.y += ystep;

    // Asegurarse de que no se salga del canvas
    this.x = constrain(this.x, 0, width);
    this.y = constrain(this.y, 0, height);
  }
}

Captura

Explicación breve

El “walker” se desplaza de acuerdo con una distribución normal y cómo sus posiciones se agrupan formando una distribución gaussiana visual en el lienzo. Los puntos más cercanos al centro (cerca de la media) se agruparán más densamente, mientras que los puntos más alejados se dispersarán menos.

Solución

Retroalimentación

Actividad 06

Distribución personalizada: Lévy flight

Enunciado: realiza una simulación donde visualices un salto de Lévy.

Entrega:

• En qué consiste el concepto de Lévy flight y en qué caso sería interesante usarlo.
• Código de la simulación.
• Captura de pantalla.

🚀 Tu solución:

Estudiante

Actividad

El Lévy flight es útil en situaciones donde la exploración eficiente de un espacio grande y complejo es crucial, especialmente cuando la posibilidad de realizar saltos largos puede ser ventajosa. Esto se aplica tanto a contextos biológicos, como en la búsqueda de recursos, como en contextos tecnológicos, como la optimización o los algoritmos de búsqueda.

Codigo

let x, y;  // Posición inicial
let path = [];  // Para almacenar la trayectoria

function setup() {
  createCanvas(640, 240);
  x = width / 2;
  y = height / 2;
  background(255);
}

function draw() {
  // Generar un salto de Lévy en 2D
  let stepSize = levyStep();

  // Direcciones aleatorias en 2D
  let angle = random(TWO_PI);
  let dx = cos(angle) * stepSize;
  let dy = sin(angle) * stepSize;

  // Actualizar la posición
  x += dx;
  y += dy;

  // Asegurarse de que no se salga del canvas
  x = constrain(x, 0, width);
  y = constrain(y, 0, height);

  // Guardar la posición para mostrar la trayectoria
  path.push(createVector(x, y));

  // Dibujar la trayectoria
  noFill();
  stroke(0, 50);
  beginShape();
  for (let pt of path) {
    vertex(pt.x, pt.y);
  }
  endShape();

  // Dibujar el punto actual
  fill(0);
  noStroke();
  ellipse(x, y, 5, 5);
}

// Función para generar un salto de Lévy
function levyStep() {
  // Exponente de la distribución de Lévy (generalmente entre 1 y 3)
  let exponent = 1.5;

  // Generar un salto usando una distribución de Lévy
  let stepSize = pow(random(), -1 / exponent);

  // Escalar el salto para hacerlo más visible
  return stepSize * 10;
}

Captura de pantalla

Solución

Retroalimentación

Actividad 07

Ruido Perlin

Enunciado: utiliza el ruido Perlin para generar variaciones aleatorias pero suaves. Construye una aplicación que permita visualizar lo anterior.

Entrega:

• Explica en tus propias palabras la figura 0.4: “A graph of Perlin noise values over time (left) and of random noise values over time (right)”
• Explica cómo usaste el ruido Perlin para generar las variaciones.
• El código.
• Una captura de pantalla que muestre la visualización generada.

🚀 Tu solución:

Estudiante

1) El código genera círculos (salpicaduras) en una cuadrícula con controles deslizantes para ajustar parámetros como el tamaño, la dispersión, el color (tono, saturación, brillo), y la transparencia. También tienes un botón para borrar la pantalla y reiniciar la simulación.

2) Cambios realizados: Posición (x, y): Ahora las posiciones de las salpicaduras (x, y) se generan utilizando noise(time) y noise(time + 1000), lo que les da una variabilidad suave pero continua. La función noise() devuelve valores en el rango de 0 a 1, y multiplicamos por el tamaño del lienzo para ubicar correctamente las salpicaduras.

Tamaño de las salpicaduras: El tamaño de las salpicaduras también está controlado por el ruido Perlin, utilizando noise(time + 2000) para obtener un valor suave que se usa para el tamaño. El valor de tamaño se ajusta con el control deslizante de “Size”.

Colores: El matiz (hue) de las salpicaduras se genera con noise(time + 3000), que da un valor suave y en el rango de [0, 360] para obtener un color en el espectro HSB. La saturación y el brillo se mantienen con valores aleatorios basados en una distribución normal (randomGaussian), pero puedes ajustarlos a tu gusto.

Animación: Se ha agregado una animación suave incrementando time en cada fotograma. Esto hace que las salpicaduras cambien suavemente de lugar, tamaño y color.

Transparencia: El valor de transparencia se ajusta con el control deslizante correspondiente y se utiliza en la función fill() de p5.js.

Codigo

// Controls
let spreadSlider;
let sizeSlider;
let sizespSlider;
let baseHueSlider;
let huespSlider;
let alphaSlider;

let time = 0;  // Variable para animar el ruido

function setup() {
  createCanvas(640, 240);
  colorMode(HSB);
  background(97);
  createControls(300);
}

function draw() {
  translate(width / 2, height / 2);
  scale(height / 2);

  // Usamos ruido Perlin para las variaciones de posición (x, y)
  let x = noise(time) * width - width / 2;  // Ruido Perlin para posición x
  let y = noise(time + 1000) * height - height / 2;  // Ruido Perlin para posición y

  // Mantener el tamaño constante según el control deslizante
  let size = sizeSlider.value();
  if (size <= 0) {
    size = 0.001;
  }

  // Colores basados en el ruido Perlin
  let paintHue = noise(time + 3000) * 360;  // Ruido Perlin para matiz (hue)
  let paintSat = randomGaussian(80, 20);    // Saturación (usamos un valor aleatorio normal)
  let paintBright = randomGaussian(80, 20); // Brillo (usamos un valor aleatorio normal)
  if (paintSat > 100) paintSat = 100;
  if (paintBright > 100) paintBright = 100;
  if (paintHue < 0) paintHue += 360;         // Aseguramos que el matiz esté entre 0 y 360
  if (paintHue >= 360) paintHue -= 360;

  // Asignamos un valor de opacidad (transparencia)
  let alpha = alphaSlider.value();

  // Usamos el ruido Perlin para generar el color de la salpicadura
  noStroke();
  fill(paintHue, paintSat, paintBright, alpha);
  ellipse(x, y, size, size);

  // Incrementamos el tiempo para animar el ruido
  time += 0.01;
}

function createControls(ypos) {
  let xpos = 0;

  cpTitle = createP("Paint Splatter Simulation");
  cpTitle.position(xpos, ypos - 50);
  cpTitle.style("font-size", "14pt");
  cpTitle.style("font-weight", "bold");
  xpos += 220;

  clearButton = createButton("Clear");
  clearButton.position(xpos, ypos - 50);
  clearButton.mousePressed(clearButtonClicked);

  xpos = 0;
  spreadTitle = createP("Spread");
  spreadTitle.position(xpos, ypos);
  xpos += 50;

  spreadSlider = createSlider(0, 0.75, 0.25, 0);
  spreadSlider.position(xpos, ypos);
  spreadSlider.size(80);
  xpos += 100;

  sizeTitle = createP("Size");
  sizeTitle.position(xpos, ypos);
  xpos += 35;

  sizeSlider = createSlider(5, 50, 20, 0);
  sizeSlider.position(xpos, ypos);
  sizeSlider.size(80);
  xpos += 100;

  sizespTitle = createP("Size Spread");
  sizespTitle.position(xpos, ypos);
  xpos += 80;

  sizespSlider = createSlider(0, 0.1, 0.01, 0);
  sizespSlider.position(xpos, ypos);
  sizespSlider.size(80);
  xpos += 100;

  xpos = 0;
  baseHueTitle = createP("Base Hue");
  baseHueTitle.position(xpos, ypos + 30);
  xpos += 70;

  baseHueSlider = createSlider(0, 360, 250, 0);
  baseHueSlider.position(xpos, ypos + 30);
  baseHueSlider.size(80);
  xpos += 100;

  huespTitle = createP("Hue Spread");
  huespTitle.position(xpos, ypos + 30);
  xpos += 80;

  huespSlider = createSlider(0, 100, 15, 0);
  huespSlider.position(xpos, ypos + 30);
  huespSlider.size(80);
  xpos += 100;

  alphaTitle = createP("Transparency");
  alphaTitle.position(xpos, ypos + 30);
  xpos += 90;

  alphaSlider = createSlider(0, 1, 0.75, 0);
  alphaSlider.position(xpos, ypos + 30);
  alphaSlider.size(80);
  xpos += 100;
}

function clearButtonClicked() {
  background(97);
}

Solución

Retroalimentación

Aplicación

Vas a aplicar los conceptos con los que experimentaste en la fase de investigación para diseñar y desarrollar una aplicación interactiva en tiempo real.

Actividad 08

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 usar al menos TRES conceptos.
• 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 usar los tres conceptos y por qué estos?
• Reporta los referentes que usaste para inspirarte.

🚀 Tu solución:

Estudiante

1) La idea es dividir la pantalla en 3 sectores donde varie el como funcione el walker, corte izquierdo levy, medio gauss y derecha perlin Referentes: https://natureofcode.com/random/#exercise-01 https://natureofcode.com/random/#exercise-03 https://natureofcode.com/random/#exercise-04

Solución

Retroalimentación

Actividad 09

Materialización

Enunciado: vas a implementar tu aplicación diseñada.

Entrega:

• Código de la aplicación.
• Captura del contenido generado.
• En caso de realizar alguna variación al concepto original, escribe un texto donde expliques la razón del cambio.

🚀 Tu solución:

Estudiante

Codigo

Enlace al editor de p5.js con la simulación

let walker;
let mode = "Gaussian"; // El modo inicial será "Gaussian"

function setup() {
  createCanvas(640, 240);
  walker = new Walker();
  background(255);
}

function draw() {
  // Cambiar el modo según la posición del mouse
  if (mouseX < width / 3) {
    mode = "Levy";
  } else if (mouseX < 2 * width / 3) {
    mode = "Gaussian";
  } else {
    mode = "Perlin";
  }

  // Llamar al método de paso según el modo
  walker.step(mode);
  walker.show();

  // Verificar si el walker está fuera de los límites del canvas
  if (walker.x < 0 || walker.x > width || walker.y < 0 || walker.y > height) {
    walker.resetToCenter();
  }
}

class Walker {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
    this.time = 0; // Variable para animar el ruido Perlin
    this.color = color(random(255), random(255), random(255)); // Color aleatorio inicial
  }

  show() {
    noFill();  // No rellenar el círculo
    stroke(this.color);  // Establecer el color del borde del círculo
    square(this.x, this.y, 20);  // Dibujar el círculo
  }

  step(mode) {

    print(mode)

    let xstep, ystep;

    if (mode === "Levy") {
      // Salto de Lévy (Levy flight)
      xstep = this.levyStep();
      ystep = this.levyStep();
    } else if (mode === "Gaussian") {
      // Distribución Gaussiana (Normal)
      xstep = randomGaussian();  // Paso de acuerdo con la distribución normal
      ystep = randomGaussian();
    } else if (mode === "Perlin") {
      // Ruido Perlin
      xstep = this.perlinStep('x');  // Paso usando ruido Perlin para x
      ystep = this.perlinStep('y');  // Paso usando ruido Perlin para y
    }

    this.x += xstep;
    this.y += ystep;
  }

  // Función para pasos con salto de Lévy (Levy flight)
  levyStep() {
    // Usamos una distribución de Ley de Potencias (exponente -1.5)
    let r = pow(random(1), 2);  // Distribución de Ley de Potencias
    return random([-1, 1]) * r * 20; // Paso aleatorio multiplicado por un valor en potencia
  }

  // Función para pasos con ruido Perlin
  perlinStep(axis) {
    let noiseVal;
    if (axis === 'x') {
      noiseVal = noise(this.time) * 2 - 1;  // Generar ruido para x
    } else {
      noiseVal = noise(this.time + 1000) * 2 - 1;  // Generar ruido para y
    }
    this.time += 0.01;  // Incrementar el tiempo para el siguiente paso
    return noiseVal * 2;  // Escalar el ruido
  }

  // Método para restablecer la posición al centro con un color aleatorio
  resetToCenter() {
    this.x = width / 2;
    this.y = height / 2;
    this.color = color(random(255), random(255), random(255)); // Nuevo color aleatorio
  }
}

Solución

Retroalimentación

Consolidación y matacognión

Ahora que has experimentado con la aleatoriedad y has aplicado estos conceptos en una pieza de arte generativo, es momento de reflexionar sobre el proceso y los resultados obtenidos.

Actividad 10

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.

🚀 Tu solución:

Estudiante

Desafios encontrados.

Principalmente entender los codigos y como hacer las variaciones de los mismos, de forma que aprendi a acomodarme al ecosistema y todo lo que se refiere a automatizaciones para salir adelante.

Solución

Retroalimentación

Actividad 11

Conexión con Diseño de Entretenimiento Digital

Enunciado: describe cómo los conceptos de aleatoriedad, distribuciones y ruido Perlin 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:

Estudiante

Los conceptos de aleatoriedad, distribuciones y ruido Perlin permiten crear experiencias interactivas y videojuegos más realistas, variados y naturales. La aleatoriedad ofrece sorpresa y diversidad, las distribuciones garantizan variabilidad coherente y controlada, y el ruido Perlin simula movimientos y comportamientos suaves y naturales. Juntos, estos conceptos permiten diseñar mundos interactivos y dinámicos que se sienten vivos, impredecibles y atractivos para los jugadores.

Ejemplos Concretos:

No Man’s Sky: Utiliza ruido Perlin para generar planetas y entornos infinitos, con paisajes y formaciones de terreno generados de manera procedural. Esto asegura que cada planeta es único, pero aún así, mantiene una coherencia natural en su forma.

Simulador de vida (SimCity, The Sims): Utiliza distribuciones gaussianas y aleatorias para la generación de comportamientos y eventos en la simulación de vida, desde las necesidades básicas de los personajes hasta el comportamiento de vehículos y habitantes.

Spelunky: Utiliza generación aleatoria de niveles, combinada con una distribución específica para las ubicaciones de los elementos y los enemigos, lo que permite que cada nivel sea único pero balanceado.

Solución

Retroalimentación

Actividad 12

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.
• Planteamiento de mejoras para futuras unidades.

🚀 Tu solución:

Estudiante

Dificultades

Las estrategias que implemente durante las actividades fue basicamente leer la informacón disponible en la pagina https://natureofcode.com/ y algo de ayuda de chat gpt para agilizar el proceso.

futuras unidades

Para el resto del curso planeo mejorar el ritmo de trabajo durante clase y las sesiones independientes.

Solución

Retroalimentación

Actividad 13

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.
• Identificación de áreas de mejora.

🚀 Tu solución:

Estudiante

Auto evaluación

NOTA: 4

Areas de mejora

Si bien entendí bien el uso y funcionamiento de los sitemas de automatizacion planteados, aun no domino con confianza los conceptos planteados en varios de los ejercicion y debo trabajar en ellos

Solución

Retroalimentación