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
Cavesof Wonder
byMatt Parker
BIG SCREENS - NYU's Interactive Telecommunications Program (Daniel Shiffman)
White Sun
byMooshir Vahanvati
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
EditordeTexto
Mensajes
Consola
No.DeLnea
Lienzo
Processing Environment
0
Y
400
400
X
(60,40)
(80,180)
(180,20)
(400,400)
(220,220)
Tamaodellienzoosuperficiededibujo
Paraestablecereltamaodellienzoes
necesariodefinirelancho(ejex)yelalto
(ejey)delasuperficie.
size(ancho,alto);
Ej.size(400,400);
Coordenada
Posicin(punto)enelespacio.
Processing Environment
FORMASBSICAS
point
Ejemplo:
point (20,20);
point (x,y);
endonde
x=posicinenelejex
y=posicinenelejey
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 LneaHorizontal
(x,y)
(x2,y) (x,y)
Processing Environment
rect
Ejemplo:
rect (20,20,60,35);
rect (x,y,ancho,alto);
endonde
x=posicininicialenelejex
y=posicininicialenelejey
ancho=ancho delrectngulo
alto=altodelrectngulo
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
(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;
Reales(float)
Permitenrepresentarvaloresdetiporeal.
Ejemplo:
float m=10.03;
float h=0.75;
Caracteres(char)
Permitenrepresentarcaracteres.
Ejemplo:
char letra=a;
char uno=z;
int x=40;
tipodedato
nombredela
variable
asignacin
valor
findela
instruccin
tipodedato
float m=10.03;
nombredela
variable
asignacin
valor
findela
instruccin
char letra=a ;
tipodedato
nombredela
variable
asignacin
valor
findela
instruccin
tipodedato
nombredela
variable asignacin
valor
findela
instruccin
boolean maximo =true ;
VARIABLES
TIPOSDEDATOS
Cadenasdecaracteres(string)
Permitenrepresentarcadenasdecaracteres.
Ejemplo:
string nombre=Carlos;
string apellido=Arango;
Valoreslgicos(boolean)
Permitenrepresentarvaloreslgicos(true/false).
Ejemplo:
boolean maximo =true;
boolean lleno=false;
findela
instruccin
tipodedato
nombredela
variable
asignacin
valor
string nombre=Carlos ;
EJERCICIOS
EJERCICIO05: Dibujarelrectngulodelejercicio03,perousandovariables.
EJERCICIO06: Dibujarloscrculosdelejercicio05,perousandovariables.
ITERACIONES
INSTRUCCIONESREPETITIVAS
for ()loop
Estatipodeinstruccinesutilizadaparaoptimizarel
cdigoencasodetenervariaslneasdecdigoque
ejecutanunainstruccinsimilar.Estohacequeel
programaseamaseficienteyseamascorto.
Ejemplo:
Indiceparaavanzar
enelciclo.
Endondeinicia.
Cadavezqueseejecutala
instruccinxse
incrementaen20.
for(int x=20;x<=380;x=x+20){
line(x,20,x,380);
}
Ejecutalainstruccin
hastaquex=380
for(int x=20;x<=380;x=x+20){
for(int y=20;y<=380;y=y+20){
point(x,y);
}
}
ITERACIONES
Indiceparaavanzar
enelciclo.
Endondeinicia.
Cadavezqueseejecutala
instruccinxse
incrementaen20.
Ejecutalainstruccin
hastaquex=380
Lavariabley se
iniciaen20.
Ejecutalainstruccin
hastaquey=380
Cadavezqueseejecutala
instruccinyse
incrementaen20.
EJERCICIOS
EJERCICIO07: Crearunpatrnusandolainstruccinfor().
EJERCICIO08: Crearunpatrndiferentealdelejercicio07usandolainstruccinfor ().
PROPIEDADES DE LA FORMA
RELLENO
Colorderelleno
fill (r,g,b);
fill (h,s,b);
fill (#000000);
BORDE
Colordelborde
stroke (r,g,b);
stroke (h,s,b);
stroke (#000000);
Grosordelnea
strokeWeight (x);
FONDO
Colordefondo
background(r,g,b);
background(h,s,b);
background(#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.
void draw()
Lasinstruccionesqueestndentrodeestemtodose
ejecutanindefinidamente(hacenloop)hastaqueel
programaesdetenido.Cadavezlasinstruccionescontenidas
enelmtododraw()seejecutan,elciclovuelveaempezar
ejecutandolasinstruccionesdesdelaprimeralneahastala
ultima.
NOTA: Lasvariablescuyovalorcambiaconcadaloop
delmtododraw()debenserdeclaradasyasignadas
porfueradelosmtodossetup()ydraw().
int x=25;
int y=200;
void setup(){
size (400,400);
smooth();
}
void draw (){
background(0);
noStroke();
fill(255);
ellipse (x,y,50,50);
x=x+5;
}
Iniciodelbloque
Findelbloque
Bloquedel
mtododraw()
Bloquedel
mtodosetup()
Findelbloque
Iniciodelbloque
Declaracinde
variables
MOVIMIENTO
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();
fill(255);
ellipse (pos_x,pos_y+vel,diam,diam);
vel++;
}
Elcambiodeposicinseva
adarenelejey
Indicaelincrementodela
variablevel encadaloop
vel++equivaleavel =vel+1
Declaracindevariable
quecontrola lavelocidad
MOVIMIENTO RECTILINEO (horizontal (eje x), vertical (eje y), diagonal (eje x + eje y))
MOVIMIENTO
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();
fill(255);
ellipse (pos_x,pos_y+vel,diam,diam);
vel;
}
Elcambiodeposicinseva
adarenelejey
Indicaelcambiodelavariable
vel encadaloop
vel equivaleavel =vel 1
Declaracindevariable
quecontrola lavelocidad
MOVIMIENTO RECTILINEO (horizontal (eje x), vertical (eje y), diagonal (eje x + eje y))
MOVIMIENTO
100 N
96 4 100 5
97 3 100 4
98 2 100 3
99 1 100 2
100 0 100 1
Pos_y +vel Vel Pos_y Loop #
ellipse (pos_x,pos_y+vel,diam,diam);
vel =vel;
MOVIMIENTO RECTILINEO (horizontal (eje x), vertical (eje y), diagonal (eje x + eje y))
MOVIMIENTO
MOVIMIENTO POR CAMBIO DE PARAMETROS DE FORMA (ancho y alto)
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
Incrementargradualmenteeldimetrode
uncrculo.
MOVIMIENTO
MOVIMIENTO CIRCULAR
Moverunafiguraalrededordeunacircunferencia.
(x,y)
r
a
d
i
o

(
h
)
c
a
t
e
t
o

o
p
u
e
s
t
o

(
o
)
catetoadyacente(a)
0
sin0=
cos 0=
tan0=
tan0=
o
h
a
h
o
a
sin0
cos0
a=h*cos(angulo)
x=pos_x +radio*cos(angulo);
o=h*sin(angulo)
y=pos_y +radio*sin(angulo);
x
y
0 TWO_PI
(0grados)
HALF_PI
(90grados)
PI
(180grados)
PI+HALF_PI
(270grados)
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);
ellipse (x,y,50,50);
x=width/2+R*cos(angulo);
y=height/2+R*sin(angulo);
angulo =angulo +0.01;
}
Variablequecorresponde
alvalorinicialdelngulo
Posicinenelejexdondeseiniciael
dibujodelacircunferenciagua
Lavariacinenelngulodeterminala
velocidaddelmovimiento
Radiodelacircunferenciagua
Posicinenelejeydondeseiniciael
dibujodelacircunferenciagua
(200,200)
(0,0)
(200,200)
MOVIMIENTO
ROTACION
(0,0)
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);
}
Antesdelatraslacindel
origendellienzo
Ejecutalarotacindelplanoa
partirdelorigendellienzo
Despusdelatraslacindel
origendellienzo
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);
}
Trasladaelorigendellienzo
(originalmente,elpunto(0,0)est en
laesquinasuperiorizquierda)alpunto
sealado(200,200)
Lavariacinenelngulodeterminala
velocidaddelmovimiento
(0,0)
Ejecutalarotacindetodoellienzo
tomandocomoejeelorigendelmismo
EJERCICIOS
EJERCICIO12: Muevaunafigurarpidamenteatravsdelapantalla.
EJERCICIO13: Muevatresfiguras,cadaunadeunaformadiferente.
INSTRUCCIONES CONDICIONALES
Losoperadoresrelacionalesylgicossonexpresionesquepermiten
describiryevaluarsituacionesasociadasaunvalor.Elresultadode
aplicarestetipodeoperacionesesundatodetipolgico,esdecir,
verdaderoofalso(true or false).
OPERADORESRELACIONALES
Seutilizanparahacercomparacionesentrevalores.
OPERADORESLOGICOS
Seutilizanparadescribirsituacionesmascomplejasapartirde la
composicindevariasexpresionesrelacionales.
> mayorque a>b
< menor que a<b
>= mayoroigual que a>=b
<= menor oigual que a>=b
== igual que a==b
!= diferente de a!=b
&& y (a>b)&&(c>=a)
|| o (a>b)||(c>=a)
! no !(a>b)
INSTRUCCIONES CONDICIONALES
OPERADORESRELACIONALES
Comparacin1
Relacinporverificar
Comparacin2
(a>b)&&(c>=a)
Caso 1:
a=10
b=5
c=15
Caso 2:
a=10
b=5
c=4
false false false
false true false
false false true
true true true
Resultado Comparacin2 Comparacin1
y
&&
o
||
false false false
true true false
true false true
true true true
Resultado Comparacin2 Comparacin1
true false
false true
Resultado Comparacin
no
!
Caso 3:
a=10
b=15
c=20
Caso 4:
a=10
b=5
c=8
false
false
true
false
INSTRUCCIONES CONDICIONALES
if ()
Lasinstruccionescondicionalespermitenplantearaccionesy
ejecutaraccionesencasosespecficos.Paracrearuna
instruccincondicionalesnecesarioestablecercualessonlos
casosespecficosycualessonlasaccionesaejecutarparacada
caso.
Segundocaso
Accinaejecutar
else
{
rect (50,50,100,100);
}
.Sino(siindice esdiferentey
mayorque20)dibujeun
cuadradoenlaposicin(50,50),
con100delado.
Siindice esmenoroiguala20
entoncesdibujeuncuadradoen
laposicin(100,100),con50de
lado.
Casoespecfico
Accinaejecutar
Iniciodela
condicin
if(indice <=20){
rect (100,100,50,50);
}
INSTRUCCIONES CONDICIONALES
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);
}
EJEMPLO
Paraverelvalorde
indice enlaconsola
INSTRUCCIONES CONDICIONALES
x=0;
y=200;
ellipse (x,y,50,50);
(x,y)
(0,200)
(x2,y2)
(400,200)
INSTRUCCIONES CONDICIONALES
ZONA1
Six est entreAyB,
entoncesx=x+1
ZONA2
Six est entreB+1yC,
entoncesx=x+3
ZONA3
Six est entreC+1yD,
entoncesx=x+0.1
ZONA2
C B+1
ZONA3
D C+1
ZONA1
A B
(x,y)
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
rect (x*2,100,50,50); 2:1 x=60
rect (x/2,100,50,50); 1:2 x=60
rect (x,100,50,50); 1:1 x=60
Respuesta relacin Estmulo
MOUSEcomoestmulo
Esposiblehacerusodelosdatosrecogidosporelmouse paracontrolar,la
posicin,tamao,color,yotraspropiedadesdelasformas.
Losdatosproporcionadosporelmouse,soninterpretadoscomounaposicinen
lapantalla,esdecir,indicaunvalorespecficoparaelejex,yotroparaelejey los
cualespuedensermodificadosdeacuerdoalamanipulacindelmouse.
FUNCIONES
mouseX (posicinenelejexdelmouse)
mouseY (posicinenelejeydelmouse)
Ejemplo:
INTERACCION
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);
}
(mouseX,50)
(pmouseX,350)
EJERCICIOS
EJERCICIO17: Dibujeunafiguraquesigaelcursor.
EJERCICIO18: Dibujeunafiguraquesemuevadeunaformadiferentealcursor.
EJERCICIO19: Dibujetresfigurasquesemuevandeformasdiferentesrespecto alcursor.
BACKGROUND
backgrounddentrodelmtodosetup()
Cuandolascaractersticasdelafuncin
background() estndescritasenelmtodo
setup(),estosignificaqueelfondosolovaa
serpintado1vezalejecutarelprograma.
backgrounddentrodelmtododraw()
Cuandolascaractersticasdelafuncin
background() estndescritasenelmtodo
draw(),elfondosepintacadavezquese
repiteeldraw()loquegeneraelefectode
refrescarlapantalla
DIBUJO
void setup(){
size (400,400);
background(0);
smooth();
}
void draw (){
ellipse (mouseX,mouseY,100,100);
}
void setup(){
size (400,400);
smooth();
}
void draw (){
background(0);
ellipse (mouseX,mouseY,100,100);
}
BACKGROUND
transparencia
Paraconseguirunefectoderefrescar
pantalla gradualmente,esnecesarioaplicar
unfondofalso(unrectngulocuyorelleno
tengaunatransparencia)quesedibujacada
vezqueelmetodo draw()haceunloop.
DIBUJO
voidsetup(){
size(400,400);
background(0);
smooth();
}
voiddraw(){
fill(0,0,0,20);
rect(0,0,width,height);
fill(255);
ellipse(mouseX,mouseY,100,100);
}
Colorbaseparaelfondo
Colorderellenoparaelfondofalso
Rectnguloquedibujael
fondofalso
HERRAMIETADEDIBUJO
Esunaformainteractivadedibujar.Elusuariodealguna
formapuedecontrolar elcomportamientodeloquese
dibujaenellienzo.
Ejemplo:
DIBUJO
void setup(){
size (400,400);
background(0);
smooth();
}
void draw (){
strokeWeight(4);
stroke (255);
point (mouseX,mouseY);
}
Patrndedibujo
HERRAMIETADEDIBUJOCONFIGURABLE
DIBUJO
Paracambiarelcolordel
fondoyborrarellienzo
Elcolordelaslneasdependedela
posicinenelejexdelmouse ydel
botndelmouse queespresionado
Sielbotnizquierdoest presionado
stroke (mouseX,mouseY,0);
Sielbotnderechoest presionado
stroke (mouseX);
Sialgunodelosbotonesdel
mouse est presionadosobrela
zonadelrectnguloblanco
background(255);
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);
}
}
DIBUJO
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.