p5.js
promemoria
per principianti
struttura del programma
//eseguito una volta all'avvio del programma
function setup(){
createCanvas(800,600); //larghezza,altezza
}
//eseguito continuamente dopo il setup
function draw(){
//istruzioni di disegno
}
variabili di sistema
windowWidth / windowHeight
//larghezza / altezza della finestra
width / height
//larghezza / altezza dell'area di disegno
mouseX / mouseY
//posizione orizzontale / verticale del mouse
feedback non grafico
print();
//visualizza informazioni nella console
//doppia barra per commentare il codice
colore
fill(120); //grigio: 0-255
fill(100,125,255); //rosso, verde, blu: 0-255
fill(255, 0, 0, 50); //rosso, verde, blu, alfa
fill('red'); //nome colore (in inglese)
fill('#ccc'); //codice esadecimale a 3 cifre
fill('#222222'); //codice esadecimale a 6 cifre
color(0, 0, 255); //oggetto p5.Color
matematica
+ - / * //operatori matematici di base
random(minimo, massimo); //numero casuale
map(valore, attuale1, attuale2, nuovo1, nuovo2);
//mappa un valore dall'intervallo attuale a uno nuovo
primitive 2d
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(); //poligono
vertex(x1, y1);
vertex(x2, y2);
vertex(x3, y3);
//aggiungi eventuali altri vertici
endShape(CLOSE);
text("testo", x, y, larghezzaParagrafo, altezzaParagrafo);
-
coordinate
-
line()
-
ellipse()
-
rect()
-
arc()
-
vertex()
attributi grafici
background(colore);
//colora l'intera area di disegno
fill(colore);
//imposta il colore di riempimento
noFill();
//disattiva il riempimento
stroke(colore);
//imposta il colore dei contorni
strokeWeight(spessore);
//imposta lo spessore dei contorni in pixel
noStroke();
//disattiva il disegno dei contorni
ellipseMode(ancoraggio);
rectMode(ancoraggio);
//ancoraggi: CENTER, CORNER
textSize(altezzaCarattere);
logica se/allora
if(condizione){
//istruzioni
}
=== //uguale a
!== //diverso da
> //maggiore di
< //minore di
>= //maggiore o uguale
<= //minore o uguale