estrutura do programa

//setup() executa quando o programa começa
function setup(){
  createCanvas(800, 600); //largura, altura em pixels
}

//draw() executa continuamente depois do setup
function draw(){
  //instruções de desenho
}

variáveis do sistema

windowWidth / windowHeight
//largura / altura da janela

width / height
//largura / altura da área de desenho

mouseX / mouseY
//posição horizontal / vertical do mouse

feedback não-visual

print();
//registra dados no console

//barras duplas para comentar o código
//(o programa pula essas linhas)

cor

fill(120); //cinza: 0-255
fill(100, 125, 255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha: 0-255
fill('red'); //nome CSS da cor
fill('#ccc'); //código hex de 3 dígitos
fill('#222222'); //código hex de 6 dígitos
color(0, 0, 255); //objeto p5.Color

matemática

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

random(min, max); 
//número aleatório entre os limites mínimo e máximo

map(valor, ent1, ent2, sai1, sai2);
//mapeia o valor da faixa de entrada para a faixa de saída

primitivas 2d

line(x1, y1, x2, y2);

ellipse(x, y, largura, altura);

rect(x, y, largura, altura);

arc(x, y, largura, altura, inicio, fim);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //adicione mais vértices
endShape(CLOSE);

text("texto", x, y, larguraCaixa, alturaCaixa);

• coordenadas

• line()

• ellipse()

• rect()

• arc()

• vertex()

atributos

background(cor);
//define a cor de fundo

fill(cor);
//define a cor de preenchimento

noFill();
//desabilita o preenchimento

stroke(cor);
//define a cor de contorno

strokeWeight(pixels);
//define a largura da linha de contorno em pixels

noStroke();
//desabilita o contorno

ellipseMode(MODE);
rectMode(MODE);
//MODE: CENTER, CORNER (centro, canto)

textSize(pixels);
//define o tamanho do texto em pixels

lógica if/then

if (condicao){
  //instruções
}

===  //igual a
!==  //diferente de
>   //maior que
<   //menor que
>=  //maior que ou igual a
<=  //menor que ou igual a