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:

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:

Arte Generativo enfocado en la animación digital

Me parece que hay dos formas principales en las cuales podría utilizar el arte generativo en mi perfil profesional, una de ellas siendo plenamente creativa y la otra siendo algo prácticamente técnico.

En cuanto al lado creativo podría utilizar el arte del que se habla y se muestra en estos videos para poder inspirar mi estilo artístico, para crear mi estilo propio, utilizando como base ciertos algoritmos específicos, ciertas reglas de código para generar arte similar, de esta manera podría conseguir un estilo artístico sinérgico, que me represente y que muestre mis ideas, de una manera muy interesante y úmica.

Respecto a la parte técnica, ya podríamos hablar más detalladamente de en qué contextos se podría utilizar este tipo de arte o para qué propósitos, uno de ellos podrían ser experiencias interactivas con el usuario, tal y como lo hace Refik Anadol, otra manera sería generando terrenos, ruidos, y detalles de relleno para animaciones principalmente enfocadas en el 2d, pues es un hecho que según se ve, de esta manera podríamos tener mejores resultados, más pulidos, más acordes a lo necesario y con los que podríamos buscar cosas más específicas en general.

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 Hübner

Recursos:

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:

¿Conexión con mis intereses? ¿Nuevas posibilidades?

Me gustaría responder a ambas preguntas en conjunto, y no una por una, y es que me parece que la respuesta es positiva y se complementa, es decir, al ver el video, sobre todo la parte en la que habla de Brute, de como se ve el diseño del sistema de partículas, cuando muestra los renders y las demás cosas que se pueden hacer, modificar, etc, me parece algo impresionante y que si se puede replicar, de una manera un poco personalizada a los productos en los que me gustaría trabajar, podría dar unos resultados sumamente interesantes, es una forma visualmente muy atractiva de mostrar productos, y podría ser muy útil para traer a la vida promoción de productos de manera que visualmente se vea todo de una calidad superior.

En general de todo lo que habla y todo lo que muestra son cosas que tienen un potencial creativo enorme, no sólo para promoción de productos, también podrían utilizarase para entrar de una manera un poco diferente en la industria, como ya mencioné, la conexión principal con mis intereses va por el camino de promoción de productos, tal y como hizo con brute, pero me parece que si se le dedica tiempo, se puede explotar mucho en otros campos, pero me parece que ese es el principal.

Respecto a la exploración de nuevas posibilidades, creo que se podría ir por el tema de diferentes tipos de simulación, sin embargo, debido a mi desconocimiento no se me ocurre una forma específica de enrutarse, pero sé que es muy posible.

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:

Comprendiendo el código de las caminatas aleatorias

Realmente no hice una sóla pregunta, traté de entender bien las partes del código, a qué se refería cada una, y ya de ahí experimenté brevemente pero con varias cosas, es decir, empecé por ver qué pasaría si cambiaba el color del rgb del fondo por un gris, obvio también en rgb, porque pues no me sentía cómodo con todo blanco, también agrandé un poco el cuadro ya que tampoco me sentía cómodo con un espacio de trabajo por la otra pregunta que tenía y era que si en lugar de dejar la opción de ir hacia arriba, la quitaba, y luego ponía nuevamente la de ir hacia abajo, al haber el doble de probabilidades la raya por así decirlo se dibujaría el doble de rápido hacia abajo, era lógica pura, y así fue.

En resumen, mis preguntas fueron ¿Qué pasaría si hago más grande este número el cual parece ser el tamaño del cuadro del canvas? ¿Qué pasaría si cambio este rgb por algo un poco más cómodo de ver? ¿Qué pasaría si quito la opción de ir hacia arriba y en su lugar pongo otra de ir hacia abajo?

Claramente las dos primeras eran bastante obvias, el cuadro se iba a agrandar y a hacer gris ya que de ese color había puesto el rgb, y la otra mi hipótesis fue correcta, que se movería hacia abajo el doble de rápido debido a que tenía el doble de posibilidad, en este caso primero quité la opción de ir hacia arriba, sin reemplazar, luego efectivamente puse dos veces la opción de ir hacia abajo y así fue, empezó a moverse hacia abajo más rápidamente c:

- Ahora, las preguntas que quería responder con este experimento:

¿Entiendo correctamente la naturaleza del código? ¿Entiendo correctamente qué hace cada parte por sencillo que sea? ¿No estoy confundiendo conceptos básicos de lo que se me acaba de explicar en la lectura?
Esperaba que el cuadro se ampliara, se pusiera gris y la línea nunca subiera, sino que bajara y de hecho bajara el doble de rápido
Los obtuve todos jaja
Aprendí que realmente es un código bastante simple y predecible de modificar, quizá fue por lo que escogí

- Ahora, la imagen del código funcionando:

Caminatas Aleatorias

- Ahora, el código modificado:

let walker;

function setup() {
  createCanvas(640, 640);      //Esta fue la modificación de tamaño
  walker = new Walker();
  background(128,128,128);      //Esta fue la modificación de color
}

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() {
    const choice = floor(random(4));
    if (choice == 0) {
      this.x++;
    } else if (choice == 1) {
      this.x--;
    } else if (choice == 2) {
      this.y++;
    } else {      //Aquí fue donde puse la otra opción hacia abajo
      this.y++;
    //} else {//      //Y aquí quedó en comentarios la anterior, la que iba hacia arriba
    //  this.y--;//
    }
  }
}

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:

Distribución no uniforme hacia la derechaaa

Realmente me parece que la diferencia es bastante sencilla, una distribución uniforme es aquella en la cual todos los números tienen exactamente las mismas probabilidades de salir, es decir, si tenemos 4 números, el 1, el 2, el 3 y el 4, todos tienen 25% de probabilidades de salir, sin embargo, una distribución no uniforme, es aquella en la que algunos números tienen más probabilidad de salir que otros, creando en este caso una campana de gauss, por ejemplo, en este caso, con estos mismos números, digamos que el 3 y el 4 tienen un 30% de posibilidades de salir, mientras que el 1 y el 2 sólo tinene un 20%, es un hecho de que es más probable que el 3 y el 4 salgan.

En resumen, en una distribución uniforme todos los números tienen la misma posibilidad de salir, y en una distribución no uniforme hay números con más posibilidades de salir que otros.

En el caso de las caminatas aleatorias lo único que hizo falta para que esta fuera una distribución no uniforme fue algo similar a lo que hice con la anterior actividad, que fue básicamente añadir otra posibilidad de que fuera hacia la derecha, haciendo que de esta manera, por mucho que en ocasiones fuera hacia la izquierda, debido a que había el doble de probabilidades de ir hacia la derecha, la caminata en este caso, siempre iba a tender a ir hacia la derechaaa.

- Ahora, la imagen del código funcionando:

Caminatas Aleatorias

- Ahora, el código modificado:

let walker;

function setup() {
  createCanvas(640, 640);      //Obviamente lo agrandé
  walker = new Walker();
  background(93,155,155);      //Esta vez lo puse azul
}

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() {
    const choice = floor(random(5));      //Aquí aumenté el número de aleatoreidades
    if (choice == 0) {
      this.x++;
    } else if (choice == 1) {
      this.x--;
    } else if (choice == 2) {
      this.y++;
      } else if (choice == 3) {
      this.y--;
    } else {      //Y aquí puse otra posibilidad de que pueda ir a la derecha, de esa manera aunque a veces se devuelve, tiende a ir más hacia allá
      this.x++;
    }
  }
}

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:

Lo que hice fue ponerme a jugar un poco con el código de explicación de la distribución normal de la actividad #4, y tuve un resultado bastante cómodo a mi parecer, pues se nota como directamente se forma una campana de gauss en la visualización del código, la cual es la siguiente:

DistribucionNormal

Me parece que es más que evidente que la distribución normal se refleja de manera directa en la campana que se forma al momento de verse la visualización del código, el cual es el siguiente:

function setup() {
  createCanvas(100, 100);
  background(93,125,125);
  describe('Robé el ejemplo de la actividad #4 y le estuve haciendo modificaciones hasta que funcionó como lo necesitaba.');
}
function draw() {
  // Style the circles.
  noStroke();
  fill(0, 10);
  y = randomGaussian(50,1);
  x = 10;
  circle(x, y, 5);

  y = randomGaussian(50,5);
  x = 20;
  circle(x, y, 5);

  y = randomGaussian(50,10);
  x = 30;
  circle(x, y, 5);
  y = randomGaussian(50, 15);
  x = 40;
  circle(x, y, 5);

  y = randomGaussian(50, 20);
  x = 50;
  circle(x, y, 5);

  y = randomGaussian(50, 15);
  x = 60;
  circle(x, y, 5);

  y = randomGaussian(50, 10);
  x = 70;
  circle(x, y, 5);

  y = randomGaussian(50, 5);
  x = 80;
  circle(x, y, 5);

  y = randomGaussian(50, 1);
  x = 90;
  circle(x, y, 5);
}

Actividad 06

Distribución personalizada: Lévy flight

Enunciado: realiza una simulación donde visualices un salta 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:

Vuelo de Lévy

En este caso, el vuelo de lévy es un tipo de caminata aleatoria en que la mayoría de pasos son pequeños, pero de vez en cuando ocurre un salto considerablemente largo, y es en esencia esto lo que la diferencia de una caminata aleatoria normal, donde todos los pasos tienen prácticamente la misma distancia o el mismo tamaño por así decirlo, y si se llega a notar alguna inclinación es por mera aleatoreidad.

Este concepto normalmente se usa para modelar o simular movimientos naturales, estos pueden ser el patrón de búsqueda de comida de los animales, cuando claramente se dan cuenta que en la zona ya no hay y van hacia otra zona a seguir buscando, o en un caso un poco más experimental, en el comportamiento de partículas como pueden ser las de fluidos turbulentos, algo también aleatorio y muy variable.

Vuelo de Levy

let walker;

function setup() {
  createCanvas(640, 640);
  walker = new Walker();
  background(95, 128, 128);
}

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

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

  show() {
    stroke(0);
    line(this.prevX, this.prevY, this.x, this.y); // Dibuja una línea entre el punto anterior y el actual
  }

  step() {
    this.prevX = this.x;
    this.prevY = this.y;

    let stepSize = this.levy();
    let angle = random(TWO_PI);
    let dx = stepSize * cos(angle);
    let dy = stepSize * sin(angle);

    this.x += dx;
    this.y += dy;

    this.x = constrain(this.x, 0, width);
    this.y = constrain(this.y, 0, height);
  }

  levy() {
    let num;
    do {
      num = randomGaussian(0, 1);
    } while (abs(num) < 0.1);

    return pow(abs(num), 2) * 7 * random([1, -1]); // Aumenta la distancia de los saltos grandes
  }
}

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:

Concepto de Ruido Perlin

Fotos de Ruido

La izquierda es algo así como un camino aleatorio suavizado, es claro que esta usa Ruido Perlin, y se parece a una señal natural como una montaña, unas olas o una onda suave, mientras que la figura de la derecha es totalmente caótica y aleatoria, sin siquiera continuidad, cada punto es completamente aleatorio e independiente.

Ahora, hagamos una variación en mi código de la actividad #4 para que se note un ruido perlin en este, Ahora el movimiento del walker es más fluido y natural, como si siguiera una corriente en lugar de moverse de forma impredecible, y esto se debe a que su dirección no cambia abruptamente sino que sigue una secuencia de valores que evolucionan de manera continua, evitando los saltos bruscos del movimiento aleatorio.

Ruido Perlin Mio

let walker;

function setup() {
  createCanvas(640, 640);
  walker = new Walker();
  background(93, 155, 155); // Azul
}

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

class Walker {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
    this.tx = 0; // Tiempo para Perlin Noise en X
    this.ty = 10000; // Tiempo para Perlin Noise en Y (desfase para evitar valores iguales)
  }

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

  step() {
    this.x = map(noise(this.tx), 0, 1, 0, width);
    this.y = map(noise(this.ty), 0, 1, 0, height);

    this.tx += 0.01; // Pequeño incremento para transición suave
    this.ty += 0.01;
  }
}

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:

Primera aplicación de arte interactiva

La verdad es que es algo fácil de pensar pero se me está complicando un poco de hacer, mi idea es la siguiente:

Me gustaría hacer una aplicación que con las teclas ‘WASD’ se controle una bolita con un movimiento ‘random walker’ pero que estas decidan la inclinación del mismo, es decir, un random walk que al presionar la ‘a’ tenga tendencia hacia la izquierda, al presionar la ‘d’, tendencia la derecha, etc, Luego, me gustaría implementar dos teclas interactivas dependiendo de donde esté, es decir, si le doy a la ‘f’ que haga un vuelo de lévy aleatorio desde donde está, si se presiona la tecla ‘g’ que se empice a mover con un ruido perlin pero con la tendencia dependiendo de la telca presionada, la que sea de las ‘WASD’, y ya al presionar la tecla ‘h’ que vuelva al modo random walker

Ahí estarían utilizados los tres conceptos de ‘Random Walker’, de ‘Perlin Noise’ y de ‘Lévy Flight’, escogí estos 3 conceptos porque siento que podrían tener una sinergia interesante al momento de hacer una pieza de arte generativa y que combinando los 3 conceptos se puede lograr prácticamente cualquier tipo de movimeinto que se necesite.

Y realmente mi referente principal fueron mi código de la actividad 4 con un rando walk con tendecia hacia la derecha el cual me hizo pensar que podría usar las flechas para que la tendencia sea hacia donde quiero, lo cual ya logré, sólo me falta la cuestión de los ‘modos de movimiento por’ así decirlo, y mi otra inspiración fue la gráfica del perlin noise, me gustó ese tipo de movimiento y me gustaría implementarlo, ya el vuelo de lévy es como un toque de aleatoreidad.

RandomDerecha GraficaPerlin

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:

Aplicación interactiva

Hice un cambio en el concepto, ahora el ruido perlin no irá en dirección de las teclas ‘WASD’ sino que al presionar la tecla ‘g’, este se moverá libremente durante un par de segundos, el vuelo de levy sigue siendo igual, al presionar la ‘f’ se mueve aleatoriamente a una parte de la pantalla.

Ahora todo quedó listo, se mueve con las teclas ‘WASD’, si presiono la tecla ‘F’ hace un vuelo de lévy y si presiono la tecla ‘G’ se mueve libremente con un ruido de Perlin durante 3 segundos.

Aplicación Interactiva

let x, y; // Posición de la bola
let prevX, prevY; // Posición anterior para la trayectoria
let stepSize = 5; // Tamaño del paso en el random walk
let levyStepSize; // Tamaño del paso en el vuelo de Lévy
let isLevy = false; // Indicador de si está en modo vuelo de Lévy
let levySteps = 0; // Contador de los pasos del vuelo de Lévy
let maxLevySteps = 4; // Número máximo de pasos para el vuelo de Lévy

// Variables para Perlin Noise
let tx = 0; // Tiempo para Perlin Noise en X
let ty = 10000; // Tiempo para Perlin Noise en Y (desfase para evitar valores iguales)
let isPerlinMoving = false; // Indicador de si está en modo Perlin Noise
let perlinStartTime; // Tiempo de inicio para el movimiento Perlin
let perlinDuration = 3000; // Duración del movimiento Perlin en milisegundos

function setup() {
  createCanvas(640, 640);
  // Inicializamos las posiciones de la bola
  x = width / 2;
  y = height / 2;
  prevX = x;
  prevY = y;
  background(93, 155, 155); // Fondo azul cian
}

function draw() {
  // Dibujamos la trayectoria de la bola
  stroke(0); // Trazo negro para la trayectoria
  line(prevX, prevY, x, y); // Dibuja línea entre la posición anterior y la nueva

  // Dibujamos la bola en rojo oscuro
  fill(139, 0, 0); // Rojo oscuro
  noStroke();
  ellipse(x, y, 10, 10); // La bola tiene un tamaño de 10px

  // Guardamos la posición anterior
  prevX = x;
  prevY = y;

  if (isLevy) {
    levyMove(); // Si está en modo Lévy, mueve con Lévy
  } else if (isPerlinMoving) {
    perlinMove(); // Si está en modo Perlin Noise, mueve con Perlin
  } else {
    // Movimiento de la bola según la tecla presionada
    if (keyIsDown(65)) { // Tecla 'A' para izquierda
      x -= stepSize;
    } else if (keyIsDown(87)) { // Tecla 'W' para arriba
      y -= stepSize;
    } else if (keyIsDown(68)) { // Tecla 'D' para derecha
      x += stepSize;
    } else if (keyIsDown(83)) { // Tecla 'S' para abajo
      y += stepSize;
    } else {
      // Movimiento random walk cuando no se presiona ninguna tecla
      let angle = random(TWO_PI);
      let dx = cos(angle) * stepSize;
      let dy = sin(angle) * stepSize;
      x += dx;
      y += dy;
    }
  }

  // Aseguramos que la bola no salga del canvas
  x = constrain(x, 0, width);
  y = constrain(y, 0, height);
}

// Activar el vuelo de Lévy al presionar la tecla 'F'
function keyPressed() {
  if (key === 'f' || key === 'F') {
    if (!isLevy) {
      isLevy = true; // Activa el vuelo de Lévy
      levyStepSize = levy(); // Establece el tamaño de paso para el vuelo de Lévy
      levySteps = 0; // Reinicia el contador de pasos de Lévy
    }
  }

  // Activar el movimiento Perlin al presionar la tecla 'G'
  if (key === 'g' || key === 'G') {
    if (!isPerlinMoving) {
      isPerlinMoving = true; // Activa el movimiento con Perlin Noise
      perlinStartTime = millis(); // Guarda el tiempo actual
    }
  }
}

// Función de vuelo de Lévy
function levyMove() {
  if (levySteps < maxLevySteps) {
    let angle = random(TWO_PI);
    let dx = cos(angle) * levyStepSize;
    let dy = sin(angle) * levyStepSize;

    x += dx;
    y += dy;

    // Después de un salto, generamos un nuevo tamaño de paso para el próximo salto
    levyStepSize = levy(); // Calculamos un nuevo tamaño de paso

    // Aseguramos que la bola no salga del canvas
    x = constrain(x, 0, width);
    y = constrain(y, 0, height);

    levySteps++; // Incrementamos el contador de pasos de Lévy
  } else {
    isLevy = false; // Detenemos el vuelo de Lévy después de 4 pasos
  }
}

// Función para calcular un tamaño de paso de Lévy
function levy() {
  let num;
  do {
    num = randomGaussian(0, 1); // Generamos un valor normal (gaussiano)
  } while (abs(num) < 0.1); // Nos aseguramos de que el valor no sea demasiado pequeño

  return pow(abs(num), 2) * 20 * random([1, -1]); // Retornamos un valor de paso de Lévy
}

// Función para mover la bola con Perlin Noise
function perlinMove() {
  // Comprobamos si han pasado 3 segundos desde que comenzamos el movimiento
  if (millis() - perlinStartTime < perlinDuration) {
    // Movimiento con Perlin Noise
    x = map(noise(tx), 0, 1, 0, width);
    y = map(noise(ty), 0, 1, 0, height);

    tx += 0.01; // Pequeño incremento para transición suave
    ty += 0.01;
  } else {
    // Después de 3 segundos, detenemos el movimiento Perlin
    isPerlinMoving = false;
  }
}

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:

Análisis de resultados y dificultades

En este caso, en la fase de apply, honestamente lo más complicado fue el tema del código, la idea la tuve inmediatamente, no fue complicado pensar en una forma en la que pudiera aplicar tres de los conceptos aprendidos y pensar en cómo podría hacer que la aplicación fuera interactiva y generase algún tipo de pieza de arte procedural con cierto toque de aleatoreidad por el tema de los conceptos mismos, sin embargo, respecto al código es algo que no sabía cómo se podría llegar a organizar, es algo que claramente hice con ayuda de IA ya que codificando no soy muy bueno y aunque soy absolutamente consciente del código como tal, se me llegó a dificultar entender cómo podía hacer que este funcionara, probé con muchos promps y obviamente tuve en cuenta códigos que sí hice yo en actividades de la fase de seek, que fueron casi todos, y aún así tenía problemas para poder coordinar y organizar lo que quería hacer, de hecho debido a esto tuve que hacer el pequeño cambio de concepto que había hecho de la idea inicial que tuve, a lo que terminó siendo como tal mi código y mi aplicación interactiva finalmente.

Es cierto que el cambio fue mínimo, pero si es un hecho que lo hice para facilitar el código ya que de la otra manera no podía hacer que funcionara aunque traté de meterle mano al código varias veces, no pude hacer el concepto que tuve en un principio, así que quizá esa sea la dificultad mayor, que debido a mis limitaciones al momento de codificar, aunque tengo otras formas de hacer lo que quiero, y aprendí a salir del paso y a quizá ingeniármelas para hacer cosas casi que iguales o conceptos similares, no puedo pensar en algo, y codificarlo directamente, así que es algo que debo trabajar y aunque sí me fue mejor con el código esta vez, aún tengo bastante que aprender de algunas lógicas de programació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:

Aplicación de conceptos a la rama del entretenimiento digital

Es un hecho que los conceptos descritos pueden ser sumamente útiles en el entretenimiento digital y más específicamente en estas 3 ramas, la aleatoreidad, distribuciones y el ruido perlin permiten generar contenido dinámico, natural y evidentemente muy variado y todo de una manera procedural, sin tener que perder tiempo en diseñar manualmente este tipo de cosas, lo cual sería un costo excesivo y un trabajo eterno si se ve a gran escala como se usa usualmente en esta industria.

Por ejemplo, yo diría que la aleatoreidad y las distribucionees se podrían usar principalmente en los videojuegos y las experiencias interactivas, la aleatoreidad podrían usarse en la aparición de enemigos o ítems mismos dentro del juego, del mapa, o de los niveles como tal, puede referirse a efectos visuales, eventos, comportamientos de npcs en juegos más complejos, etc.

Las distribuciones de probabilidad pueden llegar a controlar muchas cosas, pueden controlar frecuencias, patrones de eventos, es decir, a medida que uno se acerque a ciertos lugares puede haber más probabilidad de items más valiosos pero al mismo tiempo enemigos más poderosos, etc, esto mismo puede ser en las experiencias interactivas, al momento por ejemplo de escucharse un ruido más alto, podría generar patrones visuales más evidentes a la vista del usuario en cosas como visualizers de canciones, o con luces.

Por otro lado está el ruido perlin, el cual se usa tanto en generación de terrenos orgánicos, como en la animación al momento de suavizar los movimientos, las transiciones, los efectos visuales y animaciones en general, evitando así cambios abruptos, innaturales y poco atractivos al usuario.

En resumen:

1- Distribuciones de probabilidad: En juegos con NPCs o enemigos, las distribuciones de probabilidad pueden determinar cómo y dónde aparecen.

2- Ruido Perlin: En VFX y animaciones, el ruido Perlin se usa para simular efectos como humo, fuego y agua con movimientos fluidos y realistas.

3- Aleatoreidad: En algunos juegos tipo roguelike la estructura de los niveles se genera de forma procedural usando aleatoriedad para decidir la ubicación de habitaciones, enemigos y tesoros.

Niveles aleatorios en ‘The Binding of Isaac or Hades’

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:

Comprensión de conceptos

A decir verdad, la mejor manera que tuve de comprender los conceptos era leyendo los textos guías, buscando en internet y por otra parte pidiendo explicaciones utilizando conceptos que ya conocía a chatgpt, de esta manera aunque leía y entendía todo de una forma un poco técnica, y con nuevos conceptos, lo que hacía chatgpt era explicarme con palabras y conceptos que ya conocía, algo nuevo, y de esta manera lograba entender todo lo nuevo de una forma un poco más amigable y familiar, y pude en varias ocasiones asimilar un concepto comparándolo con otro, y pues evidentemente utilizando ejemplos puntuales.

Debo decir que de esta manera me fue muy bien, entendí todo correctamente, no tuve problemas con ningún concepto y pues me quedó todo más claro de lo que esperaba, me parece una estrategia interesante, y en este momento no se me ocurre una forma de mejorarla, quizá para futuras unidades, lo que debería hacer sería adentrarme un poco más en el tema del código, pero es algo que estoy intentando de a poquito nuevamente y aún se me dificulta un poco, llega un punto en que no sé cómo continuar y me ofusco, pero ahí voy, de resto, la forma de entender los conceptos, de aplicarlos, y todo, es algo que por ahora se me facilitó bastante.

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:

Autoevaluación de la unidad

Diría que de manera general me pondría un 4

Esto se debe a que aunque es cierto que comprendí totalmente todos los conceptos, entiendo perfectamente en qué casos estos se podrían usar, se me ocurren ejempos concretos con todos ellos en mi rama, y en las otras dos de la carrera, es cierto que no logro utilizar la lógica de la programación con un dominio absoluto, que es lo que me gustaría, si me fue bien con los códigos y con entender por qué hacían qué, y si pude por mano propia modificar códigos que ya habían (Eran cosas realmente básicas, pero me reconforta saber que no se me complica tanto), aún así, hay momentos en los que no puedo avanzar con el código y me quedo un poco limitado.

Ya lo había mencionado antes, pero es un hecho que el lugar principal donde debo reforzar mi aprendizaje es en la utilización y la lógica del código, los conceptos son cosas que comprendo muy fácilmente en general, no tengo problema ni entendiéndolos, ni aplicándolos, ni recordándolos normalmente, pero ya cuando llegamos a la parte del código, es cierto que se me dificulta más y debo seguir trabajando en ello, de resto me siento muy satisfecho con mi progreso en esta primera unidad, siento que fue una forma tranquila de empezar el curso y que si las cosas siguen así no tendré muchas dificultades para sguir avanzando, pues planeo mejorar en el tema del código, y sino, pues siempre tenemos las ayudas disponibles, que espero no hacer mucho uso de ellas y poder desarrollar un poco más esa habilidad.