PROCESSING

INTRODUCCION
Qu esProcessing?
Sistemaqueintegraunsoftware,unlenguajedeprogramacin yunametodologadeenseanza. Buscaintroducirfundamentosdeprogramacindentrodeun contextovisual. Herramientadebocetoparaimgenes,animacionese interacciones. Herramientadeproduccin.

Objetivos
Proporcionarunamejorformadeescribircdigoquesirvade apoyoeinspiracinparaelprocesocreativo. Desarrollarunaherramientaaccesible,econmicaydefuente abierta(open source). Distribucinlibre.Proyecto

Proyecto
Iniciadoen2001porBen Fry yCasey ReasenMITMediaLab. Esusadoendiversasreascomo:produccindecomercialesde TV,videosmusicales,visualizacindeecosistemas, instalaciones,etc.

INTRODUCCION
SobreProcessing
Lenguajedeprogramacin.

PlsticaDigital
Cdigocomomateriaflexibleymodificableavoluntad delcreador. Cdigocomomediocreativo. To sketch electronic media,its important to work with electronic materials

Formatodeltaller

EJEMPLOS BIG SCREENS - NYU's Interactive Telecommunications Program (Daniel Shiffman)

White Sun
byMooshir Vahanvati

Cavesof Wonder
byMatt Parker

http://gizmodo.com/5110633/120feetofvideoartfinalexamsatnyusbigscreensclass

EJEMPLOS "Vattenfall media facade (ART+COM)

http://www.artcom.de/index.php?option=com_acprojects&page=6&id=30&Itemid=144&details=&lang=en

EJEMPLOS Reconfigurable House (Adam Somlai-Fischer, Et al.)

http://house.propositions.org.uk/

TALLER
AmbientedeprogramacindeProcessing Fundamentos Tiposdedatos Variables Instruccionesrepetitivas for()loop Propiedadesdelaforma fill stroke background Movimiento Mtodossetup()ydraw() Instruccionescondicionales if () RespuestayEstmulo Input (mouse) Dibujo Herramientasdedibujo

Processing Environment
Instrucciones
Sonloselementosestructuralesdelprograma.Todaslas instruccionesdebenfinalizarcon; Ejemplo: point (100,100);

Comentarios
Sonusadosparahacernotas(apuntes)entrelaslneasdecdigo queporlogeneralfacilitanlacomprensindelprograma. Parahacercomentariosdeunalneasedebeiniciarel comentariocon// Ejemplo: //int v velocidaddedesplazamiento. Parahacercomentariosquerequierenmsdeunalnea,se debeiniciarelcomentariocon/* yfinalizarlocon*/ Ejemplo: /*Estainstruccindibuja20lneasymodifica elcolorsegnconlaposicinenelejey*/

Processing Environment
Men BarradeHerramientas Pestaas Lienzo

EditordeTexto

Mensajes

Consola No.DeLnea

Processing Environment
0
(60,40)

400
(180,20)

(80,180) (220,220)

Tamaodellienzoosuperficiededibujo Paraestablecereltamaodellienzoes necesariodefinirelancho(ejex)yelalto (ejey)delasuperficie. size(ancho,alto); Ej.size(400,400); Coordenada Posicin(punto)enelespacio.

(400,400)

400

Processing Environment
FORMASBSICAS point
Ejemplo: point (20,20); point (x,y); endonde x=posicinenelejex y=posicinenelejey (x,y)

line
Ejemplo: line (20,20,20,60); line (20,20,60,20); line (x,y,x2,y2); endonde x=posicinenelejexdondeinicialalnea y=posicinenelejeydondeinicialalnea x2=posicinenelejexdondeterminalalnea y2=posicinenelejeydondeterminalalnea (x,y) (x,y2) LneaVertical

(x,y)

(x2,y)

LneaHorizontal

Processing Environment
rect
Ejemplo: rect (20,20,60,35); rect (x,y,ancho,alto); endonde x=posicininicialenelejex y=posicininicialenelejey ancho=ancho delrectngulo alto=altodelrectngulo

(x,y)
ancho

alto

ellipse
Ejemplo: ellipse (50,50,90,60); ellipse (x,y,ancho,alto); endonde x=posicinenelejexdondeinicialaelipse y=posicinenelejeydondeinicialaelipse ancho=ancho delaelipse alto=altodelaelipse

(x,y)
ancho

alto

EJERCICIOS
EJERCICIO01: Dibujartrespuntos.

EJERCICIO02: Dibujartreslneas:unavertical,unahorizontalyunadiagonal.

EJERCICIO03: Dibujarunrectngulo.

EJERCICIO04: Dibujarcincocrculos.

VARIABLES
TIPOSDEDATOS Enteros(int)
Permitenmodelarcaractersticascuyosvaloresposibles sonlosvaloresnumricosdetipoentero. Ejemplo: int x=40; int k=90;

int x=40;
tipodedato nombredela variable asignacin

findela instruccin

valor

Reales(float)
Permitenrepresentarvaloresdetiporeal. Ejemplo: float m=10.03; float h=0.75;

float m=10.03;
tipodedato nombredela variable valor asignacin

findela instruccin

Caracteres(char)
Permitenrepresentarcaracteres. Ejemplo: char letra=a; char uno=z;
tipodedato nombredela variable asignacin

char letra=a ;

findela instruccin valor

VARIABLES
TIPOSDEDATOS Cadenasdecaracteres(string)
Permitenrepresentarcadenasdecaracteres. Ejemplo: string nombre=Carlos; string apellido=Arango;

string nombre=Carlos ;
tipodedato nombredela variable asignacin valor

findela instruccin

Valoreslgicos(boolean)
Permitenrepresentarvaloreslgicos(true/false).

boolean maximo =true ;

Ejemplo: boolean maximo =true; boolean lleno=false;
tipodedato nombredela variable valor asignacin

findela instruccin

EJERCICIOS
EJERCICIO05: Dibujarelrectngulodelejercicio03,perousandovariables.

EJERCICIO06: Dibujarloscrculosdelejercicio05,perousandovariables.

ITERACIONES
INSTRUCCIONESREPETITIVAS for ()loop
Estatipodeinstruccinesutilizadaparaoptimizarel cdigoencasodetenervariaslneasdecdigoque ejecutanunainstruccinsimilar.Estohacequeel programaseamaseficienteyseamascorto. Ejemplo:
Indiceparaavanzar enelciclo. Endondeinicia. Cadavezqueseejecutala instruccinxse incrementaen20.

Ejecutalainstruccin hastaquex=380

for(int x=20;x<=380;x=x+20){ line(x,20,x,380); }

ITERACIONES

Indiceparaavanzar enelciclo. Endondeinicia.

Ejecutalainstruccin hastaquex=380

Cadavezqueseejecutala instruccinxse incrementaen20.

for(int x=20;x<=380;x=x+20){ for(int y=20;y<=380;y=y+20){ point(x,y); } Lavariabley se Ejecutalainstruccin Cadavezqueseejecutala hastaquey=380 instruccinyse iniciaen20. incrementaen20. }

EJERCICIOS
EJERCICIO07: Crearunpatrnusandolainstruccinfor().

EJERCICIO08: Crearunpatrndiferentealdelejercicio07usandolainstruccinfor ().

PROPIEDADES DE LA FORMA
BORDE Colordelborde FONDO Colordefondo
background(r,g,b); background(h,s,b); background(#000000); stroke (r,g,b); stroke (h,s,b); stroke (#000000);

Grosordelnea
strokeWeight (x);

RELLENO Colorderelleno
fill (r,g,b); fill (h,s,b); fill (#000000);

PROPIEDADES DE LA FORMA
COLOR ColorRGB(0 255)
background(valorrojo,valorverde,valorazul,transparencia); stroke (valorrojo,valorverde,valorazul); fill (valorrojo,valorverde,valorazul);

ColorHSB(1% 100%)
background(porcentajetono,porcentajesaturacin,porcentajebrillo); stroke (porcentajetono,porcentajesaturacin,porcentajebrillo,transparencia); fill (porcentajetono,porcentajesaturacin,porcentajebrillo);

Color#000000(notacinhexagesimal)
background(valorrojo,valorverde,valorazul); stroke (valorrojo,valorverde,valorazul); fill (valorrojo,valorverde,valorazul,transparencia);

EJERCICIOS
EJERCICIO09: Modifiqueelejercicio06cambiandoelcolordelfondo,elcolorderellenoyelcolor delborde.

EJERCICIO10: Modifiqueelejercicio08cambiandoelcolordelfondo,elcolorderellenoyelcolor delborde.

EJERCICIO11: UsandoelmodelodecolorRGB,cambieelcolordelfondoporsu colorfavorito.

ESTRUCTURA
void setup()
Lasinstruccionesqueestndentrodeestemtodosolose ejecutanunavezcuandoelprogramaseinicia. int x=25; int y=200; void setup(){ size (400,400); smooth(); } Findelbloque
Declaracinde variables

void draw()
Lasinstruccionesqueestndentrodeestemtodose ejecutanindefinidamente(hacenloop)hastaqueel programaesdetenido.Cadavezlasinstruccionescontenidas enelmtododraw()seejecutan,elciclovuelveaempezar ejecutandolasinstruccionesdesdelaprimeralneahastala ultima.

Iniciodelbloque

Bloquedel mtodosetup()

Iniciodelbloque void draw (){ background(0); noStroke(); Bloquedel mtododraw() fill(255); ellipse (x,y,50,50); x=x+5; } Findelbloque

NOTA: Lasvariablescuyovalorcambiaconcadaloop delmtododraw()debenserdeclaradasyasignadas porfueradelosmtodossetup()ydraw().

MOVIMIENTO
MOVIMIENTO RECTILINEO (horizontal (eje x), vertical (eje y), diagonal (eje x + eje y)) Ponerunafiguraenmovimientosignificaquehayun cambiodeposicindelamisma.Parageneraresto,se debeintroducirunavariablequevarelaposicindela figuraencualquieradesusejes.
int pos_x =200; int pos_y =0; int diam =100; float vel =0; void setup(){ size (400,400); smooth(); } void draw (){ background(0); noStroke(); Elcambiodeposicinseva adarenelejey fill(255); ellipse (pos_x,pos_y+vel,diam,diam); vel++; } Indicaelincrementodela
variablevel encadaloop vel++equivaleavel =vel+1

Declaracindevariable quecontrola lavelocidad

MOVIMIENTO
MOVIMIENTO RECTILINEO (horizontal (eje x), vertical (eje y), diagonal (eje x + eje y))
int pos_x =200; int pos_y =400; int diam =100; float vel =0; void setup(){ size (400,400); smooth(); } void draw (){ background(0); noStroke(); Elcambiodeposicinseva adarenelejey fill(255); ellipse (pos_x,pos_y+vel,diam,diam); vel; } Indicaelcambiodelavariable
vel encadaloop vel equivaleavel =vel 1

Declaracindevariable quecontrola lavelocidad

MOVIMIENTO
MOVIMIENTO RECTILINEO (horizontal (eje x), vertical (eje y), diagonal (eje x + eje y))
Loop # 1 2 3 4 5 N Pos_y 100 100 100 100 100 100 Vel 0 1 2 3 4 Pos_y +vel 100 99 98 97 96

ellipse (pos_x,pos_y+vel,diam,diam); vel =vel;

MOVIMIENTO
MOVIMIENTO POR CAMBIO DE PARAMETROS DE FORMA (ancho y alto) Incrementargradualmenteeldimetrode uncrculo.
float radio=10; void setup (){ size (400,400); background(0); smooth(); } void draw (){ noStroke(); fill (255); ellipse(200,200,radio,radio); radio=radio +0.5; }

Elparmetroquesevaraeselradio delcrculo.Laposicinesfija

MOVIMIENTO
MOVIMIENTO CIRCULAR Moverunafiguraalrededordeunacircunferencia.
PI+HALF_PI (270grados)

sin0=

o h a h o a sin0 cos0
PI (180grados)

(x,y)

cos 0=

) (h io d ra

catetoopuesto(o)

tan0=

0
catetoadyacente(a)

tan0=

0 TWO_PI (0grados)

a=h*cos(angulo)
x=pos_x +radio*cos(angulo);

o=h*sin(angulo)
y=pos_y +radio*sin(angulo);
HALF_PI (90grados)

MOVIMIENTO
MOVIMIENTO CIRCULAR
float x=0; float y=0; float angulo =0; float R=100; void setup (){ size (400,400); background(0); smooth(); } void draw (){ fill(0,5); rect (0,0,width,height); noStroke(); fill (255); ellipse(200,200,5,5);
dibujodelacircunferenciagua ellipse (x,y,50,50); x=width/2+R*cos(angulo); Posicinenelejeydondeseiniciael y=height/2+R*sin(angulo); dibujodelacircunferenciagua angulo =angulo +0.01; Posicinenelejexdondeseiniciael Variablequecorresponde alvalorinicialdelngulo Radiodelacircunferenciagua

Lavariacinenelngulodeterminala velocidaddelmovimiento

MOVIMIENTO
ROTACION
Antesdelatraslacindel origendellienzo

float angulo =0; void setup(){ size(400,400); smooth(); } void draw(){ fill(0,12); rect (0,0,width,height); fill(255); noStroke(); ellipse(200,200,5,5); angulo =angulo +0.02; translate(200,200); rotate (angulo); rect(10,10,100,100); }

(0,0)

(200,200)

(200,200)
Despusdelatraslacindel origendellienzo

(0,0)

Ejecutalarotacindelplanoa partirdelorigendellienzo

MOVIMIENTO
ROTACION
float angulo =0; void setup(){ size(400,400); smooth(); } void draw(){ fill(0,12); rect (0,0,width,height); fill(255); noStroke(); ellipse(200,200,5,5); angulo =angulo +0.02; translate(200,200); rotate(angulo); rect(10,10,100,100); }

Lavariacinenelngulodeterminala velocidaddelmovimiento

(0,0)
Trasladaelorigendellienzo (originalmente,elpunto(0,0)est en laesquinasuperiorizquierda)alpunto sealado(200,200) Ejecutalarotacindetodoellienzo tomandocomoejeelorigendelmismo

EJERCICIOS
EJERCICIO12: Muevaunafigurarpidamenteatravsdelapantalla.

EJERCICIO13: Muevatresfiguras,cadaunadeunaformadiferente.

INSTRUCCIONES CONDICIONALES
Losoperadoresrelacionalesylgicossonexpresionesquepermiten describiryevaluarsituacionesasociadasaunvalor.Elresultadode aplicarestetipodeoperacionesesundatodetipolgico,esdecir, verdaderoofalso(true or false). OPERADORESRELACIONALES
Seutilizanparahacercomparacionesentrevalores. > < >= <= == != mayorque menor que mayoroigual que menor oigual que igual que diferente de a>b a<b a>=b a>=b a==b a!=b

OPERADORESLOGICOS
Seutilizanparadescribirsituacionesmascomplejasapartirde la composicindevariasexpresionesrelacionales. && || ! y o no (a>b)&&(c>=a) (a>b)||(c>=a) !(a>b)

INSTRUCCIONES CONDICIONALES
OPERADORESRELACIONALES
Comparacin1 Comparacin2 true false true false Resultado true false false false
Comparacin1 Relacinporverificar

y &&

true true false false

(a>b)&&(c>=a)
Comparacin2

Comparacin1

Comparacin2 true false true false

Resultado true true true false

o ||

true true false false

Caso 1:

true

Caso 3:

false

a=10 b=5 c=15

a=10 b=15 c=20

no !

Comparacin true false

Resultado false true

Caso 2:
a=10 b=5 c=4

false

Caso 4:
a=10 b=5 c=8

false

INSTRUCCIONES CONDICIONALES
if ()
Lasinstruccionescondicionalespermitenplantearaccionesy ejecutaraccionesencasosespecficos.Paracrearuna instruccincondicionalesnecesarioestablecercualessonlos casosespecficosycualessonlasaccionesaejecutarparacada caso.
Iniciodela condicin Casoespecfico

if(indice <=20){ rect (100,100,50,50); }

Segundocaso else { rect (50,50,100,100); }

Siindice esmenoroiguala20 entoncesdibujeuncuadradoen laposicin(100,100),con50de lado.

Accinaejecutar

.Sino(siindice esdiferentey mayorque20)dibujeun cuadradoenlaposicin(50,50), con100delado.

Accinaejecutar

INSTRUCCIONES CONDICIONALES
EJEMPLO
float indice =0; void setup(){ size (400,400); smooth(); } void draw (){ background(0); noStroke(); fill(255); if (indice <=20){ rect (100,100,50,50); } else { rect (50,50,100,100); } indice =indice +0.1; println (indice); }

Paraverelvalorde indice enlaconsola

INSTRUCCIONES CONDICIONALES
(x,y) (0,200)

x=0; y=200; ellipse (x,y,50,50);

(x2,y2) (400,200)

INSTRUCCIONES CONDICIONALES
ZONA1 Six est entreAyB, entoncesx=x+1
(x,y)

ZONA2 Six est entreB+1yC, entoncesx=x+3

A
ZONA1

B B+1 C
ZONA2

ZONA3 Six est entreC+1yD, entoncesx=x+0.1

C+1
ZONA3

EJERCICIOS
EJERCICIO14: Muevaunafiguraatravsdelapantalla.Cuandostapaseelbordedebeaparecer nuevamenteporelladoopuestodelapantalla.

EJERCICIO15: Muevaunafiguraatravsdelapantalla.Cuandostatoqueelbordedebecambiarde devolverse.

EJERCICIO16: Muevaunafiguraatravsdelapantallaquecambiedemovimientoamedidaquesta pasapordiferenteszonasdelapantalla.

INTERACCION
MODELOESTIMULO RESPUESTA
Permiteestablecerunarelacinentreloquesereconocecomoelestmulo (accin,entrada,input)conlarespuestaesperada(reaccin,salida,output)
Accin Reaccin Entrada Salida Input Output

Estmulo
x=60 x=60 x=60

relacin
1:1 1:2 2:1

Respuesta
rect (x,100,50,50); rect (x/2,100,50,50); rect (x*2,100,50,50);

INTERACCION
MOUSEcomoestmulo
Esposiblehacerusodelosdatosrecogidosporelmouse paracontrolar,la posicin,tamao,color,yotraspropiedadesdelasformas. Losdatosproporcionadosporelmouse,soninterpretadoscomounaposicinen lapantalla,esdecir,indicaunvalorespecficoparaelejex,yotroparaelejey los cualespuedensermodificadosdeacuerdoalamanipulacindelmouse. FUNCIONES

mouseX (posicinenelejexdelmouse) mouseY (posicinenelejeydelmouse)

Ejemplo: void setup(){ size (400,400); background(0); smooth(); } void draw (){ ellipse (mouseX,mouseY,100,100); }

INTERACCION
FUNCIONES

pmouseX (guardalaposicinenxdelmouse enelcuadro(frame)anterioral

cuadro(frame)actual.) pmouseY (guardalaposicinenydelmouse enelcuadro(frame)anterioral cuadro(frame)actual.) Ejemplo: void setup(){ size (400,400); background(255); smooth(); } void draw (){ stroke(0); line (mouseX,50,pmouseX,350); }
(pmouseX,350) (mouseX,50)

EJERCICIOS
EJERCICIO17: Dibujeunafiguraquesigaelcursor.

EJERCICIO18: Dibujeunafiguraquesemuevadeunaformadiferentealcursor.

EJERCICIO19: Dibujetresfigurasquesemuevandeformasdiferentesrespecto alcursor.

DIBUJO
BACKGROUND
void setup(){ size (400,400); background(0); smooth(); } void draw (){ ellipse (mouseX,mouseY,100,100); }

backgrounddentrodelmtodosetup()
Cuandolascaractersticasdelafuncin background() estndescritasenelmtodo setup(),estosignificaqueelfondosolovaa serpintado1vezalejecutarelprograma.

backgrounddentrodelmtododraw() Cuandolascaractersticasdelafuncin background() estndescritasenelmtodo draw(),elfondosepintacadavezquese repiteeldraw()loquegeneraelefectode refrescarlapantalla

void setup(){ size (400,400); smooth(); } void draw (){ background(0); ellipse (mouseX,mouseY,100,100); }

DIBUJO
BACKGROUND transparencia
Paraconseguirunefectoderefrescar pantalla gradualmente,esnecesarioaplicar unfondofalso(unrectngulocuyorelleno tengaunatransparencia)quesedibujacada vezqueelmetodo draw()haceunloop. voidsetup(){ size(400,400); background(0); smooth(); }

Colorbaseparaelfondo

Colorderellenoparaelfondofalso

voiddraw(){ fill(0,0,0,20); rect(0,0,width,height);

Rectnguloquedibujael fondofalso

fill(255); ellipse(mouseX,mouseY,100,100); }

DIBUJO
HERRAMIETADEDIBUJO Esunaformainteractivadedibujar.Elusuariodealguna formapuedecontrolar elcomportamientodeloquese dibujaenellienzo.
Ejemplo: void setup(){ size (400,400); background(0); smooth(); } void draw (){ strokeWeight(4); stroke (255); point (mouseX,mouseY); }
Patrndedibujo

DIBUJO
HERRAMIETADEDIBUJOCONFIGURABLE

Elcolordelaslneasdependedela posicinenelejexdelmouse ydel botndelmouse queespresionado

Sielbotnizquierdoest presionado stroke (mouseX,mouseY,0);

Sielbotnderechoest presionado stroke (mouseX); Paracambiarelcolordel fondoyborrarellienzo Sialgunodelosbotonesdel mouse est presionadosobrela zonadelrectnguloblanco background(255);

DIBUJO
EVENTOSDEMOUSE mousePressed
Funcionacomounavariabledetipoboolean que permiteidentificarcuandoalgunodelosbotones delmouse espresionado. Ejemplo void setup(){ size (400,400); smooth(); } void draw (){ background(0); if (mousePressed){ ellipse (mouseX,mouseY,100,100); } }
Sialgunodelosbotonesdel mouse est presionado,dibuje elcrculodescrito.

mouseButton
Funcionacomounavariabledetipoboolean que permiteidentificarquebotndelmouse fue presionado(RIGHToLEFT). Ejemplo void setup(){ size (400,400); smooth(); } void draw (){ background(0); if (mousePressed){ if (mouseButton ==LEFT){ ellipse (mouseX,mouseY, 100,100); } } Sielbotnizquierdodelmouse } est presionado,dibujeel
crculodescrito.

EJERCICIOS
EJERCICIO20: Dibujeunrastrodepuntosquemuestrelatrayectoriadelcursorenelespacio.

EJERCICIO21: Creeunaherramientadedibujopersonalizable.

EJERCICIO22: Creeunaherramientadedibujoquecambiecuandoespresionadoelbotn derecho/izquierdodelmouse.