Introducción a Creative Coding

La programación es una maravilloso mundo en la cual podemos imitar la vida real a la las maquinas mediante lenguajes que hemos creado, como es JavaScript, Python, Ruby, C++, entre otros; ellos nos ayudan a dar ordenes de manera mas fácil para nosotros. Entre las muchas ordenes que podemos darles está el Creative Coding .

El creative coding es una forma de crear mediante el código, o sea ordenes, arte que puede ser de manera aleatoria o interactivo.
Para este tipo de arte y programación hay muchas maneras de crearlo y generarlo, la forma mas fácil que he encontrado es con el proyecto Open Source de Processing Foundation , este nos da herramientas para poder crear y manipular figuras, animaciones, audios, imágenes y videos. Para que sea aún mas fácil el aprendizaje de Creative Coding, Processing nos da diferentes proyecto relacionado con diversos lenguajes de programación, Java (lenguaje principal de Processing), JavasScript (P5.js) o Python (PyProcessing); de los cuales comenzaremos con P5.js.

Para empezar a crear arte con código en P5js, deberemos saber JavaScript y HTML5, donde se incorpora Canvas . La librería que vamos a usar nos ayuda con un editor en línea .

Lo primero antes de seguir, es entender el ciclo básico del funcionamiento del Processing, puesto que trabaja con dos funciones principales que son setup y draw. Setup es utilizada para configurar el sketch, esta configuración va a ser estática; es decir que solo se va ejecutar al principio del inicio de programa. Dentro de esta función se pondrá variables y ejecutaran funciones que solo se usaran una vez, como lo es createCanvas(width, height) u otras. Draw es usada para el ciclo principal de todo el programa después de ser ejecutada la función setup, draw se ejecutara una y otra vez hasta que se pare el programa, el sketch estará siendo ejecutado con el mismo, dentro de esta función, van ir objeto y funciones que van a ir cambiando.

Para nuestra primera figura vamos a tener en cuenta los previamente visto sobre setup y draw, cuando iniciamos el editor de P5js se encuentran estas funciones. Vamos a modificar draw para crear la primera figura, un rectángulo; para hacerlo usaremos rect(x, y, width, height) y le pasaremos los respectivos parámetros.

Para crear un sketch debemos tener una idea de como que sea lo que vamos a hacer. Por lo cual vamos primero pensar como podríamos hacerlo con programación, con bucles o si necesitaremos variables, para este sketch podremos usar ciclos para generar los círculos y las líneas que están repetidas. Antes de empezar a programar, hay que entender como funcionan las coordenadas en Processing. Processing usa coordenadas como en un plano cartesiano en el eje X y en el Y, la diferencia es como es acomodado el origen (0, 0), este es puesto en la esquina superior izquierda, y lo siguiente es la forma en la que incrementa los ejes; el eje X aumenta hacia la derecha y el eje Y aumenta hacia abajo, como es mostrado en la imagen anterior. Ahora si podemos comenzar a crear el primer Sketch en P5js. Primero vamos a poner las funciones principales setup y draw. En setup escribiremos createCanvas(400, 400), es decir crear un elemento Canvas con altura y anchura de 400 pixeles, y en draw background(0), que el fondo del Canvas sea negro y como está en el draw que sea pintado cada vez que el ciclo este funcionando.

      
        
      
      function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(0)
}
    

Ahora usaremos un ciclo for para los círculos y las líneas, donde le diremos que la variable de control empiece desde un punto (20, 20) hasta (380, 20).

      
        
      
      function setup(){
    createCanvas(400, 400)
}

function draw(){
    background(0)

    for(let x = 20; x < 380; x++) {
        ...
    }
}
    

Luego dentro del for usaremos las funciones circle(x, y, radius) y line(x1, y2, x2, y2) para ello dispondremos de la variable de control x del for para ponerlo en los parámetros. Veremos en el sketch varias líneas y al final un círculo, esto es porque x esta incrementando +1 hasta llegar a 380, lo que queremos es que haya un espacio entre los círculos por ello haremos una variable que divida el ancho entre la cantidad de círculos que necesitemos que serán por el momento 6.

      
        
      
      function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(0)

  // Width es una variables de P5js
  // 6 es la cantidad de círculos
  let increment = width / 6

  for (let x = 20; x <= 380; x += increment) {
    circle(x, 20, 30)
  }
}
    

Observamos que los círculos ya están en su sitio pero necesitaremos el resto de las figuras, por lo cual tendremos que seguir con line y poner los círculos en la sección de abajo, cambiando y. Mientras que line vamos a poner que (x1, y1) sea para cada circulo una línea y vayan todas hasta un mismo punto, también para que sean visibles las líneas cambiaremos el color del trazo por blanco con la función stroke(color).

      
        
      
      function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(0)

  // Width es una variables de P5js
  // 6 es la cantidad de círculos
  let increment = width / 6

  for (let x = 20; x <= 380; x += increment) {
    // cambiamos el color del trazo
    stroke(255)

    // círculos de arriba
    circle(x, 20, 30)
    // círculos de abajo
    circle(x, 380, 30)

    // líenas de arriba
    line(x, 20, 150, 150)
    // líneas de abajo
    line(x, 380, 150, 150)
  }
}
    

Ya por último le pondremos interactividad con la posición del mouse y quitaremos el relleno del los círculos, para ello primero en vez de en cada línea usar el punto (150, 150), lo cambiamos por mouseX y mouseY (variables de la posición del mouse de Processing). Y para quitar el relleno de los círculos la función noFill().

      
        
      
      function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(0)

  // Width es una variables de P5js
  // 6 es la cantidad de círculos
  let increment = width / 6

  for (let x = 20; x <= 380; x += increment) {
    // quitamos el relleno de las figuras
    noFill()

    // círculos de arriba
    circle(x, 20, 30)
    // círculos de abajo
    circle(x, 380, 30)

    stroke(255)

    // líenas de arriba
    line(x, 20, mouseX, mouseY)
    // líneas de abajo
    line(x, 380, mouseX, mouseY)
  }
}
    

Y listo ya tenemos el primer sketch interactivo con P5js, con este ejercicio podemos concluir que Processing es muy intuitivo para los programadores y artistas para crear Sketch que sean interactivos o de otro tipo.