UNIDAD 5.

- INTRODUCCIÓN A LA ANIMACIÓN POR

COMPUTADORA.
ACTIVIDADES EXTRA-CLASES

int tamano;

void setup(){

size(200,200);

tamano = 1;

void draw(){

background(125, 0, 0);

rect(0, 0, tamano, tamano);

tamano += 1;

tamano = tamano % width;

float n = 0;

float r = 0;

void setup(){

size(300,300);

background(#336699);

stroke(255);

// Aumentamos el tamaño del punto para verlo mejor

strokeWeight(5);

void draw(){

// Refrescamos el fondo en cada paso

background(#336699);

point(width/2 + cos(n) * sin(n/10) * r, height/2 + sin(n) * cos(n/15) * r);

n = n + 0.05;

r = r + 0.1;

}
float n = 0;

float r = 0;

void setup() {

size(300, 300);

background(#336699);

stroke(255);

strokeWeight(5);

void draw() {

point(width/2 + cos(n) * sin(n/10) * r, height/2 + sin(n) * cos(n/15) * r);

// Color y transparencia del rectángulo

fill(#336699, 50);

// Dibujamos el rectángulo después de mover el punto

rect(0, 0, width, height);

n = n + 0.05;

r = r + 0.1;

float y = 0.0;

void setup() {

size(100, 100);

smooth();

fill(0);

void draw() {

background(204);

ellipse(50, y, 70, 70);

y += 0.5;

if (y > 150) {

y = -50.0;

}
int numFrames = 12; // Número de imagenes en la animación

int frame = 0;

PImage[] images = new PImage[numFrames]; // Array de imágenes

void setup() {

size(100, 100);

frameRate(30); // Velocidad en fps

images[0] = loadImage("0.jpg");

images[1] = loadImage("1.jpg");

images[2] = loadImage("2.jpg");

images[3] = loadImage("3.jpg");

images[4] = loadImage("4.jpg");

images[5] = loadImage("5.jpg");

images[6] = loadImage("6.jpg");

images[7] = loadImage("7.jpg");

images[8] = loadImage("8.jpg");

images[9] = loadImage("9.jpg");

images[10] = loadImage("10.jpg");

images[11] = loadImage("11.jpg");

void draw() {

frame++;

if (frame == numFrames) {

frame = 0;

image(images[frame], 0, 0);

}
Imágenes secuenciales
Antes de presentarse las imagenes de manera secuencial, primero deben ser
cargadas, la variable de las imágenes debe ser declarada antes fuera del
setup() y draw() y asignarla dentro del setup(). En el siguiente ejemplo
se cargan y reproducen 12 imágenes:

int numFrames = 12; // Número de imagenes en la animación

int frame = 0;
PImage[] images = new PImage[numFrames]; // Array de imágenes
void setup() {
size(100, 100);
frameRate(30); // Velocidad en fps
images[0] = loadImage("0.jpg");
images[1] = loadImage("1.jpg");
images[2] = loadImage("2.jpg");
images[3] = loadImage("3.jpg");
images[4] = loadImage("4.jpg");
images[5] = loadImage("5.jpg");
images[6] = loadImage("6.jpg");
images[7] = loadImage("7.jpg");
images[8] = loadImage("8.jpg");
images[9] = loadImage("9.jpg");
images[10] = loadImage("10.jpg");
images[11] = loadImage("11.jpg");
}
void draw() {
frame++;
if (frame == numFrames) {
frame = 0;
}
image(images[frame], 0, 0);
}

El próximo ejemplo muestra una alternative para leer imágenes utilizando

una estructura for. Este código nos puede valer para utilizarlo en cualquier
sistema que tenga entre 1 y 999 imágenes tan solo con cambiar el valor del
número de frames. Cuando termina la animación regresa a la primera imagen.

La función nf() puede usarse para formatear el nombre de la imagen a leer.

Con nf(i, 2) el número crece, empezando con un cero a la izquierda.

El operador % operator se usa para la variable frameCount para hacer que

variable se incremente en cada frame y devuelve 0 si se pasa de 11.

int numFrames = 12;

PImage[] images = new PImage[numFrames];
void setup() {
size(400, 500);
frameRate(3);
for (int i = 0; i < images.length; i++) {
String imageName = + i + ".jpg";
images[i] = loadImage(imageName);
}
}
void draw() {
int frame = frameCount % numFrames;
image(images[frame], 0, 0);
}
Para mostrar las imágenes en un orden aleatorio, y con un tming (frames
por segundo) también aleatorio. Puede dar el aspecto de mas
framediferentes de los que realmente existen.

int numFrames = 12;

PImage[] images = new PImage[numFrames];
void setup() {
size(400, 500);
frameRate(3);
for (int i = 0; i < images.length; i++) {
String imageName = + i + ".jpg";
images[i] = loadImage(imageName);
}
}
void draw() {
int frame = int(random(0, numFrames));
image(images[frame], 0, 0);
frameRate(random(1, 60.0));
}

Hay muchas formas de controlar la velocidad de ejecución de una animación.

La function frameRate() es la manera mas simple. Colocar la función
frameRate() en setup() como en el ejemplo anterior.

Imagenes en movimiento
Otra posibilidad de animación con imagenes además de cargar una secuencia
es moverlas, En el siguiente ejemplo movemos una imagen de izquierda a
derecha y regresa a la izquierda cuando desaparece de la pantalla.

PImage img;
float x;
void setup() {
size(400, 500);
img = loadImage("0.jpg");
}
void draw() {
background(204);
x += 0.5;
if (x > width) {
x = -width;
}
image(img, x, 0);
}

Las funciones de transformación también se pueden aplicar a las imágenes.

Se pueden trasladar, rotar y escalar. En el siguiente ejemplo una imagen
se traslada al centro de la pantalla y se rota alrededor de centro.
PImage img;
float angle;
void setup() {
size(400, 500);
img = loadImage("0.jpg");
}
void draw() {
background(204);
angle += 0.01;
translate(200, 250);
rotate(angle);
image(img, -200, -250);
}

Las imágenes también pueden ser animadas cambiando sus atributos de dibujo.
En el siguiente ejemplo la opacidad de una imagen se incrementa 0.5 en cada
frame.

PImage img;
float opacity = 0;
void setup() {
size(200, 200);
img = loadImage("vg.jpg");
}
void draw() {
background(0);
if (opacity < 255) {
opacity += 0.5;
}
tint(255, opacity);
image(img, 0, 0);
}

int numFrames = 12; // The number of frames in the animation

int currentFrame = 0;

PImage[] images = new PImage[numFrames];

void setup() {

size(640, 360);

frameRate(24);

images[0] = loadImage("1a.gif");

images[1] = loadImage("1a.gif");

images[2] = loadImage("1a.gif");

images[3] = loadImage("1a.gif");

images[4] = loadImage("1a.gif");

images[5] = loadImage("1a.gif");

images[6] = loadImage("1a.gif");

images[7] = loadImage("1a.gif");
 images[8] = loadImage("1a.gif");

images[9] = loadImage("1a.gif");

images[10] = loadImage("1a.gif");

images[11] = loadImage("1a.gif");

// If you don't want to load each image separately

// and you know how many frames you have, you

// can create the filenames as the program runs.

// The nf() command does number formatting, which will

// ensure that the number is (in this case) 4 digits.

//for (int i = 0; i < numFrames; i++) {

// String imageName = "PT_anim" + nf(i, 4) + ".gif";

// images[i] = loadImage(imageName);

//}

void draw() {

background(0);

currentFrame = (currentFrame+1) % numFrames; // Use % to cycle through frames

int offset = 0;

for (int x = -100; x < width; x += images[0].width) {

image(images[(currentFrame+offset) % numFrames], x, -20);

offset+=2;

image(images[(currentFrame+offset) % numFrames], x, height/2);

offset+=2;

int x=0; // servirá para indicar la posición de nuestro personaje en pantalla en

el eje de las x's.

PImage p; // Contiene la imagen principal con todas las secuencias de nuestro

personaje

PImage fondo; // Es el lugar donde se moverá el personaje

PImage m[]; // aquí se guardará de momento en un arreglo cada secuencia del personaje

int n; // servirá para indicar el índice en el arreglo

int y; // indica la altura para la posición del personaje en pantalla

public void setup(){

size(1000,500);
 fondo = loadImage("CALLEE.jpg"); // nombre del recurso imagen

m = new PImage[8];

p = loadImage("NINOO.png"); // nombre del recurso imagen

m[0] = p.get(28,0,75,140); //47

m[1] = p.get(126,14,88,140); //

m[2] = p.get(214,0,108,140);

m[3] = p.get(334,-4,100,140);

m[4] = p.get(450,-2,100,140);

m[5] = p.get(551,12,100,140);

m[6] = p.get(652,0,100,140);

m[7] = p.get(766,-2,98,140);

n=0;

y = 300;

frameRate(8); // Velocidad de cuadros a desplegar, a

menor valor más lento

public void draw(){

image(fondo,0,-150); // Se depliega primero el fondo de pantalla

image(m[n],x,y); // Después se depliega la imagen

if(x > width)

x=0;

public void keyPressed(){

if(keyCode == RIGHT){

n++;

x += 8;

if(n==8)

n=0;

}
CALLEE:https://sp.depositphotos.com/64301933/stock-illustration-cute-cartoon-homes-on-
street.html

NINO: http://blaiprat.github.io/jquery.animateSprite/img/scottpilgrim_multiple.png

Juegos

 Laberinto
 Avión