domingo, 26 de junio de 2016

Sistema de coordenadas y formas - según Daniel Shiffman

Antes de comenzar la programación con Processing, debemos sacar una hoja de papel cuadriculado, y trazar una línea. La distancia más corta entre dos puntos es una línea recta, y aquí es donde empezamos, con dos puntos en que el papel de gráfico.


La figura anterior muestra una línea entre el punto A ( 1,0) y el punto B (4,5 ). Si quisiera dirigir a un amigo suyo para dibujar la misma línea, le daría un grito diciéndole "trazar una línea desde el punto uno cero al punto cuatro cinco." Bueno, por el momento , imagine que su amigo era un ordenador y que quería instruir a este compañero digital para mostrar la misma línea en su pantalla. Se aplica lo misma orden, pero empleando un formato preciso. En este caso, la instrucción se verá así :
line(1,0,4,5);
Incluso sin haber estudiado la sintaxis de la escritura con código, la sentencia o enunciado anterior debería de tener sentido. Estamos proporcionando la orden (a la que nos referiremos como "función"), para que la máquina siga la sentencia "línea ". Además, estamos especificando algunos argumentos para que la "línea" sea dibujada desde el punto A (1,0) al punto B (4,5). 

Si se piensa en esa línea de código como una sentencia, la función es un verbo y los argumentos son los objetos de la sentencia. La sentencia código también termina con un punto y coma en lugar de un punto
Dibujar una línea desde (1,0) hasta (4,5)
                           verbo             objeto    objeto
La clave aquí es darse cuenta de que la pantalla de la computadora no es más que un pedazo de papel cuadriculado más elegante. Cada pixel de la pantalla es una coordenada de dos números, una "x" (horizontal) y una "y" (vertical), que determina la ubicación de un punto en el espacio. Y es nuestro trabajo especificar qué formas y colores deben aparecer en estas coordenadas de pixeles. 

Sin embargo , hay un problema aquí . El papel de gráfico de  " sistema de coordenadas cartesianas " colocado (0,0) en el centro con el eje y que apunta hacia arriba y el eje x apuntando a la derecha (en la dirección positiva, negativa hacia abajo y hacia la izquierda) . 
En el sistema de coordenadas de los pixeles en una ventana de ordenador, se invierte a lo largo del eje y. ( 0,0) se encuentran en la parte superior izquierda con la dirección positiva hacia la derecha horizontalmente y verticalmente .



Formas Simples

Verá que la gran mayoría de los ejemplos de programación con Processing son de naturaleza visual. Estos ejemplos , en su núcleo, implica dibujar las formas y el ajuste de pixeles. Vamos a empezar por examinar cuatro formas primitivas.




Para cada forma, vamos a preguntarnos qué información se requiere para especificar la ubicación y el tamaño de dicha forma y entender como Processing espera recibe esa información, el color lo veremos más adelante. 
En cada uno de los diagramas a continuación, vamos a suponer una ventana con una ancho de 10 pixeles y una altura de 10 pixeles. Esto no es particularmente realista ya que cuando usted realmente empieza la codificación es muy probable que el trabajo sea con ventanas mucho más grandes, 10x10 pixeles es apenas unos pocos milímetros de espacio en la pantalla. Sin embargo, para fines de demostrativos, es conveniente trabajar con números más pequeños, por ahora, para ilustrar mejor el funcionamiento interno de cada línea de código.

Un punto point() es la forma más fácil y un buen lugar para comenzar. Para dibujar un punto, sólo tenemos una coordenada x e y.




Una línea line() no es muy difícil tampoco y sólo requiere dos puntos: a(x1, y1) y b(x2 , y2):




Una vez que se llega a dibujar un rectángulo rect(), las cosas se vuelven un poco más complicadas. En Processing, un rectángulo se especifica por la coordenada de la esquina superior izquierda del rectángulo, así como su ancho (width) y altura (height).





Una segunda manera de dibujar un rectángulo implica especificar el punto central, junto con el ancho y la altura. Si preferimos este método, primero indicaremos que queremos utilizar el modo "CENTER" antes de la instrucción para el propio rectángulo. Tenga en cuenta que Processing distingue entre mayúsculas y minúsculas





Ejemplo centrado:
size(50,50);
background(50,80,100);///color del fondo///
rectMode(CENTER);
stroke(250,0,0);///color borde del rectángulo////
rect(25,25,15,12);



Por último, también podemos dibujar un rectángulo con dos puntos con el mode "CORNER", estableciendo la esquina superior izquierda y la esquina inferior derecha:


Una vez cómodos con el concepto de dibujar un rectángulo, una ellipse() es semejante. De hecho, es idéntica a rect() con la diferencia de que una elipse se dibuja dentro de un cuadro delimitador. El modo por defecto para la ellipse() es "CENTER ", en lugar de "CORNERS" (este último también se puede emplear). 



Otra manera de dibujar una elipse es empleando la coordenada de un punto