Valor X

Valor Y

Punto (0,0)

1

2

3

1 2 3

Coordenadas

Variables“Espacios” donde se guarda la información. Hay varios tipos de variables.

Primitivasboolean: Variable que solo puede almacenar uno de dos valores, verdadero o falso(0,1)byte: almacena un valor entre 127 y -128.char: almacena una letra o símbolo. Al asignar su valor, este debe ir entre comillas.int: almacena un número entero de 32 bits, no acepta números decimales.long: almacena números enteros de 64 bits. double: almacena un número de 64 bits. Este puede ser decimalfloat: almacena un número de 32 bits. Este puede ser decimalcolor: almacena un color en formato hexadecimal, se pude asignar también con valores RGB

CompuestasString: Una secuencia de caracteres. Object: Una serie de funciones (o métodos) y campos (variables).Array: Es una lista de datos. Puede ser de cualquier tipo de datos. Se usan brakets para acceder a su contenidoArrayList: Una lista de objetos que puede cambiar de tamaño. HashMap: Una lista de objetos que no usan un índice numérico sino de nombre.XMLElement: almacena todo un objeto xml.

Otras variablesPshape: Almacena objetos vectoriales. Estos deben estar en formato SVG (Scalable Vector Graphics). Para poder usar estas variables, se debe cargar en ellas el archivo con la información.

Pimage: Almacena un objeto de imagen. Este puede ser un .gif, .jpg, .tga, o .png. Para poder usar estas variables se debe caragar en ellas el archivo con la información.

Pfont: Almacena una fuente para poder mostrar tipografía dentro del programa. Es necesario crear y cargar una fuente antes de poder utilizar estos datos.

Primer programaEmitir un mensaje en la consola de depuración:Escribir las siguientes líneas.

println(“mensaje de prueba”);

Println es una función que genera un mensaje en la zona negra del entorno de trabajo (consola de depuración) esto es útil para encontrar errores o ver comportamientos de las variables. Esto no es visible al exportar el programa.

Todas las funciones tienen dos partes su nombre o llamado y los parametros que se le ingresan. Estos siempre están dentro de parentesis después del llamado a la función.

Todas las líneas en las que se ejecuta una función deben terminar con punto y coma (;) para indicarle al programa que el comando ha terminado.

Dibujando en la pantallaDibujar un circulo en el programa. Agregar la siguiente línea

ellipse(50, 50, 80, 80);

Ellipse es una función que dibuja figuras de forma elíptica. Esta tiene 4 parámetros. El primero es la posición en el eje X. El segundo es la posición en el eje Y. el tercero es el ancho de la figura y el cuarto el alto de la figura.

Si modificamos estos parámetros esta figura va a cambiar.

Añadiendo variablesDibujar un circulo en el programa utilizando variables. Agregar las siguiente línea antes de las anteriores.

int posx =50;int posy=50;int ancho=80;int alto=80;

Cambiar la linea que ya tenía a:ellipse(posx, posy, ancho, alto);

En cambio de asignarle valores fijos a circulo que se está dibujando le asignamos variables.

ColorDebajo de las variables agregar estas líneas:

color circulo=color(110,23,45);size(400, 400); //alto y ancho del programabackground(192, 64, 0); //color de fondostroke(255); //color de las líneasfill(circulo); //color de relleno

En este caso agregamos además comentarios. Los comentarios son lineas de texto que no se ejecutan dentro del programa. Son útiles para marcar la función de secciones específicas de código o que datos se almacenan en una variable. Los comentarios se escriben añadiendo “//” cuando son comentarios cortos o /* al inicio y */ al final. Sirve tambien cuando no queremos que una parte del código no se ejecute pero no queremos borrarlo.

TiempoProcessing está pensado para crear aplicaciones que se ejecutan en el tiempo, es por esto que trae incluido dentro de su propio esquema una función que se repite una y otra vez mientras el programa esté en funcionamiento. Esta función se llama draw(). Todos los comandos que se pongan dentro de esta función se repetirán indefinidamente.Para poder usar esta funcion es neesario seguir un orden preestablecido de instrucciones que le permiten al programa operar correctamente. Esto consiste en tres pasos básicos que deben ser realizados en orden para no generar errores.

1.Definir las variables. En este primer paso, se definen cuales variables se van a usar y se le «avisa» al programa para que aliste la memoria y los recursos que debe usar para ejecutar el resto de funciones2.setup(). Esta es la función que se ejecuta al principio del programa. Solo se ejecuta una vez y generalmente se usa para indicarle al programa valores básicos y constantes como podría ser el ancho y alto del espacio de trabajo, iniciar funciones que solo deben ser iniciadas una vez, etc. En este punto no se deben incluir funciones que queremos que se repitan3.Draw(). Es la función que se repite indefinidamente. Es donde se generan las animaciones o procesos que queremos que estén en constante movimiento.

En los tres casos todos los comandos se ejecutan en el orden en que nosotros los pongamos por lo que es necesario pensar siempre muy bien en que orden quiero que el programa haga cada una de las acciones.

TiempoModificar el programa para que se vea así:

int posx =50;int posy = 50;int ancho = 80;int alto = 80;color circulo = color(110,23,45);

void setup(){ size(400, 400); //alto y ancho del programa background(192, 64, 0); //color de fondo stroke(255); //color de las líneas fill(circulo); //color de relleno}void draw(){ ellipse(posx, posy, ancho, alto);}

En este momento el programa ya se está ejecutando constantemente pero como en cada cicloPintamos el mismo circulo en la misma posición, no vemos cambios en la pantalla.

TiempoModificar la parte de draw del programa para que se vea así:

void draw(){ ellipse(posx, posy, ancho, alto); posx=posx+1;//Sería lo mismo escribir: posx++;}

Como solucionar los problemas que surgen?

condicionalesModificar la parte de draw del programa para que se vea así:

void draw(){ background(192, 64, 0); //color de fondo ellipse(posx, posy, ancho, alto); if(posx<=width){ posx=posx+1; } }

Como hacer que el circulo rebote?

Planeando un programaPara crear un programa, suele ser útil pensarlo y estructurarlo de forma «legible» antes de programarlo. Esto es, pensar que quiero que haga el programa y que serie de instrucciones le debo dar al computador para que haga lo que yo quiero y escribir esto como si se le estuvieran dando las instrucciones a un humano y no a una máquina.

En las próximas diapositivas vamos a planear un programa que hace rebotar el circulo de un lado al otro de la pantalla.

Circulo rebotandoplaneación: que instrucciones necesito para hacerlo?

Variables:-Una variable que tenga la posición del círculo en el eje x. -Una variable que tenga la posición del círculo en el eje Y.-Una variable que tenga el ancho del círculo.-Una variable que tenga el alto del círculo.-Una variable para la velocidad de desplazamiento en el eje X.-Una variable para la velocidad de desplazamiento en el eje Y.-Una variable para el color del círculo.

setup:-Definir el tamaño de la pantalla (alto y ancho)-Definir el color del fondo.-Definir el color de la línea.-definir el relleno de las figuras.

draw:-borrar lo que se ha pintado en el ciclo pasado.-pintar el circulo.-mover el circulo para que en el próximo ciclo esté en otro lugar. Hacer esto en los ejes X y Y.-si el circulo se sale de la pantalla, cambiar la velocidad para que se mueva hacia el otro lado. Hacer esto en ambos ejes. •Si la posición de circulo en el eje X es mayor al ancho total del tamaño de la pantalla o es menor a «0», cambiar de dirección.•Si la posición de circulo en el eje Y es mayor al alto total del tamaño de la pantalla o es menor a «0», cambiar de dirección.

• Como hacer esto? Si la velocidad se multiplica por negativo 1 esta va a cambiar de dirección por lo que el circulo se va a desplazar hacia el otro lado.

Despues de planear el programa, podemos pasar estas instrucciones a ordenes de computador

Circulo rebotandoint posx =50;int posy=50;int ancho=80;int alto=80;int velocidadx=1;int velocidady=1;color circulo=color(110,23,45);

void setup(){ size(400, 300); //alto y ancho del programa background(192, 64, 0); //color de fondo stroke(255); //color de las líneas fill(circulo); //color de relleno}

void draw(){ background(192, 64, 0); //color de fondo ellipse(posx, posy, ancho, alto); posx=posx+velocidadx; posy=posy+velocidady; if((posx>=width-ancho/2)||(posx<=0+ancho/2)){ velocidadx=velocidadx*-1; } if((posy>=height-alto/2)||(posy<=0+alto/2)){ velocidady=velocidady*-1; } }

imágenesPara poder insertar una imagen en el proyecto, esta debe estar en una carpeta de nombre «data» en el mismo lugar en el que se encuentra el proyecto.

Imagen rebotandoPImage imagen;int posx =50;int posy=50;int ancho=50;int alto=50;int velocidadx=1;int velocidady=1;

void setup(){ size(400, 300); //alto y ancho del programa background(192, 64, 0); //color de fondo//tener en cuenta el nombre de la imagen imagen = loadImage ("mar.jpg");}

void draw(){ background(192, 64, 0); //color de fondo image(imagen,posx,posy); posx=posx+velocidadx; posy=posy+velocidady; if((posx>=width-ancho/2)||(posx<=0+ancho/2)){ velocidadx=velocidadx*-1; } if((posy>=height-alto/2)||(posy<=0+alto/2)){ velocidady=velocidady*-1; } }

Para arreglar el lugar en el que la imagen rebota se puede rehacer los calculos o usar el método “imageMode(CENTER);”

MousePImage imagen;int ancho=50;int alto=50;color fondo=color(110,23,45);

void setup(){ size(400, 300); //alto y ancho del programa background(192, 64, 0); //color de fondo imagen = loadImage ("mar.jpg"); imageMode(CENTER);}void draw(){ background(fondo); //color de fondo image(imagen,mouseX,mouseY); }void mousePressed() { fondo=color(round(random(255)),round(random(255)),round(random(255)));}

Con cada click, el fondo cambia de color.