Intro a Processing v43-01 - Act2015 - 14

1Punto 14 Movimientos simples

MovimientoEn esta seccin revisaremos tres clases de movimiento: implcito, explcito y mediantetransformacin.

Movimiento implcito en una direccinPara poner en movimiento una figura, necesitamos al menos usar una variable para cambiar unatributo.

El siguiente ejemplo presenta un movimiento implcito, es decir un movimiento rectilneo uniformeque 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 desenfoquePuede crear un efecto de desenfoque utilizando un rectngulo semitransparente dentro del bloquedraw().La cantidad de desenfoque es controlado por el valor del parmetro de transparencia usado parapintar el relleno del rectngulo (la funcin fill()).Los nmeros cercanos a 255 refrescarn rpidamente la pantalla, mientras que los cercanos a 0crearn un fundido lento.

Veamos su aplicacin en el siguiente ejemplo:floaty=50.0;floatvelocidad=1.0;floatradio=15.0;intdireccion=1;

EntornosdedesarrollodeimagengenerativaUniversidadNacionaldeQuilmesDocente:RalF.Lacabanne|URL:http://raullacabanne.com.ar/

2voidsetup(){size(100,100);smooth();noStroke();ellipseMode(RADIUS);}

voiddraw(){fill(0,12);//Valoresfuncionalesentre10y100rect(0,0,width,height);fill(255);ellipse(33,y,radio,radio);y+=velocidad*direccion;if((y>heightradio)||(ywidthradio)||(xheightradio)||(y

3Movimiento explcito en dos direccionesSi deseamos mover una figura desde y hasta una posicin especfica, debemos incorporar algunasvariables de control ms:floatorigenX=20.0;//CoordenadadeorigenenXfloatorigenY=10.0;//CoordenadadeorigenenYfloatdestinoX=70.0;//CoordenadadedestinoenXfloatdestinoY=80.0;//CoordenadadedestinoenYfloatdistX;//DistanciaamoverenejeXfloatdistY;//DistanciaamoverenejeYfloatx=0.0;//CoordenadaactualenXfloaty=0.0;//CoordenadaactualenYfloatpaso=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

4voiddraw(){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 simplesLas funciones exponenciales son muy tiles a la hora de crear curvas simples. En general se utilizanvalores normalizados en conjuncin con la funcin pow() para producir incrementos y decrementosexponenciales de nmeros que nunca exceden el rango de 0.0 a 1.0. Estas ecuaciones tienen lasiguiente forma:

y = xe

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

Veamos dos ejemplos:for(intx=0;x

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


6Movimiento explcito curvoPodemos utilizar ecuaciones exponenciales para generar recorridos curvos en vez de rectilneos:floatorigenX=20.0;//CoordenadadeorigenenXfloatorigenY=10.0;//CoordenadadeorigenenYfloatdestinoX=70.0;//CoordenadadedestinoenXfloatdestinoY=80.0;//CoordenadadedestinoenYfloatdistX;//DistanciaamoverenejeXfloatdistY;//DistanciaamoverenejeXfloatexponente=0.5;//Determinaeltipodecurvafloatx=0.0;//CoordenadaactualenXfloaty=0.0;//CoordenadaactualenYfloatpaso=0.01;//Tamaodecadapaso(0.0a1.0)floatpct=0.0;//Porcentajerecorrido(0.0a1.0)


voiddraw(){fill(0,2);rect(0,0,width,height);pct+=paso;if(pct

7floatdestinoY=80.0;//CoordenadadedestinoenYfloatdistX;//DistanciaamoverenejeXfloatdistY;//DistanciaamoverenejeXfloatexponente=3.0;//Determinaeltipodecurvafloatx=0.0;//CoordenadaactualenXfloaty=0.0;//CoordenadaactualenYfloatpaso=0.01;//Tamaodecadapaso(0.0a1.0)floatpct=0.0;//Porcentajerecorrido(0.0a1.0)intdireccion=1;


voiddraw(){fill(0,2);rect(0,0,width,height);pct+=paso*direccion;if((pct>1.0)||(pct

8floatx=0.0;//CoordenadaactualenXfloaty=0.0;//CoordenadaactualenYfloatpaso=0.01;//Tamaodecadapaso(0.0a1.0)floatpct=0.0;//Porcentajerecorrido(0.0a1.0)


voiddraw(){fill(0,2);rect(0,0,width,height);if(pct

9Del 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 andArtists, MIT Press, 2007, Captulo "Motion 1: Lines, Curves" (pag. 279).


Punto 14 Movimientos simplesMovimientoMovimiento implcito en una direccinEfecto de desenfoqueMovimiento implcito en dos direccionesMovimiento explcito en dos direccionesMovimiento explcito + easing + desenfoqueCurvas simplesMovimiento explcito curvoCambio de velocidad mediante ecuacin exponencialMovimiento mediante transformacinLectura recomendada

Documents

Intro a Processing v43-01 - Act2015 - 14