Dibujando

 

 

1- La ventana de dibujo
Nuestros programas se ejecutan dibujando en una ventana. Podemos verla pulsando el botón "Run" (correr, ejecutar el programa).

 

La ventana de dibujo tiene un tamaño de 100x100 px. por defecto.

Determinamos el tamaño con la instrucción:

size(800,600);

El punto de origen (0,0) es la esquina superior izquierda.
Las coordenadas iniciales van por tanto desde (0,0) hasta (99,99).

 

 

2- Dibujando
Podemos "dibujar con números" con las instrucciones de dibujo simples:

point - punto
line - línea
ellipse - círculos y elipses

rect - cuadrados y rectángulos
arc - arco
quad - polígonos de 4 lados
triangle - polígonos de 3 lados

 

Cada instrucción de dibujo necesita unos parámetros (números) que indican dónde y cómo se dibuja esa forma.

 

point(5,5); // un punto

 

line(10,10,50,40); // (10,10) es el punto inicial, (90,90) el punto final

 

ellipse(50,50,30,10); // (50,50) es el centro,

// 30 el diámetro horizontal y 10 el diámetro vertical

 

rect(10,70,80,20); // (10,70) es la esquina superior izquierda, 80 el ancho y 20 el alto

 

 

3- Cambiar el grosor del trazo
El trazo es de 1px por defecto. Podemos modificarlo con: 
strokeWeight(4);  // (4 es el número de píxeles de grosor del trazo)

 

Varias líneas con grosor creciente como ejemplo:

strokeWeight(1);
line(20,20,20,80);
strokeWeight(2);
line(30,20,30,80);
strokeWeight(3);
line(40,20,40,80);
strokeWeight(4);
line(40,20,40,80);
strokeWeight(5);
line(50,20,50,80);
strokeWeight(6);
line(60,20,60,80);
strokeWeight(7);
line(70,20,70,80);
strokeWeight(8);
line(80,20,80,80);

 

 

Todas las formas que dibujemos a continuación tendrán un grosor de 4, hasta que cambiemos de nuevo el grosor con una nueva instrucción:

strokeWeight().

 

4- Comentarios
Utilizamos comentarios para luego acordarnos y poder comprender el código. Pueden se de una línea, como en los ejemplos anteriores, empezando con: //

O de varias líneas, en cuyo caso abrimos con /* y terminamos con */

/* esto es un comentario
de varias líneas
------------------------- !!!!!
*/


5- Suavizado (antialising)
Si queremos que las formas queden suaves, sin escalonamiento en los bordes, utilizamos la orden smooth() (suavizado).

smooth();  

 

O su contrario, cuando necesitamos dibujar muchas formas muy rápidamente.

 

noSmooth();

 

noSmooth() vs smooth()

6- Polígonos
Podemos dibujar polígonos compuestos por varias líneas:

beginShape();

vertex(20, 20);

vertex(85, 30);

vertex(65, 75);

vertex(30, 55);

endShape(CLOSE);

 

7- Formas curvas
Esta misma instrucción puede utilizarse para dibujar curvas:

noFill();

beginShape(); 

curveVertex(50, 90);

curveVertex(50, 90);

curveVertex(70, 20);

curveVertex(20, 12);

curveVertex(30, 60);

curveVertex(30, 60);

endShape();

 

 

8- Curvas de Bezier
Podemos trazar curvas de Bezier, una a una:

noFill();

stroke(255, 102, 0);

line(85, 20, 10, 10); // (tiradora)

line(90, 90, 15, 80); // (tiradora)

stroke(0, 0, 0);

bezier(85, 20, 10, 10, 90, 90, 15, 80); // (curva)

 

O en secuencia, con el sistema anterior:

beginShape();
vertex(30, 20);
bezierVertex(80, 0, 80, 75, 30, 75);
bezierVertex(50, 80, 60, 25, 30, 20);
endShape();

 

 

[ GO TO : NEXT PAGE ->