processing: programació d’imatges, animacions i interaccions · processing: programació...

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


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


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.



Exemples



Marius Watz, Club Transmediale 2006Projecte Electroplastique2



Marius Watz with Alexander Rishaug, Club Transmediale 2008



Marius Watz with Alexander Rishaug, Club Transmediale 2008



Casey Reas



Universal Everything, per a LoveBytes07





Daniel Shiffman, Voronoi

Jared Tarbell



Jared Tarbell



Jared Tarbell





Motion Theory, per a R.E.M., Animal (In Time 1988-2003).R.E.M. Animal a You Tube

David Lu



David Lu



Alba G Corral



Alba G Corral with Nikka at Femelek2008



OnionlabSelected Works



LIAProximity Of Needs


Alba G Corral Generative Love

Portada de maig 08 VisualP5 Ikebana


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


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/


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


7.1 Dilluns 27.10.08Taller de Processing a LeFreak


Dilluns 3.11.08Exàmens EPSC 7-9.11.08 ARTECH08

Dijous 6.11.08

8.1 Dilluns 10.11.08


9.1 Dilluns 17.11.08


10.1 Dilluns 24.11.08 Projecte 2. Lliurament 15%

10.2 Dijous 27.11.08 Projecte 3. Presentació 25%


Baixar-se el programa de http://www.processing.org, instal.lar-lo i engegar-lo.

Processing. Programació


Engegar

Area demissatges

Guardar

Exportar per aun navegador

Codi

Processing. Programació Imatges i animacions


Funció point(): primitiva de dibuix

Mides: 100x100Fons: grisColor del punt: negre



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.





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



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 }



Quantes vegades per segon s’executarà el mètode draw()?



Exercici Baixar-se el fitxer PPIAI_03.pde d’Atenea i experimentar.



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.



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.



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);



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);



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.



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


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



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.



Events de ratolímousePressed()mouseReleased()mouseMoved()mouseDragged()

Events de teclatkeyPressed()keyReleased()



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()



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.



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



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.



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


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


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)


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)




Wiring

Llenguatge i entorn basats en P5.http://www.wiring.org.co



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


Processing. Mobile Processing


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


processing: programació d’imatges, animacions i interaccions · processing: programació...

Documents