[Tutorial] Processing – Tipos de variables y dibujo 2D

Tipos de variables

Siguiendo el tutorial de programacion Processing ahora estudiaremos los distintos tipos de variables que podemos usar; una variable es una locación de memoria que el programa reserva para después guardar un dato en ella, en Processing podemos disponer de diferentes tipos de variables dependiendo el uso que se requiera, por ejemplo si necesitamos un guardar un numero del 1 al 10 sin decimales podemos usar una variable “int”, pero si necesitamos mas precision con numeros decimales podemos usar una variable de tipo “float”, los tipos disponibles son los siguientes:

  • boolean: este tipo de dato solo puede tomar dos valores true/false (verdadero o falso).
  • char: Podemos guardar un caracter “a”,”b”,”x”,”y”, etc.
  • byte: Un numero comprendido entre -128 y 127.
  • short: Un numero comprendido entre –32768 y 32767.
  • int: Un numero comprendido entre –2147483648 y 2147483647.
  • long: Un numero realmente grande.
  • float: Un numero decimal.
  • double: Un numero con doble precision, permite usar un numero mayor de decimales, solo se usa para programación avanzada donde se requieran cálculos matemáticos precisos.
  • String: Podemos guardar una cadena de caracteres, por ejemplo “Esta es una cadena”.

Una variable tambien debe tener una nombre, el cual la identificara durante el programa, se debe tener en cuenta las palabras reservadas de processing para no cometer errores, el nombre de una variable debe cumplir con las siguientes reglas:

  • Puede contener números, pero nunca iniciar el nombre con ellos.
  • No debe contener espacios.
  • No puede contener caracteres especiales a excepción de guión bajo “_”

Ahora debemos declarar nuestra variable, la sintaxis es la siguiente:

tipo nombre_variable;

donde “tipo” es uno de los tipos antes mencionados, posteriormente el nombre de nuestra nueva variable, por ejemplo si queremos una variable llamada cuenta donde guardaremos enteros podemos declararla de la siguiente manera:

[code language=”java”]
int cuenta;
[/code]

Podemos declarar mas de una variable del mismo tipo en una misma linea, o en lineas separadas. Cualquiera de las dos ejemplos siguientes son validos, y la forma de usarlos dependera de cada persona.

[code language=”java”]
int cuenta1,cuenta2,cuenta3;
[/code]

Aqui declaramos las 3 variables en una sola linea.

[code language=”java”]
int cuenta1;
int cuenta2;
int cuenta3;
[/code]

Y aqui declaramos una variable por linea, pero de que nos sirve una variable sin ningún dato en ella?, ahora debemos agregarle algún valor, se le puede asignar desde la declaración o dinamicamente durante el programa.

[code language=”java”]
int cuenta1=10, cuenta2=4;
int cuenta3;
cuenta3=5;
[/code]

Podemos hacer operaciones aritméticas ya sea suma,resta, multiplicación y division, se deben respetar la jerarquia matematica haciendo uso de los parentesis “( )”, tambien podemos usar el operador de incremento “++” y el de decremento “- -“, que sumara o restara 1, por ejemplo:

[code language=”java”]
int r,x=4,y=5,z=3;
r= ((x*y)-z)+(20/4);
println(r); //r ahora vale 22
r++;
println(r); //r ahora vale 23
r–;
println(r); //r ahora vale 22
[/code]

Dibujo 2D

Ahora veremos las funciones con que cuenta Processing para el dibujo 2D, con estas funciones podremos crear graficos sencillos con figuras primitivas, como rectangulos, cuadrados, circulos, triangulos, etc.

Se habran dado cuenta que cada ves que corremos un programa aparece una pequeña ventana gris, esta es el area donde aparecera todo lo que dibujemos, para cambiar el tamaño de esta ventana haremos uso de la funcion size(x,y) donde “x” sera el ancho de la ventana y “y” la altura, estos valores estan dados en pixeles. Tomando en cuenta que el punto (0,0) se encuentra en la esquina superior izquierda de nuestra ventana. Usando el siguiente codigo obtendremos una ventana de 400 pixeles de ancho y 500 pixeles de alto:

[code language=”java”]
size(400,500);
[/code]

[singlepic id=153 w=420 h=340 float=center]
Las funciones que podemos usar para dibujar son las siguientes:

  • point(x,y): Dibuja un punto en la coordenada (x,y).
  • line(x1,y1,x2,y2): Dibuja una linea desde el punto (x1,y1) hasta el punto (x2,y2).
  • rect(x,y,ancho,alto): Dibuja un rectángulo donde el punto (x,y) es la esquina superior derecha, con un ancho y alto especificados.
  • quad(x1,y1,x2,y2,x3,y3,x4,y4): Dibuja un cuadrilátero con vertices en los puntos (x1,y1), (x2,y2), (x3,y3), (x4,y4).
  • ellipse(x,y,ancho,alto): Dibuja un rectangulo donde el punto (x,y) es el centro, con un ancho y alto especificados. Si el ancho y alto son iguales obtendremos un circulo.
  • triangle(x1,y1,x2,y2,x3,y3): Dibuja un triángulo con vertices en los puntos (x1,y1), (x2,y2), (x3,y3).

[code language=”java”]
size(400,500);
point(350,450);
point(345,446);
point(361,453);
line(300,120,200,340);
rect(10,20,200,100);
ellipse(300,70,50,50);
triangle(20,150,30,200,100,170);
quad(20,330,30,420,100,450,130,230);
[/code]

[singlepic id=152 w=420 h=340 float=center]
Ahora intenta cambiar los valores numericos por alguna variable.

Existen algunas otras figuras que podemos usar, pero las veremos despues. Es todo por ahora, en el proximo tutorial: Colores, control de flujo y variables del sistema.

Adrian MB

Me gusta la electrónica, programación y todo lo relacionado. Ing. en Mecatronica de la UPIITA del IPN y estudiante de Diseño Industrial en la UAM. @adrianmtzb http://adrianmb.mx

También te podría gustar...