Joan Soler-Adillon || Tutorial de Processing
Despatx 52.803 (Campus de la comunicació, UPF) || 93 542 1238
----------------------------------------------------------------
----------------------------------------------------------------
TUTORIAL DE PROCESSING || Secció 1: Introducció
1. ¿Què és programar? 1.-¿QUÈ ÉS PROGRAMAR?
En poques paraules, programar és comunicar-se amb una màquina. Donar-li instruccions perquè executi les tasques que se li demanen. Aquest procés es realitza a través d'un dels llenguatges de programació existents. C, C++, java, html, javascript, actionscript, lingo, perl, php, phyton…són llenguatges de programació amb diferents característiques. Una mica com els llenguatges naturals, els de programació comparteixen estructures bàsiques, i alguns s'assemblen més entre ells que uns altres. Quan programem, hem de seguir una sèrie de passos: Ho diuen els seus creadors, Casey Reas i Ben Fry a la web del projecte: Processing is an open source programming language and environment for people who want to program images, animation, and sound. It is used by students, artists, designers, architects, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is developed by artists and designers as an alternative to proprietary software tools in the same domain. I per més detalls: Processing FAQ.
-Aquí
Per a Windows, la instal·lació és extremadament senzillal. Així funciona en Windows XP i versions posteriors. En general el procés és sempre senzill.
4.- La Interfície de Processing: Elements bàsics La Interfície de Processing és senzilla. Això permet que hom s’hi pugui familiaritzar molt ràpidament. Si la comparem amb la complexitat de les interfícies de Flash o Director, fa plorar d’alegria… El primer menú que ens interesa és aquest: 6 opcions: run, stop, new, open, save, export. N’hi ha tres que gairebé no cal explicar. Només tenir en compte que quan creem un nou projecte amb Processing, s’anomena sketch, i l’Sketch Folder és la carpeta on es guarda. En principi, l’Sketch consta tan sols de la mateix carpeta i d’un arxiu .pde que conté el codi. Però es poden afegir carpetes: data per fitxer d’imatge, video… RUN: Serveix per executar el codi. Amb la màgia d’aquest simple botó ens estalviem el que els programadors de veritat coneixen com a compilació. Java (i per tant Processing) és un llenguatge compilat. Això representa que per a executar un programa escrit en java, primer cal fer un pas previ (la compilació), que tradueix el codi que hem escrit en un de molt menys intel·ligible per a ments humanes, però més proper al que llegeix l’ordinador: els famosos zeros i uns. Per poder compilar amb java, cal fer-ho via línia de comandaments, o bé via editors de codi com eclipse o d’altres de pagament, que no són especialments fàcils pel que fa al setup. A més cal instalar java a l’ordinador… En fi, només aquest botó fa que per començar a programar amb java ens poguem estalviar d’aprendre tots aquest passos capaços de desanimar a més d’un. STOP: Atura el programa (of course!) NEW: Crea un nou Sketch OPEN: Obrir un Sketch existent SAVE: Guardar l’Sketch amb el que s’està treballant. Cal utilitzar-lo molt, per si de cas, però encara més cal utilitzar el “save as” del menú convencional per anar guardant versions dels projectes a mida que hi anem treballant. EXPORT: Serveix per preparar el programa amb el que estem treballant per a ser executat a través d’un navegador, ja sigui a la web o simplement fora de l’entorn processing. Un altre gran què de treballar amb processing! Amb java convencional, per veure el resultat del que estem programant via navegador (que és com funciona p5), cal primer fer un tipus de programa especial, un applet. Això p5 ja ho fa de per si. Però després cal compilar el codi i escriure l’html que en contindrà el fitxer resultant i l’executarà via navegador. Tot això, amb Processing, és un click. I a més a més inclou el codi font de l’Sketch, d’acord amb la filosofia open-source del projecte. Tan sols coneixent aquests sis botons de la interfície (i el sempre útil “save as”) en tenim de sobres per a treballar amb processing, i molts no necessitareu res més durant aquest taller introductori. 5.- La interfície de Processing: Elements molt útils A més d'aquest menú bàsic, que sovint és tot el que necessitem de Processing quan comencem, val la pena repassar algunes opcion més del menú del programa: FILE –> EXPORT APPLICATION: Si export serveix per crear un applet (un programa que s’executa des del navegador), export applicaiton serveiex per tenir una aplicació java que amb un click es pot executar en qualsevol ordinador, prescindint del navegador, i per tant de les dificultats que això pot provocar en alguns casos. Quelcom molt més complicat de fer amb java convencional, per cert. FILE –> PREFERENCES: Quatre cosetes molt útils: on es guarden els sketches, mida de la lletra… SKETCH –> PRESENT: Executar el programa tapant tot l’escriptori excepte la finestra de Processing. TOOLS –> AUTO FORMAT: Dóna un format al codi que en fa més fàcil seguir la lògica, en tant que l’alinea verticalment (no hi ha res com provar-ho per entendre de què estic parlant!). En versions paleològiques de processing aquesta opció es deia “Beautify”! TOOLS –> CREATE FONT: Prepara un arxiu font per ser utilitzat, i ens estalvia haver-lo de buscar pel nostre ordinador o la web. TOOLS –> COLOR PICKER: Un selector de color que permet visualitzar, d’un color qualsevol, els valors RGB (o HSB) per tal d’utilitzar-los en el codi HELP–> REFERENCE: Anar a la magnífica referència de processing, on s’explica amb detall i amb exemples què pot fer cada funció HELP–> FIND IN REFERENCE: Anar l’article de la referència del terme que tenim seleccionat Arribats a aquest punt, és hora de passar a l’acció i començar a fer codi!
Processing, com qualsevol entorn de programació amb cara i ulls, té una consola. Un lloc on, via text, podem rebre missatges del programa, i, quan n’hi hagi, veure els errors. És la consola, i es troba al capdavall de la interfície de Processing, amb un fons negre: Aquí és on veurem els resultats del nostre primer programa, el que en argot de programadors s’anomena el “Hello World!”.
Fer-l’ho és tant senzill com escriure:
2. ¿Què és Processing?
3. ¿Per què Processing?
4. La interfície de Processing: Elements bàsics
4. La interfície de Processing: Elements molt útils
5. "Hello World!"
La comunicació amb la màquina, en el nostre cas amb un ordinador, s'efectua a través de una sèrie d'instruccions: el codi.
Aquest codi s'ha d'escriure amb una sintaxi determinada (diferent en cada llenguatge) perquè l'ordinador ho entengui. Cal tenir en compte que, al cap i a la fi, tot el que la màquina pot fer és guardar valors, comparar-los i realitzar operacions aritmètiques amb aquests. Però això ho fa amb una velocitat altíssima, el que combinat amb la possibilitat d'entrada i sortida de dades (essent els mètodes més comuns per a això el teclat i ratolí i el monitor), fa que tinguem les nostres mans una eina molt potent i flexible si ens hi sabem comunicar.
Aprendre a programar és aprendre a establir aquesta comunicació. És, en definitiva, aprendre a parlar amb una màquina. I això es fa (si és que es vol una resposta) a través de variables, estructures de repetició, condicionals...
En el cas d'aquesta introducció a la programació ho farem amb un dels llenguatges més utilitzats, flexibles i potents: Java, tot i que ho farem a través de Processing. Un projecte Open-Source que en simplifica en gran mesura la interfície i la sintaxi, mentre que en manté pràcticament totes les capacitats.
Processing es doncs:
On és?
Instal·lació:
print("hello world!");;
dentro la interfície de Processing, darle a "run” y… voilà! Habéis creado el primer programa!
Si heu vist Hello World! escrit en blanc a la consola, el primer programa ha estat compilat i executat amb èxit.
print és una instrucció que li diu a java que escrigui el paràmetre (que va entre parèntesi) a la consola. Si canvieu Hello World! per qualsevol altra cosa i executeu el programa veureu que el resultat canvia.
Veureu que hi ha un punt i coma al final de la línia:
EN JAVA, CAL ACABAR CADA LÍNIA DE CODI AMB UN PUNT I COMA!
Això vol dir que cal “;” al final de cada instrucció, no necessàriament de cada lína tal i com l’escribim a la interfície de Processing. Però cal tenir això en compte sempre ja que és un error molt comú oblidar-se’n algun.
També és MOLT IMPORTANT quan programem l’ORDRE en què escibim les instruccions. Així, el codi
println("Hello World!");
println("Hola món!");
println("Hola món!");
escriurà primer la frase en anglès i després en català. Òbviament aquí l’exemple és trivial, però la importància és molt gran a mesura que el codi es va tornant complex.
També haureu vist que en aquest segon exemples la instrucció és prinln, amb “ln”. Això vol dir “print line”, i executa un canvi de línia després d’escriure cada paràmetre.
Proveu aquest codi:
print("Hello World!");
print("Hola món!");
print("Hola món!");
i veureu la diferència.
També haureu vist que cada cop que executàveu un programa s’obria una petita finestra en blanc (o en gris, de fet). Es tracta de la finestra que processing crea i és on ens centrarem, sobretot, a partir d’ara. Sense deixar mai de banda la consola, molt útil per al programador, evidentment el que ens interessa és la finestra, ja que aquest és el resultat final de l’aplicació. Allò que el públic, usuari o visitant es trobarà.
---------------------------------------------------------------------------------------