La mano al computer
Alla fine del corso ogni studente avrà scritto da solo un piccolo gioco che si comanda con la mano davanti alla webcam: niente mouse, niente tastiera.
Per arrivarci bastano il C della scuola e un browser. Il riconoscimento della mano (trovare i 21 punti delle dita nell’immagine) lo fa una libreria già pronta; a noi resta la parte che si programma con if, for e un po’ di geometria.
Le lezioni
Ogni lezione comincia dicendo cosa avrai sullo schermo alla fine. Se alla fine della lezione lo vedi, la lezione è riuscita.
| # | Lezione | Cosa ottieni alla fine | Tempo |
|---|---|---|---|
| 1 | I punti e le ossa della mano | La tua webcam sullo schermo, con la mano disegnata sopra: 21 pallini verdi uniti da linee bianche | 60 min |
| 2 | Quante dita? (in preparazione) | Un numero grande che dice quante dita stai alzando, da 0 a 5 | 60–90 min |
| 3 | Il gesto (in preparazione) | Una scritta che riconosce il gesto: 👍 pollice su, ✊ pugno, ✋ mano aperta | 60–90 min |
| 4 | Il bersaglio (in preparazione) | Un gioco: tocchi con l’indice i cerchi che compaiono, con punteggio e tempo | 90 min |
| 5 | Sasso, carta, forbici (facoltativa) | Una partita contro il computer, giocata con la mano | 90 min |
Il minimo sono le lezioni 1–3, circa 4 ore. Il corso completo, fino al gioco della lezione 4, è di circa 5 ore e mezza.
Cosa serve
- Un computer con webcam (va bene anche una webcam USB) e il browser Chrome o Edge.
- Internet: si lavora nell’editor online di p5.js, senza installare niente.
- Sapere cos’è una variabile, un
if, un ciclofore un array. Tutto il resto lo spieghiamo.
Come si lavora
Si scrive il codice nell’editor online di p5.js: a sinistra il codice, a destra il risultato. Si preme ▶ e il programma parte.
Gli strumenti sono due librerie:
- p5.js: per disegnare sullo schermo (cerchi, testo, l’immagine della webcam);
- ml5.js: per riconoscere la mano. Dentro c’è un modello di intelligenza artificiale di Google che, data un’immagine, trova i 21 punti della mano.
Il riconoscimento avviene dentro il browser. L’immagine della webcam non viene inviata a nessun server; dalla rete si scarica soltanto il modello, una volta, all’inizio.
Per il docente: prova il laboratorio prima della lezione 1
Cinque minuti su un computer del laboratorio evitano la lezione persa:
- Apri https://mano.giuseppebosi.com/onda/ e premi «Accendi la camera».
- Se il browser chiede il permesso per la webcam, concedilo.
- Deve comparire la tua immagine. Metti le mani davanti: devono apparire i punti sulle dita.
| Cosa succede | Cosa vuol dire |
|---|---|
| Immagine e punti, fluidi | Il laboratorio è pronto |
| Immagine sì, ma molto a scatti | I PC sono lenti: funzionerà, ma conviene lavorare a coppie sui PC migliori |
| «Camera non trovata» | Il PC non ha webcam: serve una webcam USB |
| La webcam è bloccata | Il browser o la rete della scuola la vietano: va sentito il tecnico |
| La pagina non si apre | La rete della scuola filtra il sito: va sentito il tecnico |