Archivi autore: admin

Corso di Processing – lezione 06

Lascia una risposta

Gestione del colore in Processing ed utilizzo dei commenti

Il colore è un elemento essenziale nella grafica digitale. In Processing, la gestione dei colori avviene tramite il modello RGB (Red, Green, Blue), in cui ogni colore è definito dalla combinazione di tre valori compresi tra 0 e 255. Esploriamo ora come applicare il colore agli oggetti grafici nei nostri sketch.

1. Il Modello RGB

I colori sugli schermi dei computer vengono generati combinando le tre componenti principali:

  • Rosso (Red)
  • Verde (Green)
  • Blu (Blue)

Ciascuna componente può assumere valori da 0 (assenza di colore) a 255 (massima intensità). Per esempio:

size(400, 400); // Imposta la finestra
background(0, 0, 255); // Sfondo blu

Alcuni esempi di colori nel modello RGB:

  • Nero → fill(0, 0, 0);
  • Bianco → fill(255, 255, 255);
  • Rosso → fill(255, 0, 0);
  • Verde → fill(0, 255, 0);
  • Blu → fill(0, 0, 255);
  • Giallo → fill(255, 255, 0);
  • Ciano → fill(0, 255, 255);
  • Magenta → fill(255, 0, 255);

Selezione del Colore in Processing

Quando si lavora con i colori in Processing, può sorgere una domanda fondamentale: come faccio a conoscere i valori RGB di un colore specifico?

Per facilitare questa operazione, Processing mette a disposizione un Color Selector, uno strumento intuitivo che permette di scegliere facilmente un colore e ottenere i relativi valori numerici.

Come accedere al Color Selector

È possibile aprire il selettore di colori direttamente dall’ambiente di sviluppo di Processing andando su:
Menu → Strumenti → Selezionatore dei colori…

Una volta aperta la finestra del selettore, si può esplorare la gamma di colori disponibili e ottenere i relativi valori RGB(Rosso, Verde, Blu). Inoltre, lo strumento fornisce informazioni anche sui valori:

  • HSB (Hue, Saturation, Brightness)
  • Esadecimale (Hex), utile per il web design e altre applicazioni grafiche.

2. Applicare il colore agli oggetti

Per impostare il colore di riempimento di una figura, utilizziamo la funzione fill(), mentre stroke() permette di cambiare il colore del contorno.

Esempio: disegnare un cerchio colorato

size(400, 400);
background(200); // Sfondo grigio
fill(255, 0, 0); // Colore rosso
stroke(0, 0, 0); // Contorno nero
ellipse(200, 200, 150, 150);

Esercizio: Prova a cambiare il colore del cerchio variando i valori RGB nella funzione fill().
Continua a leggere→

Articoli correlati:

  1. Corso di Processing – lezione 03
  2. Corso di Processing – lezione 04
  3. Corso di Processing – lezione 05
  4. Corso di Processing – lezione 02
  5. Corso di Processing – lezione 01

Nuova sezione dedicata a Processing!

2 Repliche

Ho appena pubblicato una pagina che raccoglie tutte le mie lezioni, esercizi e materiali su Processing in un unico posto comodo da consultare.

Trovate il link diretto nel banner “Processing”, ben visibile nella colonna destra del sito: cliccate e accedete alla raccolta completa, in continuo aggiornamento.

Se state seguendo il corso o cercate ispirazione per le vostre attività in classe, date uno sguardo e fatemi sapere cosa ne pensate ed ovviamente se avete suggerimenti nella realizzazione di lezioni non esitate a segnalarmeli.

Grazie

Articoli correlati:

  1. Corso in presenza: Coding a scuola con BBC micro:bit
  2. Game Programming Course – Controller con scatola di scarpe
  3. Corso di Processing – lezione 03
  4. Corso di Processing – lezione 04
  5. Corso di Processing – lezione 05

Lezione 5 – Corso di Elettronica Creativa con Arduino Sensor Kit

Lascia una risposta

Il Buzzer

Quando progettiamo un impianto di automazione abbiamo quasi sempre bisogno di avvisare l’utente di uno stato o di un’anomalia. Oltre alle classiche spie luminose, un modo immediato per “farsi sentire” è impiegare un buzzer, noto colloquialmente come cicalino. Questo piccolo attuatore trasforma un segnale elettrico in un impulso sonoro che può variare da un semplice beep continuo a brevi toni di diversa frequenza.

Tipologie principali di buzzer

Attivo
Contiene un oscillatore interno che genera automaticamente la frequenza fissa non appena viene alimentato.
Con Arduino basta portare il pin di alimentazione a livello HIGH/LOW per abilitare o silenziare il suono.

Passivo
Non possiede oscillatore: necessita di un’onda quadra esterna per farlo vibrare.
Arduino può pilotarlo con PWM (analogWrite) o con la funzione tone() per scegliere la frequenza desiderata.

Tecnologie costruttive

I buzzer – siano essi attivi o passivi – possono realizzarsi con due differenti principi fisici:

  • Magnetici
    una bobina varia il campo magnetico e fa oscillare una sottile membrana metallica.
  • Piezoelettrici
    un disco di materiale piezo si deforma quando riceve tensione, generando la vibrazione acustica.

La scelta fra le due tecnologie dipende principalmente da:

  1. Segnale di pilotaggio disponibile (continua, PWM, ampiezza)
  2. Pressione sonora richiesta (volume)
  3. Spazio e forma concessi dal progetto

Come funziona un buzzer attivo

All’interno è presente un piccolo circuito oscillatore che, alimentato in continua, fa variare il campo magnetico di una bobina. La bobina è rigidamente accoppiata a una membrana, la quale vibra alla frequenza impostata dal circuito e produce un suono costante. In pratica: lo accendiamo – suona; lo spegniamo – tace.

Dati tecnici

  • Tensione nominale: 6V DC
  • Tensione di esercizio: 4-8V DC
  • Corrente nominale: < 30mA
  • Tipo di suono: segnale acustico continuo
  • Frequenza di risonanza: ~2300 Hz

Come funziona un buzzer passivo

Il buzzer passivo è sprovvisto di oscillatore e si comporta come un piccolo altoparlante: emette il tono dell’esatta frequenza del segnale che riceve. Con Arduino possiamo quindi:

  • generare una frequenza fissa con tone(pin, freq);
  • modulare il duty-cycle tramite analogWrite() per variare il volume;
  • creare melodie cambiando velocemente frequenza e durata.

Dati tecnici

  • Tensione nominale: 5V DC
  • Tensione di esercizio: 4-8V DC
  • Corrente nominale massima: ≤ 32 mA
  • Min. Uscita audio a 10 cm: 85 dB
  • Temperatura di esercizio: da 20°C a 45°C

Poiché vogliamo utilizzare il buzzer dell’Arduino Sensor Kit a questo punto possiamo chiederci:

“ma di che tipo è il buzzer di questo kit?”

E’ un buzzer di tipo passivo.

Nelle spiegazioni abbiamo parlato di PWM, di seguito alcuni dettagli, ma se volete approfondire consultate le mie slide: Alfabeto Arduino – Lezione 2 e l’approfondimento su questo sito: Arduino – Approfondimenti sulla modulazione di larghezza di impulso (PWM).

Per uno studio ancora più approfondito: Secrets of Arduino PWM.

Che cos’è il PWM

La modulazione di larghezza d’impulso, o PWM (Pulse Width Modulation), è una tecnica che permette di ottenere effetti analogici usando mezzi digitali. Il controllo digitale genera un’onda quadra, un segnale che passa continuamente da acceso (ON) a spento (OFF). Variando la frazione di tempo in cui il segnale rimane acceso (alto) rispetto a quella in cui rimane spento (basso), è possibile simulare tensioni intermedie tra lo 0 V (spento) e i 5 V (acceso al 100 %). Il periodo in cui il segnale resta acceso si chiama larghezza dell’impulso. Modificando (ovvero modulando) questa larghezza si ottengono valori analogici diversi. Se la commutazione ON/OFF avviene abbastanza velocemente, il segnale risulta percepito come una tensione “media” continua compresa tra 0 V e 5 V.
Questo segnale PWM può dunque essere usato per controllare con facilità un buzzer passivo.
Per generare segnali PWM con Arduino si utilizza la funzione analogWrite(), mentre digitalWrite() produce solo segnali in corrente continua (DC).
Sulla tua scheda ci sono sei pin digitali contrassegnati dal simbolo “~” (tilde), che indica la capacità di gestire un segnale PWM: 3, 5, 6, 9, 10, 11. Questi sono chiamati pin PWM.

Collegamenti

Come abbiamo detto precedentemente Il buzzer del kit è passivo: non produce autonomamente il tono, ma vibra quando riceve un’onda quadra. Con analogWrite() inviate un’onda PWM; variando il duty-cycle (0-255) variate il volume.

Esempio 1:  emissione di un beep

/* Prof. Maffucci Michele
   beep con il buzzer
   14.05.25
*/

const int BuzzerPin = 5;       // D5 ha anche il simbolo ~ = PWM

void setup() {
  pinMode(BuzzerPin, OUTPUT);  // imposta il pin come uscita
}

void loop() {
  analogWrite(BuzzerPin, 128); // 50 % di duty-cycle ≈ volume medio
  delay(1000);                 // suona per 1 s
  analogWrite(BuzzerPin, 0);   // silenzio
  delay(1000);                 // pausa di 1 s
}

Funzionamento del codice

  • pinMode()
    imposta il pin in uscita, così può fornire tensione
  • analogWrite(pin, val)
    genera un’onda quadra a ~490 Hz sul pin; val è il duty-cycle (0 = 0 %, 255 = 100 %)
  • delay(ms)
    pausa del programma – qui determina per quanto tempo il buzzer resta attivo/inattivo

Continua a leggere→

Articoli correlati:

  1. Lezione 4 – Corso di Elettronica Creativa con Arduino Sensor Kit
  2. Lezione 1 – Corso di Elettronica Creativa con Arduino Sensor Kit
  3. Lezione 2 – Corso di Elettronica Creativa con Arduino Sensor Kit
  4. Lezione 3 – Corso di Elettronica Creativa con Arduino Sensor Kit
  5. Controlliamo DotBot con Arduino

Corso di Processing – lezione 05

Lascia una risposta

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).

size(400, 400);  // Imposta la finestra a 400x400 pixel
strokeWeight(5); // Aumenta la dimensione del punto
point(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.

size(400, 400);
strokeWeight(6);
point(100, 100);
point(300, 100);
point(100, 300);
point(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.

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

Variante

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

size(400, 400);
strokeWeight(3);
line(50, 50, 350, 350);
line(350, 50, 50, 350);

Continua a leggere→

Articoli correlati:

  1. Corso di Processing – lezione 03
  2. Corso di Processing – lezione 04
  3. Corso di Processing – lezione 02
  4. Corso di Processing – lezione 01
  5. Video di presentazione del corso: Realizzare laboratori green con il Making e il Coding

Lezione 4 – Corso di Elettronica Creativa con Arduino Sensor Kit

Lascia una risposta

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→

Articoli correlati:

  1. Lezione 2 – Corso di Elettronica Creativa con Arduino Sensor Kit
  2. Lezione 3 – Corso di Elettronica Creativa con Arduino Sensor Kit
  3. Lezione 1 – Corso di Elettronica Creativa con Arduino Sensor Kit
  4. EduRobot – ASL (Alternanza Scuola Lavoro) – Manuale di costruzione – 1/3
  5. Un base robotica molto semplice: EduRobot 4WD