Salta al contenuto principale
Torna al corso

Generative Visuals con p5.js

Generative Visuals con p5.js

Da pattern statici a visual generativi reattivi al suono.

Modulo 01 · 14 min

Il primo loop visivo

draw() come battito cardiaco del programma.

Descrizione

In p5.js esistono due funzioni fondamentali: setup() e draw(). La prima viene eseguita una volta sola, la seconda 60 volte al secondo. Tutto ciò che chiamiamo 'animazione' nasce qui.

Cosa produrrai

Galleria di sketch

Un sketch a testa, condiviso in pagina di classe.

Anteprima suono
Stessa frequenza del refresh: un beat per ogni frame.
Output codice
Tela 600×600 con cerchio luminoso che segue il puntatore, lasciando una scia.

Anteprima · Generative Visuals con p5.js / Generative Visuals con p5.js

Punti chiave

  • setup() = una volta. draw() = 60 volte al secondo.
  • Un background trasparente lascia scie luminose.
  • frameCount è il tempo del programma, espresso in frame.