Processing: Condiciones: y Variables = Movimiento: Lógica y Dibujo
En el siguiente ejemplo se tomarán las variables y condiciones para generar un movimiento “controlado”, mismo que será aplicado en un elipse. Para lograr esto se deberá identificar la Lógica de programar con Processing y el Dibujo como la parte visual que se obtiene/crea.
El primer paso es separar las acciones dentro de draw(). La primer parte será la Lógica y la segunda el Dibujo:

Para comenzar con el movimiento debemos crear variables que almacenará la posición en X y Y de un “algo” (en este caso utilizaremos la elipse para representar ese “algo”). Una vez creadas las variables, para poder ver su resultado gráficamente debemos sustituir estos valores dentro del dibujo de la elipse:

Modo Tweak
El Modo Tweak nos permite interactuar con variables y propiedades inicializadas dentro del draw(). Para trabajar en este ejemplo inicializaremos las variables como prueba en la primer línea del draw():

Ejecutamos el Sketch en modo Tweak y veremos que las variables (parte de la lógica) controlan al dibujo. Para activar Tweak : Barra superior > Sketch > Tweak:


Basándonos en esta misma constante, comenzaremos a crear la lógica que definirá cuál es la posición de las variables, y podremos ver los resultados gráficos gracias a que el dibujo de la elipse esta asignado relativamente al valor de las variables.
La lógica: el movimiento
Haremos que exista un incremento de valor constante para las variables “posicionX y Y”. En este caso buscamos que cada frame transcurrido ocurra un incremento en su valor. “posicionX y Y” son float(número decimal), por lo que para incrementar su valor lo tendremos que hacer con otro valor decimal. Creamos las variables velocidadX y velocidadY:

Y comenzamos a incrementarlos dentro del draw(). Esta acción provocará el movimiento de la elipse:

Por cada draw() o frame transcurrido estamos incrementando el valor de posicionX/Y con velocidadX/Y. El primer análisis de lógica comienza al buscar evitar que el valor de posición exceda al ancho/alto de la ventana. Para esto utilizaremos una condición if(). La sintaxis de if es:
si (esto ocurre) entonces { esto acontece } de lo contrario { esto acontece }
En código se ve así:
![albin [rdz]](https://miro.medium.com/fit/c/160/160/0*elCo1Ka76jcMC89I.png)