Para añadir movimiento a nuestros programas, tenemos que utilizar esta estructura:

void setup() {
// iniciamos los valores
}

void draw() {
// loop infinito en el que se dibujan las formas y cambian los valores que las definen
}

Variables
Son contenedores de valores, con una etiqueta (nombre) que nos permite identificarlos:
x, y, a, b, f, numVueltas, veloc, dir, pos, sexo, edad...
debemos utilizar un nombre corto pero descriptivo

Tipos de variables
En Processing podemos utilizar variables para distintos tipo de datos:

int x; // integer: número entero (sin decimales). ej: x=1;
float x; // float: número con decimales (coma flotante). ej: x=0.25;
boolean vivo; sólo dos valores (verdadero-falso). ej: vivo = true;

Existen otras como byte, long, double, que no suelen utilizarse en este lenguaje.
Existen otras para definir colores, letras y textos.

Definir e inicializar variables
La variables que se van a utilizar en todo el sketch se definen al principìo, y asignamos su valor inicial en setup().

int x;

void setup() {
  x=1;
}


Utilizando las variables
Podemos usar las variables en vez de cualquier número en las órdenes de dibujo. En vez de:
line(0,0,100,100); 
podemos usar:
line(x,0,100,100); o bien line(x,y,100,100); o incluso line(x1,y1,x2,y2); 

En el último caso hemos eliminado números arbitrarios en el código y hemos universalizado nuestro código, de modo que esa línea puede funcionar en distintos contextos sin tener que modificarla directamente.

Moviendo una forma
Cambiando el valor de las variables podemos hacer que las formas se desplacen por la pantalla, al cambiar las coordenadas de dibujo.

int x;
void setup() {
  x=0;
}
void draw() {
  ellipse (x,50,20,20);
  x=x+1;
}

Mediante la orden " x=x+1; " (que en matemáticas no tiene sentido) estamos diciendo al ordenador que sume uno al valor contenido en "x".
Cada vez que se repite el bucle principal (la función "draw"), el valor de x se incrementa. 
El círculo se dibuja en cada vuelta un píxel más a la derecha.


Condicionales
Para evitar que salga de la pantalla, podemos comprobar si el valor de x es mayor que nuestra ventana y cambiarlo directamente. 


if (x>width) { // width es una variable del sistema que contiene el valor en píxeles del ancho de la ventana
  x=0;  // volvemos al principio
}

En el paréntesis de una condición podemos poner cualquier cálculo, por complejo que sea, que al final devuelva el valor de cierto o falso. Podemos utilizar comparaciones de igualdad "==", no igualdad "!=", mayor que ">", menor que "<", mayour o igual ">=", menor o igual "<=".



Cambiando de dirección
Si queremos que la bola cambie de dirección y retroceda, tendríamos que modificar el código para que en vez de "x=x+1" sea "x=x-1".
Pero en Processing no podemos modificar el código cuando se está ejecutando. Para conseguirlo recurriremos a una variable, que utilizaremos como incremento de x (incX). El valor de esta variable puede ser positivo o negativo, y de este modo la bola puede ir y venir por la pantalla.


int x, incX; // declaramos dos variable tipo entero en la misma línea
  void setup() {
  x=0; // posición x inicial
  incX=1; // incremento de x inicial= hacia la derecha
}
void draw() {
  ellipse (x,50,20,20);
  x=incX;
  if (x>width) { // width es una variable del sistema que contiene el valor en píxeles del ancho de la ventana
  incX = -1; // ahora irá hacia la izquierda
  }
}

Para evitar que salga por la izquierda de la ventana tendremos que añadir una comprobación adicional.
if (x<0) { 
  incX = 1; // ahora irá hacia la derecha
}