Variables

PortadaVariables

Este es el tercer tutorial de Introducción a la programación. En programación también trabajamos muchos números. El tamaño de nuestro canvas, las coordenadas de la posición de las figuras que dibujamos y muchas otras cosas más, las variables nos ayudan a manejar todos esos números.

Anterior tutorial

Las variables nos permiten asignarles un nombre a nuestros números y de manera interna, nuestra computadora guardará esos números, si las necesitamos simplemente las llamamos por su nombre. Las variables podemos definirlas con la siguiente estructura:

tipo_de_variable nombre_de_la_variable = valor_de_la_variable;

El tipo de variable dependerá del tipo de información, la más común es int porque es usada para guardar números. A continuación se muestran algunos ejemplos:

int ancho = 50;
int alto = 50;
int Posicion_X = 100;
int Posicion_Y = 200;

Podemos dibujar un ellipse con estas variables. Por ejemplo:

ellipse(Posicion_X,Posicion_Y,ancho,alto);

Y con las mismas variables podemos crear un rectángulo. Para crear un rectángulo utilizamos una instrucción muy parecida. Los primeros dos argumentos establecen la posición en X y en Y del rectángulo, y los últimos dos argumentos establecen el ancho y alto del rectángulo.

rect(Posicion_X,Posicion_Y,ancho,alto);

Veamos como sería el código completo:

size(200,200);   // Tamaño del canvas

int ancho = 50;   //Variable que define el ancho
int alto = 50;   // Variable que define el alto
int Posicion_X = 100;   // Variable que define la posición en X
int Posicion_Y = 100;   // Variable que define la posición en Y

ellipse(Posicion_X,Posicion_Y,ancho,alto);  // Instrucción que dibuja el ellipse

rect(Posicion_X,Posicion_Y,ancho,alto);   // Instrucción que dibuja el rect

El resultado es el siguiente:

ElipseCuadrado

Quizá te preguntes, si el ellipse (que en realidad es un círculo) y el rect (que en realidad es un cuadrado) tienen la misma posición ¿Porque no se encuentran perfectamente encimados? Bueno, eso es porque el origen del ellipse es el centro del ellipse, y el orígen del rect es la esquina superior izquierda. La explicación detallada será para otro tutorial.

Existen variables de diferentes tipos, para almacenar información de diferente tipo y diferente tamaño.

Los principales tipos de variables en Processing son:

int

Valores numéricos enteros (sin punto decimal) de 32 bits, tanto negativos como positivos, su rango es desde -2,147,483,648 hasta 2,147,483,647.

int ancho = 50;

long

Valores numéricos enteros grandes de 64 bits, tanto negativos como positivos, su rango es desde -9,223,372,036,854,775,808 hasta 9,223,372,036,854,775,807.

long ancho = 3000000000;

float

Usualmente utilizados para guardar números racionales (con punto decimal) de 64 bits, su rango es desde -3.40282347×1038 hasta  3.40282347×1038.

float ancho = 37.7;   // Este es sólo un ejemplo
// Es imposible dibujar algo de 37.7 pixeles,
// Debería ser un valor entero

double

Valores numéricos muy grandes de hasta 64 bits, tanto valores negativos como positivos incluyendo números racionales (con punto decimal), desde 3.40282347×1038 hasta  3.40282347Ex1038.

double ancho = 3000000000.7;

byte

Valores numéricos enteros de hasta 8 bits, es decir su rango es de 0 a 255.

byte ancho = 128;

char

Caracteres, los caracteres son los símbolos como letras (a,b,c,d…z), números (0,1,2,3…9) u otros símbolos especiales (%,&,?,=).
Un momento ¿acaso no habíamos dicho que las variables guardan números? bueno es que resulta que estos caracteres tienen una representación numérica de 8 bits en base a un código llamado ASCII.

char primera_letra = 'a';

boolean

Valores boleanos, true o false, verdadero o falso, muy útiles para crear condiciones (que veremos en la siguiente sesión)

boolean unicornio_existe = false;

color

Valores que guardan los colores en su representación RGB

color Rojo = color(255,0,0);

Además de guardar información (números,colores,caracteres) con variables podemos hacer operaciones aritméticas.

int Posicion_X = 200;   // Creamos la variable Posicion_X con el valor 200
Posicion_X = Posicion_X + 200;  // A la misma variable le sumamos 200
// Posicion_X ahora vale 400

Finalizaremos con el siguiente código:

size(800,400);  // ¡No utilices variables para asignar el tamaño del canvas!


color Rojo = color(255,0,0);  // Variable que guarda el color rojo

background(Rojo);


int ancho = 50;
int alto = 50;
int Posicion_X = 100;
int Posicion_Y = 200;
ellipse(Posicion_X,Posicion_Y,ancho,alto);

Posicion_X = Posicion_X + 200;
ellipse(Posicion_X,Posicion_Y,ancho,alto);

Posicion_X = Posicion_X + 200;
ellipse(Posicion_X,Posicion_Y,ancho,alto);

Posicion_X = Posicion_X + 200;
ellipse(Posicion_X,Posicion_Y,ancho,alto);

CodigoVariables

Siguiente tutorial