Introduzione Questa introduzione è basata sul tutorial di Daniel Shiffman . Processing è un linguaggio ed un ambiente di sviluppo orientato all' interaction design . Nel corso Elaborazione di Media in Processing, Processing è uno degli strumenti principali utilizzati per introdurre elementi di elaborazione di suoni e immagini. Processing è una estensione di Java che supporta molte delle strutture Java con una sintassi semplificata. Processing può essere utilizzato in tre: Modi di Programmazione Basic Sequenza di comandi per il disegno di primitive grafiche -- applet senza naso


	      size(256,256);
	      background(0);
	      stroke(255);
	      ellipseMode(CORNER);
	      ellipse(72,100,110,130);
	      triangle(88,100,168,100,128,50);
	      stroke(140);
	      strokeWeight(4);
	      line(96,150,112,150);
	      line(150,150,166,150);
	      line(120,200,136,200);

Intermediate Programmazione procedurale -- applet con naso


	    void setup() {
	      size(256,256);
	      background(0);
	    }
  
	    void draw() {
	      stroke(255);
	      strokeWeight(1);
	      ellipseMode(CORNER);
	      ellipse(72,100,110,130);
	      triangle(88,100,168,100,128,50);
	      stroke(140);
	      beginShape(TRIANGLES); 
	      vertex(114, 180); 
	      vertex(mouseX, mouseY); 
	      vertex(140, 180); 
	      endShape(); 
	      strokeWeight(4);
	      line(96,150,112,150);
	      line(150,150,166,150);
	      line(120,200,136,200);
	    }

Complex Programmazione Orientata agli Oggetti (Java) -- applet con naso colorato


	   Puppet pinocchio;
	   
	   void setup() {
	     size(256,256);
	     background(0);
	     color tempcolor = color(255,0,0);
	     pinocchio = new Puppet(tempcolor);
	   }
	   void draw() {
	     background(0);
	     pinocchio.draw();
	   }
	   class Puppet  {
	     color colore;
	     Puppet(color c_) {
	      colore = c_;	  
	     }
	     void draw () {
	      stroke(255);        
	      strokeWeight(1); 
	      ellipseMode(CORNER);
	      ellipse(72,100,110,130); 
	      stroke(colore);
	      beginShape(TRIANGLES); 
	      vertex(114, 180);
	      vertex(mouseX, mouseY); 
	      vertex(140, 180); 
	      endShape(); 
	      strokeWeight(4);
	      line(96,150,112,150);
	      line(150,150,166,150);
	     }
	   }

I programmi Processing possono essere convertiti in applet Java. Per fare ciò è sufficiente andare nel menu File e scegliere Export . Il risultato finale sarà dunque la creazione di cinque file, inseriti nel folder applet: index.html sorgente html per visualizzare la applet filename.jar la applet compilata, completa di tutti i dati (immagini, suoni, ecc.) necessari filename.pde il codice sorgente Processing filename.java il codice Java che incorpora il codice sorgente Processing loading.gif un'immagine che viene mostrata mentre si attende il caricamento della applet. Inoltre, mediante Export Application è possibile generare una applicazione eseguibile per piattaforma Linux, MacOS, o Windows.

Tipi di Dati

Variabili Una variabile è un puntatore a una locazione di memoria, e può riferirsi a valori primitivi (int, float, ecc.) oppure ad oggetti o array (tabelle di elementi di un tipo primitivo). L'operazione di assegnamento b = a produce Se le variabili si riferiscono a tipi primitivi, la copia del contenuto di a in b. Se le variabili si riferiscono a oggetti o array, la creazione di un nuovo riferimento allo stesso oggetto o array. Per avere chiaro il significato di termini informatici quali, ad esempio, quelli che seguono, si consiglia di cercare in Wikipedia scope all'interno di un programma, regione in cui si può accedere ad una variabile e modificarne il valore global scope definita fuori da setup() e draw(), la variabile è visibile e usabile ovunque nel programma local scope definita all'interno di un blocco di codice o di una funzione, la variabile assume valori locali al blocco o alla funzione, ed eventuali valori assunti da una variabile globale omonima vengono ignorati Dichiarazione e allocazione di un array int[] arrayDiInteri = new int[10];

Strutture di Programmazione

Istruzioni Condizionali if:


	      if (i == NMAX) {
	         println("finito");
	         }
	      else {
	         i++;
	         }

Iterazioni while:

for:

Inizializzazione di una tabella di numeri casuali

Funzioni Le funzioni consentono un approccio modulare alla programmazione. In Processing, in modalità di programmazione intermediate, si possono definire funzioni oltre alla setup() e draw(), usabili all'interno della setup() e della draw(). Esempio di Funzione

Una funzione è caratterizzata dalle seguenti entità (con riferimento all'esempio) : tipo di ritorno (int) nome di funzione (raddoppia) parametri (i) corpo della funzione (return 2*i)

Classi e Oggetti Una classe è definita da un insieme di dati e funzioni. Un oggetto è una istanza di una classe. Viceversa, una classe è una descrizione astratta di un insieme di oggetti. Per una introduzione ai concetti di oggetto e di classe si veda Objects and Classes. Esempio di Classe

Una classe è caratterizzata dalle seguenti entità (con riferimento all'esempio) : nome di classe (Dot) dati (colore, posizione) costruttore (Dot()) funzioni (o metodi, draw()) Un oggetto (istanza di una classe) è dichiarato nello stesso modo in cui si dichiara una variabile, ma ad esso va poi allocato uno spazio (come si è visto per gli array) tramite il suo costruttore (con riferimento all'esempio). Dichiarazione: (Dot myDot;) Allocazione: (myDot = new Dot(tempcolor,0)) Utilizzazione: (myDot.draw(10);) Per una introduzione alla sintassi Java si veda Java Syntax Primer

Con il metodo draw() seguente si vuole dipingere lo sfondo della finestra di un grigio la cui intensità dipenda dalla posizione orizzontale del puntatore del mouse.


	  void draw() {
	      background((mouseX/100)*255);
	    }

Il codice però non fa quello che ci si aspetta. Perché? La variabile mouseX è di tipo int, e quindi la divisione a cui è sottoposta è di tipo intero. E' necessario fare un type casting da int a float mediante (float)mouseX. Cosa stampa il seguente frammento di codice?


	    int[] a = new int[10];
	    a[7] = 7;
	    int[] b = a;
	    println(b[7]);
	    b[7] = 8;
	    println(a[7]);
	    int c = 7;
	    int d = c;
	    println(d);
	    d = 8;
	    println(c);

Il seguente sketch si pone l'obbiettivo di generare un set di 100 cerchi in movimento e di disegnare nella finestra di Processing tutte le corde congiungenti i due punti di intersezione di tutte le coppie di cerchi a intersezione non nulla.

 
   8 March 2004 
   Processing v.68  
   
   modified by Pietro Polotti
   28 March, 2006
   Processing v.107   
 
 
*/ 
 
int numCircle = 100; 
Circle[] circles = new Circle[numCircle]; 
 
void setup() 
{ 
  size(800, 600); 
  frameRate(50); 
  for(int i=0; i 0) { 
      if(x > width+r) { 
        x = -r; 
      }   
    } else { 
      if(x < -r) { 
        x = width+r; 
      } 
    } 
    if(ysp > 0) { 
      if(y > height+r) { 
        y = -r; 
      } 
    } else { 
      if(y < -r) { 
        y = height+r; 
      } 
    } 
  } 
} 
 
void intersect( Circle cA, Circle cB ) 
{ 
  float dx = cA.x - cB.x; 
  float dy = cA.y - cB.y; 
  float d2 = dx*dx + dy*dy; 
  float d = sqrt( d2 ); 
 
  if ( d>cA.r+cB.r || d

Completare la parte mancante inerente il calcolo delle intersezioni dei cerchi, per poter disegnare le corde congiungenti le coppie di punti intersezione. E' possibile basarsi sul calcolo delle coordinate delle intersezioni in un sistema di riferimento ad hoc ( “Intersezione cerchio-cerchio”) e poi riportare il risultato nelle coordinate della finestra di Processing. Rendere le corde variabili nel tempo dando diverse velocità di spostamento ai cerchi.

 
   8 March 2004 
   Processing v.68  
   
   modified by Pietro Polotti
   28 March, 2006
   Processing v.107   
 
 
*/ 
 
int numCircle = 100; 
Circle[] circles = new Circle[numCircle]; 
 
void setup() 
{ 
  size(800, 600); 
  frameRate(50); 
  for(int i=0; i 0) { 
      if(x > width+r) { 
        x = -r; 
      }   
    } else { 
      if(x < -r) { 
        x = width+r; 
      } 
    } 
    if(ysp > 0) { 
      if(y > height+r) { 
        y = -r; 
      } 
    } else { 
      if(y < -r) { 
        y = height+r; 
      } 
    } 
  } 
} 
 
void intersect( Circle cA, Circle cB ) 
{ 
  float dx = cA.x - cB.x; 
  float dy = cA.y - cB.y; 
  float d2 = dx*dx + dy*dy; 
  float d = sqrt( d2 ); 
 
  if ( d>cA.r+cB.r || d

Rendere interattivo lo sketch di , facendo per esempio dipendere la quantità di spostamento dei cerchi dalla posizione lungo l'asse x del mouse.

 
   8 March 2004 
   Processing v.68  
   
   modified by Pietro Polotti
   28 March, 2006
   Processing v.107   
 
 
*/ 
 
int numCircle = 100; 
Circle[] circles = new Circle[numCircle]; 
 
void setup() 
{ 
  size(800, 600); 
  frameRate(50); 
  for(int i=0; i 0) { 
      if(x > width+r) { 
        x = -r; 
      }   
    } else { 
      if(x < -r) { 
        x = width+r; 
      } 
    } 
    if(ysp > 0) { 
      if(y > height+r) { 
        y = -r; 
      } 
    } else { 
      if(y < -r) { 
        y = height+r; 
      } 
    } 
  } 
} 
 
void intersect( Circle cA, Circle cB ) 
{ 
  float dx = cA.x - cB.x; 
  float dy = cA.y - cB.y; 
  float d2 = dx*dx + dy*dy; 
  float d = sqrt( d2 ); 
 
  if ( d>cA.r+cB.r || d