Forma 1: Coordenadas, Primitivas Esta unidad introduce al sistema

Forma 1: Coordenadas, Primitivas Esta unidad introduce al sistema

Forma 1: Coordenadas, Primitivas
Esta unidad introduce al sistema de coordenadas que se despliega en la ventana y una
variedad de figuras geométricas.
Sintáxis:
size(), point(), line(), triangle(), quad(), rect(), ellipse(), bezier()
background(), fill(), stroke(), noFill(), noStroke()
strokeWeight(), strokeCap(), strokeJoin()
smooth(), noSmooth(), ellipseMode(), rectMode()
Dibujar una figura con código puede ser complicado ya que cada aspecto de su ubicación
deberá ser especificado con un número. Cuando estás acostumbrado a dibujar con un lápiz o
mover figuras en un apantalla con un mouse, toma un tiempo en en comenzar a pensar en
relación a la grilla de coordenadas en la pantalla. El vacío mental entre ver una composición en
papel o en tu cabeza y trasladarla a notaciones de código es grande pero fácilmente linkeable.
Coordenadas
Antes de hacer un dibujo es importante pensar sobre las dimensiones y cualidades de la
superficie en que dibujas. Si haces dibujos en papel, puedes elegir entre diversos tipos de
papel y utensilios. Para bosquejos rápidos el carboncillo es lo indicado.
Para un dibujo refinado un papel hecho a mano y lápices indicados es lo preferible.
En contraste, cuando dibujas en la pantalla del computador, las opciones primarias disponibles
son size o tamaño de la ventana y color del fondo o background color.
La pantalla del computador es una grilla de pequeños eleemntos de luz llamados pixeles y la
pantalla viene en diversos tamaños y resoluciones; laptops 1,764,000 pixeles, (1680 ancho *
1050 alto), LCD 1,310,720 pixeles (1280 ancho * 1024 alto), etc.
Processing puede controlar y adaptarse a los pixeles. Cuando corres el programa, una ventana
de display se abrirá y permitirá el acceso a para leer y escribir el código.
Es posible crear imágenes más grandes que el tamaño de la pantalla, pero en la mayoría de
los casos, deberás hacer una ventana del tamaño de la pantalla o más pequeña.
El tamaño de la pantalla de display es controlada por la función size():
size(ancho, alto)
La función size() tiene dos parámetros: el primero setea el ancho de la ventana y el segundo
setea su alto.
// Dibuja la ventana de display de 120 pixeles
// ancho y alto de 200 pixeles
size(120, 200);
// Dibuja la ventana de display de 320 pixeles
// de ancho y 240 pixeels de alto
size(320, 240);
// Dibuja la ventana de display de 200 pixeles
// de ancho y 200 pixeels de alto
size(200, 200);
Una posición en la pantalla es comprendida entre una coordenada x y una coordenada y. La
coordenada x es la distancia horizontal desde el origen y la coordenada y es la distancia
vertical.
En Processing, el origen el extremo superior izquierdo de la ventana de display y los valores de
las coordenadas incrementan hacia abajo y hacia la derecha. La imagen de la izquierda
muestra el sistema de coordenadas y la imagen de la derecha, muestra un par de coordenadas
situadas en la grilla:
Una posición es escrita como el valor de la coordenada x, seguida por la coordenada, separada
con una coma.
La notación para el origen es (0,0), la coordenada (50,50) corresponde a x=50 e y=50, lo
mismo que 20 y 60, equivalen a x e y.
Si la ventana de display es de 100 pixeles de ancho y 100 pixeles de alto, (0,0) son los pixeles
en el extremo superior izquierdo, (99,0) son los pixeles en el extremo superior derecho, etc.
Figuras Primitivas.
Un punto es el más simple elemento visual y es dibujado con la función point():
point(x, y)
Esta función tiene dos parámetros: la primera es la coordenada x y la segunda es la
coordenada y.
Si no se dice lo contrario, un punto será del tamaño de un pixel.
// Puntos con los mismos parámetros X e Y
// forman un alínea diagonal desde el extremosup izq
// hasta el extremo inferior der
point(20, 20);
point(30, 30);
point(40, 40);
point(50, 50);
point(60, 60);
// Puntos con los mismos parámetros X e Y
// con la misma distancia desde arriba y abajo
// de los bordes del marco
point(50, 30);
point(55, 30);
point(60, 30);
point(65, 30);
point(70, 30);
// Puntos con los mismos parámetros X e Y
// con la misma distancia desde der e izq
// de los bordes del marco
point(70, 50);
point(70, 55);
point(70, 60);
point(70, 65);
point(70, 70);
// Ubicar un grupo de puntosuno al lado de otro
// crea una línea
point(50, 50);
point(50, 51);
point(50, 52);
point(50, 53);
point(50, 54);
point(50, 55);
point(50, 56);
point(50, 57);
point(50, 58);
point(50, 59);
// Ubicar untos fuera del display
// no causan un error,
// pero los puntos no son visibles
point(-500, 100);
point(400, -600);
point(140, 2500);
point(2500, 100);
Mientras es posible dibujar una línea con una serie de puntos, es mejor y más sencillo
dibujarlas con la función
line(). Esta función tiene 4 parámetros, dos para cada endpoint:
Los 2 primeros parámetros fijan la posición donde la línea comenzará y los últimos dos fijarán
donde la línea terminará.
// Cuando las coordenadas y para una línea son las mismas
// la línea es horizontal
line(10, 30, 90, 30);
line(10, 40, 90, 40);
line(10, 50, 90, 50);
// Cuando las coordenadas y para una línea son las mismas
// la línea es vertical
line(40, 10, 40, 90);
line(50, 10, 50, 90);
line(60, 10, 60, 90);
// Cuando los 4 parámetros son diferentes, la línea es diagonal
line(25, 90, 80, 60);
line(50, 12, 42, 90);
line(45, 30, 18, 36);
// Cuando 2 líneas comparten el mismo punto, estos se conectan
line(15, 20, 5, 80);
line(90, 65, 5, 80);
La función triangle() dibuja triángulos. Tiene 6 parámeters, dos para cada punto:
triangle(x1, y1, x2, y2, x3, y3)
El primer par define el primer punto, el par del medio el segundo punto, y el último par el tercer
punto. Cualquier triángulo puede ser dibujado conectando 3 líneas, pero la función triangle()
hace posible dibujar una figura llena. Triángulos de todos los tipos y tamaños pueden ser
creados cambiando los valores de los parámetros.
triangle(60, 10, 25, 60, 75, 65); // Triángulo
line(60, 30, 25, 80); // Triángulo lleno
line(25, 80, 75, 85); // Borde de Triángulo lleno
line(75, 85, 60, 30); // Borde de Triángulo
point(x, y)
line(x1, y1, x2, y2)
triangle(x1, y1, x2, y2, x3, y3)
quad(x1, y1, x2, y2, x3, y3, x4, y4)
rect(x, y, ancho, alto)
ellipse(x, y, width, height)
bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2)
GEOMETRÍA PRIMITIVA
Processing tiene 7 funciones para asistir en hacer figuras simples. Estas imágenes muestran el
formato para cada una. Reemplaza los parámetros con números para usarlos en un código.
triangle(55, 9, 110, 100, 85, 100);
triangle(55, 9, 85, 100, 75, 100);
triangle(-1, 46, 16, 34, -7, 100);
triangle(16, 34, -7, 100, 40, 100);
La función quad() dibuja un cuadrilátero, un polígono de 4 lados. LA función tiene 8 parámetros,
dos para cada punto.
quad(x1, y1, x2, y2, x3, y3, x4, y4)
Cambiando los valores de los parámetros ya puedes dibujar rectángulos, cuadrados,
paralelepípedos y cuadriláteros regulares.
quad(38, 31, 86, 20, 69, 63, 30, 76);
quad(20, 20, 20, 70, 60, 90, 60, 40);
quad(20, 20, 70, -20, 110, 0, 60, 40);
Dibujar rectángulos y elipses es diferente que las figuras previamente introducidas.
En vez de definir cada punto, los 4 parámetros fijan la posición y dimensión de la figura. La
función
rect() dibuja un rectángulo:
rect(x, y, width, height)
Los primeros dos parámetros fijan la ubicación del extremo superior izquierdo, el tercero fija el
ancho y el cuarto fija el alto. Usa el mismo valor de parámetros que width y height o ancho y
alto para dibujar un cuadrado:
rect(15, 15, 40, 40); // Cuadrado grande
rect(55, 55, 25, 25); // Cuadrado pequeño
rect(0, 0, 90, 50);
rect(5, 50, 75, 4);
rect(24, 54, 6, 6);
rect(64, 54, 6, 6);
rect(20, 60, 75, 10);
rect(10, 70, 80, 2);
La función ellipse() dibuja una elipse en la ventana de display:
ellipse(x, y, width, height)
Los primeros 2 parámetros fijan la locación del centro de la elipse, el tercero fija el ancho, y el
cuarto el alto. Usa el mismo parámetro de valores para ancho y alto que para dibujar un círculo:
ellipse(40, 40, 60, 60); // círculo gde
ellipse(75, 75, 32, 32); // círculo pequeño
ellipse(35, 0, 120, 120);
ellipse(38, 62, 6, 6);
ellipse(40, 100, 70, 70);
La función bezier() puede dibujar líneas que no son derechas. Una curva Bézier está definida
por controlar una serie de puntos y anchos de puntos.
Una curva es dibujada entre puntos, y controla puntos definidos en su forma:
bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2)
La función requiere 8 parámetros en un set de 4 puntos. La curva es dibujada entre los
primeros puntos y los cuartos y controla los puntos segundos y terceros.
bezier(32, 20, 80, 5, 80, 75, 30, 75);
// Dibuja los puntos de control
line(32, 20, 80, 5);
ellipse(80, 5, 4, 4);
line(80, 75, 30, 75);
ellipse(80, 75, 4, 4);
bezier(85, 20, 40, 10, 60, 90, 15, 80);
// Dibuja los puntos de control
line(85, 20, 40, 10);
ellipse(40, 10, 4, 4);
line(60, 90, 15, 80);
ellipse(60, 90, 4, 4);
ORDEN DE DIBUJO
El orden en que se dibujan las formas en el código definen qué formas aparecen arriba o sobre
de las otras en la ventana. Si un rectángulo es dibujado en la primera línea del programa, y una
elipse, en la segunda línea, aparecerá la elipse sobre el rectángulo. Revirtiendo el orden,
aparecerá el rectángulo sobre la elipse.
rect(15, 15, 50, 50); // atrás
ellipse(60, 60, 55, 55); // adelante
ellipse(60, 60, 55, 55); // atrás
rect(15, 15, 50, 50); // adelante
VALORES DE GRISES
Los ejemplos descritos han usado gris como background, líneas negras, y figuras blancas.
Para cambiar estos valores por defecto, es necesario introducir sintaxis adicional.
La función background() fija el color de la ventana de display con un número entre 0 y 255.
Este rango puede sonar raro si no estás familiarizado con el dibujo en software. El valor 255 es
blanco y el valor 0 es negro, con un rango de grises entre medio.
Si no hay valor de background definido, el valor por defecto dadoes 204 (gris claro).
background(0);
background(124);
background(230);
La función fill() fija el valor de relleno en las figuras, y la función stroke() fija el valor de la línea
de contorno de la figura dibujada. Si no hay valor fill definido, por defecto, el valor usado será
de 255 (blanco) Si no hay valor stroke definido, por defecto, el valor usado será 0 (negro).
rect(10, 10, 50, 50);
fill(204); // gris claro
rect(20, 20, 50, 50);
fill(153); // gris medio
rect(30, 30, 50, 50);
fill(102); // gris oscuro
rect(40, 40, 50, 50);
background(0);
rect(10, 10, 50, 50);
stroke(102); // gris oscuro
rect(20, 20, 50, 50);
stroke(153); // gris medio
rect(30, 30, 50, 50);
stroke(204); // gris claro
rect(40, 40, 50, 50);
Una vez que los valores fill o stroke son definidos, estos se aplicarán a todas la figuras que
vendrán más abajo. Para cambiar los valores de fill o stroke, usa las funciones fill() o stroke()
nuevamente.
fill(255); // bco
rect(10, 10, 50, 50);
rect(20, 20, 50, 50);
rect(30, 30, 50, 50);
fill(0); // ng
rect(40, 40, 50, 50);
Un segundo parámetro opcional a fill() y stroke() controlan la transparencia. Fijan el parámetro
a 255 y hacen de la figura una opaca, y 0 la harán totalmente transparente:
background(0);
fill(255, 220);
rect(15, 15, 50, 50);
rect(35, 35, 50, 50);
fill(0);
rect(0, 40, 100, 20);
fill(255, 51); // opacidad baja
rect(0, 20, 33, 60);
fill(255, 127); // opacidad media
rect(33, 20, 33, 60);
fill(255, 204); // opacidad alta
rect(66, 20, 33, 60);
Stroke (borde) y fill (relleno) de una figura pueden ser deshabilitadas. La función noFill() para a
Processing de rellenar las figuras, y la función noStroke() para las formas de líneas de ser
dibujadas y tener borde. Si noFill() y noStroke() son ambas usadas, nada se dibujará en la
pantalla.
rect(10, 10, 50, 50);
noFill(); // desabilita relleno
rect(20, 20, 50, 50);
rect(30, 30, 50, 50);
rect(20, 15, 20, 70);
noStroke(); // desabilita borde
rect(50, 15, 20, 70);
rect(80, 15, 20, 70);
ATRIBUTOS DEL DIBUJO
En adición de cambiar los valores de fill y stroke en una figura, es posible cambiar los atributos
de la geometría. Las funciones smooth() y noSmooth() habilitan y deshabilitan la suavidad o
smooth.
Una vez que estas funciones son usadas, todas las figuras dibujadas después son afectadas.
Si smooth() es usada primero, utilizando noSmooth() la cancela y vice versa.
ellipse(30, 48, 36, 36);
smooth();
ellipse(70, 48, 36, 36);
smooth();
ellipse(30, 48, 36, 36);
noSmooth();
ellipse(70, 48, 36, 36);
Los atributos de la línea son controlados por las funciones strokeWeight(), strokeCap(), y
strokeJoin(). La función strokeWeight() tiene un solo parámetro numérico que fija el grosor de
todas las líneas dibujadas después de haber usado esta función. La función strokeCap()
requiere un parámetro que puede ser o ROUND o SQUARE, o PROJECT.
ROUND hace los endpoints romos, SQUARE cuadrados y PROJECT mezcla los dos, extiende
los fines de líneas o endpoints a SQUARE por un radio de la línea. La función strokeJoin() tiene
un parámetro que puede ser BEVEL, MITER, o ROUND. Estos parámetros determinan cómo la
línea se segmenta o el borde se conecta con la figura. BEVEL causa que las líneas se junten
con extremos cuadrados, MITER es el default y junta las líneas con extremos punteados.
ROUND crea una curva.
smooth();
line(20, 20, 80, 20); // por defecto, línea pesa 1
strokeWeight(6);
line(20, 40, 80, 40); // línea gruesa
strokeWeight(18);
line(20, 70, 80, 70); // línea más gruesa
smooth();
strokeWeight(12);
strokeCap(ROUND);
line(20, 30, 80, 30); // línea de arriba
strokeCap(SQUARE);
line(20, 50, 80, 50); // línea media
strokeCap(PROJECT);
line(20, 70, 80, 70); // línea de abajo
smooth();
strokeWeight(12);
strokeJoin(BEVEL);
rect(12, 33, 15, 33); // fig izq
strokeJoin(MITER);
rect(42, 33, 15, 33); // fig media
strokeJoin(ROUND);
rect(72, 33, 15, 33); // fig der
MODOS DE DIBUJO
Por defecto, los parámetros para ellipse() fija la coordenada x para el centro, la coordenada y
del centro, el ancho y el alto. La función ellipseMode() cambia la manera que estos parámetros
son usados para dibujar elipses. La función ellipseMode() requiere de un parámetro quepuede
ser o CENTER o RADIUS o CORNER o CORNERS. El modo por defecto es CENTER. El
modo RADIUS también usa el primer y segundo parámetro de ellipse() para fijar el centro, pero
causa el tercer parámetro de fijar la mitad del ancho y el cuarto parámetro para fijar la mitad del
alto. EL modo CORNER hace que ellipse() trabaje similar a rect(). Causa el primer y segundo
parámetro de posicionarse en en el extremo superior izquierdo del rectángulo que circunscribe
a la elipse y usa el tercer y cuarto parámetro para fijar el ancho y alto.
EL modo CORNERS tiene un efecto similar a CORNER, per hace que el tercer y cuarto
parámetro fije a ellipse() en el extremo derecho inferior del rectángulo.
smooth();
noStroke();
ellipseMode(RADIUS);
fill(126);
ellipse(33, 33, 60, 60); // elipse gris
fill(255);
ellipseMode(CORNER);
ellipse(33, 33, 60, 60); // elipse bca
fill(0);
ellipseMode(CORNERS);
ellipse(33, 33, 60, 60); // elipse ng
En la misma línea, la función rectMode() afecta cómo los rectángulos son dibujados. Requiere
de un parámetro que puede ser CORNER, CORNERS, o CENTER. Por defecto, el modo
CORNER, y CORNERS que el tercer y cuarto parámetro de rect() sea dibujado en el extremo
opuesto del primero.
El modo CENTER hace que el primer y segundo parámetro de rect() se fije al centro de
rectángulo y use el tercer y cuarto parámetro como ancho y alto.