Vai al contenuto
gurugugnola

Breve Panoramica Su Processing

Recommended Posts

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.jpg

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.jpg

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.jpg

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.jpg

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.jpg

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.jpg

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.jpg

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.jpg

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.jpg

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.jpg

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.jpg

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.jpg

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

Proc13.jpg

post-3829-1253178238_thumb.jpg


Modificato da nicolce

Condividi questo messaggio


Link al messaggio
Condividi su altri siti
...dovrò studiarmelo.

io anche ^_^ sarà argomento di esame il 23... non so se farò in tempo a pubblicare anche le altre parti, casomai lo farò dopo l'esame ;)

Condividi questo messaggio


Link al messaggio
Condividi su altri siti

Bel tutorial! Proprio quello che cercavo :) Approfondirò il discorso... grazie!


Modificato da Jaco83

Condividi questo messaggio


Link al messaggio
Condividi su altri siti

ho terminato ora la seconda parte ;) appena sarà possibile verrà pubblicata... si tratta sempre di nozioni "base" con alcuni esempi che ho ripreso dagli appunti x l'esame e che ho cercato di "arricchire"

Condividi questo messaggio


Link al messaggio
Condividi su altri siti
ho terminato ora la seconda parte ;) appena sarà possibile verrà pubblicata... si tratta sempre di nozioni "base" con alcuni esempi che ho ripreso dagli appunti x l'esame e che ho cercato di "arricchire"

ecco la seconda parte ;) sicuramente ce ne sarà almeno una terza (non so quando ^_^ ), visto che oggi mi è stato confermato che la mia tesi sarà su processing

Condividi questo messaggio


Link al messaggio
Condividi su altri siti

Crea un account o accedi per commentare

Devi essere un utente per poter lasciare un commento

Crea un account

Registrati per un nuovo account nella nostra comunità. è facile!

Registra un nuovo account

Accedi

Hai già un account? Accedi qui.

Accedi ora


  • Navigazione recente   0 utenti

    Non ci sono utenti registrati da visualizzare in questa pagina.

×