1

Punto 14 Movimientos simples

Movimiento
En esta seccin revisaremos tres clases de movimiento: implcito, explcito y mediante
transformacin.

Movimiento implcito en una direccin

Para poner en movimiento una figura, necesitamos al menos usar una variable para cambiar un
atributo.
El siguiente ejemplo presenta un movimiento implcito, es decir un movimiento rectilneo uniforme
que no contempla posicin de origen ni de destino:
floaty=50.0;
floatvelocidad=1.0;
floatradio=15.0;
voidsetup(){
size(100,100);
smooth();
noStroke();
ellipseMode(RADIUS);
}
voiddraw(){
background(0);
ellipse(33,y,radio,radio);
y=y+velocidad;
if(y>height+radio){
y=radio;
}
}

Efecto de desenfoque
Puede crear un efecto de desenfoque utilizando un rectngulo semitransparente dentro del bloque
draw().
La cantidad de desenfoque es controlado por el valor del parmetro de transparencia usado para
pintar el relleno del rectngulo (la funcin fill()).
Los nmeros cercanos a 255 refrescarn rpidamente la pantalla, mientras que los cercanos a 0
crearn un fundido lento.
Veamos su aplicacin en el siguiente ejemplo:
floaty=50.0;
floatvelocidad=1.0;
floatradio=15.0;
intdireccion=1;
EntornosdedesarrollodeimagengenerativaUniversidadNacionaldeQuilmes
Docente:RalF.Lacabanne|URL:http://raullacabanne.com.ar/

2
voidsetup(){
size(100,100);
smooth();
noStroke();
ellipseMode(RADIUS);
}
voiddraw(){
fill(0,12);//Valoresfuncionalesentre10y100
rect(0,0,width,height);
fill(255);
ellipse(33,y,radio,radio);
y+=velocidad*direccion;
if((y>heightradio)||(y<radio)){
direccion=direccion;
}
}

Movimiento implcito en dos direcciones

Tambin podemos utilizar un segundo conjunto de variables para aprovechar el movimiento en el
eje X:
floatx=50.0;//coordenadaenX
floaty=50.0;//coordenadaenY
floatradio=15.0;//radiodelcrculo
floatvelocidadX=1.0;//velocidaddemov.enejeX
floatvelocidadY=0.4;//velocidaddemov.enejeY
intdireccionX=1;//direccindemov.enejeX
intdireccionY=1;//direccindemov.enejeX
voidsetup(){
size(100,100);
smooth();
noStroke();
ellipseMode(RADIUS);
}
voiddraw(){
fill(0,12);
rect(0,0,width,height);
fill(255);
ellipse(x,y,radio,radio);
x+=velocidadX*direccionX;
if((x>widthradio)||(x<radio)){
direccionX=direccionX;//cambiadireccin
}
y+=velocidadY*direccionY;
if((y>heightradio)||(y<radio)){
direccionY=direccionY;//cambiadireccin
}
}

EntornosdedesarrollodeimagengenerativaUniversidadNacionaldeQuilmes
Docente:RalF.Lacabanne|URL:http://raullacabanne.com.ar/

Movimiento explcito en dos direcciones

Si deseamos mover una figura desde y hasta una posicin especfica, debemos incorporar algunas
variables de control ms:
floatorigenX=20.0;//CoordenadadeorigenenX
floatorigenY=10.0;//CoordenadadeorigenenY
floatdestinoX=70.0;//CoordenadadedestinoenX
floatdestinoY=80.0;//CoordenadadedestinoenY
floatdistX;//DistanciaamoverenejeX
floatdistY;//DistanciaamoverenejeY
floatx=0.0;//CoordenadaactualenX
floaty=0.0;//CoordenadaactualenY
floatpaso=0.02;//Tamaodecadapaso(0.0a0.4)
floatpct=0.0;//Porcentajerecorrido(0.0a1.0)
voidsetup(){
size(100,100);
noStroke();
smooth();
distX=destinoXorigenX;
distY=destinoYorigenY;
}
voiddraw(){
fill(0,12);
rect(0,0,width,height);
pct+=paso;
if(pct<1.0){
x=origenX+(pct*distX);
y=origenY+(pct*distY);
}
fill(255);
ellipse(x,y,20,20);
}

Movimiento explcito + easing + desenfoque

El siguiente es un ejemplo de combinacin de tres tcnicas: movimiento explcito, easing y
desenfoque:
floatorigenX=20.0;//CoordenadadeorigenenX
floatorigenY=10.0;//CoordenadadeorigenenY
floatdestinoX=70.0;//CoordenadadedestinoenX
floatdestinoY=80.0;//CoordenadadedestinoenY
floateasing=0.05;//Tamaodecadaparaalolargodelrecorrido
voidsetup(){
size(100,100);
noStroke();
smooth();
}

EntornosdedesarrollodeimagengenerativaUniversidadNacionaldeQuilmes
Docente:RalF.Lacabanne|URL:http://raullacabanne.com.ar/

4
voiddraw(){
fill(0,12);
rect(0,0,width,height);
floatd=dist(origenX,origenY,destinoX,destinoY);
if(d>1.0){
origenX+=(destinoXorigenX)*easing;
origenY+=(destinoYorigenY)*easing;
}
fill(255);
ellipse(origenX,origenY,20,20);
}

Curvas simples
Las funciones exponenciales son muy tiles a la hora de crear curvas simples. En general se utilizan
valores normalizados en conjuncin con la funcin pow() para producir incrementos y decrementos
exponenciales de nmeros que nunca exceden el rango de 0.0 a 1.0. Estas ecuaciones tienen la
siguiente forma:

y = xe
donde x (base) corresponde a un valor decimal entre 0.0 y 1.0 y e (exponente) corresponde a un
valor entero o decimal:

Veamos dos ejemplos:

for(intx=0;x<100;x++){
floatn=norm(x,0.0,100.0);//Rango0.0a1.0
floaty=pow(n,4);//Clculodecurva(exponente4)
y*=100;//Rango0.0a100.0
point(x,y);
}

for(intx=0;x<100;x++){
floatn=norm(x,0.0,100.0);//Rango0.0a1.0
floaty=pow(n,0.4);//Clculodecurva(exponente0.4)

EntornosdedesarrollodeimagengenerativaUniversidadNacionaldeQuilmes
Docente:RalF.Lacabanne|URL:http://raullacabanne.com.ar/

5
y*=100;//Rango0.0a100.0
point(x,y);
}

EntornosdedesarrollodeimagengenerativaUniversidadNacionaldeQuilmes
Docente:RalF.Lacabanne|URL:http://raullacabanne.com.ar/

Movimiento explcito curvo

Podemos utilizar ecuaciones exponenciales para generar recorridos curvos en vez de rectilneos:
floatorigenX=20.0;//CoordenadadeorigenenX
floatorigenY=10.0;//CoordenadadeorigenenY
floatdestinoX=70.0;//CoordenadadedestinoenX
floatdestinoY=80.0;//CoordenadadedestinoenY
floatdistX;//DistanciaamoverenejeX
floatdistY;//DistanciaamoverenejeX
floatexponente=0.5;//Determinaeltipodecurva
floatx=0.0;//CoordenadaactualenX
floaty=0.0;//CoordenadaactualenY
floatpaso=0.01;//Tamaodecadapaso(0.0a1.0)
floatpct=0.0;//Porcentajerecorrido(0.0a1.0)
voidsetup(){
size(100,100);
noStroke();
smooth();
distX=destinoXorigenX;
distY=destinoYorigenY;
}
voiddraw(){
fill(0,2);
rect(0,0,width,height);
pct+=paso;
if(pct<1.0){
x=origenX+(pct*distX);
y=origenY+(pow(pct,exponente)*distY);
}
fill(255);
ellipse(x,y,20,20);
}

Todas las curvas simples presentadas anteriormente pueden ser escaladas y combinadas para
generar recorridos nicos de movimiento. Una vez que se haya calculado un paso de una curva, el
programa puede calcular otras posiciones basadas en una curva diferente:
floatorigenX=20.0;//CoordenadadeorigenenX
floatorigenY=10.0;//CoordenadadeorigenenY
floatdestinoX=70.0;//CoordenadadedestinoenX
EntornosdedesarrollodeimagengenerativaUniversidadNacionaldeQuilmes
Docente:RalF.Lacabanne|URL:http://raullacabanne.com.ar/

7
floatdestinoY=80.0;//CoordenadadedestinoenY
floatdistX;//DistanciaamoverenejeX
floatdistY;//DistanciaamoverenejeX
floatexponente=3.0;//Determinaeltipodecurva
floatx=0.0;//CoordenadaactualenX
floaty=0.0;//CoordenadaactualenY
floatpaso=0.01;//Tamaodecadapaso(0.0a1.0)
floatpct=0.0;//Porcentajerecorrido(0.0a1.0)
intdireccion=1;
voidsetup(){
size(100,100);
noStroke();
smooth();
distX=destinoXorigenX;
distY=destinoYorigenY;
}
voiddraw(){
fill(0,2);
rect(0,0,width,height);
pct+=paso*direccion;
if((pct>1.0)||(pct<0.0)){
direccion=direccion*1;
}
if(direccion==1){
x=origenX+(pct*distX);
floate=pow(pct,exponente);
y=origenY+(e*distY);
}else{
x=origenX+(pct*distX);
floate=pow(1.0pct,exponente*2);
y=origenY+(e*distY)+distY;
}
fill(255);
ellipse(x,y,20,20);
}

Cambio de velocidad mediante ecuacin exponencial

El siguiente ejemplo muestra el cambio de velocidad del movimiento de una figura mediante una
ecuacin exponencial. El crculo comienza a moverse muy lentamente y luego se detiene en el
margen inferior del rea de representacin. La variable exponente describe la pendiente de la curva,
la cual cambia la velocidad del movimiento. Utilice el botn del ratn para seleccionar un nuevo
punto de origen:
floatorigenX=20.0;//CoordenadadeorigenenX
floatorigenY=10.0;//CoordenadadeorigenenY
floatdestinoX=70.0;//CoordenadadedestinoenX
floatdestinoY=80.0;//CoordenadadedestinoenY
floatdistX;//DistanciaamoverenejeX
floatdistY;//DistanciaamoverenejeX
floatexponente=3.0;//Determinaeltipodecurva
EntornosdedesarrollodeimagengenerativaUniversidadNacionaldeQuilmes
Docente:RalF.Lacabanne|URL:http://raullacabanne.com.ar/

8
floatx=0.0;//CoordenadaactualenX
floaty=0.0;//CoordenadaactualenY
floatpaso=0.01;//Tamaodecadapaso(0.0a1.0)
floatpct=0.0;//Porcentajerecorrido(0.0a1.0)
voidsetup(){
size(100,100);
noStroke();
smooth();
distX=destinoXorigenX;
distY=destinoYorigenY;
}
voiddraw(){
fill(0,2);
rect(0,0,width,height);
if(pct<1.0){
pct=pct+paso;
floatvelocidad=pow(pct,exponente);
x=origenX+(velocidad*distX);
y=origenY+(velocidad*distY);
}
fill(255);
ellipse(x,y,20,20);
}
voidmousePressed(){
pct=0.0;
origenX=x;
origenY=y;
distX=mouseXx;
distY=mouseYy;
}

Movimiento mediante transformacin

Las funciones de transformacin (translate(), rotate(), y scale()) tambin pueden crear
movimiento al cambiar los valores de sus parmetros. Antes de usar las transformaciones para el
movimiento, es importante remarcar que las transformaciones se reinicializan al comienzo de cada
bloque draw().
Por lo tanto, cuando se ejecuta translate(50, 0) dentro del bloque draw(), el sistema de
coordenadas se ajusta 50 pixeles a la derecha por nica vez hasta que se detenga el programa:
voidsetup(){
size(100,100);
smooth();
}
voiddraw(){
background(0);
translate(50,0);//Sereiniciaa50pxcadavezqueentraendraw
ellipse(0,50,60,60);
}
EntornosdedesarrollodeimagengenerativaUniversidadNacionaldeQuilmes
Docente:RalF.Lacabanne|URL:http://raullacabanne.com.ar/

9
Del mismo modo, las translaciones dentro del bloque setup() no tienen efecto en las figuras
producidas en el bloque draw():
voidsetup(){
size(100,100);
smooth();
translate(50,0);//Notieneefecto
}
voiddraw(){
background(0);
ellipse(0,50,60,60);
}

Las funciones de transformacin pueden ser utilizadas para generar movimiento, sin embargo su
uso puede ser un poco engorroso.
floatangulo=0.0;
voidsetup(){
size(100,100);
smooth();
noStroke();
}
voiddraw(){
fill(0,12);
rect(0,0,width,height);
fill(255);
angulo=angulo+0.02;
translate(70,40);
rotate(angulo);
rect(30,30,60,60);
}

Lectura recomendada

Buioli, I. & Prez Marn, J. "Processing: un lenguaje al alcance de todos", Autoedicin,

2013, Unidad 27 "Movimiento: Lneas y Curvas" (pag. 138).
Reas, C. & Fry, B. "Processing: A Programming Handbook for Visual Designers and
Artists, MIT Press, 2007, Captulo "Motion 1: Lines, Curves" (pag. 279).

EntornosdedesarrollodeimagengenerativaUniversidadNacionaldeQuilmes
Docente:RalF.Lacabanne|URL:http://raullacabanne.com.ar/