Sei sulla pagina 1di 31

Principi di

Physical Computing
per designers Processing Programming for Artists and Designers

Todo
Basi di Processing Comunicazione tra Processing e Arduino Esempi di applicazioni Revisione progetto

10/25/11

Principi di Physical Computing per designers

Processing che ???


Processing un linguaggio di programmazione ed un Integrated Development Environment (IDE) open source, nato per la community di design con lo scopo di insegnare le basi di programmazione in maniera visuale, e per aiutare nella creazione di oggetti ed ambienti interattivi.
10/25/11 Principi di Physical Computing per designers 3

Processing
Il linguaggio di programmazione molto simile a JAVA e consente di sviluppare diverse applicazioni come giochi, animazioni e contenuti interattivi. distribuito sotto licenza Open Source ed supportato dai sistemi operativi GNU/Linux, Mac OS X e Windows. Lo si pu scaricare da: http://processing.org/

10/25/11

Principi di Physical Computing per designers

Processing

Lambiente di sviluppo molto simile ad Arduino, cos come il linguaggio di programmazione utilizzato, molto semplice, intuitivo e immediato.
10/25/11 Principi di Physical Computing per designers 3

Esempio 00
La struttura del codice molto simile ad Arduino: //Dichiarazione Variabili //in questa parte si dichiarano le variabili che //verranno poi richiamate allinterno del //programma. void setup() { //allinterno del setup deniamo le propriet //dellapplicazione: //dimensione finestra //frame-rate } void draw() { //allinterno di draw inseriamo ci che vogliamo //disegnare. }

10/25/11

Principi di Physical Computing per designers

ESEMPIO 00: Creazione Finestra


Aggiungiamo nel setup: size (640,480); Questa funzione imposta la gandezza della finestra del programma a 640x480 Aggiungendo: smooth(); background (255,255,255); Attiviamo il filtro anti-aliasing (si vede meglio) e impostiamo lo sfondo di colorebianco.
10/25/11 Principi di Physical Computing per designers 3

Esempio 01
rect(x, y, width, height); Disegna rettangolo con langolo in alto a sinistra in posizione x,y e di dimensione width e height fill (R,G,B,alpha); Colore interno al rettangolo stroke(R,G,B,alpha); Colore del contorno strokeWeight(width); Spessore del bordo noStroke(); Nessun bordo noFill(); Nessuno colore di riempimento

10/25/11

Principi di Physical Computing per designers

Esempio 1
Proviamo con altre forme: ellipse(x, y, width, height); line(x1, y1, x2, y2);

triangle(x1, y1, x2, y2, x3, y3);


10/25/11 Principi di Physical Computing per designers 3

Esercizio
Disegnamo ora in una finestra di 400x400 quattro quadrati dello stesso colore (blue) su sfondo bianco senza bordo.

10/25/11

Principi di Physical Computing per designers

Esempio 2
mouseX e mouseY: sono variabili che contengono la posizione del mouse. pmouseX, pmouseY: posizione al frame precedente. Attraverso queste quattro variabili possiamo identificare la posizione del mouse. Il cerchio segue il mouse. Se inseriamo background nella funzione draw, la finestra viene continuamente cancellata. frameRate(12); imposta la velocit a 12 frame al secondo, rallenta quindi la visualizzazione dei contenuti.
10/25/11 Principi di Physical Computing per designers 3

Esempio 3
Esistono quattro funzioni che vengono eseguite quando una delle azioni del mouse si verifica; sono utilizzate come la funzione draw e setup.
mouseClicked(); Mouse premuto

e rilasciato
mousePressed(); Mouse premuto

(posso controllare quale tasto tramite mouseButton) mouseDragged(); Un tasto premuto ed il mouse mosso mouseMoved(); Il mouse mosso mouseRelease(); Il tasto precedentemente premuto rilasciato
10/25/11 Principi di Physical Computing per designers 3

Esempio 4
key: contiene lultimo tasto premuto keyCode: se viene premuto un tasto speciale (freccette, alt, ctrl e shift) la variabile key avr il valore CODED. Keycode conterr invece il tasto premuto (UP,DOWN) Come per il mouse esistono funzioni speciali per controllare quando un tasto viene premuto:
keyPressed() Un tasto premuto keyReleased() Un tasto

premuto rilasciato
10/25/11 Principi di Physical Computing per designers 3

Esercizio 2
A seconda di che tasto viene premuto la forma cambia colore: b = blue; n = nero; r = rosso; g = giallo; v = verde; w = bianco. Se premo le frecce la forma si sposta a seconda della direzione premuta.

10/25/11

Principi di Physical Computing per designers

Soluzione

10/25/11

Principi di Physical Computing per designers

Le immagini
Dichiarazione della variabile immagine; Carica limmagine (.gif,.jpg,.tga,.png) in memoria Visualizza limmagine caricata in a nella posizione posX, posY con dimensione dimX e dimY. Se mettiamo un indirizzo web al posto del nome del file immagine, processing caricher limmagine presente sul web. Il caricamento delle immagini meglio effettuarlo nella funzione setup per evitare rallentamenti nel programma.

16

10/25/11

Principi di Physical Computing per designers

Il testo
Generiamo un font attraveso il tool apposito: Men Tools Create Font

17

10/25/11

Principi di Physical Computing per designers

18 Caricare il font Settare il font da utilizzare e la dimensione

Settare il colore della scritta

Scrivere

10/25/11

Principi di Physical Computing per designers

La musica
Importiamo libreria esterna Dichiariamo un oggetto per laudio e uno per caricare lmp3 Inizializziamo loggetto minim e carichiamo il file mp3. Inizia lesecuzione del file mp3 Chiude la libreria e ferma il suono alla chiusura del programma. Va sempre messo per evitare errori. La libreria pu inoltre essere utilizzata anche per registrare e modificare in real-time un segnale audio.

19

10/25/11

Principi di Physical Computing per designers

20

KITT
Example6.2

In questo esempio la libreria audio viene utilizzata per eseguire un file mp3 con voce, mentre nel frattempo viene disegnata una linea che segue lampiezza della forma donda sonora dellmp3.

10/25/11

Principi di Physical Computing per designers

21

Soluzione
Processing pu essere anche usato per generare PDF, DXF, visualizzare webcam, visualizzare elementi 3d (file obj, 3ds). Sul sito di processing e direttamente nellIDE sono a disposizione molti esempi e tutorial per lutilizzo di processing. Una lista delle funzioni fino a qui utilizzate pi molte altre pu essere trovata allindirizzo:

http://processing.org/reference/
OpenProcessing mette ha disposizione spazio online per lo scambio di sketch processing. Il sito contiene molti sketch funzionanti dai quali potete prendere spunto per realizzare i vostri software.

http://www.openprocessing.org/

10/25/11

Principi di Physical Computing per designers

X Trasmettere dati:

Processing - >Arduino

22

Controlla se sono presenti dati inviati dal PC

if (Serial.read()==k) Controlla se il dato ricevuto corrisponde al carattere che desidero, in tal caso cambio lo stato del led.

10/25/11

Principi di Physical Computing per designers

Processing - >Arduino
Tutto quello che Arduino scrive deve essere compreso da Processing. Per tale ragione la velocit della seriale e il formato dei dati trasmessi e ricevuti dovr essere il medesimo. Processing usa una libreria esterna, occorre importarla con il comando: import processing.serial.*; Occorre poi creare loggetto seriale con il comando: Serial myPort; Nella funzione void Setup() di processing occorre quindi inizializzare la seriale con velocit e nome porta corretti. myPort = new Serial(this, COMN, velocit);

23

COMN la porta a cui collegato Arduino


10/25/11 Principi di Physical Computing per designers 3

Processing - >Arduino
La finestra di processing si presenter tutta nera ma alla pressione del tasto sinistro del mouse il led di Arduino si accende.

24

10/25/11

Principi di Physical Computing per designers

Arduino -> Processing


Costruiamo un circuito che ci consenta attraverso un trimmer, di leggere un valore analogico ed inviarlo via seriale. Serial.println(valore); Scrive sulla seriale un dato, nel nostro caso il dato letto dal pin analogico 0 (analogRead(analogPin)) e successivamente invia il carattere a capo. In questo modo, quando andr a leggere con arduino sapr che dopo ogni dato mi aspetto il carattere a capo, sar quindi in grado di leggere i miei dati.
10/25/11 Principi di Physical Computing per designers

25

La funzione draw() vuota.

Arduino -> Processing

26

Tutte le operazioni sono eseguite dalla funzione serialEvent(Serial myPort); Questa funzione viene chiamata tutte le volte che la seriale riceve un dato. Nella funzione il dato viene letto fino a che non viene ricevuto il carattere a capo \n Il dato letto (tra 0 e 1024) viene converti tra 0 e laltezza della finestra per essere disegnato. Successivamente si disegna una linea che va dal valore precedente a quello appena letto. Lultima parte serve per resettare il grafico quando si raggiunge il fondo. 10/25/11 Principi di Physical Computing per designers

27

Arduino -> Processing

Andando a variare la resistenza variabile collegata ad Arduino, il valore letto viene riportato come grafico su processing.

10/25/11

Principi di Physical Computing per designers

28

ESEMpi online Matteo Loglio

10/25/11

Principi di Physical Computing per designers

29

ESEMpi online Facebook 3d

10/25/11

Principi di Physical Computing per designers

30

ESEMpi online arduino processing js

10/25/11

Principi di Physical Computing per designers

ESEMpi online Arduino Processing e Kinect

31

10/25/11

Principi di Physical Computing per designers