Archivi tag: coding

Corso di Processing – lezione 05

Le Primitive Grafiche 2D in Processing

Processing offre diverse funzioni per disegnare forme geometriche di base in uno spazio bidimensionale. Vediamo come utilizzare alcune delle principali primitive, modificando dimensioni e spessori per migliorarne la visibilità.

Punto – point()

La funzione point() disegna un singolo pixel sullo schermo. In 2D, accetta due parametri: la coordinata x (orizzontale) e la coordinata y (verticale).

1size(400, 400);  // Imposta la finestra a 400x400 pixel
2strokeWeight(5); // Aumenta la dimensione del punto
3point(200, 200); // Disegna un punto al centro della finestra

Il punto è stato disegnato alle coordinate (200, 200). Aumentando lo spessore con strokeWeight(5), sarà più visibile.

Variante

Possiamo disegnare più punti per creare una disposizione geometrica precisa.

1size(400, 400);
2strokeWeight(6);
3point(100, 100);
4point(300, 100);
5point(100, 300);
6point(300, 300);

Questo codice posiziona quattro punti agli angoli di un quadrato immaginario.

Linea – line()

Per disegnare una linea, dobbiamo specificare le coordinate (x1, y1) del punto di partenza e (x2, y2) del punto di arrivo.

1size(400, 400);
2strokeWeight(4); // Imposta uno spessore maggiore
3line(50, 100, 350, 300); // Disegna una linea diagonale

Variante

Disegniamo una “X” con due linee incrociate perpendicolari tra loro.

1size(400, 400);
2strokeWeight(3);
3line(50, 50, 350, 350);
4line(350, 50, 50, 350);

Continua a leggere

Lezione 4 – Corso di Elettronica Creativa con Arduino Sensor Kit

Il potenziometro

I potenziometri sono tra i resistori variabili più diffusi la cui legge di variazione della resistenza dipende da una grandezza meccanica (generalmente la rotazione di un albero, in qualche caso lo spostamento rettilineo di un cursore).

I resistori variabili sono schematicamente indicati con uno dei due simboli riportati di seguito:

Un resistore variabile è caratterizzato dal suo valore ohmico esistente tra i due terminali fissi; esso può essere utilizzato all’interno di un circuito in due modi come reostato, utilizzato come regolatore di corrente o come potenziometro utilizzato come regolatore di tensione, in questa lezione ne vedremo l’utilizzo come potenziometro.

Non tutti i potenziometri sono uguali, nei potenziometri “logaritmici” (usati negli amplificatori audio) la variazione di resistenza segue una curva esponenziale per meglio adattarsi alla percezione umana del volume.

Obiettivi di questa lezione

  1. Comprendere il funzionamento del potenziometro come partitore di tensione variabile.
  2. Collegare correttamente il modulo Potentiometer Grove allo shield Arduino Sensor Kit.
  3. Misurare la posizione del cursore con analogRead() e convertire in un valore all’interno di un range fissato.
  4. Utilizzare l’istruzione di controllo di flusso IF-THEN-ELSE.

Teoria di base

  • Il microcontrollore ATmega328 è dotato si 6 ADC (Analog to Digital Converter – Convertitori Analogici Digitali)
  • Gli ingressi analogici leggono valori compresi tra 0 e 5 volt
  • La risoluzione dei valori convertiti in digitale è di 10 bit (1024 valori)
  • Ogni bit equivale a valori di tensione pari a 5/1024 = 4,8 mV che è la più piccola misura di tensione che si può rilevare

Le grandezze fisiche del mondo reale sono di tipo analogico ed Arduino dispone di una serie di ingressi adibiti alla lettura di grandezze di tipo analogico, che come dettagliato nella lezione 1, vengono poi convertire dal microcontrollore in grandezze di tipo digitale.

Le variazioni di grandezze di tipo analogico vengono lette da Arduino come variazioni di tensione sugli ingressi analogici.

Un sensore generico quindi, connesso sui pin analogici fornirà una tensione che sarà funzione della grandezza fisica misurata.

Per poter simulare la variazione di tensione e quindi studiare il comportamento di un generico sensore e capire come leggere valori analogici, utilizzeremo in questa fase un potenziometro o un trimmer, componente elettronico che consente di variare la tensione presente ai suoi capi.

Il Grove Rotary Potentiometer

Continua a leggere

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.

Lezione 3 – Corso di Elettronica Creativa con Arduino Sensor Kit

A distanza di qualche mese riprendo le mie brevi lezioni sull’uso dell’Arduino Sensor Kit, mi dispiace non stato celere nel produrre altre lezioni, ma gli impegni lavorativi mi hanno parecchio coinvolto.

Come già avevo avuto modo di segnalare nelle precedenti lezioni, per la realizzazione di queste guide prendo come riferimento l’indice presente sul sito Arduino e su quella traccia realizzo lezioni un po’ più approfondite che mi permettono poi di strutturare una lezione di laboratorio di circa due ore di attività.

Giusto per non far “arrabbiare” nessuno — mi riferisco a chi potrebbe critica le modalità con cui vengono presentati alcuni argomenti di elettronica — ricordo che queste lezioni sono dedicate a chi non ha mai affrontato lo studio dell’elettronica (neofiti o studenti della secondaria di primo grado e studenti dei primi due anni della scuola superiore), pertanto alcuni concetti richiedono chiarimenti e inevitabili semplificazioni, che consentiranno di riprendere gli stessi argomenti con maggiore facilità quando le competenze teoriche saranno più solide.

Gli obiettivi di questa terza lezione sono:

  • comprendere come funziona un pulsante a livello elettrico e meccanico.
  • sviluppare sketch via via più complessi:
    • accensione di un LED alla pressione del pulsante;
    • Indicazione dello stato del LED sulla SerialMonitor;
    • cicli di blink avviati da pulsante;
    • cicli di blink avviati da pulsante e segnalazione del numero di cicli.

Per lo svolgimento di questa esercitazione abbiamo necessità solamente dell’Arduino Sensor Kit ed utilizzeremo:

Il pulsante:

Il LED:

Continua a leggere

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.