Skip to content Skip to navigation

Connexions

You are here: Home » Content » Programming in Processing

Navigation

Content Actions
  • Download module PDF
  • Add to ...
    Add the module to:
    • My Favorites
    • A lens
    • An external social bookmarking service
    • My Favorites (What is 'My Favorites'?)
      'My Favorites' is a special kind of lens which you can use to bookmark modules and collections directly in Connexions. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need a Connexions account to use 'My Favorites'.
    • A lens (What is a lens?)

      Definition of a lens

      Lenses

      A lens is a custom view of Connexions content. You can think of it as a fancy kind of list that will let you see Connexions through the eyes of organizations and people you trust.

      What is in a lens?

      Lens makers point to Connexions materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

      Who can create a lens?

      Any individual Connexions member, a community, or a respected organization.

    • External bookmarks
  • E-mail the author

Recently Viewed

Programming in Processing

Module by: Davide Rocchesso

Summary: Introductory lecture on the use of the "processing" language and environment for teaching media processing and interaction design (in Italian).

Nota: You are viewing an old version of this document. The latest version is available here.

Introduzione

Nota:

Questa introduzione è basata sul tutorial di Daniel Schiffman .

Processing è un linguaggio ed un ambiente di sviluppo orientato all' interaction design . Nel corso Media Processing in Processing (MPP) processing è uno degli strumenti principali utilizzati per introdurre elementi di elaborazione di suoni e immagini. Processing è una estensione di Java e che supporta molta 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 to web. Il risultato finale sarà dunque la creazione di tre file, i primi due generati automaticamente:

  • index.html: sorgente html per visualizzare la applet
  • filename.jar: la applet compilata
  • filename.pde: il codice sorgente processing

Tipi di Dati

Variabili

Una variabile è un puntatore a una locazione di memoria, e può riferirsi a valori primitivi (int, double, 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.

Nota:

Per avere chiaro il significato di termini informatici quali, ad esempio, quelli che seguono, si consiglia di cercare in Wikipedia
Definition 1: scope
all'interno di un programma, regione in cui si può accedere ad una variabile e modificarne il valore
Definition 2: global scope
definita fuori da setup() e draw(), la variabile è visibile e usabile ovunque nel programma
Definition 3: 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

Esempio 1: 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: 
    
              
		int i = 0; //contatore intero
		while (i < 10) { //scrivi i numeri da 0 a 9
		  println("i = "+ i); 
		  i++;
		}
  • for: 
    
              
		for (int i = 0; i < 10; i++) { //scrivi i numeri da 0 a 9
		  println("i = "+ i);
		}

Esempio 2: Inizializzazione di una tabella di numeri casuali


            
	  int MAX = 10;
	  float[] tabella = new float[MAX];
	  for (int i = 0; i < MAX; i++)
	     tabella[i] = random(1); //random numbers between 0 and 1
	  println(tabella.length + " elementi:");
          println(tabella);

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 3: Esempio di Funzione


                 
	  int raddoppia(int i) {
	     return 2*i;
	  }

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.

Nota:

Per una introduzione ai concetti di oggetto e di classe si veda Objects and Classes.

Esempio 4: Esempio di Classe


                 
Dot myDot;
void setup() {
  size(300,20);
  colorMode(RGB,255,255,255,100);
  color tempcolor = color(255,0,0);
  myDot = new Dot(tempcolor,0);
}

void draw() {
  background(0);
  myDot.draw(10);
}

class Dot
{

  color colore;
  int posizione;

  //****CONSTRUCTOR*****//
  Dot(color c_, int xp) {
    colore = c_;
    posizione = xp;
  }

  void draw (int ypos) 	  {
    rectMode(CENTER);
    fill(colore);
    rect(posizione,ypos,20,10);
  }
}

Una classe è caratterizzata dalle seguenti entità (con riferimento all'esempio) :

  • nome di classe (Dot)
  • dati (colore, posizione)
  • costruttore (Dot())
  • funzioni (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);)

Nota:

Per una introduzione alla sintassi Java si veda Java Syntax Primer

Exercise 1

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é?

Solution 1

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.

Exercise 2

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

Solution 2


7
8
7
7

Comments, questions, feedback, criticisms?

Send feedback