Processing è un linguaggio di programmazione testuale open source per lavorare con le immagini/forma/animazioni/suoni/interazioni, allo stesso tempo si tratta di un ambiente di sviluppo; nel sito ufficiale www.processing.org ,oltre che il download del SW, sono presenti esempi/forum/guide... la semplicità di apprendimento è dovuta alla sua somiglianza con altri linguaggi di programmazione (soprattutto Java.  L’ambiente di sviluppo è composto da un semplice editor con una barra dei menù, una toolbar con i comandi + usati (tra cui “RUN” e “STOP”, quando con “RUN” si avvia un programma viene aperta una nuova finestra in cui viene visualizzato il risultato), una finestra dove scrivere il testo, un’area dove vengono segnalati eventuali messaggi di errore e una console testuale in cui vengono segnalati altri tipi di messaggi. L’estensione dei file di processing è .PDE e ogni programma scritto si chiama “sketch”.

  Proc01

  Quando si salva uno sketch viene creata una apposita cartella e sottocartelle, processing permette di lavorare con il “drag & drop” e ogni file multimediale (immagini, suoni, filmati...) utilizzato viene automaticamente salvato nell’apposita cartella “Data”. Importante tenere a mente che i comandi sono tutti “case sensitive” e quindi bisogna prestare attenzione alle maiuscole e minuscole!

  Come già scritto processing risulta semplice da imparare, talmente semplice che il miglior modo è la pratica diretta: la prima riga del seguente esempio è un commento (compreso tra 2 coppie di slash), mentre le 2 seguenti sono le caratteristiche (dimensione e colore) che dovrà avere la nostra finestra; ogni istruzione viene chiusa da “;”, le dimensioni sono in pixel. I colori possono essere determinati con la terna di numeri RGB separati dalla “,” (se si scrive un solo numero automaticamente viene colorato con la gradazione di grigio corrispondente), con il valore esadecimale, con i quattro valori RGBA (l'ultimo valore serve per il controllo delle trasparenze).

  Proc02

  Passiamo al secondo esempio in cui viene aggiunta l’istruzione “stroke” e “line”, nella prima abbiamo specificato il colore di tutte le linee a seguire (fino a istruzione diversa) e nella seconda le coordinate (sempre in px) del punto iniziale e del punto finale.

  Proc03

  Come nella gran parte dei linguaggi di programmazione si fa un largo uso delle variabili a cui assegnare dei valori, solitamente le dichiarazioni delle variabili vengono fatte all’inizio del programma (o cmq prima che si utilizzino)

  Proc04

  In questo ultimo esempio si può vedere che vengono impostate 2 variabili “altezza” e “lunghezza”, “int” si usa x variabili con valore intero e “float” x variabili con la virgola; con “strokeWeight” si quantifica lo spessore del tratto e con “fill” il colore del riempimento (il 4° valore del fill nell’esempio successivo è associato alla trasparenza), con “rect” si costruisce un rettangolo dando le coordinate dell’angolo in alto a sx/lunghezza/altezza. Altre istruzioni x creare delle forme geometriche sono

  Proc05

  Inoltre abbiamo l’istruzione “point (x,y);”. Il prossimo esempio è utile sia per vedere un possibile utilizzo delle variabili, che per l’utilizzo di operazioni matematiche:

  Proc06

  All’inizio viene impostata la variabile “intervallo”  che poi viene moltiplicata x creare 9 punti equidistanti tra loro lungo l’asse X. Lo stesso risultato si ottiene + semplicemente dichiarando una variabile “coefficiente” da moltiplicare e utilizzando un “ciclo for”: dopo l’istruzione “for” tra parentesi tonde troviamo il valore di partenza del ciclo, il valore di fine e l’aggiornamento ciclico del valore; mentre tra parentesi graffe troviamo le operazioni da compiere durante il ciclo.

  Proc07

  Un’altra istruzione fondamentale della programmazione è “if” (condizione) e “else” (altrimenti); nell’esempio successivo “if” controlla la condizione di disegnare delle linee superato un certo valore di coefficiente, mentre “else” ha una funzione di verifica della condizione negativa disegnando i punti.

  Proc08

  Finora abbiamo visto come creare forme statiche, ma si possono creare anche animazioni e interazioni; riprendendo quindi il penultimo esempio facendo si che il punto si sposti da sx a dx.

  Proc09

  Analizzando riga x riga: dichiarazione della variabile intervallo, nel “void setup” vengono dichiarate le caratteristiche che rimangono fisse (se avessi inserito qui il background i punti già disegnati sarebbero rimasti a schermo), in “void draw” troviamo le funzioni ricorsive (il frame rate che controlla la velocità e che di default è a 60, il colore di background x il “refresh”, l’istruzione “punti ()” che richiama la funzione corrispondente. In “void punti” troviamo un “if” che serve a far ripartire l’animazione e poi le istruzioni x il movimento a intervalli regolari del punto. Aumentando il valore del frame rate e diminuendo l’intervallo spaziale l’animazione a schermo apparirà + fluida. Un altro esempio interessante è il seguente che introduce anche l’istruzione “mousePressed ()”

  Proc10

  Tornando al punto che si sposta orizzontalmente si potrebbe decidere di dargli un andamento “incerto” e casuale attraverso la funzione “random” (nell’esempio tra 0 e 10 x lo spostamento in X, tra 196 e 204 x quello in Y); di default la funzione “random” prende in considerazione tutti i numeri compresi quelli con le virgole (di tipo “float”), ma non è possibile mescolare valori di tipo “int” con quelli di tipo “float” e x questo il “random” in questo caso deve essere arrotondato attraverso una funzione “int”

  Proc11

  Abbiamo già visto alcune figure piane “semplici”, ma processing ci mette a disposizione anche le curve di Bezier; una curva di Bezier si dichiara attraverso le coordinate del punto d’inizio, di fine e delle linee tangenti ai 2 punti:

  Proc12

  Per diminuire l’effetto di aliasing sulle curve è necessario utilizzare l’istruzione “smooth ()”.

  Proc13

---
Questo articolo è stato importato automaticamente dal forum il 31/lug/2014
Per vedere il post originale e/o i commenti sul forum prima di quella data clicca qui