Embedded Files
Processing permite animación las animaciones se basan en:
1- Desplazar imágenes en diversas trayectorias por medio de "frames " (cuadros de la animación) y controklar la velocidad de esos cuadros por minuto.
2- Modificar características como color, forma, tansparencia, bordes, colores en degradé, etc.
3-Transformar objetos mediante animación (como rotaciones y traslaciones y escalamiento (Homotecia).)
1-Los dibujos que hacemos en el lienzo son el rastro que deja un punto en movimiento.
2-No podemos modificar su color o su tamaño una vez trazadas.
3-Para observar lo que en realidad estamos haciendo podemos borrar a cada paso el rastro del anterior refrescando el fondo.
Trayectoria rectilínea horizontal (positiva)
(avanzar en el Eje X)
n=0;
x = 0;
y = 200;
void setup(){
size(400,400);
background(#336699);
stroke(255);}
void draw(){
point(x + 1, y+1);
n = n + 0.05;
x++;
}
Trayectoria rectilínea inversa - horizontal (positiva)
(retroceder en el Eje X)
n=0;
x = 400;
y = 200;
void setup(){
size(400,400);
background(#336699);
stroke(255);}
void draw(){
point(x + 1, y+1);
n = n + 0.05;
x--;
}
1-Animación simple aleatoria - La aguja de bufón
size(400,400);
void draw() {
line(random(400),random(400),random(400),random(400));
}
2 -La misma Animación aleatoria sin que se vea cada cada trayecto del dibujo.
size(400,400);
void draw() {
//background() borra el lienzo con un color
background(255, 204, 0);
line(random(400),random(400),random(400),random(400));
}
Trayectorias:
Para animar objetros, algo fundamental es crear trayectorias para que los objetos se desplacen por ellas.
Ejercicio 1- Trayectoria rectilínea
n=0;
x = 0;
y = 200;
void setup(){
size(400,400);
background(#336699);
stroke(255);}
void draw(){
point(x + 1, y+1);
n = n + 0.05;
x++;
}
Ejercicio 2-Trayectoria rectilínea inversa
n=0;
x = 400;
y = 200;
void setup(){
size(400,400);
background(#336699);
stroke(255);}
void draw(){
point(x + 1, y+1);
n = n + 0.05;
x--;
}
Ejercicio 3-Trayectoria rectilínea ascendente
Ejercicio 4-Trayectoria rectilínea descendente
-----------------------------------
Trayectorias diagonales
Trayectoria diagonal rectilínea descendente
n=0;
valor1 = 0;
valor2=0;
void setup(){
size(400,400);
background(#336699);
stroke(255);}
void draw(){
point(valor1, valor2);
n = n + 0.05;
valor1++;
valor2=valor1;
}
Trayectoria diagonal rectilínea ascendente
n=0;
valor1 = 400;
valor2=0;
void setup(){
size(400,400);
background(#336699);
stroke(255);}
void draw(){
point(valor1, valor2);
n = n + 0.05;
valor1--;
valor2=valor1;
}
Trayectoria ondulada con Seno y Coseno
Trayectoria ondulada
Animar un punto en trayectoria ondulada - Dibujar una onda mediante las distintas posiciones de un punto
//Definir la primer variable nos ayuda a dibujar la onda
float n = 0;
//y otra hace que el punto avance
float x = 0;
//------------------------------------------------------
void setup(){
size(659,100);
background(#336699);
stroke(255); }
//------------------------------------------------------
void draw(){
// Aquí está la clave del movimiento ondulante
point(x, height/2 + sin(n) * 40);
n = n + 0.05;
x = x + 1;
}
Trayectoria ondulada en el sentido contrario
float n = 0;
cho del lienzo.
float x = 400;
void setup(){
size(400,400);
background(#336699);
stroke(255);}
void draw(){
//esta es la clave
point(x, height/2 + sin(n) * 40);
n = n + 0.05;
x = x - 1;}
Trayectoria inversa
//Cambie la función ellipse, por cualquier otra función de dibujo y modifique sus parámetros.
float n = 0;
float x = 0;
void setup(){
size(600,600);
background(#336699);
stroke(255);}
void draw(){
//esta es la clave
ellipse(x, height/2 + sin(n) * 40, 10,50);
n = n + 0.05;
x = x + 1;}
Ahora la línea de la animación empezará desde arriba.
float n = 0;
//aquí cambianos el nombre de la variable a "y" así como en otras partes del código.
float y = 0;
// height/2 + sin(n) * 40 ...deberemos en el primer parámetro de "punto".
void setup(){
size(400,400);
background(#336699);
stroke(255);}
void draw(){
//esta es la clave
point(height/2 + sin(n) * 40, y);
n = n + 0.05;
y = y + 1;}
Ahora desde abajo
//Ahora desde abajo
float n = 0;
//aquí cambianos el nombre de la variable a "y" así como en otras partes del código.
float y = 400;
// height/2 + sin(n) * 40 ...deberemos en el primer parámetro de "punto".
void setup(){
size(400,400);
background(#336699);
stroke(255);}
void draw(){
//esta es la clave
point(height/2 + sin(n) * 40, y);
n = n + 0.05;
y = y - 1;}
Ejercicios extra
Aplique éstas trayectorias a todos los tipos de objetos
Ejercicio extra -1 Trayectoria ondulada aplicada a una Elipse
//Cambie la función que dibuja por cualquier otra función de dibujo de objeto y modifique sus parámetros.
float n = 0;
float x = 0;
void setup(){
size(600,600);
background(#336699);
stroke(255);}
void draw(){
//esta es la clave
ellipse(x, height/2 + sin(n) * 40, 10,50);
n = n + 0.05;
x = x + 1;}
Rectángulo en trayectoria ondulada
float n = 0;
float x = 0;
void setup(){
size(400,400);
stroke(55,150,155);
}
void draw(){
//esta es la clave
rect(x, height/2 + sin(n) * 40, 20,20);
n = n + 0.05;
x = x + 1;
}
Arte Generativo
- Trayectoria mediante senos, cosenos y números aleatorios.
n=0;
x = 200;
y = 400;
r=random(50,250);
r3=random(20,150);
r2=random(0.1,0.01);
void setup(){
frameRate(r/r2/r3*3);
size(400,400);
background(199,39,199,40);
stroke(r,255,0,r2*r3*3);}
strokeWeight(r3);
void draw(){
point(x - cos(n)/3*r3, y * sin(n)/r3*150+r);
n = n + r2;
y=x+r;
y--;
}
Page updated
Google Sites
Report abuse