Processing: Programació d’imatges, animacions i
interaccions
Assignatura de Lliure Elecció Escola Politècnica Superior de CastelldefelsQuadrimestre de Tardor, curs 2008-2009
Lali Barrière Figueroa
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Introducció Art digital, art generatiu, art interactiu Processing Exemples RecursosOrganització de l’assignaturaProgramació amb Processing Imatges i animacions Interacció bàsica: teclat, ratolí, soInteracció avançada Captura de vídeo, controladors (MIDI, joystick, Wiimote) Processing i electrònica (Wiring, Arduino)Mobile ProcessingProjecte
Processing
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Art digital, art generatiu, art interactiu
Art digital: qualsevol tipus d’art en el qual intervé un ordinador. Imatge, so, animació, vídeo, vídeojoc, pàgina web, algorisme, performance, instal.lació,...
Art generatiu: art generat, composat o construït de manera algorísmica. Per mitjà d’un procés matemàtic, mecànic o aleatori, no necessàriament amb ordinador.
Art interactiu: qualsevol tipus d’art en el qual l’espectador interactua amb l’obra.
Processing. Introducció
Relació entre art i tecnologia Art digital, generatiu i interactiu Ús de la interacció en l’art
Processing
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Què és Processing? Per a què serveix? A qui pot interessar?
Projecte obert de programació per a artistes.Objectiu inicial: generació de gràfics per ordinador.
Llenguatge i entorn de programació, basat en Java. Desenvolupat al MediaLab del MIT (Boston):John Maeda: Drawing by Numbers, simplicitat.Ben Fry i Casey Reas: primera versió de l’aplicació.
Comunitat de developers.Llibreries amb funcionalitats diverses, públiques.Interessant per les possibilitats d’extensió i d’interacció amb altres eines SW i HW.
Implica: artistes, informàtics, enginyers.
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Exemples
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Marius Watz, Club Transmediale 2006Projecte Electroplastique2
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Marius Watz with Alexander Rishaug, Club Transmediale 2008
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Marius Watz with Alexander Rishaug, Club Transmediale 2008
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Casey Reas
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Universal Everything, per a LoveBytes07
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Processing. Introducció
Daniel Shiffman, Voronoi
Jared Tarbell
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Jared Tarbell
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Jared Tarbell
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Jared Tarbell
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Jared Tarbell
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Processing. Introducció
Motion Theory, per a R.E.M., Animal (In Time 1988-2003).R.E.M. Animal a You Tube
David Lu
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
David Lu
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
David Lu
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
David Lu
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Alba G Corral
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Alba G Corral with Nikka at Femelek2008
Processing. Introducció
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
OnionlabSelected Works
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Processing. Introducció
LIAProximity Of Needs
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Alba G Corral Generative Love
Portada de maig 08 VisualP5 Ikebana
Processing. Introducció
texone.orgTaller a HFG Karlsruhe
Golan Levin Yellowtail
Recursos
LlibresProcessing: A Programming Handbook for Visual Designers and Artists, Casey Reas and Ben Fry (Foreword by John Maeda). MIT Press, 2007. Processing: Creative Coding and Computational Art (Foundation), Ira Greenberg (Foreword by Keith Peters). Friends of Ed., 2007.Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction, Daniel Shiffman. Morgan Kaufmann, 2008.
Enllaços
Processing. Introducció
http://www.processing.org/http://www.processing.org/discourse/http://foro.visualp5.net/http://benfry.com/http://reas.com/http://www.flong.com/http://www.unlekker.net/
http://www.shiffman.net/http://complexification.net/http://www.flight404.com/http://toxi.co.uk/http://www.universaleverything.com/http://www.albagcorral.com/http://www.onionlab.com/
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Processing. Organització de l’assignaturaSessió - Data PPIAI Activitats paral·leles
1.1 Dilluns 15.09.08 T1
1.2 Dijous 18.09.08 T2
2.1 Dilluns 22.09.08 T3
2.2 Dijous 25.09.08 Pràctica 1
3.1 Dilluns 29.09.08
3.2 Dijous 2.10.08 Projecte 1. Pla del projecte
4.1 Dilluns 6.10.08
4.2 Dijous 9.10.08 Pràctica 2. Control 15%
5.1 Dilluns 13.10.08Taller de Processing a LeFreak
5.2 Dijous 16.10.08 Seguiment 2
6.1 Dilluns 20.10.0823-26.10.08 ARTFUTURA08
6.2 Dijous 23.10.08 Pràctica 3
7.1 Dilluns 27.10.08Taller de Processing a LeFreak
7.2 Dijous 30.10.08 Seguiment 3
Dilluns 3.11.08Exàmens EPSC 7-9.11.08 ARTECH08
Dijous 6.11.08
8.1 Dilluns 10.11.08
8.2 Dijous 13.11.08 Pràctica 4
9.1 Dilluns 17.11.08
9.2 Dijous 20.11.08 Seguiment 4
10.1 Dilluns 24.11.08 Projecte 2. Lliurament 15%
10.2 Dijous 27.11.08 Projecte 3. Presentació 25%
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Baixar-se el programa de http://www.processing.org, instal.lar-lo i engegar-lo.
Processing. Programació
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Engegar
Area demissatges
Guardar
Exportar per aun navegador
Codi
Processing. Programació Imatges i animacions
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Funció point(): primitiva de dibuix
Mides: 100x100Fons: grisColor del punt: negre
Processing. Programació Imatges i animacions
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Salvar Crea una carpeta i un fitxer d’extensió .pde, totd dos amb el nom del sketch.
Exportar per a un navegador Crea una carpeta, a la carpeta del sketch, de nom “applet” que conté:• index.html• loading.gif• PPIAI_02.jar (l’únic imprescindible)• PPIAI_02.java• PPIAI_02.pde
Exercici Escriure el programa, guardar-lo, executar-lo, i exportar-lo per a un navegador.
Programació en Java, fent servir les llibreries de Processing. Podem utilitzar (i de fet haurem de fer-ho) Java.
AjutsJavahttp://sun.java.comhttp://mat21.etsii.upm.es/ayudainf/aprendainf/Java/Java2.pdf
“Help” del programa“Find in reference” en local,la resta d’opcions, obre la pàgina de Processing.
ExemplesOpció “Examples” del menú “File” del programa.
Processing. Programació Imatges i animacions
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Processing. Programació Imatges i animacions
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Paràmetres del dibuix
size(ample,alt);background(color);stroke(color);strokeWeight(gruix);noStroke();fill(color);noFill();
Primitives de dibuix
point(x,y);line(x0,y0,xF,yF);rect(x,y,dX,dY);ellipse(x,y,dX,xY);
Variables del sistema
widthheightmouseXmouseY
Colors
blanc i negre := un nombre entre 0 i 255blanc i negre, amb canal alfa := 2 nombresRGB := 3 nombresRGB amb canal alfa := 4 nombres
Processing. Programació Imatges i animacions
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
ellipse(50,50,40,40); size(100,100);ellipse(50,50,40,40);
size(300,200);ellipse(50,50,40,40);
size(300,200);ellipse(width/2,height/2,40,40);
Atenció:(0,0) és el vèrtex superior esquerre
Animació
Actualitzar la matriu de pixels corresponent al dibuix. Tornar a pintar.
Processing: mode continu de programació.
void setup(){ inicialitzacions del dibuix }
void draw(){ bucle infinit: s’executa un cert # de vegades per segon }
Processing. Programació Imatges i animacions
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Quantes vegades per segon s’executarà el mètode draw()?
Processing. Programació Imatges i animacions
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Exercici Baixar-se el fitxer PPIAI_03.pde d’Atenea i experimentar.
Processing. Programació Imatges i animacions
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Novetat
Exercici Baixar-se el fitxer PPIAI_04.pde d’Atenea i experimentar.
Exercicis
• Baixar-se el fitxer PPIAI_05.pde d’Atenea i experimentar.• Utilització de la funció random().
Important
1. Comentar el codi.• A l’inici: explicant breument què fa.• En cada declaracio de variable, funció o bloc que es consideri important o poc entenedor.
2. Estructurar el codi.• Encapsulant blocs com funcions.• Més endavant: definint classes.
Processing. Programació Imatges i animacions
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Hem vist• Funció random().• Funció mòdul, en Java %.• Antialiasing: funcions smooth() i noSmooth().• Com fer que una imatge es “fongui”.• Com fer que un element que es mou tingui “cua”.• Com canviar la velocitat de l’animació: funció frameRate().
Per fer: Matemàtiques i Processing• Formes: beginShape(), endShape(), vertex(), curveVertex(), bezierVertex().
• Pintar corbes a partir de les seves equacions.• Trigonometria.• Aleatorietat.• Transformacions: traslladar, girar, escalar.
Processing. Programació Imatges i animacions
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Importar imatges externes
PImage el tipus de dades corresponent a una imatge.loadImage() assigna una variable de tipus PImage.image() dibuixa una imatge.
PImage foto; foto = loadImage(“nomFitxer”); image(foto,0,0);
Processing. Programació Imatges i animacions
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Pot ser GIF, JPEG, PNGEl fitxer ha d’estar a la carpeta “data” del sketch
Això es fa amb l’opció “Add file...” del menú “Sketch”També es pot posar una URL
També permet el format image(foto,x,y,w,h);
Tipografies
PFont el tipus de dades corresponent a una font.loadFont() assigna una variable de tipus PFont.textFont() estableix la font.textSize() estableix la mida.text() pinta un text.
PFont lletres; lletres = loadFont(“nomFont.vlw”); textFont(lletres); textSize(40); text(“Hola”,x,y);
Processing. Programació Imatges i animacions
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Format no estàndarEl fitxer ha d’estar a la carpeta “data” del sketch
Això es fa amb l’opció “Create font...” del menú “Tools”
Ha de ser una PFont
Exercicis de Matemàtiques i Processing• Funcions per crear formes.• Funcions trigonomètriques per treballar amb ones.
Exercicis amb imatges importadesA partir d’una imatge importada.• Fer que es mogui. (Potser amb random()???)• Fer que canvïi de mida. (Potser amb el ratolí???)• Buscar les funcions tint() i noTint().• Aplicar el que ja sabem de dibuix.• Avançat Entrada PImage de la referència del llenguatge. Estudiar pixels[], get(), set(),...
Exercicis amb tipografies • Fer una composició amb lletres. (Potser amb random()???) • Avançat Buscar la funció keyPressed(). Definir-la perquè escrigui la tecla pitjada.
Processing. Programació Imatges i animacions
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Variables que llegeixen el ratolí
mouseX, mouseY coordenades actuals del ratolípmouseX, pmouseY valor anterior de les coordenades del ratolí
mousePressed booleà que indica si el ratolí està apretatmouseButton últim botó apretat LEFT, CENTER, RIGHT
Funcions que controlen el cursornoCursor()cursor(mode) possibles modes ARROW, CROSS, HAND, MOVE, TEXT, WAIT
Processing. Programació Interacció bàsica: teclat, ratolí, so
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Exercici Baixar-se els fitxers mouse_01.pde, mouse_02.pde, mouse_03.pde d’Atenea i experimentar.
Variables que llegeixen el teclat
keyPressed booleà que indica si una tecla està apretada
key caràcter que guarda l’última tecla apretada
keyCode booleà que indica si la tecla és un caràcter especial en aquest cas, el valor de la variable key pot ser ALT, CONTROL, SHIFT, UP, DOWN, LEFT, RIGHT
Processing. Programació Interacció bàsica: teclat, ratolí, so
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Exercici Fer una màquina d’escriure.Exercici Escriure un programa que pinti un dibuix per cada lletra.Exercici Usar el teclat per canviar paràmetres del dibuix.
Events (de ratolí i de teclat)
Events Accions que provoquen l’alteració del flux normal d’un programa (per exemple, clicar o moure el ratolí, pitjar una tecla). Tenen associada una funció.
El codi d’un event s’executa una única vegada, cada vegada que l’event es produeix.
Processing. Programació Interacció bàsica: teclat, ratolí, so
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Events de ratolímousePressed()mouseReleased()mouseMoved()mouseDragged()
Events de teclatkeyPressed()keyReleased()
Processing. Programació Interacció bàsica: teclat, ratolí, so
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
mousePressed
Variable de tipus booleà,true fins que es deixa anar el botó.
Es pot usar dins del mètode draw() per fer que una part del codi s’executi mentre el botó està apretat.
mousePressed()
Funció que s’executa una única vegada quan es clica.
Es pot usar per disparar una acció (per exemple, netejar la pantalla).
Observació Es pot fer un programa que només executi funcions d’events. Necessita el mètode draw() per funcionar (estarà buit).
Control del flux
frameRate()noLoop()loop()redraw()
Processing. Programació Interacció bàsica: teclat, ratolí, so
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Exercici Baixar-se el fitxer teclat_01.pde d’Atenea i experimentar.Exercici Escriure un programa que actualitzi la imatge només si es pitja una tecla.
Llibreries externes
Processing: concebut per ser compacte i simple. A la vegada, perquè es puguin extendre fàcilment les seves funcionalitats.
Com? Utilitzant llibreries externes.
Totes les llibreries disponibles estan a http://progessing.org/reference/libraries
Quan instal.lem el programa només tenim les Core Libraries.
Processing. Programació Interacció bàsica: teclat, ratolí, so
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Llibreries externes
Per afegir una llibreria:• Processing ens envia a la Web de la llibreria, que té instruccions• una llibreria de nom “nomLib” és un fitxer “nomLib.jar”• a la carpeta Processing hi ha una carpeta libraries• hem de crear (o copiar) la carpeta “nomLib” a libraries• dins de “nomLib” hi ha d’haver una carpeta library que conté el fitxer “nomLib.jar”
Per treballar amb una llibreria, hem de posar una línia a la capçalera que ens permet usar les classes i funcions: import nomLib.*;
Es pot fer amb l’opció “Import library...” del menú “Sketch”.
Processing. Programació Interacció bàsica: teclat, ratolí, so
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
So
Hi ha tres llibreries que permeten reproduir i analitzar àudio: minim Ess Sonia + SoniaHelper
Per a l’anàlisi del so s’utilitza la FFT: transformada ràpida de Fourier. Aquesta funció ens permet obtenir l’espectre de freqüències del senyal àudio.
Processing. Programació Interacció bàsica: teclat, ratolí, so
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Exercici Baixar-se els fitxer so_01.pde i so_02.pde d’Atenea i experimentar.
Llibreria Video
No cal instal.lar-la.Per usar una càmera, usar una pel.lícula, crear una pel.lícula.Càmeres: USB, Firewire, entrada de vídeo composite o S-video.Heu de tenir instal.lat QuickTime (i, per tant, no es pot usar en Linux).
Classes
Capture Permet capturar imatges de la càmera.Movie Permet importar pel.lícules.MovieMaker Permet expotar l’animació a pel.lícula QT.
Processing. Interacció avançada Captura de vídeo
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Capture
La classe Capture té definit un event que es produeix cada vegada que la càmera té una nova imatge disponible.• Funció captureEvent() es programa per dir-li a Processing què volem fer quan es produeix aquest event. Normalment: capturar la imatge.
• Utilitzant la funció read(), de la mateixa classe.
Visió
Els algorismes de visió es basen en analitzar la imatge capturada. Algorismes bàsics:• Detectar moviment.• Detectar presència.• Distingir objectes pel seu brillantor.
Processing. Interacció avançada Captura de vídeo
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
MIDILlibreria externa proMIDI. • Sincronitzar P5 amb música, via MIDI.• Generar dades MIDI per crear sons.• Utilitzar dades MIDI generades per un controlador, per controlar visuals.
Joystick i altres dispositius de controlLlibreria externa proCONTROLL. • Permet a P5 comunicar-se amb dispositius de control.• S’ha de tenir el dispositiu instal.lat i que funcioni.• Provada en Windows.
WiimoteLlibreria externa wrj4p5.• Permet a P5 comunicar-se amb el comandament de la Wii.• Complicada d’instal.lació, perquè els drivers no són públics.
Processing. Interacció avançada Controladors (MIDI, joystick, Wiimote)
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
No és a la pàgina de P5, sí al fòrum.
Wiring i Arduino són dos projectes germans de Processing.
Tots dos es componen de:• una placa equipada per: ‣connectar-hi components electrònics (resistències, LEDs, polsadors i potenciòmetres, sensors, motors,...),‣comunicar-se via USB amb l’ordinador,‣carregar programes al microcontrolador,
• un software que permet escriure programes, que després es carreguen al microcontrolador.
Es poden comunicar amb altres programes. En particular, amb Processing.
Processing. Interacció avançada Electrònica (Wiring, Arduino)
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Processing. Interacció avançada Electrònica (Wiring, Arduino)
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Wiring
Llenguatge i entorn basats en P5.http://www.wiring.org.co
Processing. Interacció avançada Electrònica (Wiring, Arduino)
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Arduino
Llenguatge basat en Wiring i entorn basat en P5.http://www.arduino.cchttp://www.iua.upc.es/~cplatero/taller_arduinos
Mobile Processing és una versió de P5 per a telèfons mòbils.
El programa té un emulador. Si es vol carregar en un telèfon, ha de ser un telèfon que suporti Java. A més, és convenient que tant el telèfon com l’ordinador tinguin bluetooth.
El programa requereix un entorn de desenvolupament Java per a dispositius mòbils.
• Programem emb l’entorn Mobile Processing.• Provem el programa amb l’emulador.• Carreguem el programa al telèfon.
Processing. Mobile Processing
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
Processing. Mobile Processing
PPIAI - EPSC - QT0809 Lali Barrière Figueroa
http://mobile.processing.org
Propostes de projectes
1. Fer un video per a una cançó.2. Fer un vídeo i una cançó.3. Fer visuals per a interactuar amb àudio en directe.4. Fer un interactiu, joc,...• Autòmat cel.lular, Game of Life.
5. Estudiar alguna de les llibreries:• Sistema de partícules,• 3D,• Visió (captura de vídeo, anàlisi de la imatge),• Audio (minim, Ess, Sonia+Soniahelper).
6. Programar un controlador (cal hardware).7. Programar un joystick (cal hardware).
Processing. Projectes
PPIAI - EPSC - QT0809 Lali Barrière Figueroa