1.

2 Las formas simples

La inmensa Mayora de los ejemplos de programacin en este libro ser de
naturaleza visual. Usted puede en ltima instancia aprender a desarrollar juegos
interactivos, piezas de arte algortmico, diseos animados logotipo, y (insertar su
propia categora de aqu) con el procesamiento, pero en su esencia, cada
programa visual se hace poniendo pxeles. La manera ms simple de empezar a
entender cmo funciona esto es para aprender a dibujar formas primitivas. Esto no
es diferente de cmo aprender a dibujar en la escuela primaria, slo que aqu lo
hacemos con cdigo en lugar de lpices de colores.

Vamos a empezar con las cuatro formas primitivas se muestra en la Figura 1.4.





Point Line Rectangle Ellipse


Para cada forma, nos preguntaremos qu informacin es necesaria para especificar la ubicacin y
el tamao (y ms tarde en color) de esa forma y aprender de procesamiento espera de recibir esa
informacin. En cada uno de los diagramas (figuras 1.5 a 1.11), asumir una ventana con un ancho
de 10 pxeles y la altura de 10 pxeles. Esto no es sobre todo realista, ya que cuando realmente
empiece a escribir cdigo que lo ms probable que funcione con ventanas mucho ms grande (10
x10 pxeles es de apenas unos milmetros de espacio en la pantalla). Sin embargo, para
con fines de demostracin, es agradable trabajar con nmeros ms pequeos a fin de presentar
los pxeles, ya que pueden aparecer en un papel cuadriculado (por ahora) para ilustrar mejor el
funcionamiento interno de cada lnea de cdigo.

Un punto es el ms fcil de las formas y un buen lugar para empezar. Para dibujar un
punto, slo tenemos un cromosoma X y coordinar como se muestra en la Figura 1.5. Una
lnea no es terriblemente culto dificultades tampoco. Una lnea requiere de dos puntos,
como se muestra en la Figura 1.6.

Una vez que se llega a dibujar un rectngulo, las cosas se vuelven un poco ms
complicado. En el procesamiento, es un rectngulo especficamente la disfuncin erctil,
la coordenada de la esquina superior izquierda del rectngulo, as como su anchura y
altura (ver Figura 1.7).

Sin embargo, una segunda forma para dibujar un rectngulo es necesario especificar el
punto central, junto con el ancho de y la altura, como se muestra en la Figura 1.8. Si se
prefiere este mtodo, primero se debe indicar que desea utilizar el modo "CENTER" antes
de la instruccin para el propio rectngulo. Tenga en cuenta que el procesamiento de
maysculas y minsculas. Por cierto, el modo por defecto es "corner", que es la forma en
que comenz, como se ilustra en la Figura 1.7.

Por ltimo, tambin podemos dibujar un rectngulo con dos puntos (en la esquina superior
izquierda y la esquina inferior derecha). El Modo aqu es "corners" (ver Figura 1.9)




Una vez que se han convertido en cmodos con el concepto de dibujo de un rectngulo,
una elipse es muy fcil. De hecho, es idntica a la rect () con la diferencia es que una
elipse se dibuja en el cuadro de lmite 1 (como se muestra en la Figura 1.11) del
rectngulo sera. El modo por defecto de la ellipse () es "center", en lugar de
"corner" como con rect (). Vase la figura 1.10.

Es importante reconocer que en la figura 1.10, los puntos suspensivos no se ven sobre
todo circular. Tratamiento cuenta con una metodologa integrada para la seleccin de
pxeles que debe utilizarse para crear una forma circular. Zoom de esta manera, tenemos
un montn de plazas en un patrn de crculo-como, pero el zoom sobre la pantalla del
ordenador, tenemos una elipse redondo. Ms adelante, veremos que el tratamiento que
nos da el poder para desarrollar nuestro propio algoritmos para la coloracin de los
pxeles individuales (de hecho, ya podemos imaginar cmo podramos hacerlo con
"Punto" de una y otra vez), pero por ahora, estamos satisfechos con lo que permite la
"elipse" declaracin para hacer el el trabajo duro.

Por cierto, punto, lnea, elipse, rectngulo y no son las nicas formas disponibles en la
biblioteca de procesamiento de las funciones. En el captulo 2, veremos como la
referencia de procesamiento nos proporciona una lista completa de dispone de funciones
de dibujo junto con la documentacin de los argumentos necesarios, la sintaxis de
ejemplo, y las imgenes. Por ahora, como un ejercicio, es posible que trate de imaginar lo
que se necesitan argumentos para algunos otros formas (Figura 1.12):

1.3 Escala de grises Color
Como aprendimos en la seccin 1.2, el componente principal de las formas de colocacin
de la pantalla es un pxel
de coordenadas. Que amablemente instruy a la computadora para dibujar una forma en
un lugar especfi cos con un tamao especfi cos.
Sin embargo, un elemento fundamental que faltaba color.
En el mundo digital, la precisin es necesaria. Diciendo: "Hey, puedes hacer que el
crculo de color azul verdoso? "se
no lo hacen. erefore, el color es defi ni con un rango de nmeros. Empecemos con el
caso ms sencillo: negro y
blanco o en escala de grises. En escala de grises trminos, tenemos los siguientes: 0
significa negro, 255 significa blanco. En el medio,
cada nmero-50 otras, 87, 162, 209, y as sucesivamente, es un tono de gris que van del
negro al blanco. ver
Figura 1.13

No 0-255 parecer arbitraria para usted?
Color de una forma que se d tiene que ser almacenado en la memoria del ordenador. Th
es la memoria es slo un tiempo secuencia de 0 y 1 (un montn de interruptores de
encendido o apagado.) Cada uno de estos interruptores es un poco, ocho de ellos en
conjunto es un byte. Imagina si tuviramos ocho bits (un byte) en la secuencia-how
maneras se puede confi gurar estos switches? Respuesta Th e es (y haciendo un poco de
investigacin en binario nmeros demostrar este punto) 256 posibilidades, o un rango de
nmeros entre 0 y 255. Nosotros utilizan ocho bits de color en escala de grises para
nuestros poco rango y 24 a todo color (ocho bits para cada uno de los rojos,
componentes de color verde y azul, ver seccin 1.4).



La comprensin de cmo funciona este rango, ahora podemos pasar a configurar especfi
ca en escala de grises colores de las formas
nos acercamos en la seccin 1.2. En processing, cada forma tiene un stroke () o un fill () o
ambos. El stroke() es el contorno de la forma, y la fill() es el interior de esa forma. Las
lneas y los puntos slo pueden tener stroke(), por razones obvias.
Si nos olvidamos de especificar un color, Processing se utilizan negro (0) para el
stroke() y blanco (255) para el fill () por defecto. Tenga en cuenta que estamos
ahora con ms nmeros reales para las ubicaciones de pxeles, suponiendo un grande
para el tamao de 200 x 200 pxeles. Vase la figura 1.14.).

Mediante la adicin del stroke() y fill () antes de la forma se dibuja, se puede establecer el
color. Es muy parecido a instruir a su amigo a usar una pluma especficos para dibujar
sobre el papel cuadriculado. Usted tendra que decirle a su amigo antes de que l o ella a
partir de dibujo, no despus. Antes de Th es tambin el fondo de la background(), que
establece un color de fondo de la ventana donde las formas se ser prestados.

stroke () o fill () pueden ser eliminados con la noStroke () o noFill () funciones.
Nuestro instinto sera decir "stroke (0)" sin esquema, sin embargo, es
importante recordar que el 0 no es "nada", sino que denota el color
negro. Adems, recuerda que no debes eliminar tanto con noStroke () y noFill (),
no aparecer nada!

Si trazamos dos formas al mismo tiempo, processing, siempre utilizara la
ms recientemente, especficamente stroke() y fill (), la lectura del cdigo va de arriba a la
parte inferior. Vase la figura 1.17.

1.4 de color RGB

Una mirada nostlgica al papel cuadriculado nos ayud a aprender los fundamentos para
las ubicaciones de pxeles y el tamao.
Ahora que es tiempo para estudiar los fundamentos del color digital, la bsqueda de otro
recuerdo de la infancia para conseguir
nosotros empezamos. Recuerde fi pintura nger? Mediante la mezcla de tres "principales"
colores, cualquier color puede ser generada.
Remolinos de todos los colores juntos result en un marrn oscuro. Pintura e Th ms que
aadir, ms oscuro lo tiene.
Colores digitales tambin se construyen mediante la mezcla de tres colores primarios,
pero funciona diferente de la pintura.
En primer lugar, las primarias son diferente: rojo, verde y azul (es decir, "RGB", color). Y
con color en la pantalla,
est mezclando la luz, no la pintura, por lo que las reglas de mezcla son diferentes as.
Red? verde? amarillo
Red? azul? prpura
Verde? azul? cian (azul-verde)
Red? verde? azul? blanco
No hay colores? negro
Th se asume que los colores son tan brillantes como sea posible, pero por supuesto,
usted tiene una gama de colores disponibles, por lo que
un poco de rojo, ms verde, ms algunos otros azules es igual a gris, y un poco de rojo
con un poco de azul es igual de color prpura oscuro.
Si bien esto puede tomar algn tiempo para acostumbrarse, el programa que ms y
experimentar con el color RGB, ms
se convertir en instintiva, al igual que los colores girando con su ngers fi. Y por supuesto
no se puede decir "Mix
algunas de color rojo con un poco de azul, "usted tiene que proporcionar una cantidad
exacta. Al igual que con escala de grises, el color individual
elementos se expresan como un rango de 0 (ninguna de ese color) y 255 (tanto como sea
posible), y que se enumeran
en el orden de R, G y B. Usted conseguir la cada de la mezcla de colores RGB a travs
de la experimentacin, pero la prxima
cubrir un cdigo con algunos colores comunes.
Tenga en cuenta que este libro slo le mostrar las versiones en blanco y negro de cada
esquema de procesamiento, pero todo
se documenta en lnea a todo color en http://www.learningprocessing.com con diagramas
de color RGB encontrado
especficamente en: http://learningprocessing.com/color.

Processing tambin tiene un selector de color para ayudar a elegir los colores. Acceso a
estas herramientas a travs de (a partir de la
barra de men) Selector de color. Vase la figura 1.19.