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.