{"id":3914,"date":"2023-08-28T17:21:08","date_gmt":"2023-08-28T17:21:08","guid":{"rendered":"https:\/\/santiagoamayaquimbayo.com\/?p=3914"},"modified":"2024-10-17T17:20:12","modified_gmt":"2024-10-17T17:20:12","slug":"flyer-con-processing","status":"publish","type":"post","link":"https:\/\/santiagoamayaquimbayo.com\/?p=3914","title":{"rendered":"Flyer con processing"},"content":{"rendered":"

He tenido una fijaci\u00f3n con el lenguaje Processing<\/a> desde que mi amiga Martha Brinchi me presento el libro de Hartmut Bohnacker, Benedikt Gross, Julia Laub, y Claudius Lazzeroni<\/strong> llamado GENERATIVE DESIGN<\/mark>. Aqu\u00ed se muestran mil formas de aplicar este lenguaje de c\u00f3digo para generar texturas incre\u00edbles bas\u00e1ndose en formulas matem\u00e1ticas, sonido, o secuencias de lenguaje. Me parece fascinante que una secuencia de comandos o lenguaje de programaci\u00f3n pueda responder a una imagen que toca nuestra sensibilidad pict\u00f3rica, y aun mas cuando esto se complementa si esta imagen reacciona a una formula o un sonido.<\/p>\n\n

Para Usar el lenguaje Processing simplemente debes ir a la pagina processing.org, descargar el programa que all\u00ed se ofrece y comenzar a escribir el c\u00f3digo que desee.
En este caso, es mi placer mostrar el proceso de creaci\u00f3n de este flyer para el evento de CONOSOUND, Mixtape Sessions Vol.1 que fue creado con la ayuda de este lenguaje junto con la inteligencia artificial de ChatGPT.<\/p>\n\n

Paso 1<\/h5>\n\n

Importar a Processing una librer\u00eda Minim para interpretar un archivo de audio: Dir\u00edgete al men\u00fa “Sketch” en Processing, selecciona “Importar Bibliotecas” y luego busca e instala la biblioteca “Minim”.<\/p>\n\n

Paso 2<\/h5>\n\n

A\u00f1adir la pista de audio que quieres que se reproduzca junto con tu imagen y reaccione ante esta:<\/p><\/div>

minim = new Minim(this); player = minim.loadFile(\"\/Users\/ungalaxylovinyeah\/Documents\/Processing\/libraries\/minim\/src\/navex_2.mp3\"); player.play();<\/code><\/pre>
despues de esto ya le ped\u00ed a la inteligencia artificial que me ayudara a crear las formas que iban a reaccionar con la pista de audio, quer\u00eda llegar a una textura muy similar a lo que se present en el album de Joy Division, Unknown Pleasures donde se ven las ondas de audio como picos de monta\u00f1a seriada, ese era el objetivo.<\/p>\n\n
\"\"<\/figure><\/div>
muy contento por el resultado le ped\u00ed a la I.A. esto:<\/p>\n\n
\u00a1Genial! Ahora, usando ese par\u00e1metro de c\u00edrculos, agrega algo con respecto a un entrono que simule profundidad o un entorno 3d obscuro y misterioso, porqueel archivo “\/Users\/ungalaxylovinyeah\/Documents\/Processing\/libraries\/minim\/src\/navex_2.mp3” es m\u00fasica electr\u00f3nica, entonces quiero generar un ambiente obscuro de discoclub de Berl\u00edn, por favor.<\/p><\/blockquote>\n\n
me respondi\u00f3 asi:<\/p>\n\n
import ddf.minim.*;\nimport ddf.minim.analysis.*;\n\nMinim minim;\nAudioPlayer player;\nFFT fft;\n\nint numCircles = 50;\nCircle[] circles;\n\nvoid setup() {\n  size(800, 600, P3D);\n  background(0);\n  \n  minim = new Minim(this);\n  player = minim.loadFile(\"\/Users\/ungalaxylovinyeah\/Documents\/Processing\/libraries\/minim\/src\/navex_2.mp3\");\n  player.play();\n  \n  fft = new FFT(player.bufferSize(), player.sampleRate());\n  \n  circles = new Circle[numCircles];\n  for (int i = 0; i < numCircles; i++) {\n    circles[i] = new Circle(random(width), random(height), random(20, 100));\n  }\n}\n\nvoid draw() {\n  lights();\n  background(0);\n  \n  \/\/ Ambient light\n  ambientLight(50, 50, 50); \/\/ Colores en tonos grises\n  \n  \/\/ Point light\n  pointLight(255, 255, 255, width \/ 2, height \/ 2, 200);\n  \n  \/\/ Analiza el espectro de frecuencia del audio\n  fft.forward(player.mix);\n  \n  \/\/ Dibuja los c\u00edrculos y actualiza su estado\n  for (Circle circle : circles) {\n    circle.update();\n    circle.display();\n  }\n}\n\nclass Circle {\n  float x, y, z;\n  float diameter;\n  float growth = 0;\n  \n  Circle(float x, float y, float diameter) {\n    this.x = x;\n    this.y = y;\n    this.z = random(-200, 200);  \/\/ Z-coordinate for depth effect\n    this.diameter = diameter;\n  }\n  \n  void update() {\n    float scale = map(player.position(), 0, player.length(), 0.2, 2);\n    growth = fft.getBand(1) * scale; \/\/ Modifica aqu\u00ed para ajustar la reacci\u00f3n al audio\n  }\n  \n  void display() {\n    noFill();\n    stroke(255);\n    strokeWeight(2);\n    pushMatrix();\n    translate(x, y, z);\n    ellipse(0, 0, diameter + growth, diameter + growth);\n    popMatrix();\n  }\n}<\/code><\/pre>\n\n
\"\"<\/figure><\/div>
Y as\u00ed fui pidi\u00e9ndole ajustes a la I.A. con diferentes colores o con diferentes formas que reaccionaran a la pista de diferentes formas dejandonos con varios resultados:
<\/p>\n\n
\"\"<\/figure>\n\n
\"\"<\/figure>\n\n
\"\"<\/figure>\n\n
\"\"<\/figure>\n\n
\"\"<\/figure>\n\n
\"\"<\/figure>\n\n
\"\"<\/figure>\n\n
\"\"<\/figure>\n\n
\"\"<\/figure>\n\n
\"\"<\/figure>\n\n
\"\"<\/figure>\n\n
\"\"<\/figure>\n\n
\"\"<\/figure>\n\n
\"\"<\/figure>\n\n
\"\"<\/figure><\/figure><\/div>
Hasta aqu\u00ed todo luc\u00eda muy bien y este fue el ultimo requerimiento que le ped\u00ed a la I.A.<\/p>\n\n
genial, usemos 5 colores m\u00e1s pero no uses colores naranja , amarillo o rojo, organiza esos colores m\u00e1s en orden de tono. esta parte del codigo: “for (int j = 0; j < numLines; j++) { float yOffset = yOffsetBase + j * 5;” dejala en 5 desde ahora porfavor muestrame todo el codigo entero<\/p><\/blockquote>\n\n
lo cual me respondi\u00f3 con este \u00faltimo c\u00f3digo:<\/p>\n\n
import ddf.minim.*;
import ddf.minim.analysis.*;

Minim minim;
AudioPlayer player;
FFT fft;

int numPoints = 200; \/\/ N\u00famero de puntos que formar\u00e1n la l\u00ednea
float[] frequencies; \/\/ Array para almacenar las frecuencias
float[] amplitudes; \/\/ Array para almacenar las amplitudes
float yOffsetBase = 100; \/\/ Posici\u00f3n vertical inicial de la primera l\u00ednea
float xOffset = 0; \/\/ Desplazamiento horizontal inicial de las l\u00edneas
float xSpacing; \/\/ Espaciado horizontal entre puntos
float moveSpeed = -5; \/\/ Velocidad de movimiento vertical
int numLines = 50; \/\/ N\u00famero de l\u00edneas

color[] lineColors = {
  color(0, 255, 0),
  color(0, 179, 0),
  color(170, 0, 255),
  color(119, 0, 179),
  color(255, 153, 0),
  color(168, 98, 234),
  color(101, 69, 164),
  color(234, 153, 98),
  color(164, 107, 69),
  color(176, 234, 98),
  color(101, 255, 0),
  color(101, 179, 0),
  color(0, 255, 255),
  color(153, 255, 0),
  color(107, 179, 0)
}; \/\/ Colores brillantes

void setup() {
  size(540, 960);
  background(0);
  
  minim = new Minim(this);
  player = minim.loadFile(\"\/Users\/ungalaxylovinyeah\/Documents\/Processing\/libraries\/minim\/src\/navex_2.mp3\");
  fft = new FFT(player.bufferSize(), player.sampleRate());
  
  frequencies = new float[numPoints];
  amplitudes = new float[numPoints];
  xSpacing = (float) width \/ (numPoints - 1);
  
  player.play(); \/\/ Comienza la reproducci\u00f3n de la pista de audio
}

void draw() {
  background(0);
  
  fft.forward(player.mix);
  
  \/\/ Ajusta el grosor del trazo aqu\u00ed
  strokeWeight(3); \/\/ Cambia el valor a lo que necesites
  
  for (int j = 0; j < numLines; j++) {
    float yOffset = yOffsetBase + j * 5; \/\/ Ajusta la posici\u00f3n vertical de cada l\u00ednea
    
    color lineColor = lineColors[j % lineColors.length]; \/\/ Obtiene el color actual
  
    for (int i = 0; i < numPoints; i++) {
      frequencies[i] = fft.getFreq(i); \/\/ Obtiene la frecuencia en la posici\u00f3n i
      amplitudes[i] = fft.getBand(i) * 10; \/\/ Ajusta la amplitud
    
      float y = yOffset - amplitudes[i];
      float x = xOffset + i * xSpacing;
    
      stroke(lineColor); \/\/ Usa el color generado
      point(x, y);
    }
    
    noFill();
    beginShape();
    for (int i = 0; i < numPoints; i++) {
      vertex(xOffset + i * xSpacing, yOffset - amplitudes[i]);
    }
    endShape();
  }
  
  \/\/ Mueve todas las l\u00edneas hacia arriba
  yOffsetBase += moveSpeed;
  
  \/\/ Reinicia la posici\u00f3n vertical de las l\u00edneas cuando llegan al borde superior
  if (yOffsetBase < -50) {
    yOffsetBase = height + 50;
  }
}
\ufeff<\/code><\/pre><\/div>\n\n
Y este fu\u00e9 el \u00faltimo resultado:<\/p>\n\n
\"\"<\/figure><\/div><\/div><\/div>
Despues de esto lleve los archivos grabados a After Effects para crear la pieza publicada:<\/p>\n\n
\"\"<\/figure><\/div><\/div>","protected":false},"excerpt":{"rendered":"
Te muestro como hacer este flyer musical en lenguaje Processing junto con I.A.<\/p>\n","protected":false},"author":2,"featured_media":3948,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[52,73],"tags":[50,74,47,45],"class_list":["post-3914","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-work","category-procesos","tag-art","tag-codigo","tag-diseno","tag-motion"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/santiagoamayaquimbayo.com\/wp-content\/uploads\/2023\/08\/mixtape-session-vol1-4.gif","_links":{"self":[{"href":"https:\/\/santiagoamayaquimbayo.com\/index.php?rest_route=\/wp\/v2\/posts\/3914","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/santiagoamayaquimbayo.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/santiagoamayaquimbayo.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/santiagoamayaquimbayo.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/santiagoamayaquimbayo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3914"}],"version-history":[{"count":17,"href":"https:\/\/santiagoamayaquimbayo.com\/index.php?rest_route=\/wp\/v2\/posts\/3914\/revisions"}],"predecessor-version":[{"id":3952,"href":"https:\/\/santiagoamayaquimbayo.com\/index.php?rest_route=\/wp\/v2\/posts\/3914\/revisions\/3952"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/santiagoamayaquimbayo.com\/index.php?rest_route=\/wp\/v2\/media\/3948"}],"wp:attachment":[{"href":"https:\/\/santiagoamayaquimbayo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/santiagoamayaquimbayo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/santiagoamayaquimbayo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}