Primeros pasos con p5.js

p5.js es una biblioteca de JavaScript que nos permite escribir sketches de una forma muy parecida a Processing. En este artículo voy a explicar, de la manera más resumida posible, qué se necesita para empezar a usar p5.js.

1. Lo primero que necesitamos es una carpeta donde meter todos los archivos que tendrá nuestro proyecto.

2. Dentro de la carpeta creamos un primer archivo de texto que llamaremos index.html. 

3. Editamos nuestro archivo index.html para darle la estructura básica de una página web. Podemos usar cualquier editor de texto pero es recomendable tener uno diseñado para ayudarnos a escribir código, como Sublime Text. Si ejecutamos nuestro archivo podremos ver nuestra web en un navegador de internet.

4. Añadimos a la carpeta de nuestro proyecto el archivo p5.js que podemos descargarnos aquí.

5. Creamos un tercer archivo de texto en nuestra carpeta que podemos llamar code.js.

6. Volvemos a la edición del archivo index.html para añadir los dos scripts que enlazarán la página web que hemos creado en el punto 2 con los dos archivos .js descritos en los puntos 4 y 5.

8. Ahora ya podemos editar el archivo code.js que es donde escribiremos nuestro sketch.

Una buena forma de trabajar es dividir la pantalla en dos ventanas y dedicar la parte derecha a escribir código y la izquierda a visualizar el resultado en un navegador, tal como se muestra en las imágenes anteriores.

Código html:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Mi primer sketch p5.js</title>
    <script src="p5.js"></script>
    <script src="code.js"></script>
</head>
  <body>
    <p>Esto es un párrafo dentro del body.</p>
  </body>
</html>

Código p5.js:

function setup() {
  createCanvas(400,300);
  background(255,215,0);
}

function draw() {
  fill(255,0,0);
  strokeWeight(4);
  ellipse(100,50,50,50);
  line(100,250,300,150);
}

Mando a distancia con Arduino y Processing

En esta práctica vamos a combinar Arduino y Processing para construir un mando a distancia para controlar juegos o aplicaciones en nuestro ordenador.

En la parte física utilizaremos una placa Arduino UNO, una breadboard o placa de prototipos sin soldadura, un par de botones NA, dos resistencias de 220 Ω y algunos cables de colores.

A continuación podemos ver en detalle el esquema del circuito:

Una vez montado el circuito pasamos a la parte del código.

Primero haremos un sketch en Arduino que lea el valor de los pines digitales 8 y 9, conectados a los botones situados a la izquierda y a la derecha. Utilizaremos el monitor serial para imprimir en pantalla los valores 0, 1 y 2 cuando no esté pulsado ningún botón, esté pulsado el botón izquierdo y esté pulsado el botón derecho respectivamente.

Código Arduino:

const int izq = 8;
const int der = 9;
int dir = 0;

void setup(){
  Serial.begin(9600);
  pinMode(izq, INPUT);
  pinMode(der, INPUT);
}

void loop(){
  if(digitalRead(izq)>0){
    dir = 1;
  }else if(digitalRead(der)>0){
    dir = 2;
  }else{
    dir = 0;
  }
  Serial.println(dir);
  delay(100);
}

Finalmente escribimos un sketch en Processing que nos lea los valores 0, 1 y 2 que mandamos desde Arduino a través del puerto serial (COM9 en mi caso). A continuación dibujamos una pantalla de 600 x 400 píxeles, con fondo negro y una circunferencia en el centro. La posición x de esta circunferencia la almacenamos en una variable que modificaremos pada vez que Arduino envíe un valor de 1 o 2 a través del puerto serial, es decir, cada vez que pulsemos los botones del circuito que hemos construido.

Es muy importante que el sketch de Processing se ejecute después de que el sketch de Arduino esté eviado a la placa y ejecutándose.

Código Processing:

import processing.serial.*;
Serial puerto;
char val;
int x;

void setup(){
  puerto = new Serial(this, "COM9", 9600);
  size(600,400);
  noStroke();
  x = width/2;
}
void draw(){
  background(0,0,0);
  if(puerto.available()>0){
    val = puerto.readChar();
    if (val == '0'){
      x = x;
    }
    if (val == '1'){
      x = x-10;
    }    
    if (val == '2'){
      x = x+10;
    }
  }
  ellipse(x,height/2,100,100);
  println(val);
}

Ejemplo de código en Processing

Ejemplo de código en Processing

int x=0;
int y=0;

void setup(){
  //size(300,400);
  size(screenWidth,400);
  //size(screenWidth,screenHeight);
  
  /*
  screenWidth y screenHeight ya no están soportados
  en Processing 3.x pero los sketches siguen
  funcionando incrustados en el canvas de html5
  */
  
  background(255,200,0);
}

void draw(){
  //background(255,200,0);
  if(mousePressed == true){
    if(mouseX>=(width/2)){
      x=x+1;
    }else{
      x=x-1;
    }
    if(mouseY>=(height/2)){
      y=y+1;  
    }else{
      y=y-1;
    }
  }
  noStroke();
  fill(0,0,0);
  rect(x,y,5,5);  
}