Processing prara navidad

2.11.- NoSmooth
El comando noSmooth se encarga de irregularizar los bordes de las figuras, elipses, curvas,… que insertemos. Este comando es obligatorio insertarlo si queremos irregularizar los bordes, ya que el programa de forma predeterminada los crea regulares. Para insertarlo debemos escribir: noSmooth() .
Ahora probaremos un ejemplo:

size(100, 100);
noSmooth();
noStroke();
background(0);
ellipse(30, 48, 36, 36);
ellipse(70, 48, 36, 36);
Y observamos lo que ocurre:



Ahora, crearemos un código inventando basándonos en la estructura del anterior:
size(150, 150);
noSmooth();
noStroke();
background(0);
ellipse(100, 75, 45, 45);
ellipse(50, 75, 45, 45);
Y vemos qué hemos programado:


Ahora, procederemos a crear nosotros otro último código para este comando y observar qué ocurre:
void setup() { 
size(200, 200);
noSmooth();
noStroke();
background(255);
}

void draw() {
  fill(0, 255, 0);
ellipse(50, 100, 75, 75);
ellipse(150, 100, 75, 75);
}
Y observamos qué ocurre:


6.1.- Arc
Este comando es utilizado para introducir arcos, como su nombre indica. Para poder crear un arco debemos introducir un código siguiendo estos parámetros: arc(a, b, c, d, start, stop). Donde:
a: es el origen del arco en la coordenada x
b: es el origen del arco en la coordenada y
c: es la anchura del arco
d: es la altura del arco
start: es el ángulo con el que comienza el arco, especificado en radianes
stop: es el ángulo con el que finaliza el arco, especificado en radianes
Por tanto, sabiendo esto, podemos proceder a probar un ejemlo:
arc(50, 50, 80, 80, 0, PI+QUARTER_PI, OPEN);


Ahora, crearemos nosotros un código pero parecido al del ejemplo para ir asimilando este commando:
arc(50, 30, 94, 94, 0, PI+QUARTER_PI, OPEN);


Y ahora, un código algo más avanzado para comprobar si de verdad hemos aprendido a utilizar dicho comando:
void setup() {
  size(250, 250);
  noSmooth();
  background(0, 255, 0);
}

void draw() {
  fill(255, 0, 0);
  noStroke();
  arc(125, 125, 160, 160, 0, PI+QUARTER_PI, OPEN);
}
Y observamos qué ocurre:


7.5.-Curve
Con este comando podemos introducir curvas en nuestro programa. Para ello debemos introducir el código siguiendo estos parámetros: curve(x1, y1, x2, y2, x3, y3, x4, y4). Siendo:
x1: comienzo del punto de control de la curva en la coordenada x
y1: comienzo del punto de control de la curva en la coordenada y
x2: primer punto de la curva en la coordenada x
y2: primer punto de la curva en la coordenada y
x3: segundo punto de la curva en la coordenada x
y3: segundo punto de la curva en la coordenada y
x4: final del punto de control de la curva en la coordenada x
y4: final del punto de control de la curva en la coordenada y

Ahora, teniendo en cuenta esto, probaremos el ejemplo:
noFill();
stroke(255, 102, 0);
curve(5, 26, 5, 26, 73, 24, 73, 61);
stroke(0);
curve(5, 26, 73, 24, 73, 61, 15, 65);
stroke(255, 102, 0);
curve(73, 24, 73, 61, 15, 65, 15, 65);


Ahoora, crearemos un código siguiendo el ejemplo:
noFill();
stroke(255, 102, 0);
curve(10, 10, 30, 38, 80, 40, 40, 10);
stroke(0);
curve(50, 26, 80, 40, 73, 61, 15, 83);
stroke(255, 102, 0);
curve(50,50, 73, 61, 15, 65, 10, 10);


Y ahora, crearemos un código más complicado:
void setup() {
  size(250, 250);
background(#FAFF00);
}

void draw() {
fill(#FAFF00);
  stroke(255, 0, 0);
  curve(125, 125, 0, 80, 230, 50, 200, 180);
  stroke(0, 255, 0);
  curve(200, 60, 230, 50, 215, 80, 180, 70);
  stroke(255, 0, 0);
  curve(160, 60, 215, 80, 50, 170, 45, 180);
}
Y vemos qué ha ocurrido:


9.4.-strokeJoin
Este comando nos permite elegir el tipo de conexión que tipo dos segmentos(redondeada, cortada o en forma de pico). Para comprenderlo mejor veremos el siguiente ejemplo donde:
-strokeWeight: es la anchura de la línea.
-strokeJoin es la dicha conexión y puede ser: MITER(en pico), BEVEL(cortada) o ROUND(redondeada).
-beginShape sirve para indicar al programa que vamos a introducir unos segmentos.
-vertex se usa para indicar las coordenadas de los vértices.
-endShape sirve para indicar al programa que hemos terminado de introducir segmentos.
Y HAY QUE INTRODUCIRLOS EN ESTE ORDEN. Ahora procedemos a probar el anterior mencionado ejemplo:
noFill();
strokeWeight(10.0);
strokeJoin(MITER);
beginShape();
vertex(35, 20);
vertex(65, 50);
vertex(35, 80);
endShape();


Ahora, crearemos un código inventado por nosotros para ver qué hemos aprendido:
noFill();
strokeWeight(15.0);
strokeJoin(BEVEL);
beginShape();
vertex(10,10);
vertex(80,20);
vertex(10,30);
endShape();
Y vemos qué ocurre:


Ahora, crearemos otro código algo más complejo:
void setup() {
  size(250, 250);
 noSmooth();
  background(0, 255, 0);
fill(0, 250, 0);
}

void draw() {
  stroke(#FF0000);
  strokeWeight(20.5);
  strokeJoin(ROUND);
  beginShape();
  vertex(5,5);
  vertex(120,120);
  vertex(5, 245);
  endShape();
}
Y observamos el programa:


12.11.-pmouseX
Este comando nos permite insertar una línea que siga la ratón, pero solamente en el eje X, es decir, de manera horizontal. Por tanto, observamos el ejemplo:
void draw() {
  background(204);
  line(mouseX, 20, pmouseX, 80);
  println(mouseX + " : " + pmouseX);
}
                            
Ahora, procedemos a crear nosotros nuestro propio código:
void setup() {
  size(250, 250);
  }

void draw() {
 background(255, 0, 0);
  stroke(0, 255, 0);
  line(mouseX, 80, pmouseX, 160);
  println(mouseX + " : " + pmouseX);
}
Y vemos el programa:
              

Y ahora, vamos a tratar de crear un código aún más complejo y preciso:
void setup() {
  size(300, 300);
  }

void draw() {
 background(#0700FF);
  stroke(#EDFF00);
  strokeWeight(20.5);
  line(pmouseX, 120, pmouseX, 220);
  println(mouseX + " : " + pmouseX);
}

Inicio a Processing

Vamos a iniciarnos con Processing, un programa que transforma un código que no es capaz de leer un ordenador en un programa que si es capaz de leerlo.

Generalmente insertaremos los colores con el famoso R, G, B, por lo que nos servirá de gran ayuda este esquema para poder conseguir el color deseado.

Para poder indicar la posición donde queramos que se sitúe en la pantalla la línea, circunferencia,... Utilizaremos las coordenadas X e Y, que se sitúan en la pantalla de la siguiente forma.

Ahora podemos comenzar a usar Processing, así que comenzaremos por lo básico, insertando la línea del ejemplo:

1	line(0, 0, 100, 100);

Iniciamos el programa pulsando el siguiente icono  y veremos que ocurre:


Pon tanto, en función del comando que utilicemos podremos programar distintos elementos:
-Con "line" insertamos una línea.
-Con "stroke" cambiamos el color de la línea.
-Con "background" cambiamos el color del fondo.

Así pues, programaremos el siguiente ejemplo;

background(255); line(0, 0, 100, 100); stroke(0, 0, 255); line(0, 100, 100, 0);

Y vemos que ocurre:


Ahora, probaremos distintos códigos:

background(16, 255, 0);     stroke(250, 0, 0);     line(0, 0, 100, 100);     stroke(0, 0, 255);     line(0, 50, 100, 50);

Y ocurre lo siguiente:


Para hacer más claro el programa, utilizaremos variables, cuya función es sustituir los valores que queramos. Para ello, primero probaremos el ejemplo:

int value1 = 0; int value2 = 100; line(value1, value1, value2, value2); line(value1, value2, value2, value1);

Y ocurre lo siguiente:


Ahora, probaremos a cambiar los valores:

int francisco = 0;   int processing = 50;   line(francisco, processing, processing, processing);   line(francisco, francisco, processing, processing); Y vemos lo que ocurre:

Pero no siempre utilizaremos el comando "int" para cambiar los valores, sino que utilizaremos los siguientes, ya que son los más comunes:

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 “&%!@¤”.

Además,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);

Lo ejecutamos y observamos lo siguiente:

Así pues, determinamos que el comando "size" nos permite cambiar el tamaño de la pantalla y el comando "ellipse", insertar un elipse. Ahora, procederemos a cambiar los valores del código anterior:

background(255, 0, 0);  stroke(0, 255, 0);  size(400, 300);  ellipse(200, 150, 400, 250);

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(300, 300); } 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.
.-mouseX: La coordenada X del puntero del ratón.
.-mouseY: La coordenada Y del puntero del ratón.

Ahora, programaremos el siguiente ejemplo:

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

Y observamos el programa:


Ahora, probaremos a iniciar un programa inventado por nosotros en el que aplicaremos todo lo aprendido hasta ahora:

int raton = 150;   int teclado = 300;   void setup() {   size(300, 300);   background(255, 0, 0);   }      void draw() {   stroke(0, 255, 0);   line(raton, raton, mouseX, mouseY);   } Y ahora, probaremos otro ejemplo inventado, pero esta vez estableciendo los colores que  queramos exactamente gracias a la herramienta de selector de colores: Y ahora, probaremos el siguiente código:   int francisco = 100;   int processing = 200;   void setup() {   size(200, 200);   background(#4C9341);   }   void draw() {   stroke(255, 0, 0);   ellipse(francisco, francisco, processing, processing);   stroke(0, 0, 255);   line(0, 0, processing, processing);   } Dentro del propio programa Processing, en ayuda, encontramos "referencia" donde podemos  encontrar una gran lista de comandos a la cual podemos acceder en cualquier momento y  cómo se introducen éstos en el programa. A continuación realizaremos una serie de proyectos para llevar a cabo lo aprendido,  empezaremos por la "Serpiente roja". Primero comenzaremos por programar un simple círculo, para ello aplicaremos los  nuevos comandos: .-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. En este ejemplo rellenará el círculo de color rojo. Ahora, introduciremos el código del ejemplo para conseguir el círculo: void setup() {   size(400, 400); } void draw() {   noStroke();                  fill(255, 0, 0);             ellipse(100, 100, 30, 30); } Y observamos el círculo:  Ahora, conseguiremos que se mueva el elipse, para ello, solo necesitamos cambiar el  origen del elipse del código anterior por mouseX y mouseY, es decir, que el origen del elipse sea el ratón. void setup() {   size(400, 400); } void draw() {   noStroke();                  fill(255, 0, 0);             ellipse(mouseX, mouseY, 30, 30); } Y observamos qué podemos hacer: Ahora vamos a cambiar el color. El cambio de color dependiendo del tiempo puede  hacerse de diferentes maneras. El color puede cambiar entre 0 y 255 (negro y rojo  respectivamente). El siguiente ejemplo muestra como reducir la cantidad de rojo en  cada instante que se ejecuta draw(). Ahora, debemos aprender a usar un nuevo comando: .-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.  Por tanto, introduciremos el siguiente código: int rojo = 255;    void setup() {   size(400, 400); } void draw() {   rojo = rojo - 1;               if (rojo < 0){      rojo = 255;                 }       noStroke();                fill(rojo, 0, 0);             ellipse(mouseX, mouseY, 30, 30);  } Y observamos lo que ocurre: Para cambiar los colores más gradualmente, usaremos estos 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. Por tanto, ahora procedemos a introducir este código: int rojo = 255; int tiempo = 0; void setup() {   size(400, 400); } void draw() {   tiempo = tiempo + 1;     rojo = int(128 * (1 + sin(tiempo * 2 * PI / frameRate / 20)));      noStroke();                fill(rojo, 0, 0);             ellipse(mouseX, mouseY, 30, 30);  } Y ejecutamos el programa: Ahora, tenemos el último comando necesario para este proyecto: .-fill(red, green, blue, alpha): Hemos añadido un cuarto parámetro alpha  a la función fill(). Esto establece la transparencia del color y su rango va de 0 a 255. Ahora, procedemos a introducir el código definitivo de este proyecto: 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); } Y observamos la serpiente: Ahora, probaremos a cambiar algunas variables con el siguiente código que acabamos de inventar: int gris = #2DFC00; int tiempo = 0; int diametro = 350; void setup() { size(600, 300); background(255, 0, 0); } void draw() { tiempo = tiempo + 2; gris = int(128 * (1 + sin(tiempo * 2 * PI / frameRate / 10))); diametro = int(50 * (1 + sin( tiempo * 2 * PI / frameRate / 5))); noStroke(); fill(gris); ellipse(mouseX, mouseY, diametro, 123); } Y vemos lo que ocurre: Ahora, haremos otra serpiente roja, bueno, en este caso verde, para concluir el blog. El código es el siguiente: int verde = 255; int tiempo = 0; int diametro = 75; void setup() { size(600, 600); background(#0057FF); } void draw() { tiempo = tiempo + 1; verde = int(128 * (1 + sin(tiempo * 2 * PI / frameRate / 10))); diametro = int(50 * (1 + sin( tiempo * 2 * PI / frameRate / 5))); noStroke(); fill(0, verde, 0, 25); ellipse(mouseX, mouseY, diametro, diametro); } Y observamos todo lo que podemos hacer: