Como vimos en la anterior entrada llamada “Processing – Primeros Pasos“, ahora iniciaremos con el uso de diferentes tipos de gráficos. Comenaremos con el siguiente código:
|
1 2 3 4 5 6 7 8 |
void setup(){ size(400, 400); background(192,64,0) ; stroke(255); line(50, 200, 200, 200); line(200, 200, 200, 50); line(50, 200, 200, 50); } |
En este código se define el tamaño de la ventana a 400 x 400 pixeles, el color de fondo a amarillo – naranja, y dibuja un triangulo con tres lineas en blanco, al definir el color de borde, stroke(), en 255. Por omisión, los colores son especificados en valores de 0 a 255. Otras variaciones de los parámetros pasados a la función stroke(), darán resultados diferentes:
|
1 2 3 4 5 |
stroke(255); // define el color de borde en blanco stroke(255, 255, 255); // resultado identico a la linea anterior stroke(255, 128, 0); // naranja claro (rojo 255, verde 128, azul 0) stroke(#FF8000); // naranja claro como color web stroke(255, 128, 0, 128); // naranja claro con 50% de transparencia |
Ahora veremos diferentes formas que podemos utilizar:
Dibujando un Píxel | set()
Modo de Uso
|
1 |
set (x,y,c); |
Parámetros
- x del pixel
- y del pixel
- c del Color. Si se usa un valor entero, se interpreta como valor de gris.
|
1 2 3 4 5 |
void setup(){ size(150,150); //define el tamaño de ventana background(0); //pinta la ventana de negro set(75,75,255); //dibuja un pixel blanco } |
Dibujando una Línea Recta | line()
Modo de Uso
|
1 |
line (x1,y1,x2,y2); |
Parámetros
- x1 de un extremo
- y1 de un extremo
- x2 del otro extremo
- y2 del otro extremo
Dibujando un Triángulo | triangle()
Modo de Uso
|
1 |
triangle(x1,y1,x2,y2,x3,y3); |
Parámetros
- x1 x del primer vértice
- y1 y del primer vértice
- x2 x del segundo vértice
- y2 y del segundo vértice
- x3 x del tercer vértice
- y3 y del tercer vértice
|
1 2 3 4 5 6 |
void setup(){ size(150,150); //define el tamaño de ventanaine el tamaño de ventanatana background(255); //pinta el fondo de blancointa el fondo de blancoro strokeWeight(4); //ancho de la linea (4 pixeles)ncho de la linea (4 pixeles) triangle(10,90,100,15,135,135); } |
Dibujando un Círculo / Elipse | ellipse()
Modo de uso
|
1 |
ellipse(x1,y1,x1,y2); |
Parámetros
El uso de los parametros depende de ellipseMode();
ellipseMode(CENTER); (valor por defecto)
- x1 x del centro
- y1 y del centro
- x2 ancho (diámetro)
- y2 alto (diámetro)
ellipseMode(CORNER);
- x1 x del vértice superior izquierdo del rectángulo que la contiene
- y1 y del vértice superior izquierdo del rectángulo que la contiene
- x2 ancho (diámetro)
- y2 alto (diámetro)
ellipseMode(CORNERS);
- x1 x de un vértice del rectángulo que la contiene
- y1 y de un vértice del rectángulo que la contiene
- x2 x del vértice opuesto del rectángulo que la contiene
- y2 y del vértice opuesto del rectángulo que la contiene
|
1 2 3 4 5 6 7 |
void setup(){ size(150,150); //define el tamaño de ventanal tamaño de ventanao de ventanaine el tamaño de ventanatana background(255); //pinta el fondo de blancoel fondo de blancoo de blancointa el fondo de blancoro strokeWeight(4); //ancho de la linea (4 pixeles)de la linea (4 pixeles)inea (4 pixeles)ncho de la linea (4 pixeles) rectMode(CENTER); //(valor por defecto)r por defecto) ellipse(70,80,130,80); } |
Dibujando un Cuadrado / Rectángulo | rectangle()
Modo de uso
|
1 |
rect(x1,y1,x1,y2); |
Parámetros
El uso de los parametros depende de rectMode();
rectMode(CENTER);
- x1 x del centro
- y1 y del centro
- x2 ancho
- y2 alto
rectMode(CORNER); (valor por defecto)
- x1 x del vértice superior izquierdo
- y1 y del vértice superior izquierdo
- x2 ancho
- y2 alto
rectMode(CORNERS);
- x1 x de un vértice
- y1 y de un vértice
- x2 x del vértice opuesto
- y2 y del vértice opuesto
|
1 2 3 4 5 6 7 |
void setup(){ size(150,150); //define el tamaño de ventanae el tamaño de ventanal tamaño de ventanao de ventanaine el tamaño de ventanatana background(255); //pinta el fondo de blancota el fondo de blancoel fondo de blancoo de blancointa el fondo de blancoro strokeWeight(4); //ancho de la linea (4 pixeles)ho de la linea (4 pixeles)de la linea (4 pixeles)inea (4 pixeles)ncho de la linea (4 pixeles) rectMode(CORNER); //modo en que se interpretarán los parámetros en rect()alor por defecto)r por defecto) rect(10,10,120,80); } |
Dibujando un Cuadrilátero | quad()
Modo de Uso
|
1 |
quad(x1,y1,x2,y2,x3,y3,x4,y4); |
Parámetros
- x1 x del primer vértice
- y1 y del primer vértice
- x2 x del segundo vértice
- y2 y del segundo vértice
- x3 x del tercer vértice
- y3 y del tercer vértice
- x4 x del cuarto vértice
- y4 y del cuarto vértice
|
1 2 3 4 5 6 |
void setup(){ size(150,150); //define el tamaño de ventana background(255); //pinta la ventana de blanco strokeWeight(4); //ancho de la linea (4 pixeles) quad(20,10,130,30,110,115,40,140); } |
Dibujando una Curva | bezier()
Modo de Uso
|
1 |
bezier(x1,y1,x2,y2,x3,y3,x4,y4); |
Parámetros
- x1 x de un extremo
- y1 y de un extremo
- x2 x del punto de dirección de salida
- y2 y del punto de dirección de salida
- x3 x de la dirección de llegada
- y3 y de la dirección de llegada
- x4 x del otro extremo
- y4 y del otro extremo
|
1 2 3 4 5 6 |
void setup(){ size(150,150); //define el tamaño de ventana de ventana background(255); //pinta la ventana de blanco a de blanco strokeWeight(4); //ancho de la linea (4 pixeles)ea (4 pixeles) bezier(20,10,40,140,120,30,110,115); } |
Dibujando un Arco | arc()
Modo de uso
|
1 |
arc(x1,y1,x1,y2,rad1,rad2); |
Parámetros
El uso de los primeros cuatro parámetros depende de ellipseMode();
En este caso se explican los parámetro con ellipseMode(CENTER); que es el valor por defecto.
ver ellipse();
- x1 x del centro
- y1 y del centro
- x2 ancho (diámetro)
- y2 alto (diámetro)
- rad1 punto de inicio
- rad2 punto de final
|
1 2 3 4 5 6 7 |
void setup(){ size(150,150); //define el tamaño de ventana tamaño de ventanaventanade ventana background(255); //pinta la ventana con colore de fondo blancoa ventana con colore de fondo blancoe blancoa de blanco strokeWeight(4); //ancho de la linea (4 pixeles)e la linea (4 pixeles)(4 pixeles)ea (4 pixeles) ellipseMode(CENTER); //modo de los parámetros en ellipse() y arc();o de los parámetros en ellipse() y arc(); arc(80,70,120,80,PI/2,0); } |
Ahora vamos a dar un ejemplo final mezclando todo:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
void setup(){ size(400,400); //define el tamaño de ventana tamaño de ventana tamaño de ventanaventanade ventana background(255); //pinta la ventana de negroa ventana con colore de fondo blancoa ventana con colore de fondo blancoe blancoa de blanco set(75,75,255); //dibuja un pixel blancoe la linea (4 pixeles)e la linea (4 pixeles)(4 pixeles)ea (4 pixeles) line(100,100,400,400); triangle(10,110,80,20,130,130); rectMode(CENTER); //(valor por defecto) ellipse(200,200,100,100); rect(300,50,100,50); quad(20,200,125,50,30,130,10,20); bezier(200,20,45,200,120,30,110,115); } |
