Bloque 1 - Serpiente

1.- En primer lugar, vamos a hacer una línea. Para ello escribimos el siguiente código:

line(0, 0, 100, 100);

Y aparecerá un línea en una pequeña ventanita.

 

Posteriormente, vamos a recortar la línea, mostrando solo la mitad. Para ello escribimos el siguiente código:

line(50, 50, 100,100);

 

2.- Vamos a escribir un programa que dibuje dos líneas de diferentes colores sobre un fondo blanco. Para ello escribimos el siguiente código:

background(255);                  

line(0,0,100,100);

stroke(0,0,255);

line(0,100,100,0);

• background(gray): Establece el color de fondo desde 0 – negro, hasta 255 – blanco. También puedes utilizar background(red, green, blue)para establecer el color que tú quieras.
• stroke(red, green, blue): Establece el color de la línea. Cada valor de color puede ser desde 0 hasta 255. En este caso, la línea es de color azul puesto que red=0, green=0 y blue=255.

Vamos a experimentar cambiando el color de las líneas:

background(400);                                                                                   

line(0,0,100,100);

stroke(0,0,350);

line(0,100,100,0);

 

3.- vamos a escribir un programa utilizando variables. Escribiremos un programa que dibuje, de nuevo, dos líneas, pero esta vez utilizaremos estas variables:

int value1 = 0;

int value2 = 100;

line(value1, value1, value2, value2);

line(value1, value2, value2, value1);

int variableName = value: Crea una variable del tipo integer, un número entero. Puedes llamarla con cualquier nombre de tu elección, pero para hacerlo más sencillo para tu futuro yo (quien probablemente leerá el código en el futuro y querrá entender lo que hizo en el pasado) asegúrate que el nombre va acorde con el contexto en el que se usa la variable. value es el valor que decides darle al contenido de tu variable.

4.- Tipos de datos

Los tipos de datos más comunes que utilizarás son los siguientes:

• int: Número entero, p.ej., 2, 99 o 532.
• float: Número decimal, p.ej., 2.76, 8.211 o 900.3.
• boolean: Puede ser verdadero o falso.
• char: Un caracter, p.ej. ‘r’, ‘2’ o ‘%’.
• String: Una secuencia de carateres, p.ej. “hola”, “¡Me encanta programar!” o “&%!@¤”.

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. Éste es un pequeño 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.

Se le puede dar el tamaño de la elipse que tú quieras.

5.- Setup y draw.

Los tipos de programas que hemos hecho hasta ahora son los llamados programas estáticos. Esto significa que nunca cambian. Se ejecutan una única vez y cuando llegan a la última línea de código, se paran.

Con Processing, puedes crear programas que se ejecuten continuamente utilizando la función draw(). Esta función repetirá el bloque de código una y otra vez hasta que el programa se pare. Sin embargo, no todo el código escrito necesita ser repetido continuamente. Para el código que sólo necesita ser ejecutado una única vez, debes usar la función llamada setup().

Vamos a escribir de nuevo un programa que dibuje una línea, pero esta vez utilizando las nuevas funciones:

void setup() {

  size(150,150);

}

void draw() {

  line(0,0,width,height);

}

Nuevos comandos:

• setup(): El código dentro de las llaves se ejecuta una única vez cuando el programa empieza. Sólo necesitamos establecer el tamaño de la ventana una vez, al principio del programa.
• draw(): El código entre llaves se ejecuta una y otra vez. Se ejecuta línea por línea, de arriba a abajo hasta la última línea, donde vuelve a empezar desde el principio.

6.- Este programa establece el tamaño de ventana a 300 x 300 pixels y luego dibuja una línea sobre toda la ventana una y otra vez. En este momento, todavía no se puede apreciar que esto esta pasando una y otra vez, así que vamos a escribir otro programa para hacerlo más visible.

void setup() {

  size(300,300);

}

void draw() {

  line(0,0,mouseX,mouseY);

}

Las líneas se hacen desde el punto (0,0) hasta donde está el cursor. Vamos a cambiarle el color al fondo y a las líneas.

void setup() {

  size(300,300);

  background(400);                                                                                   

line(0,0,100,100);

stroke(0,0,350);

line(0,100,100,0);

}

void draw() {

  line(0,0,mouseX,mouseY);

}

7.- Serpiente roja

// Vamos a hacer el proyecto de la serpiente roja

void setup() {

  size(400,400);

}

void draw() {

  noStroke();   //Dibuja formas sin borde

  fill(255,0,0);   //Las figuras son de color rojo

  ellipse(100,100,30,30);  // Círculo de 30 pixeles de diámetro

}

Primero nos saldrá un punto rojo en nuestra pantalla:

Lo que el programa hace es primero establecer el tamaño de la ventana a 400 x 400 píxels. Nosotros decidimos no utilizar contornos y utilizar el color rojo para el relleno. Por último, dibuja un círculo en las coordenadas 100,100 con un diámetro de 30 píxels.

PASO 2:

void setup() {

  size(400, 400);

}

void draw() {

  noStroke();            

  fill(255, 0, 0);         

  ellipse(mouseX, mouseY, 30, 30); // Circulo de en funcion de las coordenadas del raton

}

PASO 3

int rojo = 255;

 

void setup() {

  size(400, 400);

}

void draw() {

  noStroke();            

  fill(rojo, 0, 0);         

  ellipse(mouseX, mouseY, 30, 30); // Circulo de en funcion de las coordenadas del raton

}

PASO 4

int rojo = 255;

  

void setup() {

  size(400, 400);

}

void draw() {

  rojo = rojo - 1;            // Haz el rojo un poco mas obscuro

  if (rojo < 0){

    rojo = 255;              // Cuando llegue al maximo de obscuridad, hazlo claro otra vez

  }

   

  noStroke();            

  fill(rojo, 0, 0);         

  ellipse(mouseX, mouseY, 30, 30);

}

Cada segundo el rojo se va haciendo más intenso. Llega a su punto más oscuro y vuelve a bajar el color al rojo primario.

Nuevos comandos:

• if( test ){ statements }: Comprueba si test es cierto. En este ejemplo, si rojo es menor que 0. Si es así, los statements entre llaves son ejecutados. En este ejemplo, establece red a 255 de nuevo. Si por el contrario, test es falso, el programa procede a ejecutar el código después de las llaves. Utilizando declaraciones “if” te permite decir al programa que código ejecutar.

.

PASO 5

int rojo = 255;

int tiempo = 0;

  

void setup() {

  size(400, 400);

}

void draw() {

  tiempo = tiempo + 1;  // Incrementa el tiempo en una unidad

  rojo = int(128 * (1 + sin(tiempo * 2 * PI / frameRate / 20)));  // Cambia el rojo, repite el color cada 20s

   

  noStroke();            

  fill(rojo, 0, 0);         

  ellipse(mouseX, mouseY, 30, 30);

}

Nuevos comandos:

• 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.

El tiempo de cambio de color es más largo y no vuelve a su punto inicial sino que sube y baja la intensidad del color, como vemos en la imagen.

PASO 6

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);

}

En este ultimo paso, la el punto que sigue el cursor se agranda y disminuye a la vez que cambia la tonalidad del color rojo.

Vamos a cambiar el color de la serpiente y la velocidad de cambio de color:
int colorr = 130;
int tiempo = 0;
int diametro = 50;
 
void setup() {
  size(400, 400);
}

void draw() {
  tiempo = tiempo + 3;   
  colorr = int(400 * (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(colorr, 54, 678, 25);  // Añade un 50% de transparencia al color
  ellipse(mouseX, mouseY, diametro, diametro);
}