estructura del programa

//corre solo una vez cuando inicia el programa
function setup(){
  createCanvas(800,600); //ancho, alto en píxeles
}

//corre continuamente después de la función setup
function draw(){
  //instrucciones a ejecutar en bucle
}

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

Información a través de la consola

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'); //hexadecimal de 3 dígitos
fill('#222222'); //hexadecimal de 6 dígitos
color(0, 0, 255); //objecto p5.Color

matemáticas

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

random(min, max); //número aleatorio entre min y max

map(valor, entr1, entr2, sal1, sal2);
//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, anchoCaja, altoCaja);

• cuadrícula

• line()

• ellipse()

• rect()

• arc()

• vertex()

atributos

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

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

noFill();
//deshabilita el relleno

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

strokeWeight(grosor);
//define el ancho del trazo en píxeles

noStroke();
//deshabilita el trazo

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

textSize(pixels);
//tamaño del texto en píxeles

lógica si/entonces

if(condición){
  //instrucciones
}

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