Introducción al arte generativo en el procesamiento

1. Introducción: Hola a todos. Yo soy Hadeel, y esto es Intro al Arte Generativo. En esta clase, aprenderemos los conceptos básicos de programación y algunas funciones específicas de procesamiento para crear esta pieza de arte generativa. El procesamiento es un lenguaje basado en Java, y es una de las formas más simples de aprender a ir. No sólo otorga la oportunidad de aprender un lenguaje generalizado, sino que también proporciona resultados visuales instantáneos. También haremos referencia a la página de documentación de procesamiento para demostrar cómo sacar el máximo provecho de Procesamiento, que seguramente te ayudará a medida que creas tu proyecto. Adicionalmente, te mostraré cómo hacer uso de una biblioteca de Procesamiento para exportar los resultados a un formato vectorial. Una gran manera de guardar imágenes de alta calidad o manipular aún más el trabajo utilizando software como Adobe Illustrator. Al final de esta clase, deberías poder programar y producir una pieza original. Serán tu certificado de fantasía para exhibir al mundo. Empecemos. 2. Conceptos básicos de la codificación: Primero lo primero, necesitas conocer los conceptos básicos de cualquier lenguaje de programación para poder pasar por esta clase. Son muy fáciles de entender y con la práctica podrás crear un diseño generativo por día con estos. codificación dura cada valor de precisión, tamaño o color puede convertirse en una tarea tediosa a la vez, especialmente cuando se necesita editar valores para una matriz de formas, por eso necesitamos algo llamado variables. Una variable es simplemente un nombre que establece para un valor para guardarlo en la memoria, para usarla en todo el programa. En general, por ejemplo, si desea establecer el radio del círculo, escriba Circleradius es igual a 100, como en un 100 píxeles. Ahora el programa entiende que Circleradius es un 100 pixeles porque lo definimos. En el procesamiento sin embargo, a esta afirmación le falta una palabra clave muy importante, lo que significa que su programa puede arrojar un error debido a ello. El término clave es int. Int significa enteros, y es uno de los tipos de datos del procesamiento. Existen varios tipos de datos en el procesamiento que puedes usar en tus programas, como int para enteros, float para números decimales, string para texto, char para caracteres, booleano para valores verdaderos y falsos, color para tonos, matrices para listas ordenadas, y diccionarios para listas de valores clave. En este curso sólo usaremos enteros, flotadores, matrices, y colores. Ya que estamos creando una cuadrícula, significa que estaremos dibujando un montón de formas en el lienzo, lo que parece mucho trabajo hasta que aprendas sobre los bucles. Los bucles son una gran manera de hacer la misma tarea varias veces sin la molestia de escribir esa tarea una y otra vez. Una forma de crear un bucle es mediante el uso de la “For keyword” como esta. La primera parte de la sentencia especifica el comienzo del bucle, la segunda parte establece cuándo detener un bucle, y la tercera parte es su valor de incremento, y cualquier código que desee repetir aquellos dentro del cuerpo del bucle. En ocasiones dentro de bucles o cualquier otra parte del boceto, necesitamos controlar el flujo de nuestro código mediante el uso de “Si condicionales”. Esto es útil si desea ejecutar un bloque de código solo cuando una sentencia se evalúa como verdadera, queriendo solo colorear formas si son unas columnas pares numeradas. lo último que necesitamos saber en esta lección son las funciones y los métodos, estas dos declaraciones son algo iguales. Los métodos son básicamente funciones que pertenecen a una clase, por lo que no se definen directamente dentro del programa como funciones. No necesitamos saber una tonelada sobre funciones para este curso aparte de, es una declaración que sostiene un bloque de código al que puedes llamar en cualquier parte tu programa escribiendo su nombre y pasando el tipo y cantidad de argumentos apropiados . medida que avanza por este curso, comprenderás toda la información de esta lección y no te preocupes por memorizar nada en este momento, todos vuelven a la documentación de vez en cuando, sobre todo en el comenzando. 3. Introducción a el procesamiento: El procesamiento tiene tres componentes principales que debes tener en cuenta: El editor de texto, donde escribes tu código, la consola, donde normalmente depura tu código y Canvas, donde podrás ver tu diseño. También a cada archivo de procesamiento se le conoce convencionalmente como boceto. En cada boceto tenemos dos funciones formando el entrenamiento base. Uno se llama configuración, y el otro se llama sorteo. La función de configuración abarca los ajustes de tu boceto y se llama una vez cuando ejecutas el programa. En tanto que la función de sorteo incluye el resto de tu código y se ejecuta para cada fotograma hasta que detengas el programa. Ahora que tenemos toda esa información, vamos a explorar las funciones que podemos usar para configurar nuestro entorno. En primer lugar, tenemos la función de tamaño que determina el tamaño de nuestro Lienzo. Para el proyecto, sugiero una relación tres por dos o un cuadrado. No importa la escala en sí, principalmente porque estaremos exportando nuestro sketch a un archivo vectorial que se puede ajustar fácilmente después de la exportación. Estaré usando 600 por 400 durante la duración de este curso. Otra función que podemos llamar en configuración es la función de fondo, que determina el color de fondo del Canvas. El color de fondo a usar por supuesto, depende de ti. Estaré usando este color. También utilizaremos la función NoLoop para evitar que la función de dibujo se haga un lazo. Esto se debe a que queremos crear un diseño estático. En su lugar, puede crear diseños estáticos escribiendo el código completo dentro de la función de configuración. Pero esto parece un poco contraintuitivo, y un poco confuso, así que estaremos usando la función NoLoop. Otra función de procesamiento que estaremos utilizando a lo largo de este curso es la función de elipse. Esto es específico del diseño que estamos creando. No obstante, hay un surtido de funciones de forma que puedes usar para crear otras formas como cuadrados, arcos y líneas. Pasemos al procesamiento para demostrar lo que acabamos de aprender. Antes de hacer algo con el procesamiento, necesitamos descargar el software. El modo de hacerlo es yendo a processing.org, y luego yendo al enlace de procesamiento de descargas. Ahora puedes encontrar el sistema operativo que necesitas y descargarlo, para mí es Mac OS. Voy a hacer click en eso. El archivo debe ser descargado. Descomprima el archivo e instálelo. Ahora abramos el procesamiento. Una vez que abras el procesamiento, deberías ver un archivo en blanco como este. Para configurar el entorno, primero definimos las funciones de configuración y dibujo. Para ello, sólo hacemos configuración nula. El motivo por el que estamos usando void, es porque esta función no devuelve nada, y así vacío, ya que en vacío no devuelve nada, y el empate vacío. Ahora que definimos la función de configuración y dibujo, podemos configurar el entorno estableciendo el tamaño del Canvas. Podemos hacerlo usando la función de tamaño, como vimos anteriormente en el video. Función Tamaño espera dos argumentos. Dijimos que vamos a usar 600 por 400. Siéntete libre de elegir el tamaño que quieras. Entonces haremos un fondo de cero por ahora. Ahora dentro de la función de dibujo, vamos a dibujar la elipse. Podemos hacerlo usando la función de elipse, que espera cuatro argumentos. Podemos pasar cuatro argumentos. Los dos primeros van a ser la posición del centro de esa elipse. Los dos segundos argumentos van a ser el ancho y alto de esa elipse. Porque queremos crear un círculo, el ancho y la altura van a ser iguales. En nuestro sistema de coordenadas, tenemos el eje x e y. Queremos que eso esté en el centro de la página, lo que cero para x y cero para y, que es el centro de nuestro sistema de coordenadas, está en la parte superior izquierda de nuestro lienzo. Si quisiéramos ir al centro de ese lienzo, básicamente le decimos que vaya al ancho dividido por la mitad, y luego a la altura dividida por la mitad. El procesamiento tiene variables muy útiles llamadas ancho y alto. Obtienen sus valores de la función de tamaño. Ya que 600 es el ancho de nuestro Lienzo, y 400 es la altura de nuestro lienzo, ancho va a ser 600 y la altura va a ser 400. Si quieres centrarlo horizontalmente, entonces dividimos el ancho por dos. Entonces si queríamos hacerlo verticalmente, dividimos la altura por dos. Para el ancho y la altura, solo hagamos 100 por 100. El ancho y la altura son básicamente el diámetro del círculo. Si lo ejecutamos, puedes hacer clic en el botón Ejecutar por aquí o puedes hacer Comando R. Ahora podemos ver que tenemos un círculo sobre un fondo que es negro. 4. Percusión de la documentación: Mencioné en un video anterior que podemos usar una forma diferente en lugar de solo usar la elipse que estoy usando. Entonces podemos hacer eso yendo a la página de Referencia, y esta es básicamente la página de Documentación para todo procesamiento de cosas. Entonces, cualquier función que necesites, cualquier operador que necesites, cualquier cosa que necesites que esté relacionada con el procesamiento, puedes encontrar en esta página. Si vas a la sección Forma en la página Documentación, y bajas a las Primitivas 2D, puedes ver que hay varias formas que puedes usar. Hay una función Arco, hay una función Círculo, hay una función Línea, también hay una función Rect, así que siéntete libre de elegir lo que quieras. Entonces voy a demostrar con la función de Elipse que acabamos de utilizar. Si vas a la página Función de elipse y vas aquí abajo, puedes ver que esta es la sintaxis de esta función. Es así como escribes una función en tu código. Entonces en la sección Argumento en la función, así A, B, C, y D, que son los argumentos para la función Elipse, puede ver la definición de ellos aquí abajo. Entonces para A, es un flotador, y es la coordenada X de la elipse. Y luego B es la coordenada Y de la elipse. Entonces C y D son el ancho y la altura de esa elipse. Yo uso esto para crear círculos, pero siéntete libre de elegir la función Círculo real para crear tus propios círculos. Si vuelves atrás y ves cómo podemos escribir eso, puedes ver un ejemplo, y luego puedes ver que tiene una X e Y como los dos primeros argumentos. Para el tercer argumento, se puede ver que esta es la extensión del círculo. Hay muchas más formas que puedes usar, como viste en la sección Primitivas 2D, y siéntete libre, por supuesto, usar lo que quieras para que tu proyecto sea lo más único posible. 5. Planificación de la cuadrícula: Para crear una cuadrícula, primero necesitarás entender cómo funciona el concepto. Por lo general, antes de programar algo, lo planeas en un pedazo de papel o mentalmente, luego escribes tu pseudocódigo y finalmente comienzas a codificar. Esto hace que la tarea a la mano sea mucho más fácil. Como dijimos antes, el punto cero en nuestro sistema de coordenadas se encuentra en la esquina superior izquierda de nuestro lienzo. Además, otra cosa a destacar es que el sistema de coordenadas se voltea verticalmente. Por lo que los positivos Y están en la parte inferior, a diferencia de cómo lo aprendimos en matemáticas. Entonces si necesitamos movernos por el lienzo, se agrega al valor Y. Si necesitas subir, restas del valor Y. El eje x en la programación funciona precisamente como en las matemáticas. ir a la derecha es positivo y ir a la izquierda es negativo. Visualicemos una cuadrícula. Para dibujar una cuadrícula, necesitamos saber el número de columnas y filas. Digamos que queremos una cuadrícula 15 por 10. Ahora sabemos que necesitamos definir el número de columnas y filas para crear una cuadrícula. Esas son nuestras dos primeras variables. A continuación sabemos que necesitamos averiguar el ancho y la altura de cada celda en esa cuadrícula para determinar el tamaño máximo de nuestras formas. Podemos hacerlo dividiendo el ancho por el número de columnas y la altura por el número de filas. Esas son las dimensiones de nuestras células y ahí están nuestras siguientes dos variables. Lo último que necesitamos descifrar son las posiciones X e Y de cada forma. Si dibujamos un círculo a cero, cero se colocará en la esquina superior izquierda de la primera celda, que está en la esquina superior op izquierda de la primera celda, que está en la esquina superior izquierda del lienzo. Ahora si quieres empujar ese círculo al centro de esa celda, puedo simplemente agregar la mitad del ancho de esa celda a la posición X de ese círculo y agregar la mitad de la altura de esa celda, hacer la posición Y de ese círculo. Esto empujará nuestra forma al centro de eso. Por lo que esto funciona porque los círculos y elipses se dibujan desde el centro. Para rectángulos y cuadrados, sin embargo, se dibujan desde la esquina superior izquierda. Por lo que no necesitamos ponerlos en ningún lugar para centrarlos. Dirígete a la siguiente lección para ver cómo podemos hacer esto programáticamente. 6. Crear la cuadrícula: Ahora que hemos conceptualizado cómo crear cuadrículas usando el procesamiento, vamos al procesamiento y empecemos a aplicar esos conceptos. En primer lugar, definamos todas las variables que necesitamos para este diseño. Hay cuatro variables que necesitamos inicializar. Los dos primeros son el número de columnas y filas y deberían ser enteros porque no podemos tener media columna o fila. Las dos segundas son las dimensiones de cada celda. Para evitar tener huecos innecesarios en el lado derecho e inferior de la cuadrícula, tenemos que hacer flotar esas variables porque estamos dividiendo dos números que pueden no resultar en un número entero. Declararé las variables fuera de las funciones para hacerlas globales para poder utilizarlas en todas partes del programa. Si declaré las variables dentro ya sea de la configuración o de la función de dibujo. Yo las hago variables locales. Sólo puedo acceder dentro de sus respectivas funciones. Ahora que se declaran las variables, puedo inicializarlas dentro de la función de configuración pasando los valores que requiero. Elegí tener una cuadrícula de 15 por 10 por ahora. Entonces haré las columnas 15 y las filas 10 y podrás usar atajos para tus variables. Usé cols para referirme a columnas. A continuación, inicializaré las variables de ancho de celda y altura de celda dividiendo el ancho, que es el ancho del lienzo, por el número de columnas, y dividiendo la altura por el número de filas. Voy a hacer ancho de celda, y de nuevo, estoy diciendo celda W o estoy escribiendo celda W para referirme al ancho de celda y ese será el ancho dividido por columnas. Entonces la altura de celda será la altura dividida por filas. Puedo hacer algo más para hacer este código más corto que es, en lugar de escribir int por aquí y por aquí, puedo eliminar el segundo y agregar una coma entre columnas y filas. Entonces ahora sé que las columnas es un int y la fila es un int, y el programa también lo sabe. Haré lo mismo por las carrozas. Hagamos uso de bucles para poder dibujar un montón de rectángulos para crear nuestra cuadrícula. Para hacer eso, podemos usar la sintaxis de bucle for, que va así para int i es igual a 0. Esta es nuestra variable o nuestro inicializador y entonces la condición es i es menor que las columnas y por último, incrementando la variable i haciendo i plus, lo que significa que i está incrementando en uno. Después cerramos los paréntesis y abrimos el bloque de código. Ahora bien, si creamos un rectángulo dentro de esto, y le dimos una posición de cero, cero. Vamos a darle ancho de celda y altura de celda y ejecutar nuestro programa. Entonces ahora en realidad tenemos 15 cuadrados uno encima del otro. Tenemos que movernos a través del lienzo, ¿cómo podemos hacer eso? Podemos utilizar la variable i para mover cada rectángulo a su posición. En lugar de cero, que está codificado duro, tenemos que usar la variable i. Pero si usaste i sin multiplicarlo por el ancho de celda, entonces solo vamos a incrementarnos por uno. Entonces si ejecuto esto ahora mismo, veremos que sólo hay moviéndose un punto o un píxel. Si necesitaba moverme por el ancho de la celda, entonces necesito multiplicarla por el ancho de celda y ahora tenemos nuestras columnas. Pero, ¿cómo creamos las filas para cada columna? Podemos hacer eso haciendo un bucle a través de cada columna y agregando un montón de bucles for para ello. El modo en que podemos hacerlo es mediante el uso de un bucle dentro de nuestro otro bucle. Si lo hago por int y tengo que elegir una variable diferente porque ya no puede usar i ya que ya se usa en este for loop. Entonces elijo j y lo haré igual a cero y luego la condición para esto va a ser menor que filas porque queremos movernos a través de la altura del lienzo y luego j plus para incrementarlo, cerrar los paréntesis y cerrar el tirantes rizados. Ahora tendremos que inventar esto para entender que está dentro de dos para bucles. Ahora si vuelvo a ejecutar esto, veremos que nada ha cambiado. No obstante, algo ha cambiado porque ahora tenemos 10 filas una encima de la otra, pero necesitamos moverlas a través de la altura del lienzo. Haremos lo mismo que hicimos con las columnas pero esta vez usaremos la variable j porque un j se refiere a cada fila. Entonces multiplicaré j por la altura de celda y ahora si la ejecuto, debería funcionar. Ahora que hemos creado nuestra cuadrícula, cambiemos esos rectángulos en círculos porque ese es el diseño que buscamos. Si voy aquí y cambio rect a elipse, esto debería funcionar porque tienen la misma cantidad de argumentos en el mismo arreglo. El x e y posición para los dos primeros y el ancho y alto para el segundo o para la elipse aquí, su diámetro. Si ejecuto esto, puedo ver que todas mis elipses se han desplazado a la izquierda y a la parte superior. El motivo de eso es porque están dibujados desde el centro. Como dijimos antes en la lección anterior, tenemos que sumar la mitad del ancho de la celda a la posición x y la mitad de la altura de la celda a la posición y de esa elipse para centrarla. Entonces si vuelves aquí y agregas ancho de celda dividido por dos y aquí, altura de celda dividida por dos. Esto debería centrar en las celdas y tenemos nuestra cuadrícula de círculos. 7. Cómo añadir color: Generalmente hay dos modelos de color para usar en el procesamiento, RGB y HSB. RGB es sinónimo de rojo, verde y azul, mientras que HSB significa tono, saturación y brillo. A lo largo de este curso, estaré centrándome principalmente en RGB. Los valores RGB van de 0-255, siendo cero el más oscuro y 255 el más brillante. Cada una de las funciones relativas al color como fondo, trazo, y relleno toman tres argumentos, rojo, verde y azul respectivamente. Si los tres valores son idénticos, entonces obtienes un modo de color en escala de grises. Por ejemplo, si pasas en ceros, te pones negro, y si pasas en 255s obtienes blanco. Se pueden lograr resultados comparables utilizando un argumento de un valor de 0-255. De lo contrario, combina la cantidad que necesitas de cada color para obtener las formas que requieres. Digamos, te apetece un color rojo brillante, en este caso, pasas 255 solo al primer argumento, y si requieres una naranja, entonces agregas un poco de verde. Puedes experimentar con los colores tanto como quieras hasta que percibiste el concepto. A pesar de que existe un enfoque más directo para elegir valores de color para tus diseños, y eso es mediante el uso de una rueda de color. Una forma de hacerlo es usando Adobe Color. Elige colores utilizando el sitio web de Adobe Color, escribes color.adobe.com, y te llevará al sitio web de Adobe Color. Puedes elegir colores en la Sección Explora yendo aquí donde dice ver todas las fuentes. Si bajo y voy al tema de color, puedo elegir el más popular, el más usado, y luego una vez que abro una paleta, puedo ver que puedo copiar y pegar los valores hexadecimales por aquí, que puedo usar. Los valores hexadecimales son exactamente como los valores RGB. Podemos ver esto en la pestaña Crear por aquí, así que si voy a la rueda de color que tenemos por aquí, y bajamos al modo de color, podemos ver que es un RGB. Si elijo que el primer color se desplace todos estos a cero, podemos ver que porque todos son ceros ahora el valor es negro. Se puede ver que esto es rojo y esto es verde, esto es azul. Puedes desplazarte por todos estos colores para elegir los colores que te gusten, o puedes elegirlos de la rueda de color misma. Si miras aquí en los valores hexadecimales, cuando no he agregado ceros, entonces todos estos son ceros. Por lo que los dos primeros números son para valores rojos, los dos segundos son para verde, y el tercero para azul. Los valores van de 0-9, y luego de A-F. Si quiero que sea blanco, el último valor es F, así que tengo que hacer todos los Fs. Puedo ver que son 255 como lo hicimos antes. Esta es una gran manera de elegir colores. Normalmente voy a la pestaña Explorer en colores de Adobe, pero también puedo ir a la pestaña de tendencias, y puedo desplazarme hacia abajo hasta el diseño gráfico, y si veo más, puedo ver los colores de moda en la industria del diseño gráfico. Entonces, si lo abro puedo copiar y pegar los valores y añadirlos a mi RPC generativo. Agárrate a la siguiente lección para ver cómo vamos a usar colores para nuestro diseño. 8. Randomization: Hasta el momento hemos inicializado nuestras variables y bucles anidados para crear 15 columnas y 10 filas. Al crear primero un bucle que itera 15 veces, luego para cada una de estas columnas, hacemos un bucle 10 veces para crear 10 filas. Así es como se ve nuestra grilla ahora. Está un poco en blanco sin ningún color. Añadamos una función de relleno dentro del bucle. Cualquiera que sea el color que asignemos a ese relleno se aplicará a todas las formas. Siempre agregamos la función de relleno o cualquier función de coloración antes de las formas que queremos colorear. De lo contrario no lo aplicarán a esa forma. Haremos relleno y hagamos cero por negro. Si ejecutamos nuestro programa ahora mismo, veremos que todos nuestros círculos son negros. No obstante, queremos un poco de aleatorización. Podemos hacer eso usando la función aleatoria. La función aleatoria toma uno o dos argumentos. Cuando pasas un argumento a la función aleatoria, entonces solo estás pasando en el número máximo y el número mínimo será cero por defecto. No obstante, si pasa dos argumentos, entonces está especificando los números mínimo y máximo. Ya que sabemos que los valores de color van de cero a 255, podemos pasar a 255 a la función aleatoria. Ahora obtendremos un número aleatorio desde cero hasta 255. Entonces podemos almacenar ese valor en una variable y usarlo en la función de relleno. Demostremos en el procesamiento. La función aleatoria siempre devuelve un número decimal, por lo que crearemos un flotador llamado col, como en color y le asignaremos un valor para 255 aleatorios. Ahora pasamos este valor a la función de relleno. Por lo que sabemos de los colores, sabemos que un argumento en la función de relleno significa un color de un modo de escala de grises. Si ejecutamos nuestro programa, podemos ver una prueba de ello. A ver cómo el aleatorio, pero todos son de escala de grises. Si quieres que el diseño sea colorido, entonces necesitamos obtener un valor aleatorio para cada uno de los parámetros R, G y B. Vamos a crear en cambio tres variables, una llamada R otra llamada G para verde, y una tercera llamada B para azul y darle un valor aleatorio también de 255. Ahora agreguemos estos a la función de relleno. Ejecutemos el programa y ahora deberíamos ver un color diferente para cada uno de los círculos. Quitemos el color del trazo para que sea un poco más atractivo. Iré en la función de configuración y agregaré una función de no trazos para eliminar cualquier trazo en nuestro diseño. Siempre hay que terminar con punto y coma. Si ejecuto mi programa ahora mismo, puedo ver que es mucho mejor. Este es un gran paso, sin embargo, nos gustaría que esto fuera un poco más controlado, ya que en queremos elegir un tema de color específico para aplicarlo a los círculos. Haremos esto en la siguiente lección. 9. Randomization continuada: En la lección anterior, creamos este diseño utilizando un valor aleatorio para los valores rojo, verde y azul. Pero queremos que esto sea más controlado, como dijimos. Para tener un tema de color más controlado, necesitamos crear una matriz. Así es como funcionan las matrices. Tenemos una variable como cualquier otra, pero su tipo de datos va seguido de corchetes, para indicar que se trata de una lista de valores. Después para asignar valores, abrimos llaves y sumamos los valores de un tipo de datos que especificamos antes de los corchetes. Ahora acceder a estos valores requiere una sintaxis diferente a las variables normales también. Comienza exactamente como variables. No obstante, el nombre de la variable ahora va seguido de corchetes. Dentro de esos corchetes, pasamos en la posición de ese rubro. Ahora las posiciones para matrices se llaman índices. Si quiero obtener el primer elemento en la matriz tengo que pasar en el índice cero. Porque en las matrices de programación los índices comienzan en cero. También es una de las razones por las que solemos iniciar nuestro bucle for con un valor inicial de cero. Vamos a crear nuestra matriz de colores. De acuerdo, tengo cinco colores en mi tema de color que voy a copiar y pegar por aquí que quiero usar para mis círculos. Entonces primero haré color porque ese es el tipo de datos de los valores, y luego seguido de corchetes y darle un nombre a esa lista. Simplemente lo llamaré “colores. Ahora copiaré y pegaré mis colores. Estos son los cinco colores que voy a elegir. Estoy usando valores de color hexadecimales porque son más cortos que trenzar valores RGB dentro de funciones de color. Imagina cuánto tiempo será esto si uso los valores RGB. Ahora que sabemos que los índices van de cero a uno menos que la longitud, sabemos que nuestra matriz de colores tiene cinco elementos, y así comenzará desde cero y termina en cuatro. Ahora podemos usar eso en la función aleatoria. Entonces en lugar de escribir todos estos, los eliminaré y ahora nuestra función de relleno se quejará porque no hay variables llamadas R, G o B. Haré un flujo y le daré un valor de “r” para aleatorio, y haré un aleatorio de cinco porque pasará de cero a cinco, nunca llegará a cinco. Pero ahora, cuando pasamos aquí usando la matriz de colores, y uso los corchetes. Ahora, usaré la función aleatoria para pasar en el índice. Sé que se pone un número de cero a cinco, y voy a pasar en “r”. Pero ahora hay un error aquí porque me dice que hay un desajuste de tipo. “ Flotar” no coincide con “int.” El motivo de eso es porque aquí en la matriz, los índices son solo enteros, por lo que no hay números flotados. Podemos cambiar la función aleatoria por aquí para convertirnos en un entero haciendo esto. Entonces si digo que quiero que esto sea un entero, pero ahora esto se está quejando porque la función aleatoria devuelve un flotador. Por lo que necesitamos convertirlo en un entero. El modo en que podemos hacerlo es usando la función “int”, pasando la función aleatoria a la función “int”. Entonces ahora obtengo un número aleatorio de cero a cuatro, o de cero a cinco. Pero lo redondeará a los índices que necesito. Podemos comprobar qué está regresando la variable “r” imprimiéndola en la consola. Entonces la forma en que podemos hacerlo es usando la función “println”. Println básicamente imprime el valor que lo pasamos a la consola y crea una nueva línea para cada valor, por lo que es más fácil para nosotros verlo. Entonces si imprimes la variable “r” y ejecutas mi programa, primero debería ver que mis colores están todos pasados. Puedo ver por aquí que siempre estoy obteniendo un valor aleatorio de cero a cuatro. Se puede ver aquí hay un tres, aquí hay cero, aquí hay cuatro, y aquí como un dos y debería haber uno en algún lugar por aquí. Entonces sabemos que nuestra función aleatoria funciona, y por supuesto la podemos ver visualmente por aquí. Por eso el procesamiento es una gran manera de aprender programación para diseñadores porque es más visual que cualquier otro lenguaje de programación. Ahora vamos a obtener el color de fondo que estaba usando en mi proyecto. Entonces como puedes ver aquí, tengo el color de fondo y el color marrón que elijo, y tengo mi paleta de colores específica en lugar de colores aleatorios arbitrarios. Ahora vamos a aleatorizar el tamaño de cada uno de estos círculos. Entonces si vuelves al programa, podemos ver por aquí que el ancho y la altura de la elipse es fijo. Por lo que tenemos que quitar esto y reemplazarlo por una función aleatoria. Podemos hacer al azar, y luego quiero que suba al ancho de celda y también a la altura de celda. No obstante, esto nos va a crear un problema. Veamos en qué va a resultar esto. Entonces ya ves cómo elipse ahora no círculos, porque estamos pasando en una función aleatoria para cada uno de los dos. Necesitamos crear una variable para el tamaño para obtener un valor aleatorio para el ancho y la altura. Entonces haré flotar, CircleSize. Ahora tenemos un CircleSize que tiene un valor aleatorio de ancho de celda, y lo pasamos como argumento. Si ejecutamos el programa, podemos ver que tenemos círculos de tamaño aleatorio. Finalmente logramos crear el diseño que queremos crear. No obstante, en el diseño que compartí, teníamos algunos círculos encima de otros círculos que también tenían diferentes tamaños. Entonces la forma en que podemos hacer eso es mediante el uso de un if condicional. Podemos llegar a eso en la siguiente lección. 10. Controla el flujo: Vimos en nuestra última lección que creamos una cuadrícula de círculos de diferentes tamaños y diferentes colores. No obstante, en el mismo proyecto que compartí contigo, tenía algunos círculos encima de otros círculos. El modo en que podemos hacerlo como dijimos en la lección anterior, es mediante el uso de si condicionales. Si voy por aquí y escribo un si condicional, eso comprueba si la columna es un número par. Sabemos que las columnas se refieren con la variable i. puedo decir si i módulo dos es igual a cero, y lo que esto está haciendo es básicamente dividir i por dos y comprobar si el resto de eso es cero. Si es cero, entonces es divisible por dos, que significa que es un número par. El signo de modulo devuelve el resto de la división. Ahora podemos abrir los corchetes. Podemos poner la función de elipse dentro del bloque. Ahora si lo ejecutamos, podemos ver que sólo vemos que los círculos se dibujan dentro como tolerancia numérica par. El motivo por el que parte desde el principio es porque nuestros índices parten de cero o nuestros valores en las variables i y j parten de cero, y cero es divisible por dos, y así se considera un número par, aunque no lo sea. Tendremos cero y luego esto va a ser uno, la columna número uno, así que no es parejo. No hay círculos ahí dentro, y entonces tenemos dos, cuatro y así sucesivamente y así sucesivamente. Podemos mejorar nuestro código eligiendo un número aleatorio. En lugar de tenerlo demasiado controlado, quería que fuera un poco más arbitrario. Si creo un número aleatorio, llamémoslo posición aleatoria, Pos para posición, y quería ser un entero, y te mostraré por qué. Le daré un valor aleatorio de cero a dos. Simplemente voy a pasar a esto sólo obtendrán ceros o unos. Ahora puedo revisar por aquí. Si posición aleatoria igual, y hay que tener en cuenta que, igual aquí es un operador de asignación porque es solo uno igual. No obstante, cuando se tienen dos signos iguales, se trata de un operador comparador. Si compruebo si aleatorio en posición es igual a cero, entonces quería dibujar una elipse otra. Hagamos lo mismo, pero un rectángulo, sólo para ver la diferencia. Si ejecuto el programa, puedo ver que hay círculos en algunos lugares, y rectángulos en algunos otros lugares. El único motivo por el que esto es un poco raro es porque los cuadrados son empujados como círculos. Podemos quitar el sólido agregado y así la altura, y ahora podemos ver que es un poco mejor. No obstante, volvamos a las elipses. Ahora, ya veremos que volvimos a los primeros resultados. No obstante, la razón por la que hice esto es porque quiero crear una elipse diferente encima de esas elipses. Si voy por aquí y también hago una elipse, pero esta vez, quiero que el número aleatorio para el tamaño sea un poco diferente. Haré tamaño de círculo dividido por dos, y tamaño de círculo dividido por dos. Obtendré valores aleatorios, pero luego lo dividiré por dos para que sea más pequeño, y está encima del otro círculo. No obstante, esto no va a cambiar nada sólo porque va a ser del mismo color. Tenemos que reasignar una celda para esto también. Después sellar estos círculos con esta nueva variable asignada. Ahora tenemos nuestro diseño. Lo que hicimos aquí es que reasignamos la variable r que tenemos aquí arriba, y si la volvemos a ejecutar, podemos ver que obtenemos otros valores aleatorios. También podemos reasignar la variable de tamaño de círculo porque ahora solo estamos obteniendo este tamaño de círculo y luego lo estamos dividiendo por la mitad, por lo que siempre estamos obteniendo la mitad de ese círculo. Pero quería que fuera un poco más aleatorio. Yo quería que pareciera que algunos de los círculos más grandes tienen círculos muy pequeños dentro de él, y algunos de los círculos más pequeños están cubiertos por círculos más grandes. También puedo reasignar la variable de tamaño de círculo asignándole también un valor de ancho de celda aleatorio, y mantenerla como tamaño de círculo. Pero esta vez porque está reasignado, vamos a conseguir diferentes valores a partir de esta variable aquí arriba. Podemos ver que tenemos diferente tamaño. Se puede ver la parte amarilla aquí es muy pequeña en comparación con la parte naranja que podemos ver, y se puede ver por aquí que hay un punto naranja muy pequeño dentro de nuestro círculo azul. 11. Exportar el diseño: Ahora es el punto en el que agregas tus retoques finales a tu proyecto. Porque a continuación, estaremos exportando el diseño. El modo en que prefiero exportar un diseño tan sencillo es usar la Biblioteca PDF y su procesamiento. Para utilizar esta biblioteca primero necesitaremos importarla a un boceto usando esta sintaxis. Importar, procesar, desde la biblioteca de procesamiento Quiero obtener la biblioteca PDF, y luego usaré el asterisco para obtener todas las funciones dentro de esa Biblioteca PDF. Básicamente, el asterisco está indicando que queremos exponer todas las funcionalidades dentro de esa biblioteca a nuestro boceto para que podamos usarlo. De lo contrario, puede especificar qué funciones exactamente le gustaría importar de esa biblioteca. Exploremos qué funciones podemos usar para exportar nuestra pieza de arte generada final. Para exportar nuestro diseño a un archivo PDF, tenemos que comenzar el guardado o la exportación antes de la función de fondo o la función NoStroke, porque se trata de funcionalidades que se suman a nuestro diseño. Puedo grabar usando la función BeginRecord. La función BeginRecord toma un tipo, así que le daré un tipo PDF. Entonces el camino donde quieres que se guarden tus diseños. Los archivos se van a exportar a la carpeta de boceto. No obstante, puedes especificar una carpeta que quieras agregar dentro de esa carpeta de boceto, y eso es lo que me gusta hacer para que sea un poco más organizada. A mí me gusta llamarlo salida y luego le daré un nombre al archivo. Yo diré, rejillas generativas, y la extensión. Ahora una vez que empecemos la grabación, tendremos que terminarla. Porque si comenzamos la grabación y nunca la terminamos, nunca obtendrás el archivo. El archivo comenzará a guardar, pero nunca terminará guardando. Tendré que agregarla al final por aquí. La función EndRecord es básicamente endRecord con paréntesis sin argumentos dentro de ella. Ahora si ejecuto mi boceto, está guardado dentro de mi carpeta de bocetos. Vayamos a revisar la carpeta de boceto. Pueden encontrar dónde guardaste tus archivos si lo olvidaste haciendo clic derecho en el título de aquí. Puedo dar click en la carpeta y me llevará a donde la guardé. Si hago doble clic en la abertura para abrir la carpeta, entonces puedo ver que tengo mi diseño por aquí y guardado como PDF. Ahora que tenemos nuestro archivo PDF, podemos abrirlo en cualquier software de imagen. Lo abriré y previsualizaré porque estoy en Mac, pero siéntete libre de elegir cualquier programa que abra un PDF y pueda guardarlo en un archivo de imagen. Después de abrir y previsualizar, iré al archivo, exportaré, y luego elijo PNG. Tengo la resolución a 300 pixeles por pulgada para obtener una imagen de muy alta calidad. Debes elegir dónde quieres guardarlo, Se guarda. Ahora si volvemos aquí y previsualizamos el archivo, podemos ver que la imagen es de muy alta calidad. Al igual que en, no hay pixelación o hay pixelación menor cuando la escalamos. Eso es genial. Ahora tenemos un archivo PDF y un PNG. 12. Edición del diseño en Adobe Illustrator: A continuación, te mostraré cómo abrir esto en Illustrator para manipularlo más. Puede hacer clic derecho y elegir, “Abrir con Adobe Illustrator”. Ahora tenemos nuestro expediente. Si hago doble clic en el Grupo Clip, se puede ver que puedo cambiar cada círculo. No obstante, abrir PDF en Illustrator puede ser un poco limitante. Si miras en el panel de muestras, puedes ver que aquí no hay muestras. El modo en que haría esto es abrir otro archivo y copiar y pegar lo que sea que haya aquí en otro archivo de Adobe Illustrator de la misma proporción. Pero aquí te mostraré cómo manipularlo más. Si hago clic en la “Imagen”, toda la imagen se está moviendo en realidad porque está dentro de una máscara de recorte. Si voy a “Objeto” y luego voy a “Máscara de recorte”, y suelto la máscara o uso el atajo Comando opción 7, y ahora puedo seleccionar los círculos individualmente. Puedes recolorear la imagen, puedes cambiar el tamaño de tus formas como quieras. Es así como creé mi miniatura para estos proyectos quitando la parte media y agregándole texto. Entonces así es básicamente como lo manipulas en Adobe Illustrator. 13. Tu proyecto: Para tu asignación, crearás una auténtica pieza de arte generativo basada en cuadrícula. Puedes ir más allá con tu proyecto. No obstante, lo más importante, necesitarás algún tipo de aleatorización en tu diseño. Aquí hay tres ejemplos para mostrarte varias formas de implementar la función aleatoria. Para el primer ejemplo, creé rectángulos, cada uno abarcando el ancho y la altura de una celda en la cuadrícula. Después aleatoricé los colores de estos rectángulos para obtener este resultado. El segundo ejemplo empleó la rotación a algunos de los cuadrados dibujados sobre lienzo, que es un poco más avanzado, ya que crea una nueva matriz para cada celda de la cuadrícula, luego la gira en 45 grados o un cuarto de Pi. También agregué varios pesos de trazo a algunos de los cuadrados y aleatoricé los colores de cada forma. último, pero no menos importante, creé círculos del mismo tamaño con pesos y colores de trazo mixtos para crear este diseño. Si hace referencia a las primitivas 2D en la sección de formas en la página de documentación, debería poder utilizar algunas de ellas en su proyecto.