estructura del programa

//s'executa només un cop quan s'inicia el programa
function setup(){
  createCanvas(800,600); //amplada, alçada en píxels
}

//s'executa contínuament després de la funció setup
function draw(){
  //codi que s'executarà en bucle
}

variables del sistema

windowWidth / windowHeight
//amplada / alçada de la finestra

width / height
//amplada / alçada del llenç

mouseX / mouseY
//posició actual horitzontal / vertical del ratolí

Informació via la consola

print();
//escriu dades a la consola

//dues barres inclinades per a comentar el codi
//(el programa ignora els comentaris)

color

fill(120); //escala de grisos: 0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha
fill('red'); //nom del color
fill('#ccc'); //hexadecimal de 3 dígits
fill('#222222'); //hexadecimal de 6 dígits
color(0, 0, 255); //objecte p5.Color

matemàtiques

+ - / *  //operadors matemàtics bàsics

random(min, max); //nombre aleatori entre min i max

map(valor, entr1, entr2, sort1, sort2);
//converteix un valor entre entr1 i entr2
//a un valor entre sort1 i sort2

primitives 2d

line(x1, y1, x2, y2);

ellipse(x, y, amplada, altura);

rect(x, y, amplada, altura);

arc(x, y, amplada, altura, inici, final);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //afegiu més vèrtex
endShape(CLOSE);

text("string", x, y, ampleCaixa, alturaCaixa);

• graella

• line()

• ellipse()

• rect()

• arc()

• vertex()

atributs

background(color);
//estableix el color de llenç

fill(color);
//estableix el color d'emplenat

noFill();
//desactiva l'emplenat

stroke(color);
//estableix el color del traç

strokeWeight(gruix);
//estableix el gruix del traç, en píxels

noStroke();
//desactiva el traç

ellipseMode(MODE);
rectMode(MODE);
//CENTER,CORNER (centre o cantonada)

textSize(pixels);

lògica si/aleshores

if(condició){
  //instruccions
}

===  //igual a
!==  //no igual a
>   //major que
<   //menor que
>=  //major o igual que
<=  //menor o igual que