Processing - P5.js

José Juan Sánchez Hernández

Diciembre, 2017

1 Introducción

1.1 Processing (Java)

Processing es un proyecto open source que fue creado en 2001 por Ben Fry y Casey Reas para permitir a estudiantes, artistas y diseñadores realizar prototipos sencillos en el contexto de las artes visuales. Ben Fry y Casey Reas desarrollaron una librería y un entorno de desarrollo que permitía realizar sketches sencillos utilizando el lenguaje de programación Java, que era el lenguaje de programación que estaba de moda en aquella época.

1.2 P5.js (JavaScript)

P5.js es una librería open source para JavaScript creada en 2013 por Lauren McCarthy que permite realizar la misma funcionalidad de Processing pero sobre un navegador web.

1.3 Processing.py (Python)

Processing.py es un proyecto open source desarrollado por Jonathan Feinberg que permite escribir sketches para Processing utilizando el lenguaje de programación Python. Este proyecto utiliza Jython, que es una implementación de Python que se ejecuta sobre la Java Virtual Machine (JVM). La última versión de Jython implementa la versión 2.7.3 de Python.

1.4 Processing.js (JavaScript)

Processing.js es un proyecto open source que fue creado en 2008 por John Resig que permite ejecutar un sketch de Processing con código Java sobre un navegador web. Lo que hace realmente Processing.js es convertir el código Java a código JavaScript.

Si consultamos la lista de proyectos que están siendo apoyados por la Processing Foundation veremos que aparecen todos los proyectos que hemos mencionado anteriormente excepto Processing.js.

2 Primeros pasos con P5.js

Para empezar a programar nuestros primeros sketches con p5.js podemos elegir una de las siguientes opciones que se muestran a continuación.

2.1 Configuración de los archivos necesarios

2.1.1 Opción 1

Para poder ejecutar nuestros sketches en un navegador web sólo necesitamos tener un archivo HTML que incluya la librería p5.js o la versión reducida p5.min.js y un archivo con el código de nuestro sketch. Podemos poner el nombre que queramos al archivo que contiene el código de nuestro sketch, en el siguiente ejemplo lo hemos llamado sketch.js.

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="p5.min.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

2.1.2 Opción 2

Todas las versiones de la librería p5.js están almacenadas en un CDN (Content Delivery Network), de modo que podemos enlazarlas directamente en nuestro archivo HTML.

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

2.1.3 Opción 3

Podemos descargar este proyecto de ejemplo que contiene todos los archivos necesarios para empezar a trabajar en nuestro equipo de forma local.

El contenido del proyecto de ejemplo es el siguiente:

├── addons
│   ├── p5.dom.js
│   ├── p5.dom.min.js
│   ├── p5.sound.js
│   └── p5.sound.min.js
├── empty-example
│   ├── index.html
│   └── sketch.js
├── p5.js
└── p5.min.js

2.1.4 Opción 4

También podemos trabajar sobre esta plantilla en codepen.

2.2 Contenido del archivo `sketch.js`

Las dos funciones principales que vamos a tener en nuestro archivo sketch.js son setup y draw.

La función setup sólo se ejecuta una vez al inicio y la función draw se ejecuta indefinidamente a no ser que se indique lo contrario.

function setup() {

}

function draw() {

}

3 Conceptos básicos

Todos los ejemplos que se muestren a partir de ahora estarán basados en P5.js.

3.1 Sistema de coordenadas

3.2 Formas básicas

3.2.1 Point

3.2.2 Line

3.2.3 Rectangle

3.2.4 Ellipse

3.3 Colors

3.4 Interact

4 Ejemplos

4.1 Ejemplo 1

function setup() {
  createCanvas(640, 480);
}

function draw() {
  ellipse(mouseX, mouseY, 50, 50);
}

4.2 Ejemplo 2

function setup() {
  createCanvas(640, 480);
}

function draw() {
  background(255);
  ellipse(mouseX, mouseY, 50, 50);
}

## Ejemplo 3

function setup() {
  createCanvas(640, 480);
}

function draw() {
  if (mousePressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 50, 50);
}

4.3 Ejemplo 4

function setup() {
  createCanvas(640, 480);
}

function draw() {
  background(192, 64, 0);
  line(150, 25, mouseX, mouseY);
}

4.4 Ejemplo 5

function setup() {
  createCanvas(640, 480);
}

function draw() {
  background(255);
  line(width/2, height/2, mouseX, mouseY);
}

4.5 Ejemplo 6

function setup() {
  createCanvas(640, 480);
}

function draw() {
  line(mouseX, mouseY, pmouseX, pmouseY);
}

4.6 Ejemplo 7

function setup() {
  createCanvas(640, 480);
}

function draw() {
  background(255);
  line(mouseX, mouseY, pmouseX, pmouseY);
}

5 Créditos

Las imágenes utilizadas en este documento han sido extraídas del tutorial Coordinate System and Shapes de Daniel Shiffman.

6 Recursos

Learning Processing (Book). Daniel Siffman.
Learning Processing (Videos).
Learning Processing (Examples).
Learning Processing (Examples using p5.js).
The Nature of Code (Book). Daniel Siffman.
The Nature of Code (Videos).
p5.js tutorials - JavaScript, HTML, and CSS (Videos). Daniel Siffman.
https://creative-coding.decontextualize.com/

7 Licencia

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional.