GETTING STARTED WITH PROCESSING

1/ Hola
Processing es para escribir software para hacer imgenes, animaciones e interacciones. La idea es escribir una sola lnea de cdigo y tienen un circulo que aparece en la pantalla. Al aadir algunas lneas ms de cdigo, el crculo sigue al mouse. Otra lnea de cdigo y el crculo cambia el color cuando el mouse es presionado. Llamamos a ste, dibujo con el cdigo. Escribes una lnea, luego aades otra y otra, etc. El resultado es un programa creado una pieza a la vez. Los cursos de programacin se centran en la estructura y primera teora. Todo lo visual - una interfaz, una animacin - se considera un postre para ser disfrutado slo despus de terminar tus verduras, por lo general de varias semanas de estudio de los algoritmos y los mtodos. Con los aos, hemos visto a varios amigos que tratan de tomar estos cursos y lo abandonan despus de la primera lectura o despus de una larga noche de frustracin antes de la fecha lmite de primera asignacin. La curiosidad inicial que tenian para hacer que el computador funcione para ellos, fue perdida, porque no podan ver el camino de lo que tenan que aprender en primer lugar, a lo que queran crear. Processing ofrece una manera de aprender a programar a travs de la creacin de grficos interactivos. Hay muchas maneras de ensear cdigos, pero los estudiantes a menudo se encuentran el estmulo y la motivacin en la retroalimentacin visual inmediata. La capacidad de Processing para proporcionar informacin ha hecho que sea una forma popular de enfoque de la programacin, y dibujar su nfasis en las imgenes, y la comunidad se explica en las pginas siguientes. Bocetos y prototipos Dibujar es una manera de pensar, es divertido y rpido. El objetivo bsico es explorar muchas ideas en un corto perodo de tiempo. En nuestro propio trabajo, solemos comenzar por dibujar en un papel y luego pasar los resultados a cdigo. Ideas para la animacin y la interaccin son por lo general esbozado como guiones con anotaciones. Despus de hacer algunos bocetos de software, las mejores ideas se seleccionan y combinan en prototipos. Es un proceso cclico de toma de pruebas, y la mejora que se mueve hacia adelante y hacia atrs entre el papel y la pantalla. Flexibilidad Como un cinturn de herramientas de software, Processing consta de varias herramientas que trabajan juntos en diferentes combinaciones. Como resultado, se puede utilizar para hacks rpido o para la investigacin en profundidad. Debido a que Processing puede ser tan corto como una lnea o tan largo como miles, hay espacio para el crecimiento y la variacin. Ms de 100 bibliotecas extienden Processing an ms en los dominios como el sonido, la visin artificial, y fabricacin digital. Gigantes La gente ha estado haciendo fotos con las computadoras desde la dcada de 1960, y hay mucho que aprender de esta historia. En la vida, todos nos apoyamos en los hombros de gigantes, y los titanes de procesamiento incluyen pensadores, desde el diseo, la infografa, el arte, la arquitectura, las estadsticas y los espacios entre ellos. Echa un vistazo a Sketchpad Ivan Sutherland (1963), Dynabook de Alan Kay (1968), y los artistas que aparecen en la artista Ruth Leavitt y PC (Harmony Books, 1976). Los archivos ACM SIGGRAPH proporcionan una visin fascinante de la historia de los grficos y software.

rbol Genealgico. Al igual que los lenguajes humanos, los lenguajes de programacin pertenecen a familias de lenguas relacionadas. Processing es un dialecto del lenguaje de programacin llamado Java, la sintaxis del lenguaje es casi idntico, pero agrega funciones personalizadas de procesamiento relacionados con los grficos y la interaccin. Los elementos grficos de procesamiento estn relacionados con PostScript (una base de PDF) y OpenGL (una especificacin de grficos en 3D). Debido a estas caractersticas comunes, el aprendizaje de Processing es un paso de nivel de entrada a la programacin en otros idiomas y el uso de diferentes herramientas de software. Participar Miles de personas utilizan Processing cada da. Al igual que ellos, se puede descargar Processing sin costo. Incluso tiene la opcin de modificar el cdigo de Processing para satisfacer sus necesidades. Processing es un proyecto de software libre (es decir, Free / Libre / Open Source Software), y en el espritu de comunidad, le invitamos a participar compartiendo sus proyectos y conocimientos en lnea en Processing.org y en los sitios de redes sociales que acogen a muchos contenidos Processing. Estos sitios estn vinculados desde el sitio web Processing.org.

2/ Comenzando con el cdigo.

Para sacar el mayor provecho de este libro, lo ms que tiene que hacer es simplemente leer las palabras. Es necesario experimentar y practicar. No se puede aprender el cdigo con slo leer acerca de l- necesitas hacerlo. Para empezar, descarga Processing y hacer tu primer boceto. Empiece por visitar http://processing.org/download y seleccione la versin para Mac, Windows o Linux, dependiendo de que mquina tienes. La instalacin en cada mquina es muy sencilla: En Windows, tendrs un archivo. Zip. Haga doble clic y arrastre la carpeta dentro de una ubicacin en su disco duro. Podra ser en Archivos de programa o simplemente en el escritorio, pero lo importante es que la carpeta de Processing se retir de ese archivo. Zip. A continuacin, haga doble clic en processing.exe para empezar. La versin de Mac OS X es una imagen de disco (. Dmg). Arrastre el icono de Processing de la carpeta Aplicaciones. Si est utilizando algn otro equipo y no se puede modificar la carpeta Aplicaciones, slo tienes que arrastrar la aplicacin en el escritorio. A continuacin, haga doble clic en el icono de procesamiento para empezar. La versin de Linux es un archivo. Tar.gz, que debe ser familiar para los usuarios de Linux. Descargue el archivo a su directorio, a continuacin, abra una ventana de terminal y escriba: tar xvfz procesamiento xxxx.tg (Reemplace XXXX con el resto del nombre del archivo, que es el nmero de versin.) Esto crear una carpeta con el nombre de procesamiento de 1.0 o algo similar. A continuacin, cambie a ese directorio: cd de procesamiento-xxxx y lo ejecutamos: . / procesamiento Con un poco de suerte, la ventana principal de Processing ahora ser visible. La configuracin de cada persona es diferente, as que si el programa no se inici, o le pegan otra manera, visite la pgina de resolucin de las posibles soluciones: http://wiki.processing.org/index.php/Troubleshooting.

Tu primer programa. Ahora est ejecutando el Processing Development Envirornment (o PDE). No hay mucho a ella, la parte ms larga es el editor de texto, y hay una fila de botones en la parte superior; que es la barra de herramientas. A continuacin el editor es el rea de mensaje, y debajo se encuentra el de la consola. El rea de mensajes se utiliza para mensajes de una sola lnea, y la consola se utiliza para ms detalles tcnicos. Ejemplo 1.2: Dibujar una elipse En el editor, escriba lo siguiente: elipse (50, 50, 80, 80); Esta lnea de cdigo significa "dibujar una elipse, con el centro de ms de 50 pxeles desde la izquierda y 50 pxeles hacia abajo desde la parte superior, con una anchura y una altura de 80 pxeles." Haga clic en el botn Ejecutar. Si has escrito todo correctamente, ver la imagen por encima de la elipse. Si no la escribe correctamente, el rea de mensaje se vuelve rojo y se quejan de un error. Si esto sucede, asegrese de que ha copiado el cdigo de ejemplo con exactitud: los nmeros deben estar dentro de los parntesis y las comas entre cada uno de ellos, y la lnea debe terminar con un punto y coma. Una de las cosas ms difciles sobre cmo empezar con la programacin es que hay que ser muy especfico acerca de la sintaxis. El software de Processing no siempre es lo suficientemente inteligente como para saber lo que quieres decir, y puede ser muy quisquilloso con la colocacin de puntuacion. Ya te acostumbrars a l con un poco de prctica. A continuacin, vamos a pasar directamente a un esquema que es un poco ms emocionante. Ejemplo 2-2: hacer crculos Elimine el texto del ltimo ejemplo, y tratar la siguiente: void setup() { size(480, 120); smooth(); } void draw() { if (mousePressed) { fill(0); } else { fill(255); } ellipse(mouseX, mouseY, 80, 80); Este programa crea una ventana que es de 480 pxeles de ancho y 120 pxeles, y luego empieza a dibujar crculos blancos en la posicin del ratn. Cuando un botn se presiona, el color del crculo cambia a color negro. Vamos a explicar ms sobre los elementos de este programa en detalle ms adelante. Por el momento, ejecutar el cdigo, mover el mouse, y hacer clic para evidenciarlo.

Mostrar Hasta ahora hemos cubierto slo el botn Ejecutar, a pesar de si ha adivinado lo que el botn Stop hace: Si no desea utilizar los botones, siempre puedes usar el men Dibujo que muestra la combinacin de teclas Ctrl-R (o Comando-R en Mac) para ejecutar. A continuacin en Ejecutar en el men Sketch est presente, lo que despeja el resto de la pantalla para presentar el boceto por s mismo: Tambin puede utilizar la barra de herramientas actuales, mantenga pulsada la tecla Shift mientras hace clic en el botn Ejecutar. Guardar. El siguiente comando que es importante es Guardar. Es la flecha hacia abajo en la barra de herramientas. Tambin se puede encontrar en el men Archivo. De forma predeterminada, los programas se guardan en el "cuaderno", que es una carpeta que recoge los programas de fcil acceso. Al hacer clic en el botn Abrir de la barra de herramientas (la flecha hacia arriba) se abrir una lista de todos los bocetos en su cuaderno de dibujo, as como una lista de ejemplos que se instalan con el software de Processing. Es siempre una buena idea para guardar los bocetos a menudo. A medida de probar cosas diferentes, guardar con nombres diferentes, por lo que siempre se puede volver a una versin anterior. Esto es especialmente til si no, cuando algo se rompe-. Tambin puedes ver donde esta ubicado el dibujo en el disco con la carpeta de Sketch Show en el men Dibujo. Tambin puede crear un nuevo dibujo, pulse el botn Nuevo de la barra de herramientas. Esto reemplazar el esbozo de la ventana actual con uno vaco. Pulsando la tecla Maysculas cuando se pulsa el botn Nuevo se crear un nuevo dibujo en su propia ventana, al igual que seleccionando Archivo Nuevo. En el botn Abrir las obras del mismo modo. Compartir. Otro de los temas de Processing es compartir su trabajo. El botn Exportar en la barra de herramientas se envuelve a su cdigo en una sola carpeta titulada applet, que se pueden descargar a un servidor Web (Figura 2.2). Despus de exportar, la carpeta applet se abrir en el escritorio. El archivo PDE es el cdigo fuente, el archivo JAR es el programa, el archivo HTML de la pgina web y el archivo GIF se muestra en el navegador web, mientras que el programa se est cargando. Haga doble clic en el archivo index.html lanzar su navegador Web, y muestra tu dibujo en la pgina web que ha creado. NOTA: La carpeta del applet se borra y vuelve a crear cada vez que utilice el comando Exportar, as que asegrese de mover la carpeta en otra parte antes de hacer cualquier cambio en el archivo HTML o cualquier otra cosa en el interior. Tambin puede encontrar las exportaciones, junto con su hermano a la solicitud de exportacin, por debajo del men Archivo. Exportacin a la aplicacin crea una aplicacin para la eleccin de Mac, Windows, y / o Linux. Esta es una manera fcil de hacer en s misma, doble-clic versiones de su proyecto. Pulsando la tecla Maysculas cuando se pulsa el botn Exportar en la barra de herramientas es otra forma de utilizar la exportacin a la solicitud.

Ejemplos y Referencia. Aprender a programar con Processing implica explorar un montn de cdigos: correr, alterar, romper, y la mejora de l hasta que reforman en algo nuevo. Con esto en mente, la descarga de software de Processing incluye docenas de ejemplos que muestran las diferentes caractersticas del software. Para abrir un ejemplo, seleccionar ejemplos en el men Archivo o haga clic en el icono Abrir en el PDE. Los ejemplos estn agrupados en categoras segn su funcin, tales como forma, el movimiento y la imagen. Encuentra un tema interesante en la lista y hace un ejemplo. Si usted ve una parte del programa que no est familiarizado con que es de color naranja (esto significa que es una parte de Processing), seleccione su nombre, a continuacin, haga clic en "Buscar en la referencia" en el men Ayuda. Tambin puede hacer clic en el texto (o Ctrl-clic en Mac) y seleccione Buscar en referencia en el men que aparece. Esto abrir la referencia del elemento de cdigo seleccionado en el navegador web. La referencia tambin est disponible en lnea en http://www.processing.org/reference/ Las referencias de Processing explican cada elemento de cdigo con una descripcin y ejemplos. Los programas de referencia son mucho ms cortas (normalmente cuatro o cinco lneas) y fcil de seguir que el cdigo se encuentra en el Examplesfolder (carpeta de ejemplos). Se recomienda mantener la referencia abierta mientras est leyendo este libro y al mismo tiempo est programando. Se puede navegar por tema o por orden alfabtico, a veces ms rpido para hacer una bsqueda de texto dentro de la ventana del navegador. La referencia fue escrita con el principiante en mente, esperamos que se haya entendido claramente. Estamos muy agradecidos a las muchas personas que han encontrado errores en los ltimos aos e inform de ellas. Si piensa que puede mejorar una entrada de referencia o si encuentra un error, por favor hganoslo saber, haciendo clic en el enlace en la parte superior de cada pgina de referencia.

3/ Dibujar
Primero que todo, dibujar a partir de una pantalla de computador es como trabajar en un papel cuadriculado. Se inicia como un procedimiento tcnico cuidadoso, pero a medida que se introducen nuevos conceptos, formas de dibujo sencillo con el software se expande en la animacin y la interaccin. Antes de hacer este salto, tenemos que empezar por el principio. Una pantalla de computadora es una red de elementos ligeros llamados pxeles. Cada pxel tiene una posicin dentro de la red definida por las coordenadas. En Processing, la coordenada "x" es la distancia desde el borde izquierdo de la ventana de visualizacin y la coordenada "y" es la distancia desde el borde superior. Nosotros escribimos las coordenadas de un pixel de esta manera: (x, y). Por lo tanto, si la pantalla es de 200 200 pxeles, el upperleft es (0, 0), el centro est en (100, 100), y la parte inferior derecha es (199, 199). Estas cifras pueden parecer confuso, por qu vamos de 0 a 199, en lugar de 1 a 200? La respuesta es que en el cdigo, por lo general cuentan desde 0 porque es ms fcil para los clculos que vamos a ver ms adelante. La ventana de visualizacin se crea y las imgenes son dibujadas en el interior a travs de elementos de cdigo llamadas funciones. Las funciones son los bloques de construccin bsicos de un programa de Processing. El comportamiento de una funcin es definida por sus parmetros. Por ejemplo, casi todos los programas de Processing tiene un tamao () para establecer la anchura y la altura de la ventana de visualizacin. (Si su programa no tiene una funcin size (), la dimensin se establece en 100 x 100 pxeles).

Ejemplo 3-1: Trace una ventana El tamao () tiene dos parmetros: el primero establece el ancho de la ventana y el segundo define la altura. Para dibujar una ventana que es de 800 pxeles de ancho y 600, escriba a: size(800, 600); Ejecute esta lnea de cdigo para ver el resultado. Ponga diferentes valores para ver lo que es posible. Pruebe un nmero muy pequeo y el nmero ms grande que la pantalla. Ejemplo 3-2: Dibuja un punto Para establecer el color de un pxel en la ventana de visualizacin, se utiliza el punto () funcin. Tiene dos parmetros que definen una posicin: la coordenada "x" seguido de la coordenada "y". Para dibujar una pequea ventana y un punto en el centro de la pantalla, las coordenadas (240, 60), escriba: size(480, 120); point(240, 60); Trate de escribir un programa que pone un punto en cada esquina de la ventana de visualizacin y una en el centro. Trate de colocar los puntos secundarios al lado para hacer lneas horizontales, verticales y diagonales. Formas Bsicas. Processing incluye un conjunto de funciones para dibujar formas bsicas. Formas simples como lneas que se pueden combinar para crear formas ms complejas como una hoja o un rostro. Para dibujar una sola lnea, necesitamos cuatro parmetros: dos para la ubicacin inicial y dos para el final. Ejemplo 3.3: Dibujar una lnea Para dibujar una lnea entre las coordenadas (20, 50) y (420,110), trate: size(480, 120); line(20, 50, 420, 110) 4.3 Ejemplo: Dibujar formas bsicas Siguiendo este patrn, un tringulo necesita seis parmetros y un cuadriltero necesita ocho (un par para cada punto): size(480, 120); quad(158, 55, 199, 14, 392, 66, 351, 107); triangle(347, 54, 392, 9, 392, 66); triangle(158, 55, 290, 91, 290, 112); Ejemplo 3.5: Dibujar un rectngulo Rectngulos y elipses, se definen con cuatro parmetros: el primero y segundo de la X e Y las coordenadas del punto de anclaje, el tercero para el ancho, y el cuarto de la altura. Para hacer un rectngulo en las coordenadas (180, 60) con un ancho de 220 pxeles y la altura de 40, utilice el rect () funcin como sta:

size(480, 120); rect(180, 60, 220, 40); Ejemplo 6.3: Dibujar una elipse Las coordenadas "x" e "y" de un rectngulo estn en la esquina superior izquierda, pero para una elipse son el centro de la forma. En este ejemplo, observe que la coordenada de la primera elipse se encuentra fuera de la ventana. Los objetos se pueden extraer parcialmente (o completamente) por la ventana sin un error: size(480, 120); ellipse(278, -100, 400, 400); ellipse(120, 100, 110, 110); ellipse(412, 60, 18, 18); Processing no tienen funciones separadas para hacer cuadrados y crculos. Para hacer estas formas, utilice el mismo valor para la anchura y la altura de los parmetros de la elipse () y rect (). Ejemplo 3-7: Dibuja partes de una Ellipse. El arco () dibuja un trozo de una elipse: size(480, 120); arc(90, 60, 80, 80, 0, HALF_PI); arc(190, 60, 80, 80, 0, PI+HALF_PI); arc(290, 60, 80, 80, PI, TWO_PI+HALF_PI); arc(390, 60, 80, 80, QUARTER_PI, PI+QUARTER_PI); Los parmetros primero y segundo establecer la ubicacin, el tercero y el cuarto la anchura y altura. El quinto parmetro define el ngulo para iniciar el arco, y el sexto establece el ngulo de parar. Los ngulos se fijan en radianes, en lugar de grados. Radianes son mediciones de ngulos en funcin del valor del nmero pi (3,14159). Como aparece en este ejemplo, los cuatro valores en radianes se utilizan con tanta frecuencia que los nombres especiales para ellos se han aadido como parte del proceso. Los valores de PI, QUARTER_PI, HALF_PI y TWO_PI se puede utilizar para sustituir el valor en radianes por 180 , 45 , 90 y 360 . Ejemplo 3-8: Dibuja con grados Si prefiere usar las mediciones de grado, puede convertir a radianes con la radianes () funcin. Esta funcin toma un ngulo en grados y lo cambia por el valor correspondiente en radianes. El siguiente ejemplo es el mismo que el Ejemplo 3-7, pero utiliza los radianes () para definir el inicio y parada de los valores en grados: size(480, 120); arc(90, 60, 80, 80, 0, radians(90)); arc(190, 60, 80, 80, 0, radians(270)); arc(290, 60, 80, 80, radians(180), radians(450)); arc(390, 60, 80, 80, radians(45), radians(225)); Orden de dibujo Cuando se ejecuta un programa, el equipo se inicia en la parte superior y lee cada lnea de cdigo hasta que llega a la ltima lnea y luego se detiene. Si desea una forma que se dibuja en la parte superior de todas las otras formas, hay que seguir a los dems en el cdigo.

Ejemplo 3-9: Controle su orden de dibujo size(480, 120); ellipse(140, 0, 190, 190); // The rectangle draws on top of the ellipse // because it comes after in the code rect(160, 30, 260, 20); Ejemplo 3.10: Pngalo en reversa Modificar Ejemplo 3-9 invirtiendo el orden de rect () y la ellipse () para ver el crculo en la parte superior del rectngulo: size(480, 120); rect(160, 30, 260, 20); // The ellipse draws on top of the rectangle // because it comes after in the code ellipse(140, 0, 190, 190); Puedes pensar que es como la pintura con un cepillo o hacer un collage. El ltimo elemento que se agrega es lo que es visible en la parte superior. Propiedades de forma Las propiedades de la forma ms bsica y til son el grosor del trazo y el antialiasing, tambin llamado alisado. Ejemplo 3.11: Dibujar lneas suaves El buen() funcin suaviza los bordes de las lneas dibujadas en la pantalla mediante la mezcla de los bordes con los valores de los pxeles cercanos. Por el contrario, si el suavizado ya est encendido, la funcin noSmooth () lo apaga: size(480, 120); smooth(); // Turns on smoothing ellipse(140, 60, 90, 90); noSmooth(); // Turns off smoothing ellipse(240, 60, 90, 90); NOTA: Algunas implementaciones de Processing (como la versin de JavaScript) siempre son suaves formas, mientras que otros no admiten el suavizado en lo absoluto. En algunas situaciones, no es posible activar y desactivar el suavizado en el mismo viaje a travs de draw(). Ver la referencia smooth() para ms detalles. Ejemplo 3-12: Juego de pesas Carrera El grosor del trazo por defecto es de un solo pxel, pero esto puede cambiar con el strokeWeight() funcin. El nico parmetro strokeWeight() establece el ancho de las lneas trazadas. size(480, 120); smooth();

ellipse(75, 60, 90, 90); strokeWeight(8); // Stroke weight to 8 pixels ellipse(175, 60, 90, 90); ellipse(279, 60, 90, 90); strokeWeight(20); // Stroke weight to 20 pixels ellipse(389, 60, 90, 90); Ejemplo 3.13: Establecer atributos al trazo El strokeJoin() cambia la forma de lneas se unen (como elesquinas mirar), y el strokeCap() cambia la funcin de cmo las lneas se dibujan en su principio y fin. size(480, 120); smooth(); strokeWeight(12); strokeJoin(ROUND); rect(40, 25, 70, 70); strokeJoin(BEVEL); rect(140, 25, 70, 70); strokeCap(SQUARE); line(270, 25, 340, 95); strokeCap(ROUND); line(350, 25, 420, 95);

// Round the stroke corners // Bevel the stroke corners // Square the line endings // Round the line endings

La colocacin de las formas como rect() y la elipse() se controla con el rectMode() y ellipseMode(). Compruebe la referencia (Ayuda de referencia) para ver ejemplos de cmo colocar los rectngulos de su centro (en lugar de su esquina superior izquierda), o para dibujar elipses de su esquina superior izquierda, como rectngulos. Cuando cualquiera de estos atributos se establecen, todas las formas dibujadas despus son afectadas. Por ejemplo, en el ejemplo 3.12, observe cmo el segundo y tercer crculo ambos tienen el mismo grosor del trazo, a pesar de que el peso se encuentra a slo una vez antes de que ambos se han extrado. Color Todas las formas hasta ahora se han llenado de blanco con contornos negros, y el fondo de la ventana de visualizacin ha sido de color gris claro. Para cambiarlos, use las funciones: background(), fill(), y strokes(). Los valores de los parmetros estn en el rango de 0 a 255, donde 255 es de color blanco, 128 es de color gris medio, y 0 es negro. La figura 3-3 muestra cmo los valores de 0 a 255 mapas a diferentes niveles de gris. Ejemplo 14.3: Pintar con los grises Este ejemplo muestra tres valores diferentes gris sobre un fondo negro: size(480, 120); smooth(); background(0); // Black fill(204); // Light gray ellipse(132, 82, 200, 200); // Light gray circle fill(153); // Medium gray ellipse(228, -16, 200, 200); // Medium gray circle fill(102); // Dark gray ellipse(268, 118, 200, 200); // Dark gray circle

Ejemplo 3.15: Control de Relleno y Trazo Puede desactivar el golpe de modo que no hay ningn esquema con noStroke () y se puede desactivar el relleno de una forma con noFill (). size(480, 120); smooth(); fill(153); // Medium gray ellipse(132, 82, 200, 200); // Gray circle noFill(); // Turn off fill ellipse(228, -16, 200, 200); // Outline circle noStroke(); // Turn off stroke ellipse(268, 118, 200, 200); // Doesnt draw! Tenga cuidado de no desactivar el relleno y el trazo, al mismo tiempo, como lo hemos hecho en el ejemplo anterior, ya que nada va a sacar a la pantalla. Ejemplo 3.16: Dibuja con color Para ir ms all de los valores en escala de grises, utiliza tres parmetros para especificar los componentes rojo, verde y azul de un color. Debido a que este libro fue impreso en blanco y negro, vers nico valor gris aqu. Ejecuta el cdigo en Processing de revelar los colores: size(480, 120); noStroke(); smooth(); background(0, 26, 51); // Dark blue color fill(255, 0, 0); // Red color ellipse(132, 82, 200, 200); // Red circle fill(0, 255, 0); // Green color ellipse(228, -16, 200, 200); // Green circle fill(0, 0, 255); // Blue color ellipse(268, 118, 200, 200); // Blue circle Esto se conoce como color RGB, que viene de cmo las computadoras definen los colores en la pantalla. Los tres nmeros que representan los valores de rojo, verde y azul, y van desde 0 hasta 255 como los valores gris lo hacen. Uso del color RGB no es muy intuitivo, por lo que para elegir los colores, utilizar las Herramientas > Selector de color, que muestra una paleta de colores similares a los encontrados en otros programas. Seleccione un color y, a continuacin, utilizar la R, G, B y valores como los parmetros para el background(), fill (), stroke() funcin. Ejemplo 3-17: Set de Transparencia Mediante la adicin de un cuarto parmetro opcional para fill() o un stroke(), puede controlar la transparencia. Este cuarto parmetro es conocido como el alphavalue, y tambin utiliza el rango de 0 a 255 para establecer el grado de transparencia. El valor 0 se define el color completamente transparente (no se mostrar), el valor de 255 es totalmente opaco, y los valores entre estos dos extremos que los colores para mezclar en la pantalla: size(480, 120); noStroke(); smooth(); background(204, 226, 225);

// Light blue color

fill(255, 0, 0, 160); // Red color ellipse(132, 82, 200, 200); // Red circle fill(0, 255, 0, 160); // Green color ellipse(228, -16, 200, 200); // Green circle fill(0, 0, 255, 160); // Blue color ellipse(268, 118, 200, 200); // Blue circle Formas Personalizadas. Usted no est limitado al uso de estas formas geomtricas bsicas, tambin se pueden definir nuevas formas de conectar una serie de puntos. Ejemplo 3.18: Dibuje una flecha El beginShape()funcin marca el inicio de una nueva forma. La funcin vertex() se utiliza para definir cada par de "x" e "y" las coordenadas de la forma. Por ltimo, endShape () es llamada para indicar que la forma ha terminado. size(480, 120); beginShape(); vertex(180, 82); vertex(207, 36); vertex(214, 63); vertex(407, 11); vertex(412, 30); vertex(219, 82); vertex(226, 109); endShape(); Ejemplo 3.19: Cerrar la Brecha Cuando se ejecuta el ejemplo 3-18, ver el primer y ltimo punto no est conectado. Para ello, agregue la palabra CERRAR como un parmetro para endShape (), de esta manera: size(480, 120); beginShape(); vertex(180, 82); vertex(207, 36); vertex(214, 63); vertex(407, 11); vertex(412, 30); vertex(219, 82); vertex(226, 109); endShape(CLOSE); Ejemplo 20.3: Creacin de algunas criaturas El poder de la definicin de formas con vertex() es la capacidad de hacer formas con contornos complejos. Processing puede sacar miles y miles de lneas a la vez para llenar la pantalla con formas fantsticas que surgen de su imaginacin. Un ejemplo modesto, pero ms complejo sigue: size(480, 120);

smooth(); // Left creature beginShape(); vertex(50, 120); vertex(100, 90); vertex(110, 60); vertex(80, 20); vertex(210, 60); vertex(160, 80); vertex(200, 90); vertex(140, 100); vertex(130, 120); endShape(); fill(0); ellipse(155, 60, 8, 8); // Right creature fill(255); beginShape(); vertex(370, 120); vertex(360, 90); vertex(290, 80); vertex(340, 70); vertex(280, 50); vertex(420, 10); vertex(390, 50); vertex(410, 90); vertex(460, 120); endShape(); fill(0); ellipse(345, 50, 10, 10); Comentarios. Los ejemplos de este captulo utilizan dos barras (/ /) al final de una lnea para aadir comentarios al cdigo. Comentarios son partes del programa que se ignoran cuando se ejecuta el programa. Son tiles para la toma de notas para s mismo que explican lo que est sucediendo en el cdigo. Si otras personas estn leyendo su cdigo, los comentarios son especialmente importantes para ayudarles a entender su proceso de pensamiento. Los comentarios tambin son especialmente til para un nmero de diferentes opciones, como cuando se trata de elegir el color correcto. As, por ejemplo, yo podra estar tratando de encontrar el rojo adecuado para una elipse: size(200, 200); fill(165, 57, 57); ellipse(100, 100, 80, 80); Ahora supongamos que quiero tratar un rojo diferente, pero no quiero perder el anterior. Puedo copiar y pegar la lnea, hacer un cambio, y luego en "comentario" a la antigua: size(200, 200); //fill(165, 57, 57); fill(144, 39, 39); ellipse(100, 100, 80, 80);

Colocando / / al principio de la lnea temporal se desactiva. O puedo quitar el / / y colocarlo en frente de la otra lnea si quiero volver a intentarlo: size(200, 200); fill(165, 57, 57); //fill(144, 39, 39); ellipse(100, 100, 80, 80); NOTA: Como mtodo abreviado, tambin puede utilizar las teclas Ctrl-/ (Comando-/ en Mac) para aadir o eliminar los comentarios de la lnea actual o un bloque de texto seleccionado. Tambin puedes comentar a cabo muchas lneas a la vez con la notacin comentario alternativo presentado en el Appendix A. A medida que trabaja con bocetos de Processing, se encontrar la creacin de docenas de iteraciones de las ideas, con los comentarios de tomar notas o hacer que el cdigo puede ayudar a mantener un registro de mltiples opciones. Robot 1: Dibuje Se trata de P-5, el robot de Processing. Hay ocho diferentes programas para dibujar y animar a l en el libro, cada uno explora una idea de programacin diferentes. P5 fue inspirado por el Sputnik I (1957), Shakey, del Instituto de Investigacin de Stanford (1966-1972), el avin no tripulado de combate en Dune de David Lynch (1984), y 9000 HAL de 2001: Una odisea del espacio (1968), entre otros robots favoritos. El programa robot utiliza en primer lugar las funciones de dibujo introducido en el captulo anterior. Los parmetros para fill() y stroke() establece los valores de gris. La line(), ellipse(), y rect() definen las formas que crean el cuello del robot, las antenas, el cuerpo y la cabeza. Para obtener ms familiarizados con las funciones, ejecute el programa y cambie los valores para redisear el robot. size(720, 480); smooth(); strokeWeight(2); background(204); ellipseMode(RADIUS); // Neck stroke(102); // Set stroke to gray line(266, 257, 266, 162); // Left line(276, 257, 276, 162); // Middle line(286, 257, 286, 162); // Right // Antennae line(276, 155, 246, 112); // Small line(276, 155, 306, 56); // Tall line(276, 155, 342, 170); // Medium // Body noStroke(); // Disable stroke fill(102); // Set fill to gray ellipse(264, 377, 33, 33); // Antigravity orb fill(0); // Set fill to black rect(219, 257, 90, 120); // Main body fill(102); // Set fill to gray rect(219, 274, 90, 6); // Gray stripe // Head fill(0); // Set fill to black

ellipse(276, 155, 45, 45); // Head fill(255); // Set fill to white ellipse(288, 150, 14, 14); // Large eye fill(0); // Set fill to black ellipse(288, 150, 3, 3); // Pupil fill(153); // Set fill to light gray ellipse(263, 148, 5, 5); // Small eye 1 ellipse(296, 130, 4, 4); // Small eye 2 ellipse(305, 162, 3, 3); // Small eye 3