REFERENCIAS DE PROCESSING

En este post, veremos 5 nuevos comandos de procesing:

• - height 
• - bezierDetail()
• - rectMode()
• - vertex()
• -popMatrix()

Height

- Descripción: Esta variable aplica el valor de la altura que tenga la ventana. Tanto el alto como el alto de la ventana se puede variar utilizando el comando  size(). Por ejemplo aplico el comando size con altura 400 y anchura de 350 :  

   

Si utilizas después la variable height tomara el dato de 400. Esta variable también puede coger el dato en cualquier lugar donde salga la altura de la ventana dentro del programa. 

- ejemplo:

size(400, 350);

noStroke();

background(#6E7C78);

rect(175, 0, 50, height);

Bezier detail()

-Descripcion: Hace que puedas mover las coordenadas del eje x de una elipse creada con el comando bezier(). Estos comandos son válidos para porcessing 3D (P3D), y processing 2D (P2D), aunque en processing 2D puede dar problemas.

Estructura bezier():

bezier(x1, y1, x2, y2, x3, y3, x4, y4); //  x, y, son coordenadas.

-Ejemplo:

void setup() {

  size(500, 500, P3D);

  noFill();

}

void draw() {

  background(204);

  int d = int(map(mouseX, 0, 50, 1, 20));

  bezierDetail(d);

  bezier(85, 200, 100, 100, 400, 400, 105, 300);

}

rectMode()

- Descripción:Este comando sirve para definir el lugar de el cuadrado dentro de la ventana. Hay cuatro posibilidades para definir la posición del cuadrado, son: CORNER, CORNERS, CENTER, RADIUS.

-CORNER: Utiliza las dos primeras coordenadas de rect(), como coordenada para la esquina de arriba izquierda de la figura, y las otras dos restantes como la altura y el ancho del cuadrado.

-CORNERS: Utiliza las dos primeras coordenadas de rect() como una esquina, y las dos últimas como las coordenadas de la otra esquina.

-CENTER: Utiliza las dos primeras coordenadas de rect() como el centro del cuadrado, y el ancho y el alto con las dos coordenadas restantes.

-RADIUS: Utiliza las dos primeras coordenadas de rect() como el centro del cuadrado, y las dos últimas coordenadas como la mitad del ancho y el alto.

-Ejemplo:

size(200,200);

rectMode(CORNER);

fill(255);

rect(100, 100, 40, 40);

size(200,200);

rectMode(CORNERS);

fill(255);

rect(100, 100, 40, 40);

size(200,200);

rectMode(CENTER);

fill(255);

rect(100, 100, 40, 40);

size(200,200);

rectMode(RADIUS);

fill(255);

rect(100, 100, 40, 40);

Vertex()

Descripción: Todas las figuras están unidas por una serie de vértices, este comando lo que hace es dar las coordenadas de dicho vértice. Cuando el processing esta en modo 3D hay que dar ademas la coordenada "z", ademas de las coordenadas "x" e "y" que siempre se deben poner en este comando ya sea en 2D o en 3D.

vertex( x, y, z );

• x = coordenada X
• y = coordenada Y
• z = coordenada Z

-Ejemplo; 

size(500, 500, P3D);

noStroke();

beginShape();

background(#171515);

vertex(100, 200, 0);

vertex(200, 50, 100);

vertex(350, 450, 100);

vertex(400, 145, 0);

endShape();

popMatrix()

- Descripción: Este comando tiene la capacidad de poder amontonar figuras una en lo alto de la otra. Hay que tener siempre en consideración que este comando sería erróneo en caso de que no incluir el comando pushMatrix(), aunque este comando si puede aparecer sin el comando popMatrix().

- Ejemplo :

fill(255);

rect(0, 0, 50, 50);  // Cuadrado blanco

pushMatrix();

translate(30, 20);

fill(0);  

rect(0, 0, 50, 50);  // Cuadrado negro

popMatrix();

fill(100);  

rect(15, 10, 50, 50);  // cuadrado gris

Ejemplos

Finalmente pondré unos ejemplos de los nuevos comandos utilizados.

1- Utilizaremos el comando línea y cruzaremos dos líneas de diferente color.

line(50, 0, 50, 100);
stroke(#0E21E8);
line(0, 50, 100, 50);

2- Haremos el mismo procedimiento que el primer ejercicio pero cambiando el tamaño de la pantalla.

size(400, 400);
line(200, 0, 200, 400);
stroke(#0E21E8);
line(0, 200, 400, 200);

3.Ahora utilizaremos las variables, haremos exactamente el mismo programa que el ejercicio uno aunque utilizaremos variables en vez de simples números.

int variable1 = 50;
int variable2 = 0;
int variable3 = 100;
line(variable1, variable2, variable1, variable3);
stroke(#0E21E8);
line(variable2, variable1, variable3, variable1);

(Sale el mismo resultado que el ejercicio uno).

4.Hacer que el marco del  programa sea un círculo.


size(400, 400);
ellipse(width/2, height/2, width, width);

5. Una línea en una ventana con el tamaño definido de color rojo y una línea aleatoria de color verde.

void setup()
{
  size(400,400);
  background(#FC190D);
}

void draw()
{
  stroke(#102EA2);
  line(0, 0, width, height);
}

6. dibuja una línea sobre la pantalla una y otra vez de color azul en una ventana de color rojo y con un marco circular.

void setup()
{
  size(400, 400);

  background(#FC190D);
}

void draw()
{
  ellipse(width/2, height/2, 100, 100);
  stroke(#102EA2);
  line(0, 0, mouseX, mouseY);
}

La serpiente roja

En este post vamos a hacer una serpiente roja con nuestro programa procesing, pero para ello necesitamos saber nuevos comandos.

 Comandos nuevos:

noStroke(): Este comando es usado para no dibujar el contorno de las siguientes figuras.

fill(red, green, blue): Establece el color utilizado para rellenar las siguientes figuras.

ellipse(x, y, diametroX, diametroY): dibuja un elipse con centro en x,y. El tamaño se establece con diametroX y diametroY. Cuando estos dos parámetros son iguales, el resultado es un círculo.

if( test ){ statements }: Comprueba si test es cierto. Si es así, los statements entre llaves son ejecutados.

sin( angle ): Esta función se utiliza para calcular el seno de un ángulo. En nuestro caso, no tiene nada que ver con ángulos pero, ¿te acuerdas de la gráfica del seno de la clase de matemáticas? Bien, esa gráfica es el por qué es útil para nosotros. Siempre que quieras crear una oscilación suave y continua de un movimiento o, en este caso, un cambio de color, sin() es muy práctico de usar

PI: Esto es una variable constante que contiene el valor del número pi.

frameRate: Esto es otra variable que te da el framerate (frecuencia de ejecución) del programa.

int rojo = 255;

int tiempo = 0;

int diametro = 50;

  

void setup() {

  size(400, 400);

}

void draw() {

  tiempo = tiempo + 1;     

  rojo = int(128 * (1 + sin(tiempo * 2 * PI / frameRate / 20))); 

  diametro = int(50 * (1 + sin( tiempo * 2 * PI / frameRate / 5))); // Modifica el diametro del circulo con el paso del tiempo

   

  noStroke();             

  fill(rojo, 0, 0, 50);  // Añade un 50% de transparencia al color

  ellipse(mouseX, mouseY, diametro, diametro); 

}

Resultado final:

Setup y Draw

En este post comenzaremos a utilizar estos dos comandos, son muy parecidos a la función void setup y void loop de Arduino, apenas existen diferencias entre estos.

En primer lugar veremos la función setup que se ejecuta una vez al comienzo del programa y en esta función solo se pone los comandos que quieras que se ejecuten solo una vez y solo al principio del programa.

En segundo lugar veremos la función draw, como anteriormente hemos dicho es muy parecida a la función loop en Arduino, En esta función el programa ejecuta lo que haya dentro de esta función continuamente, haciendo un bucle. También hay que decir que tanto setup como draw deben ir juntos ya que tanto uno como el otro deben coexistir en el programa para que funcione correctamente, sino processing no aceptará el programa y no dejará ejecutarlo.

Pondre un ejemplo sencillo con un comando linea:

void setup()

{

size(300, 300);

}

 

void draw()

{

line(0 ,0, width, height);

}

 

Ahora haremos otro ejemplo con comandos nuevos:

• mouseX:  La coordenada X del puntero del ratón.
• mouseY:  La coordenada Y del puntero del ratón.

 void setup()
{
size(300,300);
}

void draw()
{
line(0, 0, mouseX, mouseY);
}
  

 

 

Variables

En este post aprenderemos lo que es una variable, para lo que sirve, y haremos algún ejemplo con esto para afianzar conceptos.

En programación las variables son muy im portantes ya que en ellas puedes guardar todo tipo de caracteres tanto números, como letras, etc. Una variable es una especie de "cajón" en el que se guardan datos para poder utilizarlos en cualquier otro momento. Estos datos se almacenan dentro del programa de tal forma que se pueda utilizar esa variable en otro comando, etc.

Tipos de variables en procesing

Ahora apareceran diferentes comandos en los cuales se pueden almacenar variables.

int : Almacena números enteros, ej: 58.

float : Almacena números decimales, ej: 2,73

char : Un caracter, ej: "%"

string :  Una secuencia de carateres, p.ej. “hola”.

 

int value1 = 0;

int value2 = 100;

line(value1, value1, value2, value2);

line(value1, value2, value2, value1);

Para ver el fincionamiento puedes cambiar el valor de las variables y comprobaras como varían las líneas.






Processing incluye algunas variables de sistema para hacerlas más accesibles dentro de tus programas. Un ejemplo es width y height . Estas variables devuelven la anchura (width) y altura (height) de la ventana de tu programa.

Ejemplo:

size(400, 200);

ellipse(width/2, height/2, width, height);

 

 

 

 

 

 

Comandos nuevos:

 

• size(width, height): Establece el tamaño de la ventana en píxels.
• ellipse(x, y, x diameter, y diameter): dibuja un elipse centrado en las coordenadas x e y. El tamaño se establece con x diameter e y diameter. Cuando estos dos parámetros son iguales, el resultado es un círculo.
• width: la anchura de la ventana de programa.
• height: la altura de la ventana de programa. 

 

Con estos comandos puedes ir probandolos y cogiendo práctica.

 

Comando "linea" 

En esta entrada comenzaremos explicando para que sirve el comando línea. Primero comenzaremos con un ejemplo sencillo:

En este comando, primero se debe poner el punto inicial de la línea que quieras hacer siguiendo los ejes x,y. Despues debes insertar el punto final.

Finalmente, cuando pulsemos ejecutar debería salir una línea que cruzase de punta a punta del sketch.














Consejo: Varía las coordenadas y veras como cambia la línea, de esta manera llegaras a comprender este comando.

¿Qué es Procesing?

 

Cada ordenador, smartphone, servidor de internet, ascensor, horno – actualmente cualquier dispositivo con inteligencia digital – tiene diferentes capacidades y por lo tanto requiere de un lenguaje máquina algo diferente al resto. Existe un lenguaje de programación llamado Java que, una vez compilado, es capaz de utilizarse fácilmente en diferentes dispositivos. Hay muchas maneras diferentes de programar en Java, pero nosotros nos centraremos en utilizar Processing.

Processing es código abierto y software libre, esto significa que se puede descargar de Internet, instalarlo sin coste alguno, y modificar su código. Processing funciona en cualquier tipo de ordenador de sobremesa o portátil en los sistemas operativos: Windows, Mac OSX y Linux.

 Processing crea programas que se ejecutan directamente dentro de tu ordenador. También puedes exportarlos y enviarlos a los ordenadores de otras personas. Los programas, una vez exportados en código máquina, se llaman aplicaciones. Puedes exportar el mismo programa para que se ejecute en un ordenador, en un teléfono, o en un sitio web.