Processing: Condiciones: y Variables = Movimiento: Lógica y Dibujo

albin [rdz]
Jul 21, 2017 · 3 min read

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]

Written by

Diseñador Digital | https://github.com/ealbinu | ealbinu@gmail.com | albin@dragonbarbudo.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade