Taller Processing

Estudio
Viernes 16, agosto de 2019
6
Andrés Burbano, Ph.D.
Departamento de Diseño – Universidad de los Andes
 Conceptos básicos 
1. Canvas, Plano Cartesiano

2. Funciones (gráficas) – parámetros

3. Tipos de datos

4. Variables

5. Condicionales

6. Operaciones

7. Repeticiones Iteraciones
 Gráfica / Conceptos básicos 
… en este caso en particular el eje X y el eje Y crecen
positivamente en el lienzo (canvas), el X de izquierda a
derecha y el Y de arriba abajo.
 Sintaxis básica

Processing es un lenguaje de programación orientado a

objetos basado en Java y por lo tanto conserva la sintaxis
de dicho lenguaje.

“Processing es un lenguaje de programación y entorno de

desarrollo integrado de código abierto basado en Java, de
fácil utilización, y que sirve como medio para la
enseñanza y producción de proyectos multimedia e
interactivos de diseño digital.

Fue iniciado por Ben Fry y Casey Reas.”

 Tamaño del canvas

// tamaño del lienzo o canvas

// Donde el tamaño se da en pixeles
size(500,500);
size(ancho, alto, modo);
 Comentarios

// dos barras para comentar una línea de

instrucciones

/* barra y asterisco
para comentar
un bloque de instrucciones */
 Puntos

// ubicación del punto en el plano cartesiano, X y Y son positivos

point(posición X, posición Y, posición Z);
point(50,50);
https://processing.org/reference/point_.html
 Líneas

// Una línea se define con 2 puntos, es decir con 4 valores

line(posición X, posición Y, posición X’, posición Y’);
line(50,50,100,100);
https://processing.org/reference/line_.html
 Rectángulo

// Un rectángulo se define con 4 valores, 2 para posición,

// dos para tamaño en cada eje
rect(posición X, posición Y, ancho, alto);
rect(50,50,100,100);
https://processing.org/reference/rect_.html
 Círculo

// Una elipse se define con 4 valores, 2 para posición,

// dos para tamaño en cada eje
ellipse(posición X, posición Y, ancho, alto);
ellipse(50,50,100,100);
https://processing.org/reference/ellipse_.html
 Triángulo

// Un triángulo se hace de 3 puntos,

// es decir de 6 valores
triangle(posición X, posición Y, posición X’, posición Y’, posición
X”, posición Y”);
triangle(200,200,100,300,300,300);
https://processing.org/reference/triangle_.html
 Cuadrilatero

//Un cuadrilátero es una figura geométrica cerrada con 4 ángulos

// Se define con 8 valores para escribir 4 puntos.
quead(posición X, posición Y, posición X’, posición Y’, posición X”,
posición Y”, posición X’”, posición Y’”);
quad(38, 31, 86, 20, 69, 63, 30, 76);
https://processing.org/reference/quad_.html
 Arco

//El arco se define con 6 valores, los dos últimos son el inicio y el
final del arco expresado en PI.
arc(x, y, ancho, alto, inicio, final);
arc(50, 55, 50, 50, 0, PI+QUARTER_PI)
https://processing.org/reference/arc_.html
 π

PI 180
HALF_PI 90
QUARTE_PI 45
TWO_PI 360
Tipos de Datos
Variables
 Booleano

Los valores del tipo de datos booleano son verdadero y lo

falso. Es común el uso de valores booleanos en
instrucciones de control para determinar el flujo de un
programa.
 
“Datatype for the Boolean values true and false. It is common to
use boolean values with control statements to determine the flow
of a program. The first time a variable is written, it must be
declared with a statement expressing its datatype.”

https://processing.org/reference/boolean.html
 Float
Tipo de datos de números de punto flotante, por ejemplo
números que tienen un point.Floats decimales no son
precisos, por lo que agregar valores pequeños (tales como
0,0001) no siempre puede incrementar debido
precisamente a errores de redondeo. Si desea
incrementar un valor en pequeños intervalos, utilice un
int, y se divide por un valor flotante antes de usarlo.
(Véase el segundo ejemplo anterior.)
 
“Data type for floating-point numbers, e.g. numbers that have a
decimal point.Floats are not precise, so adding small values (such
as 0.0001) may not always increment precisely due to rounding
errors. If you want to increment a value in small intervals, use
an int, and divide by a float value before using it. (See the second
example above.)”
 Int
Es el tipo de datos para números enteros, números sin un
punto decimal. Los enteros pueden ser tan grandes como
2147483647 y tan pequeños como -2147483648. Se
almacenan como 32 bits de información. La primera vez
que una variable se escribe, debe ser declarada
expresando su tipo de datos.
 
“Datatype for integers, numbers without a decimal point. Integers
can be as large as 2,147,483,647 and as low as -2,147,483,648.
They are stored as 32 bits of information. The first time a variable
is written, it must be declared with a statement expressing its
datatype. Subsequent uses of this variable must not reference
the datatype because Processing will think the variable is being
declared again”

https://processing.org/reference/int.html
 Variables
Las variables son un concepto fundamental en programación, se
pueden entender con cajas que almacenan valores que cambian y
están compuestas de varias cosas:

1. Un espacio en la memoria del computador.

2. Están asociadas a un tipo de dato.
3. Tienen un nombre simbólico.
4. Contienen algún tipo de dato, valor.

Ejemplos:

Int hi = 0
Int (tipo de dato), hi nombre simbólico, 0 es el valor

Float andres = 1.5

Float (tipo de dato), andres nombre simbólico, 1.5 es el valor
 Condicionales
El condicional es una instrucción que se pueden o no ejercutar
según el valor de una condición.

Si entonces

Si entonces y si no

// Condicional para posy con el operador OR

if(posy > height - 100 || posy < 0){

diry= diry* -1;
}

If define la codición, posy es la variable, < > son los operadores,

diry es el valor
Condicionales
Condicionales
Posibles ejercicios
 Direccionalidad

El ejemplo clave es el de la velocidad que es igual a rapidez por

dirección.

// variable para la velocidad en X

float posx = 1;

// variable flotante para la rapidez en X

float speedx = 3.5;

// variable entera para la dirección en X

int dirx = 1;
 Intervalos

Con los condicionales se pueden hacer intervalos, usando los

operadores lógicos

// Intervalo de color
if(posy < 300 && posy > 100){
fill(0,0,255);
} else
{
fill(255,0,255);
}
 Iteraciones

Las iteraciones son instrucciones para ejecutar repeticiones que

se pueden simplificar enormemente el trabajo.

Trabaja con variables, límites e incrementos.

for(int a =0; a < width; a = a +10){

line(a, 0, a, width);
}

For es la iteración, int es el tipo de dato de la variable, a es el

nombre, < width determina el límite, y a = a +10 determina el
incremento
Gracias