Archivi categoria: corsi

Corso di Processing – lezione 04

Il Reference di Processing: un supporto essenziale

Quando si lavora con Processing, è importante avere a disposizione un punto di riferimento per consultare rapidamente le funzioni disponibili e il loro utilizzo. La documentazione ufficiale di Processing, accessibile all’indirizzo Processing Reference, offre una panoramica completa delle funzionalità del linguaggio.

Cercando una funzione, come ad esempio line(), è possibile visualizzare una scheda dettagliata che include:

  • Il nome della funzione, per identificarla rapidamente.
  • Esempi pratici, con codice e immagini che illustrano il comportamento della funzione.
  • Una descrizione, che spiega il suo utilizzo e i parametri richiesti.
  • La sintassi corretta, utile per scrivere il codice senza errori.
  • L’elenco dei parametri accettati, per capire quali valori inserire.
  • Il tipo di valore restituito (se presente), che indica cosa produce la funzione come risultato.
  • Funzioni correlate, per esplorare comandi simili o complementari.

Utilizzare la Reference senza connessione Internet

Se non si ha accesso a Internet, niente paura! Quando si installa Processing, una copia della Reference viene salvata automaticamente sul computer. È possibile consultarla in qualsiasi momento selezionando Help > Reference dal menu dell’IDE.

Un trucco per trovare velocemente informazioni

Se si sta scrivendo codice e si ha un dubbio su una funzione già utilizzata, esiste un metodo rapido per accedere alla documentazione relativa. Basta:

  1. Evidenziare il nome della funzione nel codice.
  2. Selezionare Help > Find in Reference (oppure, su Mac, usare la scorciatoia ⇧⌘F – Shift + Command + F).

Questo comando apre direttamente la pagina della Reference dedicata alla funzione selezionata, evitando di doverla cercare manualmente.

Come interpretare la Reference

La documentazione è disponibile solo in inglese, ma anche chi non ha familiarità con la lingua può facilmente individuare le informazioni essenziali. Ecco come leggere una tipica scheda di una funzione:

  • Name – Il nome della funzione.
  • Examples – Esempi pratici di utilizzo, con codice e immagini.
  • Description – Una spiegazione più o meno dettagliata sul funzionamento della funzione e sui parametri accettati.
  • Syntax – Le diverse modalità di utilizzo della funzione, con il numero di parametri che può accettare. Ad esempio, line(x1, y1, x2, y2) per il 2D e line(x1, y1, z1, x2, y2, z2) per il 3D.
  • Parameters – I tipi di dati richiesti per ogni parametro (es. numeri interi, float, stringhe).
  • Returns – Se la funzione restituisce un valore, qui viene indicato il tipo di dato prodotto.
  • Related – Altre funzioni simili o complementari, utili per approfondire ulteriormente.

Imparare a consultare la Reference in modo efficace permette di scrivere codice in Processing con maggiore sicurezza e velocità. Sfruttando sia la versione online che quella locale, è possibile avere sempre a portata di mano tutte le informazioni necessarie per esplorare il linguaggio e migliorare le proprie competenze di programmazione.

Corso di Processing – lezione 03

 

Lo Schermo, i Pixel e le Linee in Processing

Prima di iniziare a programmare con Processing, è fondamentale comprendere come lo schermo venga rappresentato digitalmente e come possiamo interagire con esso attraverso il codice. Lo schermo del computer non è altro che una griglia di pixel, piccolissimi punti luminosi che compongono le immagini visualizzate. Ogni pixel ha una posizione ben definita, identificata da una coppia di coordinate (x, y).

Il Sistema di Coordinate in Processing

Processing utilizza un sistema di coordinate cartesiane leggermente diverso da quello scolastico:

  • L’origine (0,0) si trova nell’angolo in alto a sinistra dello schermo.
  • L’asse X cresce verso destra.
  • L’asse Y cresce verso il basso.

Questo significa che spostandosi a destra i valori di X aumentano, mentre spostandosi verso il basso i valori di Y crescono.

Risoluzione e Dimensioni della Finestra

Uno dei primi passi per lavorare con Processing è definire la grandezza della finestra in cui verrà disegnato il nostro codice. Per farlo, utilizziamo la funzione size(), che permette di impostare la larghezza e l’altezza della finestra in pixel:

1size(400, 400);

Con questa riga di codice, Processing creerà una finestra quadrata di 400×400 pixel.

Disegnare un Punto e una Linea

In Processing, possiamo disegnare elementi grafici semplicemente utilizzando delle funzioni predefinite. Ad esempio, per disegnare un singolo punto nella posizione (200, 200) in una finestra 400×400 pixel, si usa:

1size(400, 400);
2point(200, 200);

Dovreste notare un punto di dimensioni di 1 pixel al centro della finestra, per rendere più evidente il punto aumentiamo le dimensioni del tratto con strokeWeight():

Per disegnare una linea che va dal punto (20, 30) al punto (300, 350) in una finestra 400×400 pixel, scriviamo:

Colori e Stili di Disegno

Processing permette anche di modificare l’aspetto degli elementi grafici. Possiamo cambiare il colore di una linea o di un punto con la funzione stroke(), specificando i valori di rosso, verde e blu (RGB):

inoltre, possiamo variare lo spessore delle linee con la funzione strokeWeight():

1size(400, 400);
2stroke(255, 0, 0); // Imposta il colore della linea su rosso
3strokeWeight(4);
4line(100, 100, 300, 300);

Questo codice disegnerà una linea più spessa rispetto a quella di default.

Capire il concetto di pixel, coordinate e linee è essenziale per lavorare con Processing. Con pochi comandi, è possibile creare strutture visive interessanti e gettare le basi per progetti più complessi. Sperimentare con point(), line() e stroke() aiuta a comprendere la logica del disegno digitale, un aspetto fondamentale per esplorare il Creative Coding e l’arte generativa.

L’importanza del punto e virgola in programmazione

Uno degli aspetti fondamentali della sintassi in Processing – e nella maggior parte dei linguaggi di programmazione – è l’uso del punto e virgola (;) per terminare un’istruzione. A differenza della scrittura tradizionale, in cui il punto segna la fine di una frase, in programmazione il punto e virgola serve a indicare al computer che un comando è stato completato.

È una regola essenziale da tenere sempre a mente, perché dimenticare un punto e virgola può causare errori nel codicee impedire al programma di funzionare correttamente. Mentre un essere umano può interpretare facilmente un testo anche se manca un segno di punteggiatura, un computer ha bisogno di istruzioni chiare e precise per eseguire il codice senza ambiguità.

Per chi è alle prime armi, può capitare spesso di dimenticare questo dettaglio. Fortunatamente, esistono strumenti come il debugger e i messaggi di errore nella console di Processing, che aiutano a individuare e correggere questi problemi. Con un po’ di pratica, il punto e virgola diventerà un’abitudine naturale nella scrittura del codice.

L’utilità dei commenti nel codice

I commenti sono uno strumento fondamentale in programmazione. Servono a spiegare il funzionamento di specifiche porzioni di codice, a lasciare note per sé stessi o a rendere il programma più comprensibile per altri sviluppatori. Anche se il codice può funzionare perfettamente senza di essi, i commenti aiutano a mantenerlo leggibile e organizzato, soprattutto nei progetti più complessi.

Scrivere commenti è una buona abitudine, sia per chi sta imparando sia per i programmatori più esperti. Con il tempo, sarà interessante riprendere i primi programmi e confrontarli con quelli più recenti. Per questo motivo, molti programmatori inseriscono all’inizio del file informazioni come la data di creazione e l’ultima modifica, utili per tenere traccia delle evoluzioni del codice.

Processing permette di scrivere commenti in due modi:

  • Commenti su una singola riga: Si inseriscono scrivendo // prima del testo.

  • Commenti su più righe: Si scrivono racchiudendo il testo tra /* e */.

Ecco alcuni esempi pratici in cui i commenti vengono utilizzati per spiegare il codice:

Esempio 1: Creazione di una finestra e disegno di un punto

1// Imposta la dimensione della finestra a 400x400 pixel
2size(400, 400);
3 
4// aumenta le dimensioni del tratto per rendere visibile il punto
5strokeWeight(10);
6 
7// Disegna un punto alle coordinate (50,50)
8point(50, 50);

Esempio 2: Disegnare una linea con colore personalizzato

1size(400, 400); // Imposta la dimensione della finestra
2 
3stroke(255, 0, 0); // Imposta il colore della linea su rosso
4strokeWeight(3); // Aumenta lo spessore della linea
5 
6// Disegna una linea dal punto (20,30) al punto (180,90)
7line(20, 30, 180, 90);

Esempio 3: Commenti su più righe

1/*
2Questo programma disegna un quadrato rosso al centro dello schermo.
3Data di creazione: 23 febbraio 2025
4Autore: Nome Cognome
5*/
6 
7// Imposta la dimensione della finestra
8size(400, 400);
9 
10// Imposta il colore di riempimento su rosso
11fill(255, 0, 0);
12 
13// Disegna un quadrato 100x100 al centro dello schermo
14rect(150, 150, 100, 100);

I commenti aiutano a rendere il codice più chiaro e comprensibile, sia per chi lo scrive sia per chi potrebbe leggerlo in futuro. Una buona pratica è sempre commentare il proprio codice, specialmente quando si lavora a progetti più complessi o si condivide il proprio lavoro con altri.

Corso di Processing – lezione 02

Introduzione a Processing

Quando si parla di programmazione, spesso si pensa a codice complesso, algoritmi matematici e righe di testo prive di immediatezza visiva. Processing nasce per cambiare questa prospettiva, offrendo un ambiente intuitivo e accessibile che permette di avvicinarsi alla programmazione attraverso la grafica e l’interattività.

Processing è un linguaggio di programmazione e un ambiente di sviluppo progettato per aiutare studenti, artisti e designer a creare immagini, animazioni e interazioni in modo semplice e immediato. Non è necessario essere programmatori esperti per iniziare: l’interfaccia è progettata per facilitare l’apprendimento, consentendo di ottenere risultati visivi fin dai primi tentativi.

Perché usare Processing?

La caratteristica distintiva di Processing è la sua immediatezza:

  • Permette di scrivere poche righe di codice e vedere subito il risultato grafico.
  • È pensato per chi lavora con la creatività e vuole esplorare il potenziale della programmazione senza dover affrontare subito complessità tecniche avanzate.
  • Supporta la creazione di disegni, animazioni e interazioni, rendendolo perfetto per il Creative Coding e l’arte digitale.
  • È un software open-source e gratuito, con una vasta comunità di sviluppatori e artisti che condividono codici ed esperienze.

Un linguaggio per tutti

Processing è stato creato con l’idea di semplificare l’approccio alla programmazione, mantenendo però una grande potenza espressiva. È basato su Java, ma con una sintassi molto più snella, pensata per chi è alle prime armi.

Grazie alla sua struttura, è ideale per:

  • Studenti che vogliono imparare la programmazione in modo pratico e visivo.
  • Designer e artisti che desiderano sperimentare con il codice.
  • Insegnanti che vogliono introdurre la programmazione nelle scuole con un approccio interattivo.

Come iniziare?

Per cominciare a usare Processing, è sufficiente:

  1. Scaricare il software dal sito ufficiale processing.org.

  2. Installarlo su Windows, macOS o Linux.

L’interfaccia di programmazione

L’interfaccia di Processing è essenziale e intuitiva, mantenendo nel tempo una struttura familiare per gli utenti. Nella parte superiore troviamo i pulsanti Run e Stop, fondamentali per eseguire e interrompere i nostri sketch – così vengono chiamati i programmi scritti in Processing.

L’area centrale, con sfondo bianco, è l’editor, lo spazio in cui scriviamo il codice. Qui possiamo digitare, modificare e organizzare le nostre istruzioni per dare vita a disegni, animazioni e interazioni.

Nella parte inferiore, con sfondo nero, si trova la console, uno strumento utile per individuare eventuali errori nel codice e ricevere messaggi di output. La console può essere sfruttata per debugging o per visualizzare informazioni utili sull’esecuzione del programma, aiutandoci a comprendere meglio il suo funzionamento.

Esplorare gli Esempi

Prima di iniziare a scrivere codice, è utile avere un’idea delle potenzialità offerte da Processing. Chi ha già installato l’IDE sul proprio computer può accedere a una raccolta di esempi predefiniti attraverso il menu File > Esempi. Qui si trovano diversi progetti suddivisi in categorie come Basics, Topics, Demos, Books, Libraries e Contributed Libraries, che permettono di scoprire le varie funzionalità del linguaggio.

Oltre a questi esempi, esistono numerosi progetti realizzati con Processing che possono essere fonte di ispirazione per chi si avvicina per la prima volta a questo strumento. Osservare ciò che è possibile creare con poche righe di codice può essere un ottimo punto di partenza per esplorare e sperimentare nuove idee.

Processing nella didattica e nell’arte

Processing non è solo un linguaggio di programmazione, ma un vero e proprio strumento educativo. Molte scuole e università lo utilizzano per insegnare la programmazione in modo più coinvolgente, trasformando il codice in qualcosa di concreto e tangibile.

Anche nel mondo dell’arte digitale, Processing è utilizzato per generare immagini, animazioni ed esperienze interattive. È una piattaforma che unisce logica e creatività, permettendo di esplorare il potenziale del codice in modi nuovi e stimolanti.

Se sei curioso di scoprire di più, ti invitiamo a provare i primi esercizi con Processing: potresti rimanere sorpreso da ciò che riuscirai a creare con poche righe di codice!

Risorse

Dalla prossima lezione inizieremo con la programmazione! 🙂

Corso di Processing – lezione 01

 

Programmazione, Creative Coding e Arte Digitale

Come insegnante, sono sempre alla ricerca di nuove forme di comunicazione che mi permettano di coinvolgere ed appassionare gli studenti. Unire programmazione e creatività mi ha sempre fornito ottimi risultati, rendendo più accessibile e stimolante l’apprendimento dell’informatica. È da tempo che volevo pubblicare i miei appunti sul Creative Coding e, pur non essendo un artista, sono sempre stato affascinato da questo approccio che trasforma il codice in uno strumento di espressione visiva e interattiva.

Era da tempo che desideravo strutturare meglio i miei appunti sull’uso di Processing, che ho utilizzato negli anni passati con gli studenti, ed ho deciso di sistemarli in un corso completo introduttivo all’uso di questo fantastico linguaggio di programmazione. Processing permette di realizzare progetti di Creative Computing non solo attraverso oggetti e animazioni software, ma anche mediante l’interazione con dispositivi elettronici come Arduino e Raspberry Pi.

La programmazione è spesso vista come un’attività puramente tecnica, relegata alla risoluzione di problemi e allo sviluppo di software funzionali. Tuttavia, negli ultimi anni, ha assunto un ruolo sempre più centrale nell’ambito artistico e creativo, dando vita a nuove forme espressive. Il Creative Coding rappresenta questa fusione tra logica e immaginazione, utilizzando il codice per creare opere digitali, installazioni interattive, animazioni e visualizzazioni di dati.

Oggi sempre più artisti scelgono di integrare la programmazione nel proprio processo creativo, utilizzandola come strumento per esprimersi in modo innovativo e interattivo. Designer, musicisti, videomaker e performer usano il codice per sviluppare esperienze immersive, trasformando lo schermo in una tela dinamica e interattiva. Questo approccio non solo amplia le possibilità artistiche, ma offre anche un nuovo modo di insegnare la programmazione, rendendola accessibile e coinvolgente per chiunque, indipendentemente dal background tecnico.

Uno degli ostacoli principali per chi si avvicina al Creative Coding è la difficoltà di utilizzare strumenti di sviluppo pensati per programmatori. Molti software, pur potenti, risultano poco intuitivi per chi proviene da un’educazione artistica o visiva. Processing, ad esempio, è stato creato proprio con l’intento di abbattere questa barriera, fornendo un ambiente semplice ed efficace per imparare a programmare attraverso la grafica e l’interattività.

Perché ha senso utilizzare Processing a scuola?

Utilizzare Processing in ambito scolastico è utile per diversi motivi:

  • Apprendimento visuale e immediato: il codice produce effetti grafici in tempo reale, rendendo l’apprendimento coinvolgente anche per studenti che non hanno familiarità con la programmazione.
  • Accessibilità e semplicità: è open source, gratuito e con un’interfaccia snella, adatta anche ai principianti assoluti.
  • Creatività e pensiero computazionale: favorisce la creatività, ma allo stesso tempo sviluppa il ragionamento logico e la capacità di problem solving.
  • Interdisciplinarità: si presta a progetti che uniscono arte, musica, matematica, scienze, tecnologia e storytelling.
  • Interazione con il mondo reale: grazie alle librerie disponibili e alla compatibilità con Arduino, Raspberry Pi e sensori, consente di realizzare installazioni interattive, robot e prototipi fisici.
  • Comunità attiva e risorse online: migliaia di esempi, librerie e progetti condivisi semplificano l’apprendimento e l’ispirazione.

Se desiderate approfondire ulteriormente il concetto di Creative Coding e la sua applicazione nell’arte digitale, vi lascio un elenco di video che esplorano questo campo che a me affascina parecchio:

Creative Coding with Processing: Random Compositions
Video che mostra come generare composizioni casuali di forme geometriche utilizzando Processing.

Creative Coding with p5.js: Building a datastream-visual
Video che illustra la creazione di una visualizzazione che simula un flusso di dati utilizzando p5.js

Creative Coding for Beginners – Full Course!
Un corso completo per principianti che introduce al creative coding con Processing.

Processing Tutorials | Generative Art
Una playlist di tutorial che copre vari aspetti dell’arte generativa con Processing.

Introduzione al Creative Coding con Daniel Shiffman
Daniel Shiffman, uno dei più noti divulgatori del Creative Coding, offre una serie di tutorial che guidano i principianti attraverso i concetti fondamentali della programmazione applicata all’arte.

Cosa troverete nel corso

  • Spiegazioni semplici e progressive;

  • esempi commentati e modificabili;

  • progetti creativi da realizzare passo passo;

  • collegamenti con Arduino e dispositivi esterni;

  • suggerimenti per l’uso didattico in classe.

… e se così non sarà scusatemi, inoltre come sapete è sempre tutto open tutto free (per uso didattico).

La pubblicazione delle lezioni non seguirà una cadenza precisa, ma conto di proporne da due a tre lezioni ogni settimana, dipenderà dagli impegni lavorativi. Procederò man mano che riorganizzo gli appunti: per la versione online saranno sintetizzati, mentre in laboratorio le attività sono più estese e articolate. In ogni caso, il materiale pubblicato rispecchierà fedelmente il percorso svolto in presenza.

Imposterò una specifica sezione nella colonna destra di questo sito in modo che possiate ritrovare velocemente tutte le lezioni.

Buon Coding a tutti 🙂

Laboratorio di inclusione – dall’Idea alla realtà: costruire una Clessidra ad Acqua

Nello scorso mese ho avuto il piacere di partecipare alla gestione del corso

Percorso laboratoriale di ricerca e sperimentazione di strategie inclusive e strumenti digitali nella didattica della matematica finalizzata all’inclusione degli allievi con disabilità intellettiva”,

rivolto a docenti di matematica e di sostegno di ogni ordine e grado.

L’attività si è svolta all’interno del Laboratorio Territoriale per l’Occupabilità (LTO) di Moncalieri, uno spazio che, grazie alla disponibilità di strumenti per la prototipazione rapida, ha reso possibile coinvolgere attivamente i partecipanti nella progettazione e costruzione di ausili didattici pensati per rendere la matematica e la fisica più accessibili agli studenti con bisogni educativi speciali.

I vari gruppi di lavoro hanno progettato e realizzato diversi ausili didattici, ciascuno pensato per rispondere a esigenze concrete. Durante tutto il periodo del corso, gli strumenti sviluppati sono stati testati direttamente con gli studenti, permettendo di apportare modifiche e miglioramenti che hanno condotto alla realizzazione dei prodotti finali.

In particolare, il mio gruppo si è concentrato su due progetti:

  • Il “derivatografo”, uno strumento ideato per facilitare lo studio delle derivate rivolto agli studenti della scuola secondaria di secondo grado;
  • La clessidra ad acqua, pensata per supportare l’apprendimento della misurazione del tempo negli alunni della scuola primaria e della secondaria di primo grado.

La clessidra ad acqua nasce da un’esigenza reale: trovare un modo concreto e visivo per insegnare la misurazione del tempo a studenti con necessità specifiche.

Su richiesta dei colleghi, ho realizzato un primo prototipo di kit da distribuire alle scuole. Grazie ai feedback raccolti durante l’utilizzo, il kit è stato progressivamente perfezionato.
Insieme allo strumento, ho inoltre sviluppato una serie di schede operative da proporre agli studenti, per facilitare l’attività didattica e guidare il lavoro in classe.

La validità di questo progetto è stata ulteriormente confermata durante un recente corso sul Tinkering, in cui la costruzione della clessidra e le attività correlate hanno generato nuovi spunti e suggerimenti, aprendo la strada a futuri sviluppi e alla creazione di ulteriori ausili didattici.

I progetti sviluppati durante l’attività di formazione saranno presentati il prossimo 16 maggio in occasione della conferenza della Rete MICHI, che si terrà presso l’ITIS Pininfarina di Moncalieri.

Cos’è la Rete MICHI?
Il Protocollo d’intesa “Michi – Insieme per l’Inclusione” nasce per valorizzare e sostenere le realtà scolastiche, istituzionali e territoriali che fanno dell’inclusione un valore fondamentale, promuovendo sinergie efficaci e la diffusione di buone pratiche.

Buon lavoro 🙂