Introducción a la programación en Processing (Java)

Introducción a la programación en Processing (Java)

Revisar las guías de referencia de Processing y la lista de bibliotecas.

El arte del código Un documental de 5 minutos
El entorno de desarrollo de Procesamiento

Botón de marcha (comando + R o Ctrl + R)
Botón de parada (esc).
El sistema de coordenadas

El sistema de coordenadas de processing es cartesiano.
Variables de sistema anchura (width) y altura (height).
Dibujo en Processing

Cambio del tamaño de la pantalla con size ()
arc(), ellipse(), line(), point(), quad(), rect(), triangle()
background(), clear(), colorMode(), fill(), noFill(), noStroke(), stroke()
Variables
Tipos de datos: enteros (int), y decimales (float)
Declarar, inicializar y utilizar.
Declarar es cuando le decimos a la computadora para hacer un espacio en la memoria para una variable de un tipo determinado. Por ejemplo:

1
2
3
int circleX;
float tamsol;
String myNombre;

Inicializar es cuando ponemos nuestro primer valor, de lo contrario la variable asume un valor de 0.

1
2
3
circleX = 10;
tamsol = 1.0089;
myNombre = "Pere";

 

Impresión de la Consola
utilizar println () para enviar mensajes a ti mismo.
Por ejemplo, pruebe a escribir esto en el boceto:

1
println ("hola mundo!" + frameCount);

o

1
println ("La posición en X de mi ratón: " + mouseX + "La posición en Y de mi ratón: " + mouseY);

 

Setup y Draw

1
2
3
4
5
6
7
8
9
10
11
void setup() {
//ocurre una sola vez
size(640, 480);
noStroke();
}
void draw() {
//ocurre permanentemente
background (0);
fill (255);
ellipse (width/2, height/2, 30, 30);
}

 

 

Movimiento
Si queremos que CircleX se mueva a la derecha, necesitaríamos incrementar su valor 

1
circleX = circleX + 1;

El atajo sería

1
circleX++;

 

 

Eventos KeyPressed, Mousepressed

1
2
3
4
5
6
7
8
9
void setup() {
size (200, 200);
}
void draw() {
//nada
}
void mousePressed() {
rect (mouseX, mouseY, 10, 10);
}

 

 

Comentarios en el código
// -> para líneas

1
2
3
4
5
void draw() {
background (0); //el background es negro
fill (255, 0, 0); //rojo
ellipse (mouseX, mouseY, 80, 80);
}

 

/* Este comentario consta de varias líneas */ -> para líneas múltiples

1
2
3
4
5
6
7
8
9
/*

Este comentario consta de varias líneas Este comentario consta de varias líneas Este comentario consta de varias líneas

*/
ellipse (20, 20, 20, 20);
ellipse (30, 20, 20, 20);
ellipse (40, 20, 20, 20);
ellipse (50, 20, 20, 20);
ellipse (60, 20, 20, 20);

 

Funciones
Tienen el formato siguiente:

1
2
3
4
returnType functionName (argument, argument, argument) {
Eventos a ocurrir
return returnType;
}

un ejemplo de esto sería (con tipo de retorno void – devuelve nada)

1
2
3
void makeAnEllipse (int circleX, int circleY, int circleW, int circleH) {
ellipse (circleX, circleY, circleW, circleH);
}

y un ejemplo de una función que devuelve algo (en este caso un número entero)

1
2
3
4
int sumarDosElementos (int numberOne, int numberTwo) {
int result = numberOne + numberTwo;
return result;
}

 

Paréntesis ()
Paréntisis se utilizan para sostener los argumentos dentro de una llamada a la función.

Llaves {}
Las llaves se utilizan para definir bloques de código, como dentro de una función, si la declaración o de bucle.

 

Algunos atajos prácticos:

Ctrl + R Ejecute la aplicación
T ctrl + Formato el código
Ctrl + K para abrir  carpeta de dibujo

 

 

Al azar

random ().

 

1
ellipse (random (0, width), random (0, height), random (20, 30), random (20, 30));

 

 


Operadores relacionales:
> (Mayor que)
> = (Mayor que o igual a)
<(Menor que)
<= (Menor o igual a)
== (Igual a)
! = (Distinto de)

Y los operadores condicionales:
&& (Y lógico)
|| (O lógico)

 

He aquí un ejemplo en el que se utiliza el condicional para convertir dos rectángulos de color rojo cuando se cumplen dos condiciones:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
void setup() {
size (300, 300);
}
void draw() {
background(0);
if (mouseX < width/3 && mouseY < height/3) {
fill (255, 0, 0);
} else {
fill (255);
}
rect (0, 0, width, height/3);
rect (0, 0, width/3, height);
}

Usando OR

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
void setup() {
size (300, 300);
noStroke();
}
void draw() {
background(0);
if (mouseX < width/3 || mouseX > width - width/3) {
fill (255, 0, 0); //red
} else {
fill (255);
}
rect (0, 0, width/3, height); //left circle
rect (width - width/3, 0, width/3, height); //right circle
}

 


, , , , ,

2 Comentarios hasta el momento

CarolinaPublicado  1:38 pm - ago 2, 2016

Buenas, cuando se dicta este curso? Me interesaría participar. Gracias

lablibertarioPublicado  12:17 pm - ago 7, 2016

Hola te enviaremos la próxima convocatoria a tu correo.
Saludos

Deja un comentario

Redes