E0. Il primo sketch con p5.js

screenshot

Obiettivo

Realizzare un primo sketch seguendo una guida passo passo, e modificarlo poi con l’assistenza di un agente di programmazione.

Modalità

Per procedere bisogna avere installato Visual Studio Code, Git, OpenCode e le estensioni OpenCode e Live Server, come spiegato nella guida all’installazione.
È anche necessario aver preparato il proprio repository di consegna.

Fase 1: scrittura del codice

  • da Visual Studio Code aperto sul repository di consegna, creare la cartella dell’esercitazione con il comando /crea es0 che genera gli stessi file della cartella di base della guida Programmazione di base con p5.js e VS Code, che si può quindi evitare di scaricare;
  • seguire la guida dal capitolo 1 alla fine, scrivendo il codice a mano in es0/sketch.js;
  • tenere aperta l’anteprima con Live Server e controllare il risultato a ogni passaggio.

Fase 2: le modifiche con l’agente

  • descrivere a OpenCode due o tre modifiche da apportare allo sketch ottenuto, una per volta;
  • leggere il codice che l’agente propone prima di implementarlo in sketch.js, e chiedere di spiegare i passaggi non chiari;
  • verificare ogni modifica nel browser, e annullarla se il risultato non è quello previsto.

Le modifiche possono riguardare le forme, i colori, il movimento o la reazione al mouse: l’esercitazione non chiede il raggiungimento di un determinato risultato, ma è un’occasione per provare l’interazione con l’agente.

Consegna

Lo sketch va consegnato dal proprio repository delle esercitazioni, aggiungendo un’anteprima chiamata “preview.png”, cioè un’immagine del risultato finale, che si può ottenere cliccando con il tasto destro del mouse sul canvas e selezionando “Salva immagine con nome…”.

Tutti i dettagli, comprese le indicazioni sull’archiviazione dei file su Teams dopo la revisione, si trovano nella pagina Modalità di consegna.

Riferimenti