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

má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;

Juego
Sistema solar