p5.js

una hoja de trucos
para principiantes!

estructura del programa

//corre cuando inicia el programa
function setup(){
  createCanvas(800,600); //ancho, alto en pixeles
}

//corre continuamente despues del setup
function draw(){
  //instrucciones de reproducción en circuito
}

variables del sistema

windowWidth / windowHeight
//ancho / alto de la ventana

width / height
//ancho / alto del lienzo

mouseX / mouseY
//posición actual horizontal / vertical del apuntador

retroalimentación no visual

print();
//reporta datos a la consola

//doble barra oblicua para comentar el código
//(el programa lo salta)

color

fill(120); //gris: 0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha
fill('red'); //nombre del color
fill('#ccc'); //hex de 3 dígitos
fill('#222222'); //relleno de hex de 6 dígitos
color(0, 0, 255); //objecto p5.Color

matemáticas

+ - / *  //operadores básicos matemáticos

random(low,high); //número aleatorio, límite bajo, límite alto

map(value, in1, in2, out1, out2);
//mapea un valor del rango de entrada al rango de salida

primitivas 2d

line(x1, y1, x2, y2);

ellipse(x, y, ancho, alto);

rect(x, y, ancho, alto);

arc(x, y, ancho, alto, inicio, final);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //agrega más vértices
endShape(CLOSE);

text("string", x, y, boxwidth, boxheight);
  • cuadrícula

  • line()

  • ellipse()

  • rect()

  • arc()

  • vertex()

atributos

background(color);
//define el color del fondo

fill(color);
//define el color para rellenar

noFill();
//desabilita el relleno

stroke(color);
//define el color del trazo

strokeWeight(weight);
//define el ancho del trazo en pixeles

noStroke();
//desabilita el trazo

ellipseMode(MODE);
rectMode(MODE);
//CENTER,CORNER (centro, esquina)

textSize(pixels);
//tamaño del texto en pixeles

lógica if/then

if(condición){
  //declaraciones
}

===  //igual a
!=  //no es igual a
>   //mayor que
<   //menor que
>=  //mayor ó igual que
<=  //menor ó igual que