Saltearse al contenido
Sistemas Físicos Interactivos 2

Unidad 1

Introducción

En esta unidad, te adentrarás en un territorio creativo donde la colaboración entre humanos y máquinas da lugar a resultados sorprendentes. Explorarás los principios fundamentales del diseño generativo, un enfoque que redefine el rol del diseñador como un creador de sistemas y algoritmos que, a su vez, generan infinitas posibilidades.

A lo largo de las próximas dos semanas, investigarás las bases teóricas del diseño generativo, analizarás ejemplos inspiradores de artistas y proyectos, y experimentarás con herramientas y técnicas para crear tus propios prototipos. Descubrirás cómo las reglas, los sistemas y la aleatoriedad controlada pueden ser utilizados para generar patrones visuales, animaciones, sonidos e incluso experiencias interactivas complejas.

Prepárate para:

  • Desafiar las nociones tradicionales de diseño: aprenderás a pensar en términos de sistemas y algoritmos, dejando que la máquina sea nuestra aliada en el proceso creativo.

  • Explorar el potencial de la aleatoriedad: descubrirás cómo la aleatoriedad controlada puede ser una herramienta poderosa para generar resultados inesperados e innovadores.

  • Analizar obras de artistas generativos: te inspirarás en el trabajo de pioneros en este campo, descubriendo las diferentes técnicas y enfoques que han utilizado.

  • Experimentarás con herramientas y código: pondrás manos a la obra para crear tus propios diseños generativos, utilizando plataformas como p5.js y otras herramientas de código creativo.

  • Reflexionar sobre el impacto del diseño generativo: analizarás el potencial de este enfoque para transformar el diseño en el entretenimiento digital y en otros campos.

Recurso guía inicial

  • El punto de partida para comenzar el proceso de indagación de referentes será el sitio del diseñador alemán Patrik Hübner y su método de diseño INPUT/OUTPUT.

  • La sección de recursos del curso simulación para sistemas interactivos del pregrado ingeniería en diseño de entretenimiento digital de la UPB. Aquí

¿Qué aprenderás en esta unidad?

Vas a introducirte al concepto de diseño y arte generativo, estableciendo una base para la exploración y análisis de referentes en la fase SEEK (investigación). En esta unidad, explorarás el fascinante mundo del diseño y arte generativo. Aprenderás qué lo define, cómo se diferencia del diseño tradicional y cómo se aplica en el contexto del entretenimiento digital. Prepárate para sumergirte en un enfoque creativo donde la colaboración entre humanos y máquinas da lugar a resultados sorprendentes.

Actividad 01

Definición y diferenciación

Enunciado:

  • Investiga las definiciones de diseño generativo y arte generativo. Busca al menos tres fuentes diferentes para cada término, incluyendo la propuesta de Patrik Hübner.

  • Crea un cuadro comparativo que destaque las similitudes y diferencias clave entre diseño generativo, arte generativo y diseño tradicional. Considera aspectos como el proceso creativo, las herramientas utilizadas, el rol del diseñador y los resultados obtenidos.

  • En un párrafo, describe con tus propias palabras qué significa “diseño generativo” en el contexto del entretenimiento digital. ¿Qué potencial ves en este enfoque para la creación de experiencias interactivas?

Entrega: textos que den respuestas a las cuestiones planteadas en el enunciado.

🚀 Tu solución:

titulo

Definicion de diseño generativo:
  1. Patrick Hubner:

el diseño generativo es un proceso que implica la creación de soluciones de diseño a través de algoritmos, donde se generan múltiples opciones o resultados a partir de reglas o patrones predefinidos. Este enfoque utiliza la computación para explorar de manera más eficiente el espacio de diseño, permitiendo una mayor flexibilidad y variabilidad en los resultados finales. El diseñador establece las reglas, pero las decisiones específicas son determinadas por el algoritmo.

  1. Shifman:

El diseño generativo es el uso de algoritmos para generar resultados que no son preconcebidos ni totalmente controlados por el diseñador. Este enfoque permite que el software genere diversas opciones, lo que potencia la creatividad y abre posibilidades innovadoras. A menudo, el proceso de diseño generativo incluye elementos como la experimentación y la improvisación.

  1. McCormack, Hutchings y Hutchings:

El diseño generativo se describe como un enfoque que utiliza algoritmos computacionales para explorar un amplio rango de soluciones de diseño. Se basa en la interacción entre el diseñador y el algoritmo, con el diseñador como facilitador de un sistema que genera diferentes iteraciones y opciones. Es una forma de expandir las capacidades creativas del diseñador mediante la computación, lo que permite probar más ideas y opciones que si se hiciera manualmente.

Definiciones de arte generativo:
  1. Patrick Hubner:

En el contexto del arte generativo, Hübner lo describe como una forma de arte en la que la obra no es creada únicamente por el artista, sino que es el resultado de un proceso de generación. El proceso involucra la creación de sistemas autónomos (como algoritmos o procedimientos) que pueden producir arte de manera independiente, con el artista actuando más como un director de esos sistemas que como un creador directo de la obra final.

  1. McCormack, Hutchings y Hutchings:

El arte generativo es un enfoque artístico que utiliza sistemas generativos como algoritmos, inteligencia artificial o redes neuronales para crear obras de arte. A través de estos sistemas, los artistas exploran nuevas formas de expresión visual o auditiva, desafiando las concepciones tradicionales del arte como una práctica completamente controlada por el creador. En lugar de ser una obra única y final, el arte generativo a menudo es el resultado de un proceso que puede producir múltiples versiones de una misma pieza.

  1. Paul:

El arte generativo se basa en la idea de que el proceso creativo puede ser delegado a un sistema autónomo. Los artistas que practican arte generativo a menudo crean algoritmos o procedimientos que generan las obras de arte a partir de reglas que ellos mismos establecen. Este enfoque hace hincapié en la imprevisibilidad y la variabilidad, ya que las obras generadas pueden cambiar continuamente o diferir según los parámetros definidos por el algoritmo.

Cuadro comparativo:

Procesos creativos:

Diseño generativo: Utiliza algoritmos y reglas predefinidas para generar múltiples soluciones de diseño. El proceso es interactivo entre el diseñador y el sistema computacional.

Arte generativo: Similar al diseño generativo, pero enfocado en la creación de obras de arte. El proceso también involucra la creación de sistemas autónomos que producen arte de forma impredecible.

Diseño tradicional: El proceso creativo es lineal y generalmente controlado completamente por el diseñador. Es una práctica más manual y basada en la intuición y experiencia personal del creador.

Herramientas utilizadas:

Diseño generativo: Software computacional, algoritmos, herramientas de programación, generadores automáticos.

Arte generativo: Algoritmos, software de generación de imágenes, audio o formas visuales (p. ej., Processing, herramientas de IA).

Diseño tradicional: Herramientas manuales (lápiz, papel, herramientas de diseño gráfico, etc.) y software tradicional de diseño (Illustrator, Photoshop).

Rol del diseñador:

Diseño generativo: El diseñador define las reglas y parámetros, pero las soluciones son generadas por el algoritmo, lo que le otorga un rol más de facilitador.

Arte generativo: El artista actúa como creador del sistema generativo, pero la obra final es, en gran medida, producto de procesos autónomos.

Diseño tradicional: El diseñador o artista controla todos los aspectos del proceso creativo, desde la conceptualización hasta la ejecución final.

Resultados obtenidos:

Diseño generativo: Generación de múltiples soluciones posibles, lo que puede dar lugar a una variedad infinita de opciones. Los resultados no son siempre predecibles.

Arte generativo: Creación de obras de arte que pueden ser impredecibles o cambiantes, generadas a partir de reglas que permiten variabilidad.

Diseño tradicional: Una solución única y controlada, donde el resultado final es la visión del diseñador/artista y suele ser predecible.

Significado con mis propias palabras

El diseño generativo en el contexto del entretenimiento digital para mi puede significar nuevas formas de resolver problemas con multiples soluciones para asi encontrar la mas optima buscando a la vez la innovacion.

El diseño generativo tiene un gran potencial para las experiencias, ya que podemos obtener multiples resultados para la realizacion de grandes proyectos interactivos, tambien se tiene aun mas en cuenta la interaccion del usuario para creal algo unico.

link de editor: https://stackedit.io/app#

Actividad 02

Exploración inicial de referentes

Enunciado:

  • Explora la web en busca de tres ejemplos de proyectos que consideres representativos del diseño y arte generativo en el contexto del entretenimiento digital (pero puedes ampliarte para estar abierto a más posibilidades). Puedes utilizar plataformas como Processing, openFrameworks, p5.js, o buscar artistas que trabajen con este enfoque. (No es necesario que los proyectos utilicen las tecnologías específicas del curso).

  • Para cada ejemplo, proporciona la siguiente información:

    • Nombre del proyecto/artista
    • URL o enlace al proyecto
    • Breve descripción del proyecto (máximo 3 líneas)
    • Una imagen o captura de pantalla del proyecto

  • En un párrafo por cada ejemplo, describe qué aspectos del proyecto te llaman la atención y por qué consideras que es un buen ejemplo de diseño/arte generativo. Intenta identificar las “reglas” o “sistemas” que crees que podrían estar en juego en la generación de la obra.

Entrega: textos que den respuestas a las cuestiones planteadas en el enunciado.

🚀 Tu solución:

Actividad 2

  1. Refik Anadol

https://refikanadol.com/

Refik Anadol es un artista multimedia que trabaja con inteligencia artificial y grandes conjuntos de datos para crear obras de arte dinámicas e inmersivas. Su enfoque consiste en recopilar información visual, como imágenes de la naturaleza o ciudades, y procesarlas a través de algoritmos de aprendizaje automático. Estos algoritmos analizan patrones y generan composiciones en constante cambio, que luego se presentan en instalaciones de gran formato o en experiencias de realidad virtual.

Refik Anadol destaca por su capacidad para transformar grandes volúmenes de datos en experiencias visuales y sensoriales impactantes. Su enfoque combina arte, ciencia y tecnología, utilizando la inteligencia artificial para analizar y reinterpretar datos masivos, como imágenes de flora y fauna, creando representaciones abstractas y dinámicas. Las reglas en su trabajo parecen involucrar la recopilación de datos específicos, que luego son procesados mediante algoritmos para generar visualizaciones únicas, ofreciendo una nueva forma de pintar con datos.

  1. Botto

https://botto.com/

Botto es una inteligencia artificial diseñada para crear arte generativo en colaboración con los usuarios. Cada semana, la IA produce aproximadamente 350 imágenes diferentes, las cuales son sometidas a votación por una comunidad en línea.

Las obras más valoradas se subastan como NFT, y los resultados de las votaciones retroalimentan al algoritmo, afinando su proceso creativo según las preferencias colectivas. Este sistema establece reglas basadas en la interacción entre la IA y la comunidad, donde las decisiones humanas influyen en la evolución artística de la máquina, ejemplificando una colaboración hombre máquina en la creación artística.

3.Artificio 2023

https://fuga.gov.co/noticias/artificio-2023-una-exposicion-hibrida-de-arte-digital

Exposición híbrida de arte digital que explora la intersección entre la realidad y la virtualidad, presentando obras de 37 artistas que abarcan desde la pintura digital hasta la realidad virtual, incluyendo animación, inteligencia artificial y arte generativo

Artificio 2023 es una iniciativa de la Fundación Gilberto Alzate Avendaño (FUGA) que busca abrir y consolidar el campo de la creación artística con herramientas y soportes digitales en Colombia, Las obras exhibidas abarcaron una amplia gama de técnicas y formatos, desde pintura digital hasta realidad virtual, pasando por animación, inteligencia artificial y arte generativo. La muestra ofreció un recorrido ecléctico de estéticas que mezclaban la realidad y la virtualidad, permitiendo a los asistentes experimentar con diversas tecnologías y enfoques creativos, una de sus reglas es Integración de tecnologías de realidad virtual y aumentada para experiencias inmersivas.

Investigación

Vas a profundizar en la investigación de referentes de diseño y arte generativo, analizando diferentes enfoques, técnicas y herramientas. Esta fase te proporcionará un panorama amplio del campo y te ayudará a identificar posibles inspiraciones para su propio proyecto.

Actividad 03

Análisis de artistas generativos

Enunciado:

Investiga a dos artistas reconocidos en el campo del arte generativo (diferentes a los explorados en la fase SET). Para cada artista:

  • Biografía breve: describe brevemente su trayectoria y enfoque artístico.
  • Análisis de obras: selecciona y analiza dos obras de cada artista. Describe las técnicas, herramientas y procesos que crees que utilizaron para crearlas.
  • Influencias: identifica las posibles influencias o corrientes artísticas que se reflejan en su trabajo.

Entrega: textos que den respuestas a las cuestiones planteadas en el enunciado.

🚀 Tu solución:

Actividad 3

  1. Eduardo Mac Entyre

Eduardo Mac Entyre (Buenos Aires, 20 de febrero de 1929 – 5 de mayo de 2014) fue un pintor argentino conocido por ser uno de los fundadores del movimiento de Arte Generativo en 1959. Autodidacta, se interesó por el diseño industrial y gráfico, lo que influyó en el rigor técnico de su pintura. Su obra se caracteriza por diseños geométricos.

obras:

Generative Composition:

En esta obra, Mac Entyre utiliza líneas curvas que se entrelazan y generan formas geométricas complejas. La superposición y repetición de estas líneas crean una sensación de movimiento y profundidad. Es probable que haya empleado técnicas manuales precisas para lograr la uniformidad y continuidad de las líneas, explorando la interacción entre forma y espacio.

Untitled:

Esta pieza presenta una serie de círculos concéntricos que se intersectan, formando patrones hipnóticos. La precisión en la ejecución sugiere un enfoque meticuloso, posiblemente utilizando herramientas de dibujo técnico. La obra juega con la percepción del espectador, creando ilusiones ópticas que son características del Op-art.

Influencias:

El trabajo de Mac Entyre muestra influencias del Arte Concreto y el Op-art. Estudió las teorías de Max Bill y Georges Vantongerloo, así como la escuela de la Bauhaus, lo que se refleja en su enfoque en la geometría y la abstracción. Su interés por el diseño industrial y gráfico también influyó en la precisión y el rigor técnico de sus composiciones.

  1. Sergio Albiac

Sergio Albiac es un artista español que explora la intersección entre el arte y la tecnología. Utiliza algoritmos y programación para crear obras que fusionan elementos tradicionales y digitales. Su trabajo se centra en la generación de retratos y paisajes abstractos mediante técnicas de arte generativo, a menudo incorporando la participación del espectador.

Obras:

Stardust:

En esta serie, Albiac utiliza programación para generar retratos a partir de partículas digitales que se agrupan formando rostros humanos. Emplea algoritmos que simulan procesos naturales, como la formación de estrellas, para crear composiciones que evocan una sensación cósmica. La técnica combina fotografía y programación, resultando en imágenes que parecen estar en constante formación.

You are not in the news:

Esta obra interactiva recopila imágenes de noticias en tiempo real y las utiliza para generar retratos del espectador. Albiac emplea algoritmos que analizan las imágenes de noticias y las reorganizan para formar la imagen del usuario, creando una conexión entre la identidad personal y los eventos globales. La obra destaca por su capacidad para fusionar datos en tiempo real con la participación del espectador.

Influencias:

El trabajo de Albiac está influenciado por el arte digital y la programación creativa. Su enfoque en la interacción entre el espectador y la obra refleja una conexión con movimientos de arte participativo. Además, su interés en la fusión de elementos naturales y digitales sugiere una influencia de la estética del surrealismo y el futurismo.

Actividad 04

Exploración de código generativo

Enunciado:

Explora dos ejemplos de código generativo utilizando p5.js (u otra biblioteca similar si tienes experiencia previa). Puedes buscar ejemplos en la web o en plataformas como OpenProcessing. Para cada ejemplo:

  • Descripción del código: describe brevemente la funcionalidad del código y los elementos generativos que utiliza (formas, colores, movimiento, etc.).

  • Modificación del código: realiza al menos dos modificaciones al código original, experimentando con diferentes parámetros y observando los cambios en el resultado visual. Documenta cada modificación y su efecto.

  • Reflexión: ¿Qué has aprendido sobre el código generativo a través de esta exploración?

Entrega: textos que den respuestas a las cuestiones planteadas en el enunciado y el código original y con las modificaciones.

🚀 Tu solución:

Actividad 4

  1. ejemplo

Tome el siguiente ejemplo de la pagina de openprocessing:

https://openprocessing.org/sketch/880007

Descripcion: el proyecto se trata de un canva negro en el cual aprecen particular circulares por donde se mueva el cursor del mouse, entre mas rapido se mueva aumentan el tamaño de las particulas y la cantidad, como reflejando fuegos artificiales:

image

Modificacion: realice una modificacion en la mezcla de colores para que tuviera un efecto mas suave y se puedan apreciar mejor los distintos colores y el otro cambio fue en el tamaño de las particulas para que tenga mas variabilidad y duracion.

image

var MAX_PARTICLES = 1700;
var COLORS = ['#31CFAD', '#ADDF8C', '#FF6500', '#FF0063', '#520042', '#DAF7A6'];


// ARRAYS
var particles = [];
var pool = [];


// VARIABLES
var wander1 = 0.5;
var wander2 = 2.0;
var drag1 = 0.9;
var drag2 = 0.99;
var force1 = 2;
var force2 = 8;
var theta1 = -0.5;
var theta2 = 0.5;
var size1 = 80;  // Modificado (Antes 100)
var size2 = 250; // Modificado (Antes 180)
var sizeScalar = 0.98; // Modificado (Antes 0.95)


// ----------------------------------------
// Particle Functions
// ----------------------------------------


function Particle(x, y, size) {
    this.alive = true;
    this.size = size || 10;
    this.wander = 0.15;
    this.theta = random(TWO_PI);
    this.drag = 0.92;
    this.color = '#fff';
    this.location = createVector(x || 0.0, y || 0.0);
    this.velocity = createVector(0.0, 0.0);
}


Particle.prototype.move = function () {
    this.location.add(this.velocity);
    this.velocity.mult(this.drag);
    this.theta += random(theta1, theta2) * this.wander;
    this.velocity.x += sin(this.theta) * 0.1;
    this.velocity.y += cos(this.theta) * 0.1;
    this.size *= sizeScalar;
    this.alive = this.size > 1.0;
};


Particle.prototype.show = function () {
    fill(this.color);
    noStroke();
    ellipse(this.location.x, this.location.y, this.size, this.size);
};


function spawn(x, y) {
    var particle, theta, force;
    if (particles.length >= MAX_PARTICLES) {
        pool.push(particles.shift());
    }
    particle = new Particle(mouseX, mouseY, map(noise(frameCount * 0.001, mouseX * 0.01, mouseY * 0.01), 0, 1, size1, size2));
    particle.wander = random(wander1, wander2);
    particle.color = random(COLORS);
    particle.drag = random(drag1, drag2);
    theta = random(TWO_PI);
    force = random(force1, force2);
    particle.velocity.x = sin(theta) * force;
    particle.velocity.y = cos(theta) * force;
    particles.push(particle);
}


function update() {
    var i, particle;
    for (i = particles.length - 1; i >= 0; i--) {
        particle = particles[i];
        if (particle.alive) {
            particle.move();
        } else {
            pool.push(particles.splice(i, 1)[0]);
        }
    }
}


function moved() {
    var particle, max, i;
    max = random(1, 4);
    for (i = 0; i < max; i++) {
        spawn(mouseX, mouseY);
    }
}


// ----------------------------------------
// Runtime
// ----------------------------------------


function setup() {
    createCanvas(windowWidth, windowHeight);
    cursor("none");
    background(0);
}


function draw() {
    update();
    drawingContext.globalCompositeOperation = 'normal';
    background(0, 32);
    drawingContext.globalCompositeOperation = 'screen'; // Modificado (Antes 'lighter')


    for (var i = particles.length - 1; i >= 0; i--) {
        particles[i].show();
    }
}


function mouseMoved() {
    moved();
}


function touchMoved() {
    moved();
}

Refelxion: Del codigo aprendi a usar funciones basicas para diseño generativo para el manejo de los tamaños de particulas y los colores

  1. Ejemplo:

https://openprocessing.org/sketch/2516551

Descripcion: este proyecto se trata de particulas que tienen una direccion constante formando una obra de colores con fondo negro, cada vez que se presiona el click del mouse aparecen nuevas particulas pero con distintos colores, sin embargo siempre van hacia la misma direccion

image

Modificaciones: con este proyecto opte por modificar la direccion de las particulas y los colores de tal forma que se ve asi:

image

let particles1 = []; // Arreglo de partículas
let num = 10000; // Número de partículas
let directionMultiplier = 1; // Controla la dirección de las partículas


function setup() {
    createCanvas((4 / 3) * windowHeight, windowHeight);
    background(0);


    for (let i = 0; i < num; i++) {
        particles1.push(createVector(random(width), random(height))); // Posición inicial aleatoria
    }
}


function draw() {
    colorMode(HSB);
    blendMode(ADD);
    stroke((frameCount * 0.5) % 255, 255, 255, 50); // Cambio de color gradual y opacidad reducida


    for (let i = 0; i < num; i++) {
        let p = particles1[i];
        point(p.x, p.y);


        // Movimiento modificado con dirección variable según el clic
        p.x += directionMultiplier * (noise(p.x / 100, p.y / 100, frameCount * 0.001) - 0.5) * 40;
        p.y += directionMultiplier * (noise(p.x / 100, p.y / 100, frameCount * 0.001) - 0.5) * 20;
    }
}


// Al hacer clic, cambia la dirección de las partículas
function mousePressed() {
    directionMultiplier *= -1; // Invierte la dirección de movimiento


    for (let i = 0; i < num; i++) {
        let p = particles1[i];
        point(p.x, p.y);


        // Cambia la posición bruscamente para dar un efecto de explosión o remolino
        p.x += directionMultiplier * (noise(p.x / 100, p.y / 100, 30000) - 0.2) * 200;
        p.y += directionMultiplier * (noise(p.x / 100, p.y / 100, 30000) - 0.3) * 3;
    }
}


// Guarda la imagen al presionar una tecla
function keyPressed() {
    save("img_" + month() + '-' + day() + '_' + hour() + '-' + minute() + '-' + second() + ".jpg");
}

Reflexion: de este proyecto pude reflexionar de lo importante que es variar la direccion de las particular para que se sienta aun mas interactivo y tenga un resultado mejor.

Actividad 05

Generación de patrones visuales

Enunciado:

Ingresa al sitio alemán Generative Design.Experimenta con tres ejemplos. Para cada ejemplo:

  • Descripción: describe qué hace y qué parámetros se utilizan para la generación.
  • Variaciones: crea al menos dos variaciones, modificando sus parámetros.
  • Aplicación potencial: describe una posible aplicación de cada ejemplo en el contexto del entretenimiento digital.

Entrega: para cada ejemplo describe cómo funciona, cuáles son los parámetros y muestra el código y una captura de pantalla, gif animado o un video corto con tus variaciones.

🚀 Tu solución:

Actividad 5

Proyecto 1:

Utilice el siguiente proyecto de generative design:

http://www.generative-gestaltung.de/2/sketches/?01_P/P_2_0_03

Descripcion: en este proyecto podemos crear poligonos de distntas figuras geometricas cada vez que damos un click, sin embargo estos poligonos siempre salen de forma centrada y del mismo color, por lo tanto estas son las variaciones que le quiero implementar

El codigo queda asi con los cambios implementados:

'use strict';


var strokeColor;
var mode = 1; // Modo 1: Polígonos en el centro Modo 2: Polígonos en la posición del mouse


function setup() {
  createCanvas(720, 720);
  colorMode(HSB, 360, 100, 100, 100);
  noFill();
  strokeWeight(2);
}


function draw() {
  if (mouseIsPressed && mouseButton == LEFT) {
    push();




    if (mode === 1) {
      translate(width / 2, height / 2);
    } else {
      translate(mouseX, mouseY);
    }




    var circleResolution = int(map(mouseY, 0, height, 3, 20));
    var radius = mode === 1 ? abs(mouseX - width / 2) : abs(mouseX - pmouseX) * 2;
    var angle = TAU / circleResolution;


    // Color
    strokeColor = color(map(mouseX, 0, width, 0, 360), 100, 100, 50);
    stroke(strokeColor);




    if (mode === 2) {
      strokeWeight(map(mouseX, 0, width, 1, 5));
    }




    beginShape();
    for (var i = 0; i <= circleResolution; i++) {
      var x = cos(angle * i) * radius;
      var y = sin(angle * i) * radius;
      vertex(x, y);
    }
    endShape();


    pop();
  }
}


function keyReleased() {
  if (keyCode == DELETE || keyCode == BACKSPACE) background(0, 0, 100);
  if (key == 's' || key == 'S') saveCanvas('polygon_art', 'png');
  if (key == '1') strokeColor = color(0, 10);
  if (key == '2') strokeColor = color(192, 100, 64, 10);
  if (key == '3') strokeColor = color(52, 100, 71, 10);
  if (key == 'm' || key == 'M') mode = mode === 1 ? 2 : 1; // Cambia entre los dos modos
}

Aplicacion potencial:

Este proyecto se puede utilzar para una gran catidad de proyectos distintos, tomando la idea de los poligonos se pueden crear un sin fin de figuras al momento de presionar un click o yendonos mas alla se puede implementar para sensores de movimientos y dibujar al aire libre con la mano para volverlo mas inmersivo.

Proyecto 2:

Este fue el proyecto que tome:

http://www.generative-gestaltung.de/2/sketches/?01_P/P_1_1_2_01

Se trata sobre un circulo formado a partir de segmentos de triangulos que tiene dos funciones, la primera es que dependiendo de la ubicacion del mouse se cambia de color y la segunda es que presionando del 1 al 5 se cambia el numero de segmentos de triangulos, lo variacion que hice fue cambiar el tamaño de cada semento de triangulos y asi formar otra figura, el codigo es:

'use strict';


var segmentCount = 360;
var radius = 300;


function setup() {
  createCanvas(800, 800);
  noStroke();
}


function draw() {
  colorMode(HSB, 360, width, height);
  background(360, 0, height);


  var angleStep = 360 / segmentCount;


  beginShape(TRIANGLE_FAN);
  vertex(width / 10, height / 50);


  for (var angle = 0; angle <= 360; angle += angleStep) {
    var vx = width / 2 + cos(radians(angle)) * radius;
    var vy = height / 2 + sin(radians(angle)) * radius;
    vertex(vx, vy);
    fill(angle, mouseX, mouseY);
  }


  endShape();
}


function keyPressed() {
  if (key == 's' || key == 'S') saveCanvas(gd.timestamp(), 'png');


  switch (key) {
  case '1':
    segmentCount = 360;
    break;
  case '2':
    segmentCount = 45;
    break;
  case '3':
    segmentCount = 24;
    break;
  case '4':
    segmentCount = 12;
    break;
  case '5':
    segmentCount = 6;
    break;
  }
}

Aplicacion potencial:

En el area del entretenimientos se puede utilizar la funcion de modos del proyecto al igual que la forma de recrear algo por segmentos, estas dos funciones permiten la creaciones de muchas experiencias, por ejemplo, con los modos se le puede dar a escoger al usuario el modo que mas prefiera para que asi sienta unico o propio el resultado.

Proyecto 3:

Utilice el siguiente proyecto:

http://www.generative-gestaltung.de/2/sketches/?01_P/P_2_1_2_03

Este proyecto tiene un funcionamiento sencillo, cuenta con un canvas estatico que cambia de posicion y tamaño mediante se mueva el mouse, lo que hice fue cambiar el color del canvas para que se vea un poco mas dinamico:

'use strict';


var tileCount = 20;


var moduleColor;
var moduleAlpha = 180;
var maxDistance = 500;


function setup() {
  createCanvas(600, 600);
  noFill();
  strokeWeight(3);
  moduleColor = color(50, 100, 0, moduleAlpha);
}


function draw() {
  clear();


  stroke(moduleColor);


  for (var gridY = 0; gridY < width; gridY += 25) {
    for (var gridX = 0; gridX < height; gridX += 25) {
      var diameter = dist(mouseX, mouseY, gridX, gridY);
      diameter = diameter / maxDistance * 40;
      push();
      translate(gridX, gridY, diameter * 5);
      rect(0, 0, diameter, diameter); // also nice: ellipse(...)
      pop();
    }
  }
}


function keyReleased() {
  if (key == 's' || key == 'S') saveCanvas(gd.timestamp(), 'png');
}

Este proyecto me intereso porque de algo sencillo como un canvas duplicado y el cursos del mouse se pueden crear proyectos dinamicos donde el usuario sienta que tiene el control de el.

Actividad 06

Análisis de herramientas generativas

Enunciado:

Investiga tres herramientas de software utilizadas en el diseño y arte generativo (por ejemplo q5.js, cables.gl, Three.js). Para cada herramienta:

  • Descripción: describe las características principales de la herramienta y sus funcionalidades.
  • Tipo de contenido: indica el tipo de contenido que se puede generar con la herramienta (imágenes, sonidos, animaciones, etc.).
  • Aplicaciones: describe posibles aplicaciones de la herramienta en el contexto del entretenimiento digital.

Entrega: un texto con los items solicitados para cada herramienta.

🚀 Tu solución:

Actividad 6

  1. Processing - https://processing.org/

Lenguaje de programación simplificado: Processing se basa en Java, pero tiene una sintaxis simplificada que facilita su uso para quienes no tienen experiencia en programación.

Enfoque visual: Específicamente orientado a la creación de gráficos, animaciones y visualizaciones interactivas, lo que lo convierte en una excelente herramienta para proyectos artísticos y educativos.

Bibliotecas gráficas integradas: Proporciona una gran cantidad de bibliotecas y funciones listas para usar, como createCanvas(), background(), stroke(), entre otras, que permiten trabajar fácilmente con imágenes, formas, color y movimiento.

Interactividad: Processing permite crear obras interactivas que responden a eventos como clics del mouse, teclas del teclado o entradas externas (como sensores y dispositivos interactivos).

Animación: Es posible crear animaciones mediante la actualización de gráficos en cada fotograma usando la función draw(), lo que permite crear movimientos fluidos y dinámicos.

Extensibilidad: Aunque Processing se enfoca principalmente en gráficos 2D, también soporta gráficos 3D a través de bibliotecas adicionales como P3D, lo que permite crear representaciones tridimensionales y animaciones complejas.

Exportación: Los proyectos pueden exportarse como aplicaciones independientes, imágenes, videos o incluso código HTML5 para ejecutar proyectos interactivos en navegadores.

Tipos de contenido que se pueden generar con Processing:

Imágenes:

Gráficos estáticos: Creación de imágenes con líneas, formas, colores, patrones y texturas. Puedes generar composiciones visuales a partir de figuras geométricas, imágenes importadas o generadas desde cero.

Exportación de imágenes: Los proyectos pueden exportarse como imágenes (por ejemplo, PNG, JPG) mediante la función save().

Animaciones:

Animaciones 2D: Al utilizar la función draw() en Processing, puedes crear animaciones donde los elementos visuales cambian con el tiempo, como el movimiento de objetos, efectos visuales o transformación de colores.

Animaciones 3D: Aunque está más centrado en gráficos 2D, también permite la creación de animaciones 3D mediante el uso de la biblioteca P3D.

Sonido:

Sonidos interactivos: Con la ayuda de bibliotecas adicionales como Minim, Processing puede generar y manipular sonidos en tiempo real, permitiendo crear proyectos audiovisuales interactivos donde el sonido reacciona a las acciones del usuario.

Visualización musical: Se pueden crear visualizaciones interactivas o generativas basadas en la música y el sonido, como gráficos que responden a la música en tiempo real.

Interactividad:

Interfaces interactivas: Processing permite crear contenido que responde a las interacciones del usuario, como el movimiento del mouse o teclas presionadas. Esto es útil para proyectos que requieran que el espectador interactúe con la obra de arte. Visualizaciones de datos:

Gráficos y diagramas: Con Processing, es posible generar gráficos e infografías interactivas que muestran y visualizan datos de manera visual y comprensible. Contenido web:

Proyectos web interactivos: Los proyectos creados con Processing pueden ser exportados a JavaScript (a través de la biblioteca p5.js), permitiendo ejecutar las creaciones en un navegador web.

Videojuegos experimentales e interactivos:

Proyectos de arte interactivo: Processing permite crear videojuegos simples pero innovadores, especialmente aquellos con un enfoque artístico o experimental. Los desarrolladores pueden usar Processing para explorar nuevos conceptos de interacción visual, generando juegos donde la estética y la interactividad sean las protagonistas.

Juegos basados en generadores procedimentales: Gracias a su capacidad para generar gráficos y animaciones dinámicamente, Processing puede ser utilizado para crear mundos o niveles generados aleatoriamente, lo que agrega rejugabilidad y experiencias únicas a cada partida.

Instalaciones artísticas y performances en vivo:

Arte generativo en tiempo real: En exposiciones de arte digital o instalaciones interactivas, los artistas pueden usar Processing para crear visualizaciones en tiempo real que respondan a las interacciones del público. Por ejemplo, las instalaciones podrían cambiar según el movimiento de los espectadores o las acciones de una cámara.

Proyecciones y performances audiovisuales: En espectáculos en vivo, Processing se puede utilizar para generar efectos visuales sincronizados con música o sonido, creando una experiencia inmersiva para el público. Los artistas pueden programar la visualización de patrones y animaciones que responden en tiempo real al audio o a otros estímulos.

Visualizaciones musicales:

Visualización de conciertos: Processing es ideal para crear representaciones visuales que acompañen las actuaciones musicales en conciertos o eventos en vivo. Las animaciones generadas pueden responder al ritmo, frecuencia y amplitud de la música, creando efectos visuales que complementen la experiencia auditiva.

Visualizadores de música interactivos: En plataformas digitales, Processing puede ser usado para crear visualizadores de música que permitan a los usuarios explorar gráficos interactivos mientras escuchan sus canciones favoritas. Estos visualizadores pueden incluir efectos visuales generados en tiempo real, que se modifican con base en la música.

Prototipado de interfaces gráficas:

Interfaces de usuario (UI) para videojuegos: Processing puede ser utilizado para prototipar interfaces gráficas de juegos, como menús interactivos o HUDs (Heads-Up Display), permitiendo a los diseñadores crear visualizaciones y elementos interactivos de manera rápida.

Diseño de experiencias de usuario: Se puede usar Processing para crear experiencias interactivas de usuario en juegos y aplicaciones digitales, donde los elementos visuales y la interactividad juegan un papel importante en la experiencia del jugador o usuario.

Simulaciones y efectos visuales:

Simulaciones de física y entornos virtuales: Processing puede ser utilizado para crear simulaciones visuales que muestren fenómenos físicos, como la simulación de fluidos, partículas o campos gravitatorios. Estas simulaciones pueden ser utilizadas en proyectos de entretenimiento digital, como juegos o experiencias educativas interactivas.

Efectos especiales para películas y videojuegos: Los efectos visuales generados con Processing pueden ser empleados en la creación de secuencias de acción o escenas específicas dentro de videojuegos o producciones cinematográficas.

Creación de contenidos interactivos en plataformas web:

Experiencias interactivas en línea: Processing permite exportar proyectos a JavaScript, lo que facilita la creación de experiencias interactivas en navegadores web. Esto se puede utilizar para diseñar juegos, animaciones o proyectos visuales interactivos que los usuarios pueden experimentar directamente en la web.

  1. Touchdesigner - https://derivative.ca/

Entorno de desarrollo basado en nodos:

TouchDesigner utiliza un sistema de nodos, donde cada nodo realiza una tarea específica (como un filtro, generador de gráficos, controlador de entrada, etc.). Los nodos se conectan entre sí para crear una cadena de procesamiento visual, lo que permite a los usuarios diseñar proyectos de manera intuitiva y sin necesidad de escribir código.

Este enfoque visual es ideal para artistas, diseñadores y técnicos que no necesariamente tienen experiencia en programación.

Generación y manipulación de gráficos en tiempo real:

TouchDesigner permite generar gráficos 2D y 3D en tiempo real. Los usuarios pueden crear, manipular y animar imágenes, texturas, luces y modelos 3D, todo mientras interactúan con el contenido. Es posible crear visualizaciones de datos, efectos visuales, y generar patrones y composiciones visuales dinámicas que se actualizan instantáneamente en respuesta a eventos o interacciones.

Interactividad:

TouchDesigner está diseñado para trabajar con entradas interactivas, como la respuesta a datos de sensores, movimientos de cámara, dispositivos de entrada (como el mouse o el teclado) o incluso interacciones táctiles. Esta capacidad lo convierte en una herramienta excelente para crear instalaciones donde el público puede influir en el comportamiento del contenido visual.

Integración de audio:

Aunque TouchDesigner es principalmente visual, también soporta audio en tiempo real. Los usuarios pueden sincronizar audio con los gráficos generados, lo que es esencial para la creación de experiencias audiovisuales completas. Se pueden generar visualizaciones musicales y efectos visuales sincronizados con la música o el sonido, lo que es ideal para conciertos, performances y proyectos multimedia.

Tipo de contenido

Imágenes:

Gráficos estáticos: Aunque TouchDesigner es principalmente para contenido en tiempo real, también puedes generar imágenes estáticas (por ejemplo, a través de composiciones visuales) que pueden ser exportadas como archivos de imagen.

Texturas: Es posible crear y manipular texturas visuales que luego pueden aplicarse a modelos 3D o ser usadas en composiciones 2D.

Animaciones:

Animaciones 2D y 3D: TouchDesigner permite la creación de animaciones en tiempo real, tanto en 2D como en 3D. Las animaciones pueden incluir movimientos de objetos, transformaciones de formas, y efectos visuales generados dinámicamente.

Efectos visuales: Se pueden generar animaciones complejas como partículas, deformaciones, distorsiones de imagen, y transiciones visuales, que son fundamentales en la creación de experiencias audiovisuales interactivas.

Sonidos:

Generación de sonido en tiempo real: Con TouchDesigner, es posible generar sonidos y efectos sonoros interactivos que reaccionan en tiempo real a las interacciones del usuario o a la manipulación de gráficos.

Visualización de audio: TouchDesigner puede sincronizar visualizaciones generadas con el audio, creando efectos gráficos que responden a las frecuencias, ritmos y amplitudes del sonido. Manejo de audio: Puedes cargar y manipular archivos de audio, crear efectos sonoros y ajustar parámetros en tiempo real (como filtros o envolventes).

Actividad 07

Investigación de técnicas generativas

Enunciado:

Investiga tres técnicas o algoritmos utilizados en la generación de contenido (por ejemplo, autómatas celulares, L-systems, ruido Perlin. Pero no tiene que ser estas, pueden ser algoritmos más simples). Para cada técnica:

  • Descripción: describe el funcionamiento de la técnica y sus principios básicos.
  • Ejemplos: busca ejemplos visuales o sonoros que ilustren la aplicación de la técnica.
  • Potencial: describe el potencial de la técnica para la creación de experiencias interactivas.

Recursos:

Puedes ver algunos ejemplos interesantes en el sitio web del libro The nature of code

Entrega: la documentación solicitada en el enunciado para cada técnica.

🚀 Tu solución:

Actividad 7

  1. Simulación de Sistemas de Partículas

Descripción:

Un sistema de partículas es un conjunto de elementos individuales (partículas) que siguen reglas de movimiento y comportamiento, como gravedad, fricción o repulsión. Se pueden usar para simular fenómenos naturales como humo, fuego, explosiones y fluidos.

Cada partícula tiene propiedades como posición, velocidad y vida útil. Con el tiempo, las partículas pueden desaparecer o cambiar de comportamiento, lo que permite crear efectos dinámicos y orgánicos.

Ejemplos:

Efectos visuales en videojuegos: Fuego, explosiones, agua y partículas de polvo en motores como Unity o Unreal Engine.

Simulación de multitudes: Se usa para modelar el movimiento de grupos de personas o enjambres de insectos.

Arte generativo: Sistemas de partículas pueden crear imágenes abstractas y visualizaciones interactivas.

un ejemplo visual seria este:

https://p5js.org/es/examples/math-and-physics-smoke-particle-system/

Potencial para experiencias interactivas:

Simulación realista: Se pueden modelar explosiones, agua, viento y otros fenómenos físicos en videojuegos y animaciones.

Interactividad en arte digital: Los usuarios pueden manipular partículas con el mouse, sonido o movimiento.

Visualización de datos: Puede utilizarse para representar información de manera visualmente atractiva.

  1. Sistemas Basados en Turtle Graphics

Descripción:

Es una técnica de programación gráfica donde una “tortuga” virtual se mueve en un espacio siguiendo comandos simples (avanzar, girar, cambiar de color). Se usa para generar fractales, patrones geométricos y arte procedural.

Ejemplos:

Fractales y patrones geométricos: Se pueden generar formas como la curva de Koch o el Árbol de Pitágoras.

Dibujo generativo en arte digital: Artistas usan código para crear ilustraciones dinámicas.

Educación en programación: Es una de las primeras herramientas utilizadas para enseñar lógica de programación (ejemplo: Logo).

Ejemplo visual: https://editor.p5js.org/mberry/sketches/XE-TOpv2

Potencial para experiencias interactivas:

Educación interactiva: Enseñar a programar con visualizaciones en tiempo real.

Arte colaborativo: Varias personas pueden modificar los parámetros en una aplicación para influir en la generación del dibujo.

Diseño generativo: Puede utilizarse en interfaces creativas para generar diseños únicos con cada interacción.

  1. Algoritmos de Voronoi

Descripción:

Los diagramas de Voronoi dividen un espacio en regiones basadas en la distancia a un conjunto de puntos semilla. Cada celda de Voronoi contiene todos los puntos más cercanos a su semilla respectiva. Esto genera patrones orgánicos y naturales que se usan en simulaciones, generación de terrenos y efectos visuales.

Ejemplos:

Arte generativo: Se usa para crear patrones geométricos en ilustraciones digitales.

Mapas de terrenos: En videojuegos, los Voronoi ayudan a generar biomas y paisajes irregulares.

Simulación de crecimiento celular: Se usa en biología computacional para modelar estructuras celulares.

Ejemplo visual:

Los mapas de “Minecraft” usan estructuras similares a Voronoi en la generación de biomas.

Los juegos de estrategia (ej. “Civilization”) utilizan celdas de Voronoi para dividir territorios.

https://asignatura.us.es/fgcitig/contenidos/gctem3ma.htm

Potencial para experiencias interactivas:

Generación procedural: Creación de mundos de juego dinámicos con regiones únicas.

Interacción en tiempo real: Un usuario podría modificar las semillas para alterar el entorno.

Arte interactivo: Adaptar patrones Voronoi para responder a sonidos o movimiento del usuario

Actividad 08

Análisis de casos de estudio

Enunciado: investiga dos casos de estudio de proyectos de entretenimiento digital que utilicen diseño generativo. Para cada caso:

  • Descripción del proyecto: describe el proyecto, su objetivo y su público objetivo.
  • Técnicas generativas: identifica las técnicas generativas utilizadas en el proyecto.
  • Análisis crítico: analiza los aspectos exitosos y las posibles limitaciones del proyecto en términos de su diseño generativo.

Recursos:

  • Puedes analizar el menú de casos de estudio del sitio web de Patrik Hübner.
  • Sección de recursos del curso de simulación.

Entrega: los items solicitados en el enunciado para cada caso de estudio.

🚀 Tu solución:

Actividad 8

  1. Symphony Experiencia Inmersiva de Realidad Virtual - https://fundacionlacaixa.org/es/symphony-musica-realidad-virtual

Descripción del Proyecto:

Symphony es una experiencia inmersiva impulsada por la Fundación “la Caixa” y dirigida por el reconocido director de orquesta Gustavo Dudamel. Este proyecto ofrece a los espectadores un viaje virtual al corazón de una orquesta sinfónica, permitiéndoles experimentar la música clásica desde una perspectiva completamente nueva. La experiencia se desarrolla en dos fases: una proyección panorámica seguida de una inmersión en realidad virtual, donde los usuarios pueden sentarse entre los músicos mientras interpretan obras de compositores como Beethoven y Mahler. El público objetivo incluye tanto a amantes de la música clásica como a personas que buscan experiencias culturales innovadoras.

Técnicas Generativas:

El proyecto utiliza técnicas de realidad virtual y captura de movimiento para crear una representación tridimensional de la orquesta y sus músicos. Aunque no se detalla explícitamente el uso de algoritmos generativos en la creación de los entornos visuales, la combinación de tecnología avanzada y arte sugiere la aplicación de métodos generativos para sincronizar la música con las visualizaciones inmersivas.

Análisis Crítico:

Aspectos Exitosos:

Inmersión Total: La combinación de audio de alta fidelidad con visuales en 360 grados ofrece una experiencia profundamente envolvente.

Accesibilidad Cultural: Acerca la música clásica a audiencias más amplias, incluyendo a aquellos que pueden no tener acceso regular a conciertos en vivo.

Innovación Tecnológica: Demuestra cómo la tecnología puede enriquecer las experiencias culturales tradicionales.

Posibles Limitaciones:

Dependencia Tecnológica: Requiere equipos de realidad virtual, lo que puede limitar su accesibilidad para algunas personas.

Interactividad Limitada: Aunque es inmersiva, la experiencia puede ser más pasiva que interactiva, ya que los usuarios siguen una narrativa predefinida sin posibilidad de influir en el desarrollo de la misma.

  1. Novelingo Videojuegos Educativos - https://www.novelingo.com/

Descripción del Proyecto:

Novelingo es una empresa malagueña fundada en 2023 que fusiona la creación de videojuegos con el desarrollo de programas de aprendizaje electrónico. Su objetivo es hacer que el aprendizaje sea más atractivo mediante la gamificación y la narrativa interactiva. Entre sus proyectos destacados se encuentran los videojuegos “La búsqueda” y “Flamenco!”, que educan a los jugadores mientras los entretienen. El público objetivo incluye a estudiantes y profesionales que buscan métodos de aprendizaje más dinámicos y efectivos.

Técnicas Generativas: Novelingo emplea técnicas de diseño generativo para crear narrativas interactivas que se adaptan a las decisiones del jugador, ofreciendo múltiples rutas y desenlaces. Además, utilizan algoritmos para generar contenido educativo personalizado, adaptándose al progreso y necesidades de cada usuario.

Análisis Crítico:

Aspectos Exitosos:

Aprendizaje Personalizado: La generación de contenido adaptativo permite a los usuarios aprender a su propio ritmo y según sus intereses.

Engagement Elevado: La integración de elementos de juego y narrativas dinámicas mantiene a los usuarios motivados y comprometidos.

Escalabilidad: Las técnicas generativas facilitan la creación de nuevos contenidos y cursos sin requerir un desarrollo manual exhaustivo.

Posibles Limitaciones:

Complejidad en el Desarrollo: Diseñar sistemas generativos que sean tanto educativos como entretenidos puede ser un desafío significativo.

Equilibrio entre Educación y Entretenimiento: Es crucial asegurar que los elementos de juego no distraigan de los objetivos educativos, manteniendo un equilibrio adecuado entre diversión y aprendizaje.

Aplicación

Ahora vas a aplicar los conocimientos adquiridos en las fases SET y SEEK para experimentar con la creación de prototipos generativos sencillos. Esta fase te permitirá poner en práctica las técnicas y herramientas investigadas, desarrollando habilidades prácticas en diseño generativo.

En esta fase, te pondrás manos a la obra para experimentar con la creación de tus propios diseños generativos. Utilizando las herramientas y técnicas que has investigado, desarrollarás prototipos sencillos que te permitan explorar las posibilidades del diseño generativo en un contexto práctico.

Actividad 09

Generación de formas geométricas aleatorias

Enunciado: utilizando p5.js, crea un programa que genere formas geométricas (círculos, cuadrados, triángulos) con posición, tamaño y color aleatorios. Experimenta con diferentes funciones de p5.js para controlar la aleatoriedad y la apariencia de las formas.

Entrega: el programa y una captura de pantalla con el resultado.

🚀 Tu solución:

Actividad 9

En este programa se maneja:

random() para elegir la posición, el tamaño y el tipo de forma aleatoriamente.

Uso de noise() (Perlin Noise) para generar colores más armónicos en lugar de cambios abruptos.

noLoop() y redraw() permiten generar una composición nueva cada vez que el usuario hace clic en la pantalla.

function setup() {
  createCanvas(windowWidth, windowHeight);
  noLoop(); // Se ejecuta una vez para generar una composición única
}


function draw() {
  background(20);
  let numShapes = 80; // Número de formas a generar


  for (let i = 0; i < numShapes; i++) {
    let x = random(width);
    let y = random(height);
    let size = random(30, 100);
    let shapeType = floor(random(3)); // 0: círculo, 1: cuadrado, 2: triángulo


    let r = noise(x * 0.01, y * 0.01) * 255;
    let g = noise(x * 0.02, y * 0.02) * 255;
    let b = noise(x * 0.03, y * 0.03) * 255;


    fill(r, g, b, 150);
    noStroke();


    if (shapeType === 0) {
      ellipse(x, y, size, size);
    } else if (shapeType === 1) {
      rect(x, y, size, size);
    } else {
      let x1 = x, y1 = y - size / 2;
      let x2 = x - size / 2, y2 = y + size / 2;
      let x3 = x + size / 2, y3 = y + size / 2;
      triangle(x1, y1, x2, y2, x3, y3);
    }
  }
}


function mousePressed() {
  redraw(); // Redibujar cuando se haga clic en la pantalla
}

image

image

Actividad 10

Creación de un patrón generativo simple

Enunciado: vuelve al sitio Generative Design. Selecciona un ejemplo. trata de recrear el ejemplo usando p5.js. PERO, no mires el código. Vas a utilizar una técnica poderosa para aprender llama Deconstruction/Reconstruction propuesta por el profesor Stig Møller Hansen

Entrega: el enlace al ejemplo a deconstruir y el código con tu reconstrucción.

🚀 Tu solución:

Actividad 10

ejemplo: http://www.generative-gestaltung.de/2/sketches/?01_P/P_2_1_2_01

Desconstrucción:

En lugar de usar líneas estáticas o con posiciones fijas, utilizamos un parámetro dinámico, el cual es el noise(i * 0.1), que varía la longitud de cada línea de forma suave y continua, emulando un patrón fluido y orgánico. La relación entre el ángulo y la distancia de las líneas genera un patrón radial.

Reconstrucción:

A partir de esos elementos, se dibujan las líneas con posiciones iniciales y finales que dependen del angle y distance, pero las líneas no siguen un patrón regular. Al recomponer las líneas a partir de parámetros modificados (como el noise() aplicado), se genera un diseño visualmente más complejo.

let numLines = 150;  // Número de líneas generadas
let angleStep = 0.05; // Paso de ángulo
let lengthFactor = 6; // Factor que afecta la longitud de las líneas


function setup() {
  createCanvas(windowWidth, windowHeight);
  noLoop(); // Solo generar el patrón una vez
  stroke(255, 100); // Color de las líneas en escala de grises con opacidad
  strokeWeight(1);
  background(0);
}


function draw() {
  let centerX = width / 2;
  let centerY = height / 2;


  for (let i = 0; i < numLines; i++) {
    // Desconstrucción: Ángulo y distancia aleatorios dentro de un patrón
    let angle = i * angleStep;
    let distance = lengthFactor * noise(i * 0.1) * width / 2;


    // Reconstrucción: Generar líneas basadas en los parámetros aleatorios
    let x1 = centerX + cos(angle) * distance;
    let y1 = centerY + sin(angle) * distance;
    let x2 = centerX - cos(angle) * distance;
    let y2 = centerY - sin(angle) * distance;


    line(x1, y1, x2, y2); // Dibujar la línea
  }
}


function mousePressed() {
  redraw(); // Vuelve a dibujar el patrón al hacer clic
}

Actividad 11

Generación de texto aleatorio

Enunciado: crea un programa en p5.js que genere texto aleatorio a partir de un conjunto de caracteres o palabras predefinidas. Experimenta con diferentes fuentes, tamaños y estilos de texto. Puedes intentar generar poemas o frases aleatorias.

Entrega: el código con tu experimento y una captura de pantalla con un resultado generado.

🚀 Tu solución:

Actividad 11

let words = [
  "luz", "sombra", "cielo", "noche", "sol",
  "mar", "viento", "estrella", "caminos", "sueños",
  "misterio", "hoja", "agua", "silencio", "universo"
];


let poem = [];


function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  noLoop(); // Solo generar el patrón una vez


  // Generar un poema aleatorio
  generatePoem();


  // Mostrar el poema
  textAlign(CENTER, CENTER);
  for (let i = 0; i < poem.length; i++) {
    let lineHeight = 40;
    let yPos = height / 2 + (i - poem.length / 2) * lineHeight;
    let size = random(20, 40);
    let style = random([ITALIC, BOLD, NORMAL]);


    textSize(size);
    textStyle(style); // Establecer el estilo
    fill(random(255), random(255), random(255)); // Colores aleatorios
    text(poem[i], width / 2, yPos);
  }
}


function generatePoem() {
  let numLines = floor(random(3, 6)); // Número de líneas aleatorias


  for (let i = 0; i < numLines; i++) {
    let lineLength = floor(random(4, 8)); // Número de palabras por línea
    let line = '';


    for (let j = 0; j < lineLength; j++) {
      let word = random(words); // Elegir palabra aleatoria del conjunto
      line += word + ' ';
    }


    poem.push(line.trim()); // Añadir la línea al poema
  }
}


function mousePressed() {
  poem = []; // Limpiar el poema
  generatePoem(); // Generar uno nuevo
  redraw(); // Redibujar el poema
}

image

image

Actividad 12

Manipulación de imágenes con código

Enunciado: utilizando p5.js, carga una imagen y experimenta con la manipulación de sus píxeles para crear efectos visuales generativos. Puedes probar a cambiar el color, la posición o la transparencia de los píxeles basándote en su posición o en valores aleatorios.

Entrega: el código y una captura de pantalla.

🚀 Tu solución:

Actividad 12

let img;


function preload() {
  img = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/800px-Google_Images_2015_logo.svg.png");
}


function setup() {
  createCanvas(img.width, img.height);
  noLoop(); // Solo aplicamos el efecto una vez
}


function draw() {
  background(0);
  img.loadPixels();


  for (let y = 0; y < img.height; y += 5) { // Espaciado para efectos más marcados
    for (let x = 0; x < img.width; x += 5) {
      let index = (x + y * img.width) * 4;


      // Obtener colores originales
      let r = img.pixels[index];
      let g = img.pixels[index + 1];
      let b = img.pixels[index + 2];
      let a = img.pixels[index + 3];


      // Efecto generativo: Cambiar colores y posiciones
      let newX = x + sin(y * 0.05) * 10; // Ondulación horizontal
      let newY = y + cos(x * 0.05) * 10; // Ondulación vertical


      // Manipular colores de manera aleatoria
      let newR = r * random(0.5, 1.5);
      let newG = g * random(0.5, 6.5);
      let newB = b * random(0.5, 1.5);
      let newA = a * random(0.5, 1.0);


      // Dibujar píxeles modificados como círculos
      fill(newR, newG, newB, newA);
      noStroke();
      ellipse(newX, newY, 50, 5);
    }
  }
}

image

image

Actividad 13

Sonido generativo básico

Enunciado: utilizando la biblioteca p5.sound (u otra que quieras probar), experimenta con la generación de sonidos básicos. Intenta crear diferentes tipos de ondas sonoras (senoidal, triangular, cuadrada) y modificar sus parámetros (frecuencia, amplitud) para generar diferentes tonos y timbres.

Entrega: el código y una captura de pantalla.

🚀 Tu solución:

Actividad 13

image

let osc; // Oscilador de sonido
let waveType = 'sine'; // Tipo de onda inicial
let freq = 440; // Frecuencia inicial en Hz
let amp = 0.5; // Amplitud inicial


function setup() {
  createCanvas(400, 200);
  textAlign(CENTER, CENTER);
  textSize(16);


  osc = new p5.Oscillator();
  osc.setType(waveType);
  osc.freq(freq);
  osc.amp(amp);
  osc.start();
}


function draw() {
  background(30);
  fill(255);
  text("Tipo de onda: " + waveType, width / 2, height / 3);
  text("Frecuencia: " + freq + " Hz", width / 2, height / 2);
  text("Amplitud: " + amp, width / 2, (height / 3) * 2);
  text("Presiona 1-4 para cambiar la onda", width / 2, height - 40);
  text("↑ ↓ para cambiar la frecuencia", width / 2, height - 20);
}


// Cambia parámetros con el teclado
function keyPressed() {
  if (key === '1') waveType = 'sine';      // Onda senoidal
  if (key === '2') waveType = 'triangle';  // Onda triangular
  if (key === '3') waveType = 'square';    // Onda cuadrada
  if (key === '4') waveType = 'sawtooth';  // Onda diente de sierra


  if (keyCode === UP_ARROW) freq += 20;    // Aumentar frecuencia
  if (keyCode === DOWN_ARROW) freq -= 20;  // Disminuir frecuencia


  osc.setType(waveType);
  osc.freq(freq);
}

Consolidación y metacognición

Vas a reflexionar sobre el proceso de aprendizaje, consolidar los conocimientos adquiridos y conectarlos con las unidades posteriores del curso. Esta fase te permitirá analizar sus propias experiencias, identificar áreas de mejora y desarrollar un pensamiento crítico sobre el diseño generativo.

Has llegado al final de la primera unidad. Es momento de reflexionar sobre lo aprendido, analizar tus propios trabajos y conectar estas experiencias con el resto del curso. Las siguientes actividades te ayudarán a consolidar tus conocimientos y a prepararte para los desafíos que te esperan en las próximas unidades.

Actividad 14

Análisis crítico de los prototipos

Enunciado: revisa los prototipos que creaste en la fase APPLY.

Para cada prototipo:

  • Descripción: describe brevemente el prototipo y su funcionalidad.
  • Análisis: analiza los aspectos que funcionaron bien y los que podrían mejorarse.
  • Aprendizaje: ¿Qué has aprendido al crear este prototipo? ¿Qué dificultades has encontrado?

Entrega: la documentación solicitada en el enunciado.

🚀 Tu solución:

Actividad 14

Generación de Texto Aleatorio

Descripción:

Este prototipo genera texto aleatorio utilizando un conjunto predefinido de palabras o caracteres. Se experimenta con diferentes fuentes, tamaños y estilos para generar frases o poemas únicos en cada ejecución.

Análisis:

Lo que funcionó bien: La aleatorización del texto permitió obtener combinaciones interesantes y únicas. La integración de diferentes tamaños y colores hizo que los resultados fueran visualmente llamativos.

Áreas de mejora: Se podría mejorar la estructuración del texto para que tenga más coherencia o implementar un sistema basado en gramática para que las frases sean más comprensibles.

Aprendizaje:

Aprendí cómo manejar texto en p5.js y cómo manipular fuentes y estilos.

Una dificultad fue evitar que los textos se superpusieran de manera desordenada.

Manipulación de Imágenes

Descripción:

Este prototipo carga una imagen y manipula sus píxeles para crear efectos generativos, como cambios de color, desplazamiento de píxeles o variaciones en la transparencia según la posición o valores aleatorios.

Análisis:

Lo que funcionó bien: La manipulación de píxeles permite generar efectos visuales llamativos y abstractos. El uso de loadPixels() y updatePixels() hace que los cambios sean dinámicos y flexibles.

Áreas de mejora: Dependiendo del tamaño de la imagen, el procesamiento puede ser lento. Se podrían usar técnicas de optimización, como la manipulación de bloques de píxeles en lugar de píxeles individuales.

Aprendizaje:

Aprendí a acceder y modificar los píxeles de una imagen en p5.js.

Una dificultad fue evitar artefactos visuales no deseados cuando los píxeles se movían demasiado rápido o de manera aleatoria.

Generación de Sonidos

Descripción:

Este prototipo usa la biblioteca p5.sound para generar diferentes tipos de ondas sonoras (senoidal, triangular, cuadrada, diente de sierra). Permite modificar la frecuencia en tiempo real y cambiar el tipo de onda con el teclado.

Análisis:

Lo que funcionó bien: La interacción en tiempo real permite una exploración intuitiva de los sonidos generados. El cambio de frecuencia y tipo de onda en vivo hace que la experiencia sea inmersiva.

Áreas de mejora: Se podrían agregar efectos de envolvente o filtros para hacer los sonidos más dinámicos y expresivos.

Aprendizaje:

Aprendí cómo generar sonido y modificar parámetros en p5.js.

Una dificultad fue la latencia en la respuesta del teclado al cambiar parámetros

Actividad 15

Conexión con el problema del curso

Enunciado:

  • Reflexiona sobre cómo los conceptos y técnicas aprendidas en esta unidad se relacionan con el problema del curso (el diseño de una experiencia interactiva generativa en tiempo real).

  • Aplicaciones potenciales: identifica al menos tres maneras en las que podrías aplicar el diseño generativo en la solución del problema del curso.

  • Herramientas y técnicas: ¿Qué herramientas y técnicas exploradas en esta unidad podrían serte útiles para el desarrollo de tu proyecto final? Justifica tu respuesta.

  • Limitaciones: ¿Qué limitaciones o desafíos prevés en la aplicación del diseño generativo al problema del curso?

Entrega: la documentación solicitada en el enunciado.

🚀 Tu solución:

Actividad 15

Reflexión sobre la relación entre los conceptos de la Unidad 1 y el problema del curso:

En esta primera unidad, aprendí sobre la importancia de los sistemas interactivos en tiempo real y cómo pueden generar experiencias dinámicas a partir de múltiples entradas y dispositivos. Esto se relaciona directamente con el problema del curso, ya que para diseñar una experiencia generativa en tiempo real es fundamental entender cómo manejar datos en vivo, comunicarse con hardware y procesar información de manera eficiente. Los conceptos de comunicación híbrida y programación multihilo me parecen claves para lograr experiencias fluidas y adaptativas.

Aplicaciones potenciales del diseño generativo en la solución del problema del curso:

Instalaciones artísticas interactivas: Se podrían crear visuales o sonidos generativos que respondan a la posición, movimiento o sonido de los participantes en un espacio físico.

Sistemas de visualización de datos en tiempo real: Se puede usar el diseño generativo para representar datos en vivo de una manera más intuitiva y estética, por ejemplo, mostrando patrones emergentes en tráfico de personas o redes sociales.

Experiencias de juego dinámicas: Generar contenido en videojuegos (como niveles, sonidos o enemigos) basados en las acciones del jugador y otros datos del entorno, haciendo que cada partida sea diferente.

Herramientas y técnicas útiles para el desarrollo del proyecto final:

p5.js y p5.sound: Son herramientas accesibles para probar rápidamente gráficos y sonidos generativos. p5.js me ha permitido experimentar con aleatoriedad y estructuras visuales en tiempo real.

Protocolos de comunicación inalámbrica: Aprender sobre comunicación entre dispositivos a través de Bluetooth o Wi-Fi me parece fundamental para integrar hardware externo en experiencias interactivas.

Programación multihilo y máquinas de estado: Estas técnicas ayudan a procesar múltiples interacciones sin afectar la fluidez del sistema. Me interesa aplicarlas para mejorar la eficiencia del proyecto final.

Limitaciones o desafios

Uno de los principales desafíos será garantizar que el sistema generativo funcione sin retrasos perceptibles. La generación en tiempo real puede ser costosa en términos de procesamiento, especialmente si se usan imágenes, sonidos o modelos complejos. Será necesario optimizar los algoritmos y considerar estrategias como la reducción de resolución o la precomputación de ciertos elementos.

Actividad 16

Autoevaluación del aprendizaje

Reflexiona sobre tu propio proceso de aprendizaje en esta unidad.

  • Logros: ¿Qué has aprendido en esta unidad? ¿Qué objetivos has alcanzado?

  • Dificultades: ¿Qué dificultades has encontrado? ¿Cómo las has superado?

  • Áreas de mejora: ¿Qué aspectos necesitas mejorar o profundizar?

Entrega: la documentación solicitada en el enunciado.

🚀 Tu solución:

Actividad 16

Logros:

En esta unidad he aprendido a utilizar diversas técnicas de diseño generativo aplicadas a la interacción en tiempo real. He experimentado con herramientas como p5.js y p5.sound para la generación de gráficos y sonidos, explorando cómo la aleatoriedad y los algoritmos pueden influir en la creación de contenido dinámico. Otro logro importante ha sido la exploración de conceptos como el ruido Perlin y otros métodos de manipulación de datos para generar efectos visuales y sonoros más orgánicos.

Dificultades:

tuve dificultades en el momento de usar bibliotecas externas en p5.js un ejemplo fue en el porototipo de texto el cual no consegui agregar tipografia

Áreas de mejora:

Para continuar mejorando, necesito profundizar en la integración de diseño generativo con otras tecnologías, como sensores físicos o inteligencia artificial, para crear experiencias más inmersivas y dinámicas.

Actividad 17

Planificación para la siguiente unidad

La siguiente unidad se centra en el marco de diseño para proyectos de diseño generativo. Con esto en mente:

  • Preguntas: formula al menos tres preguntas que te gustaría responder en la próxima unidad para avanzar en la comprensión del marco de diseño para proyectos generativos.

  • Recursos: identifica al menos dos recursos (libros, artículos, tutoriales) que te podrían ser útiles para la próxima unidad. Proporciona los enlaces o referencias a estos recursos.

  • Plan de acción: describe brevemente cómo piensas abordar la próxima unidad para aprovechar al máximo el tiempo y los recursos disponibles.

Entrega: la documentación solicitada en el enunciado.

🚀 Tu solución:

Actividad 17

3 preguntas:

¿Para generar un proyeto de diseño generativo es necesario partir desde un marco de diseño o se puede partir desde el arte o la creatividad?

¿Cuantas areas de accion y en cual de estas es en la que mas se destaca el diseño generativo?

¿Es necesario usar el diseño generativo para la realizacion de experiencias interactivas?

Recursos importantes:

Articulo: https://formlabs.com/latam/blog/diseno-generativo/

Articulo que me parece importante para responder a mi segunda pregunta: https://vision-digital.com.mx/2024/02/06/diseno-generativo-innovacion-y-desafios/

Plan de accion:

Teniendo en cuenta que la siguiente unidad contiene 16 actividades tengo como plan realizar 3 actividades cada sesion, contando que la unidad 2 tiene como duracion 2 semanas esto abarcaria 6 sesiones, con este plan tendria que realizar 1 actividad en la ultima sesion permitiendome un margen de error en caso tal no me de el tiempo de realizar las 3 actividades planeadas en alguna de las sesiones, en cuanto a los recursos, aprovechar los recursos que nos brinda el profesor en github y los articulos encontrados en internet, a su vez aprovechar las IA como chatgpt para comprender mejor y mas facil las cosas.