Jump to content
gurugugnola

Breve Panoramica Su Processing

Recommended Posts

Gli array (o vettori) possono essere considerati come delle variabili concatenate in sequenza, sono utili x organizzare dati all’interno di un programma; x prima cosa un array va dichiarato (specificato se conterrà valori interi o con la virgola) e inizializzato (specificato il numero di valori contenuti)

Proc14.jpg

L’array quindi evita di utilizzare molte variabili potendo immagazzinare grandi quantità di dati in maniera sequenziale.

Altri interessanti esempi sugli array li trovate a questa pagina: http://processing.org/learning/2darray/

Per gestire il testo i 2 comandi + importanti sono “char ();” e “String ();” che in pratica sono 2 tipi di variabili; il primo può contenere un unico carattere tra 2 apici, mentre il secondo anche + parole senza apici. Per utilizzare i font bisogna prima dichiararli importando il tipo di carattere e la relativa dimensione con il comando “Menù Tool -> Create Font”, si aprirà una finestra in cui scegliere tra i font installati.

Proc15.jpg

Passiamo a analizzare i comandi e le istruzioni relative alle trasformazioni sposta/ruota/scala; l’istruzione “translate ();” sposta tutti gli oggetti seguenti in X e Y secondo le coordinate assegnate, se utilizziamo + istruzioni “translate()” i loro valori si sommano/sottraggono.

Proc16.jpg

Gli stessi concetti sono validi anche per il comando “rotate ()”, bisogna tenere a mente però che le rotazioni in Processing vengono date in radianti (360°= 2 radianti = 2xπ); il punto d’origine della rotazione ha coordinate (0, 0)

Proc17.jpg

Identico discorso per l’istruzione “scale ();”

Proc18.jpg

Continuiamo analizzando alcuni esempi

Proc19.jpg

In questo semplice programma inizialmente vengono dichiarate alcune variabili di tipo float (con la virgola) a cui successivamente viene assegnato un valore random, premendo run lo schermo si riempirà in maniera casuale di punti di varie dimensioni e vari grigi; è interessante notare a questo punto che spostando l’istruzione “background ();” dal void setup al draw lo schermo verrà ripulito di volta in volta

Proc20.jpg

Se invece volessimo generare i punti sempre in maniera casuale, ma con determinate probabilità x quanto riguarda ad esempio il colore e le dimensioni:

Proc21.jpg

Nel seguente esempio ci sono 3 cerchi che si muovono verticalmente lasciando una scia, le coordinate sono assegnate attraverso le variabili “x” e “y”: x quanto riguarda il primo cerchio “x” è un quarto della lunghezza dello schermo, mentre “y” ha valore 0 (zero) a cui viene sommato di volta in volta 1 px, il che da l’impressione del movimento; le coordinate del secondo cerchio sono moltiplicate x 2 e di conseguenza anche lo spostamento, mentre il terzo cerchio le ha triplicate. Aumentando il valore sommato a “y” o i moltiplicatori l’effetto della scia lasciata sullo schermo andrebbe “perso”.

Proc22.jpg

In questo breve esempio invece abbiamo un cerchio che segue il mouse, poiché le coordinate del suo centro coincidono sempre con le coordinate del mouse

Proc23.jpg

Partendo dall’esempio precedente potremmo creare un’applicazione che simula il disegno attraverso lo spostamento/click del mouse: x prima cosa impostiamo la variabile “boolean” (che può avere i 2 valori “false” e “true”) su false, nel “void draw” indichiamo che quando la variabile è “true” deve disegnare un’ellissi con le stesse coordinate del mouse, di seguito nel “void mousePressed” indichiamo che la variabile invertirà il suo valore al clic del mouse (il simbolo “!” è una negazione).

Proc24.jpg

In questo altro esempio è possibile vedere un altro tipo di interazione tra oggetto visualizzato e movimento del mouse, inoltre il colore degli oggetti in scena cambia in funzione del tempo... una volta superato il valore massimo “(255)” non visualizza nessun riempimento per questo con if ho imposto una soglia per la quale il fill sarà bianco.

Proc25.jpg

Volendo “migliorare” l’esempio” che simula il disegno di una linea con il movimento del mouse invece di utilizzare un’ellissi si potrebbe utilizzare una linea che va dalle coordinate precedenti (pmouseX ,pmouseY) del mouse alle attuali (mouseX , mouseY)... in modo tale da avere la sicurezza che il tratto sarà continuo.

Proc26.jpg

Con l’aggiunta del void keyPressed ad esempio si potrebbe “resettare” lo sfondo premendo un qualsiasi tasto e quindi poter riprendere a disegnare

Proc27.jpg

In questo esempio vengono messi in relazione i valori “R,G,B,A” del riempimento con la posizione del mouse.

Proc28.jpg

post-3829-1253559158_thumb.jpg

Share this post


Link to post
Share on other sites
Guest

Grazie Gurugugnola,

è stato molto utile per rivedere ed applicare alcuni concetti che hai espresso per una parte di un esame che sosterrò settimana prossima. Rendo pubblico il progetto con la possibilità di scaricare il file sorgente essendo Processing basato proprio sullo scambio di parti di codice ;)

link

Grazie per la panoramica

Mat

:hello:

Share this post


Link to post
Share on other sites

Grazie dell'illustrazione di questo linguaggio. Avrei una domanda da porvi visto che tra poco devo sostenere un esame: in che modo posso richiamare, tramite clic su una immagine, uno dei listati presenti qui?C'è cioè un modo per "linkare" due listati differenti?grazie....

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...