Tutorial de Processing (VIII)

Movimiento de parámetros

Si en el paso anterior vimos cómo programar el movimiento de un objeto, en este caso vamos a provocar movimiento por cambio de parámetros de forma (ancho y alto), movimiento circular y rotación de objetos.

Movimiento por cambio de parámetros de forma (ancho y alto)

Veamos cómo podemos incrementar gradualmente el diámetro de un círculo. Como vemos en el siguiente código, el parámetro que se varía es el radio del círculo (radio = radio + 0.5;), mientras que su posición es fija (ellipse(200,200,radio,radio);).

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

 

Movimiento circular o cómo mover una figura siguiendo una circunferencia

Observa la siguiente figura:



a = h*cos (angulo)
x = pos_x + radio* cos(angulo);
o = h*sin (angulo)
y = pos_y +radio* sin(angulo);

 

Y ahora observa el siguiente código, donde crearemos las variables de posición (x,y) y de ángulo.

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

 

Rotación

Observa el siguiente código:

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;    // La variación en el ángulo determina la velocidad del movimiento
translate(200, 200);          // Traslada el origen del “lienzo” (originalmente, el punto (0, 0) está en la esquina superior izquierda) al punto señalado (200,200)
rotate (angulo);                 // Ejecuta la rotación de todo el lienzo tomando como eje el origen del mismo
rect(10, 10, 100, 100);
}

 

Ejercicio 12: mueva una figura rápidamente a través de la pantalla.

Ejercicio 13: mueva tres figuras, cada una de una forma diferente.

 

Solución ejercicio 12

int pos_x = 0;
int pos_y = 0;
int diam = 100;
float vel = 0;
void setup( ){
size (400,400);
smooth();
}
void draw ( ){
background (0);
noStroke();
fill(255);
rect (pos_x+vel, pos_y+vel, 100, 50);
vel=vel+10;
}

 

Solución ejercicio 13

int pos_x = 0;
int pos_y = 0;
int pos_x1 = 0;
int pos_y1 = 400;
float vel = 0;
float vel2 = 0;
int posx2 = 300;
int posy2 = 50;
float estirar = 0;
void setup( ){
size (400,400);
smooth();
}
void draw ( ){
background (100);
fill(255);
rect (pos_x+vel, pos_y+vel, 100, 50);
vel=vel+2;
ellipse (pos_x1+vel2,pos_y1-vel2,90,60);
vel2=vel2+1;
line (posx2+estirar,posy2+estirar,70+estirar,60-estirar);
estirar=estirar+1;
}

 

 

Tutorial de Processing (IX)