struttura di base

// eseguito una volta prima del setup
function preload(){
  // img = loadImage(percorsoFileBitmap);
  // snd = loadSound(percorsoFileAudio);
}

// eseguito una volta all'avvio o dopo il preload
function setup(){
  // createCanvas(larghezza, altezza);
  // inizializzazioni
}

// eseguito continuamente dopo il setup
function draw(){
  // ciclo di rendering
}
				

variabili di sistema

windowWidth / windowHeight
// larghezza / altezza dell'interno della finestra
width / height
// larghezza / altezza del canvas
frameCount
// numero di fotogrammi dall'avvio dello sketch
mouseX / mouseY
// posizione orizzontale / verticale del mouse
key
// ultimo carattere digitato sulla tastiera
keyCode
// ultimo tasto premuto: BACKSPACE, DELETE, ENTER
// TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT,
// UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW
				

eventi di sistema

// tasto premuto
function keyPressed(){
}
// mouse spostato senza pulsante premuto
function mouseMoved(){
}
// tasto del mouse premuto
function mousePressed(){
}
// tasto del mouse premuto e rilasciato
function mouseClicked(){
}
// dimensioni della finestra modificate
function windowResized(){
  // resizeCanvas(windowWidth, windowHeight);
}
				

spazio 2D

• coordinate

• angoli in radianti

push(); // salva stili e trasformazioni correnti
  translate(x, y);  // traslazione
  scale(x, y); // scalatura
  rotate(angolo);  // rotazione
  // istruzioni di disegno
pop(); // ripristina stili e trasformazioni

angleMode(DEGREES);  // deafult: RADIANS
			

colore

background(colore);  // colora lo sfondo

fill(colore);  // imposta colore di riempimento
noFill();  // disabilita il riempimento
stroke(colore);  // imposta colore dei contorni
noStroke();  // disabilita il disegno dei contorni

fill('red');  // imposta colore con nome inglese
fill('#222222');  // valore esadecimale
fill(grigio);
fill(grigio, alfa);
fill(rosso, verde, blu);
fill(rosso, verde, blu, alfa);

colorMode(HSL, maxH, maxS, maxL, maxA);
fill(tono, saturazione, chiarezza, alfa);

colorMode(HSB, maxH, maxS, maxB, maxA);
fill(tono, saturazione, brillantezza, alfa);

colorMode(RGB, 255); // modalità cromatica di default

variabileColore = color(120, 50, 90);
			

forme

ellipseMode(CORNER);  // default: CENTER
rectMode(CENTER); // default: CORNER

strokeWeight(spessore);
// imposta lo spessore dei contorni in pixel

line(x1, y1, x2, y2); // linea

ellipse(x, y, larghezza, altezza); // ellisse

rect(x, y, larghezza, altezza); // rettangolo

arc(x, y, larghezza, altezza, inizio, fine); // arco

beginShape(); // inizia definizione vertici poligono
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  // altri vertici
endShape(CLOSE); // termina definizione (e disegna)
			

tipografia

font = loadFont(percorsoFile);
// carica font in formato TTF o OTF

textFont(font, dimensione);
// imposta il font e la dimensione dei caratteri

textSize(dimensione);
// imposta solo la dimensione dei caratteri

textAlign(orizzontale, verticale);
// orizzontale: LEFT (default), CENTER or RIGHT
// verticale: TOP, BOTTOM, CENTER or BASELINE (default)

text("testo", x, y);
text("testo multilinea", x, y, larghezza, altezza);
			

• line()

• ellipse()

• rect()

• arc()

• vertex()

• text()

feedback non grafico

print("testo: " + variabile);
// visualizza testo e dati nella console

// doppia barra per commentare il codice
			

matematica

+ - / *  // operatori matematici di base

random(minimo, massimo); // numero casuale
noise(x, y, z); // valore Perlin noise fra 0 e 1

round(valore); // arrotonda a intero più vicino

map(valore, attualeA, attualeB, nuovoA, nuovoB);
// mappa un valore da un intervallo (A,B) a un altro

dist(x1, y1, x2, y2);
// calcola distanza fra due punti
			

logica se/allora

if (test) {
  istruzioni
}

==  // uguale a
!=  // diverso da
>   // maggiore di
<   // minore di
>=  // maggiore o uguale
<=  // minore o uguale

&&  // entrambi operandi true
||  // un operando true
!   // inverte operando
				

logica cicli for

for (avvio; test; modifica) {
  istruzioni
}

// esempio
for (var i = 0; i < 10; i++) {
  print(i);
}