Introdução à arte generativa no Processing

1. Introdução: Olá, todo mundo. Sou Hadeel, e esta é a Introdução à Arte Generativa. Nesta aula, vamos aprender os conceitos básicos de programação e algumas funções específicas de processamento para criar esta obra de arte generativa. Processamento é uma linguagem baseada em Java, e é uma das maneiras mais simples de aprender a agir. Ele não só concede a oportunidade de aprender uma língua generalizada, mas também fornece resultados visuais instantâneos. Também faremos referência à página de documentação de processamento para demonstrar como aproveitar ao máximo o Processamento, o que certamente ajudará você ao criar seu projeto. Além disso, mostrarei como usar uma biblioteca de Processamento para exportar os resultados para um formato vetorial. Uma ótima maneira de salvar imagens de alta qualidade ou manipular ainda mais o trabalho usando softwares como o Adobe Illustrator. No final desta aula, você deve ser capaz de programar e produzir uma peça original. Eles serão o seu certificado chique para mostrar ao mundo. Vamos começar. 2. Noções básicas de programação: Primeiramente, você precisa conhecer os conceitos básicos de qualquer linguagem de programação para ser capaz de passar por esta classe. Eles são muito fáceis de entender e com a prática você será capaz de criar um design generativo por dia com eles. Codificar cada valor de precisão, tamanho ou cor pode se transformar em uma tarefa tediosa no momento, especialmente quando você precisa editar valores para uma matriz de formas, é por isso que precisamos de algo chamado variáveis. Uma variável é simplesmente um nome que você define para um valor para salvá-lo na memória, para usá-lo em todo o programa. Em geral, por exemplo, se você quiser definir o raio do círculo, digite CirclAdius igual a 100, como em um 100 pixels. Agora o programa entende que CircleraDius é um 100 pixels porque nós o definimos. No processamento, no entanto, esta declaração está faltando uma palavra-chave muito importante, que significa que seu programa pode lançar um erro por causa disso. A palavra-chave é int. Int significa inteiros, e é um dos tipos de dados do processamento. Existem vários tipos de dados em processamento que você pode usar em seus programas, como int para inteiros, float para números decimais, string para texto, char para caracteres, booleano para valores verdadeiros e falsos, cor para matizes, matrizes para listas ordenadas e dicionários para listas de valores-chave. Neste curso usaremos somente inteiros, flutuadores, matrizes e cores. Como estamos criando uma grade, isso significa que estaremos desenhando um monte de formas na tela, o que parece muito trabalho até que você aprenda sobre loops. Loops são uma ótima maneira de fazer a mesma tarefa várias vezes sem o incômodo de digitar essa tarefa uma e outra vez. Uma maneira de criar um loop é usando a palavra-chave “For” como esta. A primeira parte da instrução especifica o início do loop, a segunda parte indica quando parar um loop, e a terceira parte é o seu valor de incremento, e qualquer código que você deseja repetir aqueles dentro do corpo do loop. Às vezes, dentro de loops ou qualquer outra parte do esboço, precisamos controlar o fluxo do nosso código usando “If condicionals”. Isso é útil se você quiser executar um bloco de código somente quando uma instrução for avaliada como true, querendo apenas colorir formas se forem colunas numeradas pares. A última coisa que precisamos saber nesta lição são funções e métodos, essas duas declarações são um pouco as mesmas. Métodos são basicamente funções que pertencem a uma classe, então eles não são definidos diretamente dentro do programa como funções. Nós não precisamos saber uma tonelada sobre funções para este curso além de, é uma declaração que contém um bloco de código que você pode chamar em qualquer lugar seu programa digitando seu nome e transmitindo o tipo apropriado e quantidade de argumentos . Ao passar por este curso, você entenderá todas as informações desta lição e não se preocupe em memorizar nada agora, todos voltam para a documentação de vez em quando, especialmente no Começando. 3. Introdução ao processamento: O processamento tem três componentes principais que você precisa estar ciente: o editor de texto, onde você escreve seu código, o console, onde você normalmente depurar seu código e o Canvas, onde você pode visualizar seu design. Além disso, cada arquivo de processamento é convencionalmente referido como um esboço. Em cada esboço temos duas funções formando o treino base. Um é chamado de configuração, e o outro é chamado de draw. A função de configuração engloba as configurações do seu esboço e é chamada uma vez quando você executa o programa. Enquanto a função de desenho inclui o resto do seu código e é executado para cada quadro até que você pare o programa. Agora que temos todas essas informações, vamos explorar as funções que podemos usar para configurar nosso ambiente. Primeiro, temos a função de tamanho que determina o tamanho da nossa tela. Para o projeto, sugiro uma proporção de três por dois ou um quadrado. A escala em si não importa, principalmente porque estaremos exportando nosso esboço para um arquivo vetorial que pode ser facilmente ajustado após a exportação. Vou usar 600 por 400 durante o curso. Outra função que podemos chamar na configuração é a função de fundo, que determina a cor de fundo da tela. A cor de fundo a ser usada é claro, até você. Vou usar esta cor. Nós também usaremos a função NoLoop para parar a função draw de looping. Isso ocorre porque queremos criar um design estático. Em vez disso, você pode criar designs estáticos escrevendo o código completo dentro da função de configuração. Mas isso parece um pouco contra-intuitivo, e um pouco confuso, então estaremos usando a função NoLoop. Outra função de processamento que usaremos ao longo deste curso é a função elipse. Isso é específico para o design que estamos criando. No entanto, há uma variedade de funções de forma que você pode usar para criar outras formas, como quadrados, arcos e linhas. Vamos para o processamento para demonstrar o que acabamos de aprender. Antes de fazer qualquer coisa com o processamento, precisamos baixar o software. A maneira de fazer isso é indo para processing.org e, em seguida, indo para o link de processamento de download. Agora você pode encontrar o sistema operacional que você precisa e baixá-lo, para mim é Mac OS. Vou apenas clicar nisso. O arquivo deve ser baixado. Descompacte o arquivo e instale-o. Agora vamos abrir o processamento. Depois de abrir o processamento, você deverá ver um arquivo em branco como este. Para configurar o ambiente, primeiro definimos as funções de configuração e desenho. Para fazer isso, nós apenas fazemos a configuração anulada. A razão pela qual estamos usando void, é porque esta função não retorna nada, e tão vazio, como em vazio não retorna nada, e vazio empate. Agora que definimos a função de configuração e desenho, podemos configurar o ambiente definindo o tamanho da tela. Podemos fazer isso usando a função de tamanho, como vimos anteriormente no vídeo. Função de tamanho espera dois argumentos. Nós dissemos que vamos usar 600 por 400. Sinta-se livre para escolher o tamanho que quiser. Então vamos fazer um fundo de zero por enquanto. Agora dentro da função de desenho, vamos desenhar a elipse. Podemos fazer isso usando a função de elipse, que espera quatro argumentos. Podemos passar quatro argumentos. Os dois primeiros serão a posição do centro dessa elipse. Os dois segundos argumentos serão a largura e altura dessa elipse. Porque queremos criar um círculo, a largura e a altura serão iguais. Em nosso sistema de coordenadas, temos os eixos x e y. Queremos que isso esteja no centro da página, então zero para x e zero para y, que é o centro do nosso sistema de coordenadas, está no canto superior esquerdo da nossa tela. Se quiséssemos ir para o centro dessa tela, basicamente dizemos para ir para a largura dividida pela metade, e então a altura dividida pela metade. Processamento tem variáveis muito úteis chamadas largura e altura. Eles obtêm seus valores a partir da função de tamanho. Como 600 é a largura da nossa tela, e 400 é a altura da nossa tela, a largura vai ser 600 e a altura vai ser 400. Se você quiser centralizá-lo horizontalmente, dividimos a largura por dois. Então, se quiséssemos fazê-lo verticalmente, dividimos a altura por dois. Para a largura e altura, vamos apenas fazer 100 por 100. A largura e a altura são basicamente o diâmetro do círculo. Se o executarmos, você pode clicar no botão Executar aqui ou você pode fazer o Comando R. Agora podemos ver que temos um círculo em um fundo que é preto. 4. Perder a documentação: Eu mencionei em um vídeo anterior que podemos usar uma forma diferente em vez de apenas usar a elipse que estou usando. Então podemos fazer isso indo para a página Referência, e esta é basicamente a página Documentação para todas as coisas processando. Portanto, quaisquer funções que você precisa, quaisquer operadores que você precisa, qualquer coisa que você precisa que esteja relacionado ao processamento, você pode encontrar nesta página. Se você for para a seção Forma na página Documentação e descer para as Primitivas 2D, você pode ver que existem várias formas que você pode usar. Há uma função Arc, há uma função Circle, há uma função Line, há também uma função Rect, então sinta-se livre para escolher o que quiser. Então eu vou demonstrar com a função Ellipse que acabamos de usar. Se você vai para a página Função de Elipse e você descer aqui, você pode ver que esta é a sintaxe desta função. É assim que você escreve uma função em seu código. Em seguida, na seção Argumento na função, então A , B, C e D, que são os argumentos para a função Elipse, você pode ver a definição deles aqui em baixo. Então, para A, é um flutuador, e é a coordenada X da elipse. E então B é a coordenada Y da elipse. Então C e D são a largura e altura dessa elipse. Eu uso isso para criar círculos, mas sinta-se livre para escolher a função Círculo real para criar seus próprios círculos. Se você voltar e ver como podemos escrever isso, você pode ver um exemplo, e então você pode ver que ele tem um X e Y como os dois primeiros argumentos. Para o terceiro argumento, você pode ver que esta é a extensão do círculo. Há muito mais formas que você pode usar, como você viu na seção Primitivas 2D, e sinta-se livre, é claro, para usar o que quiser para tornar seu projeto o mais único possível. 5. Planejando a grade: Para criar uma grade, primeiro você precisará entender como o conceito funciona. Normalmente, antes de programar algo, você planeja em um pedaço de papel ou mentalmente, então você escreve seu pseudocódigo e finalmente você começa a codificar. Isso torna a tarefa em mãos muito mais fácil. Como dissemos antes, o ponto zero em nosso sistema de coordenadas fica no canto superior esquerdo da tela. Além disso, outra coisa a notar é que o sistema de coordenadas é invertido verticalmente. Então os Y positivos estão no fundo, ao contrário de como aprendemos em matemática. Então, se precisarmos mover para baixo a tela, você adiciona ao valor Y. Se você precisar mover para cima, subtraia do valor Y. O eixo x na programação funciona exatamente como na matemática. Ir para a direita é positivo e ir para a esquerda é negativo. Vamos visualizar uma grade. Para desenhar uma grade, precisamos saber o número de colunas e linhas. Digamos que queremos uma grade de 15 por 10. Agora sabemos que precisamos definir o número de colunas e linhas para criar uma grade. Essas são as duas primeiras variáveis. Em seguida, sabemos que precisamos descobrir a largura e altura de cada célula nessa grade para determinar o tamanho máximo de nossas formas. Podemos fazer isso dividindo a largura pelo número de colunas e a altura pelo número de linhas. Essas são as dimensões de nossas células e há nossas próximas duas variáveis. A última coisa que precisamos descobrir são as posições X e Y de cada forma. Se desenharmos um círculo em zero, zero ele será posicionado no canto superior esquerdo da primeira célula, que está no canto superior esquerdo da primeira célula, que está no canto superior esquerdo da tela. Agora, se você quiser empurrar esse círculo para o centro dessa célula, eu posso simplesmente adicionar metade da largura dessa célula para a posição X desse círculo e adicionar metade da altura dessa célula, fazer a posição Y desse círculo. Isso vai empurrar nossa forma para o centro disso. Então isso funciona porque círculos e elipses são desenhados do centro. Para retângulos e quadrados, no entanto, eles são desenhados a partir do canto superior esquerdo. Então não precisamos colocá-los em nenhum lugar para centrá-los. Vá para a próxima lição para ver como podemos fazer isso programaticamente. 6. Criação da grade: Agora que conceituamos como criar grades usando o processamento, vamos para o processamento e começar a aplicar esses conceitos. Primeiro, vamos definir todas as variáveis que precisamos para este experimento. Há quatro variáveis que precisamos inicializar. Os dois primeiros são o número de colunas e linhas e eles devem ser inteiros porque não podemos ter meia coluna ou linha. Os dois segundos são as dimensões de cada célula. Para evitar ter lacunas desnecessárias no lado direito e inferior da grade, temos que fazer essas variáveis flutuar porque estamos dividindo dois números que podem não resultar em um número inteiro. Vou declarar as variáveis fora das funções para torná-las globais para que eu possa usá-las em todos os lugares do programa. Se eu declarar as variáveis dentro da configuração ou da função de desenho. Eu os faço variáveis locais. Eu só posso acessar dentro de suas respectivas funções. Agora que as variáveis são declaradas, eu posso inicializá-las dentro da função de configuração passando os valores que eu preciso. Eu escolhi ter uma grade de 15 por 10 por agora. Então eu vou fazer as colunas 15 e as linhas 10 e você pode usar atalhos para suas variáveis. Usei cols para me referir a colunas. Em seguida, inicializarei a largura da célula e as variáveis de altura da célula dividindo a largura, que é a largura da tela, pelo número de colunas, e dividindo a altura pelo número de linhas. Vou fazer a largura da célula, e novamente, estou dizendo célula W ou estou digitando célula W para se referir à largura da célula e que será a largura dividida por colunas. Em seguida, a altura da célula será a altura dividida por linhas. Eu posso fazer outra coisa para tornar este código mais curto que é, em vez de escrever int aqui e aqui, eu posso remover o segundo e adicionar uma vírgula entre colunas e linhas. Então agora eu sei que colunas é um int e linha é um int, e o programa sabe disso também. Farei o mesmo pelos carros alegóricos. Vamos fazer uso de loops para ser capaz de desenhar um monte de retângulos para criar nossa grade. Para fazer isso, podemos usar a sintaxe de loop for, que vai assim para int i é igual a 0. Esta é a nossa variável ou o nosso inicializador e, em seguida, a condição é i é menor do que as colunas e, por último, incrementando a variável i fazendo i mais, que significa que i é incrementando por um. Então fechamos os parênteses e abrimos o bloco de código. Agora, se criarmos um retângulo dentro disso, e dermos a ele uma posição de zero, zero. Vamos dar-lhe largura da célula e altura da célula e executar o nosso programa. Então agora temos 15 quadrados um em cima do outro. Precisamos atravessar a tela, como podemos fazer isso? Podemos utilizar a variável i para mover cada retângulo para a sua posição. Em vez de zero, que é codificado, temos que usar a variável i. Mas se você usou i sem multiplicá-lo pela largura da célula, então nós só vamos incrementar por um. Então, se eu rodar isso agora, veremos que há apenas um ponto ou um pixel em movimento. Se eu precisava me mover pela largura da célula, então eu preciso multiplicá-la pela largura da célula e agora temos nossas colunas. Mas como criamos as linhas para cada coluna? Podemos fazer isso percorrendo cada coluna e adicionando um monte de loops para ela. A maneira como podemos fazer isso é usando um loop dentro de nosso outro loop. Se eu fizer para int e eu tenho que escolher uma variável diferente porque ele não pode usar i mais uma vez que ele já é usado neste para loop. Então eu vou escolher j e torná-lo igual a zero e, em seguida, a condição para isso vai ser menor do que linhas porque nós queremos mover através da altura da tela e, em seguida, j plus para incrementá-lo, fechar os parênteses e fechar o chaves encaracoladas. Agora teremos que inventar isso para entender que está dentro de dois loops. Agora, se eu fizer isso de novo, veremos que nada mudou. No entanto, algo mudou porque agora temos 10 linhas umas sobre as outras, mas precisamos movê-las através da altura da tela. Vamos fazer a mesma coisa que fizemos com as colunas, mas desta vez vamos usar a variável j porque um j está se referindo a cada linha. Então eu vou multiplicar j pela altura da célula e agora se eu executá-lo, ele deve funcionar. Agora que criamos nossa grade, vamos mudar esses retângulos em círculos porque esse é o design que estamos procurando. Se eu passar aqui e mudar rect para elipse, isso deve funcionar porque eles têm a mesma quantidade de argumentos no mesmo arranjo. A posição x e y para os dois primeiros e a largura e altura para o segundo ou para a elipse aqui, seu diâmetro. Se eu rodar isso, eu posso ver que todas as minhas elipses mudaram para a esquerda e para o topo. A razão para isso é porque eles são retirados do centro. Como dissemos antes na lição anterior, temos que adicionar metade da largura da célula para a posição x e metade da altura da célula para a posição y dessa elipse para centralizá-la. Então, se você voltar aqui e adicionar largura de célula dividida por dois e aqui, altura da célula dividida por dois. Isto deve centrar-se nas células e temos a nossa grelha de círculos. 7. Adicionando cor: Geralmente, existem dois modelos de cores para usar no processamento, RGB e HSB. RGB significa vermelho, verde e azul, enquanto HSB significa matiz, saturação e brilho. Ao longo deste curso, vou me concentrar principalmente no RGB. Os valores RGB vão de 0-255, sendo zero o mais escuro e 255 o mais brilhante. Cada uma das funções relativas à cor como fundo, traçado e preenchimento leva três argumentos, vermelho, verde e azul, respectivamente. Se todos os três valores forem idênticos, você terá um modo de cor em escala de cinza. Por exemplo, se você passar em zeros, você fica preto, e se você passar em 255s você fica branco. Você pode obter resultados comparáveis usando um argumento de um valor de 0-255. Caso contrário, combine a quantidade que você precisa de cada cor para obter as formas que você precisa. Digamos que você gosta de uma cor vermelha brilhante, neste caso, você passa 255 para apenas o primeiro argumento, e se você precisar de uma laranja, então você adiciona um pouco de verde. Você pode experimentar as cores o quanto quiser até perceber o conceito. Embora haja uma abordagem mais direta para escolher valores de cor para seus designs, e isso é usando uma roda de cores. Uma maneira de fazer isso é usando o Adobe Color. Escolha cores usando o site da Adobe Color, digite color.adobe.com e ele o levará ao site da Adobe Color. Você pode escolher cores na seção Explorar indo para aqui onde ele diz ver todas as fontes. Se eu descer e ir para cor tema, eu posso escolher o mais popular, mais usado, e então uma vez que eu abrir uma paleta, eu posso ver que eu posso copiar e colar os valores hexadecimais aqui, que eu posso usar. Valores hexadecimais são exatamente como valores RGB. Podemos ver isso na guia Criar aqui, então se eu for para a roda de cores que temos aqui, e descer para o modo de cor, podemos ver que é um RGB. Se eu escolher para a primeira cor para rolar todos estes para zero, podemos ver que porque eles são todos zeros agora o valor é preto. Você pode ver que isso é vermelho e este é verde, este é azul. Você pode percorrer todas essas cores para escolher as cores que você gosta, ou você pode escolhê-las na roda de cores em si. Se você olhar aqui nos valores hexadecimais, quando eu não adicionei zeros, então todos estes são zeros. Assim, os dois primeiros números são para valores vermelhos, os dois são para verde, e o terceiro para azul. Os valores vão de 0-9 e, em seguida, de A-F. Se eu quiser que ele seja branco, o último valor é F, então eu tenho que fazer todos os Fs. Posso ver que são 255 como fazíamos antes. Esta é uma ótima maneira de escolher cores. Eu costumo ir para a guia Explorer nas cores da Adobe, mas também posso ir para a guia de tendências, e posso rolar para baixo até design gráfico, e se eu visualizar mais, posso ver as cores da moda na indústria de design gráfico. Em seguida, se eu abri-lo eu posso copiar e colar os valores e adicioná-los ao meu RPC generativo. Segure-se na próxima lição para ver como vamos usar cores para o nosso design. 8. Randomização: Até agora inicializamos nossas variáveis e loops aninhados para criar 15 colunas e 10 linhas. Criando primeiro um loop que itera 15 vezes, em seguida, para cada uma dessas colunas, fazemos loop 10 vezes para criar 10 linhas. É assim que nossa grade se parece agora. Está um pouco em branco sem cores. Vamos adicionar uma função de preenchimento dentro do loop. Qualquer cor que atribuirmos a esse preenchimento será aplicada a todas as formas. Nós sempre adicionamos a função de preenchimento ou qualquer função de coloração antes das formas que queremos colorir. Caso contrário, eles não vão aplicá-lo a essa forma. Nós vamos preencher e vamos fazer zero para preto. Se rodarmos o nosso programa agora, veremos que todos os nossos círculos são negros. No entanto, queremos um pouco de randomização. Podemos fazer isso usando a função aleatória. A função aleatória leva um ou dois argumentos. Quando você passa um argumento para a função aleatória, então você está apenas passando o número máximo e o número mínimo será igual a zero. No entanto, se você passar dois argumentos, então você está especificando os números mínimo e máximo. Como sabemos que os valores de cor vão de zero a 255, podemos passar para 255 para a função aleatória. Agora vamos obter um número aleatório de zero a 255. Em seguida, podemos armazenar esse valor em uma variável e usá-lo na função de preenchimento. Vamos demonstrar no processamento. A função aleatória sempre retorna um número decimal, então vamos criar um flutuador chamado col, como na cor e atribuir-lhe um valor para 255 aleatório. Agora passamos esse valor para a função de preenchimento. Pelo que sabemos sobre cores, sabemos que um argumento na função de preenchimento significa uma cor de um modo de escala de cinza. Se executarmos nosso programa, podemos ver uma prova disso. Veja como o aleatório, mas eles são todos cinza-escala. Se você quiser tornar o design colorido, então precisamos obter um valor aleatório para cada um dos parâmetros R, G e B. Vamos, em vez disso, criar três variáveis, uma chamada R outra chamada G para verde, e uma terceira chamada B para azul e dar-lhe um valor aleatório também de 255. Agora vamos adicionar estes à função de preenchimento. Vamos executar o programa e agora devemos ver uma cor diferente para cada um dos círculos. Vamos remover a cor do traçado para torná-la um pouco mais atraente. Eu vou na função de configuração e adicionar uma função sem traçado para remover quaisquer traços em nosso design. Você tem que sempre terminar com ponto-e-vírgula. Se eu rodar meu programa agora, posso ver que é muito melhor. Este é um grande passo, no entanto, gostaríamos que isso fosse um pouco mais controlado, já que queremos escolher um tema de cor específico para aplicar aos círculos. Faremos isso na próxima lição. 9. Randomização continuou: Na lição anterior, criamos esse experimento usando um valor aleatório para valores vermelho, verde e azul. Mas queremos que isto seja mais controlado, como dissemos. Para ter um tema de cor mais controlado, precisamos criar uma matriz. É assim que os arrays funcionam. Temos uma variável como qualquer outra, mas seu tipo de dados é seguido por colchetes, para indicar que é uma lista de valores. Em seguida, para atribuir valores, abrimos chaves e adicionamos os valores de um tipo de dados que especificamos antes dos colchetes. Agora, acessar esses valores requer uma sintaxe diferente das variáveis normais também. Começa exatamente como variáveis. No entanto, o nome da variável agora é seguido por colchetes. Dentro desses colchetes, passamos na posição desse item. Agora as posições para matrizes são chamadas índices. Se eu quiser obter o primeiro item na matriz eu tenho que passar no índice zero. Porque em matrizes de programação os índices começam em zero. É também uma das razões pelas quais geralmente iniciamos nosso loop for com um valor inicial de zero. Vamos criar nossa matriz de cores. Ok, eu tenho cinco cores no meu tema de cores que eu vou copiar e colar aqui que eu quero usar para meus círculos. Então primeiro eu vou fazer cor porque esse é o tipo de dados dos valores, e depois seguido por colchetes e dar a essa lista um nome. Vou chamar-lhe “cores”. Agora vou copiar e colar minhas cores. Estas são as cinco cores que eu vou escolher. Estou usando valores de cor hexadecimais porque eles são mais curtos do que trançar valores RGB dentro de funções de cor. Imagine quanto tempo isso será se eu usar os valores RGB. Agora que sabemos que os índices vão de zero para um a menos do que o comprimento, sabemos que nossa matriz de cores tem cinco elementos, e assim ele vai começar de zero e termina em quatro. Agora podemos usar isso na função aleatória. Então, em vez de escrever todos estes, eu vou removê-los e agora nossa função de preenchimento vai reclamar porque não há variáveis chamadas R, G ou B. Eu vou fazer um fluxo e dar-lhe um valor de “r” para aleatório, e eu vou fazer um aleatório de cinco porque vai de zero a cinco, nunca vai chegar a cinco. Mas agora, quando passarmos aqui usando a matriz de cores, e eu uso os colchetes. Agora, vou usar a função aleatória para passar no índice. Eu sei que recebe um número de zero a cinco, e eu passo em “R”. Mas agora há um erro aqui porque ele me diz que há uma incompatibilidade de tipo. “ Float” não combina com “int”. A razão para isso é porque aqui na matriz, os índices são apenas inteiros, então não há números flutuantes. Podemos mudar a função aleatória aqui para se tornar um inteiro fazendo isso. Então, se eu digo que eu quero que este seja um inteiro, mas agora isso está reclamando porque a função aleatória retorna um flutuador. Então precisamos convertê-lo em um inteiro. A maneira que podemos fazer isso é usando a função “int”, passando a função aleatória para a função “int”. Então agora eu recebo um número aleatório de zero a quatro, ou de zero a cinco. Mas vai arredondá-lo para os índices que eu preciso. Podemos verificar o que a variável “r” está retornando, imprimindo no console. Então a maneira que podemos fazer isso é usando a função “println”. Println basicamente imprime o valor que passamos para o console e cria uma nova linha para cada valor, isso é mais fácil para nós vê-lo. Então, se você imprimir a variável “r” e executar meu programa, eu deveria primeiro ver que minhas cores são todas transmitidas. Eu posso ver aqui que eu estou sempre recebendo um valor aleatório de zero a quatro. Você pode ver aqui é um três, aqui é zero, aqui é quatro, e aqui como um dois e deve haver um em algum lugar por aqui. Então sabemos que nossa função aleatória funciona, e é claro que podemos vê-la visualmente aqui. É por isso que o processamento é uma ótima maneira de aprender programação para designers porque é mais visual do que qualquer outra linguagem de programação. Agora vamos obter a cor de fundo que eu estava usando no meu projeto. Então, como você pode ver aqui, eu tenho a cor de fundo e a cor marrom que eu escolher, e eu tenho minha paleta de cores específicas em vez de cores aleatórias arbitrárias. Agora vamos aleatoriamente o tamanho de cada um desses círculos. Então, se você voltar para o programa, podemos ver aqui que a largura e altura da elipse é fixa. Então temos que remover isso e substituí-lo por uma função aleatória. Podemos fazer aleatoriamente, e então eu quero que ele vá até a largura da célula e também a altura da célula. No entanto, isso vai criar um problema para nós. Vamos ver no que isso vai resultar. Então você vê como ele elipses agora não círculos, porque estamos passando em uma função aleatória para cada um dos dois. Precisamos criar uma variável para o tamanho para obter um valor aleatório para a largura e altura. Então eu vou fazer flutuação, CircleSize. Agora temos um CircleSize que tem um valor aleatório de largura de célula, e passamos como um argumento. Se executarmos o programa, podemos ver que temos círculos de tamanho aleatório. Finalmente conseguimos criar o design que queremos criar. No entanto, no design que eu compartilhei, nós tínhamos alguns círculos em cima de outros círculos que tinham tamanhos diferentes também. Então a maneira que podemos fazer isso é usando um if condicional. Podemos chegar a isso na próxima lição. 10. Controlando o fluxo: Vimos em nossa última lição que criamos uma grade de círculos de diferentes tamanhos e cores diferentes. No entanto, no mesmo projeto que compartilhei com você, eu tinha alguns círculos em cima de outros círculos. A maneira que podemos fazer isso como dissemos na lição anterior, é usando if condicionals. Se eu for aqui e escrever um se condicional, isso verifica se a coluna é um número par. Sabemos que as colunas são referidas com a variável i. Eu posso dizer se i módulo dois é igual a zero, e o que isso está fazendo é basicamente dividir i por dois e verificar se o restante é zero. Se for zero, então é divisível por dois, o que significa que é um número par. O sinal de modulo retorna o restante da divisão. Agora podemos abrir os suportes. Podemos colocar a função de elipse dentro do bloco. Agora, se o executarmos, podemos ver que só vemos que círculos são desenhados dentro como tolerância de número par. A razão pela qual ele começa desde o início é porque nossos índices começam a partir de zero ou nossos valores nas variáveis i e j começam a partir de zero, e zero é divisível por dois, e por isso é considerado um número par, mesmo que não seja. Nós vamos conseguir zero e então este vai ser um, a coluna número um, então não está mesmo. Não há círculos lá, e então nós temos dois, quatro e assim por diante e assim por diante. Podemos melhorar nosso código escolhendo um número aleatório. Em vez de tê-lo controlado demais, eu queria que fosse um pouco mais arbitrário. Se eu criar um número aleatório, vamos chamá-lo de posição aleatória, Pos para posição, e eu queria ser um inteiro, e eu vou mostrar-lhe o porquê. Vou dar-lhe um valor aleatório de zero a dois. Eu só vou passar para isso só vai ter zeros ou uns. Agora posso checar aqui. Se posição aleatória igual, e você tem que estar ciente que, igual aqui é um operador de atribuição porque é apenas um igual. No entanto, quando você tem dois sinais de igual, este é um operador de comparação. Se eu verificar se a posição aleatória é igual a zero, então eu queria desenhar uma elipse outra. Vamos fazer a mesma coisa, mas um retângulo, só para ver a diferença. Se eu executar o programa, eu posso ver que há círculos em alguns lugares, e retângulos em alguns outros lugares. A única razão pela qual isso é um pouco estranho é porque os quadrados são empurrados como círculos. Podemos remover o sólido adicionado e assim altura, e agora podemos ver que é um pouco melhor. No entanto, vamos voltar para as elipses. Agora, vamos ver se voltamos aos primeiros resultados. No entanto, a razão pela qual eu fiz isso é porque eu quero criar uma elipse diferente em cima dessas elipses. Se eu for aqui e também fizer uma elipse, mas desta vez, quero que o número aleatório para o tamanho seja um pouco diferente. Vou fazer o tamanho do círculo dividido por dois, e o tamanho do círculo dividido por dois. Eu vou obter valores aleatórios, mas então eu vou dividi-lo por dois então é menor, e ele está em cima do outro círculo. No entanto, isso não vai mudar nada só porque vai ser da mesma cor. Temos que reatribuir uma célula para isso também. Em seguida, selar esses círculos com esta nova variável atribuída. Agora temos o nosso design. O que fizemos aqui é que reatribuímos a variável r que temos aqui em cima, e se executarmos novamente, podemos ver que obtemos outros valores aleatórios. Nós também podemos reatribuir a variável de tamanho do círculo porque agora estamos apenas recebendo esse tamanho do círculo e, em seguida, estamos dividindo-o pela metade, então estamos sempre recebendo metade desse círculo. Mas eu queria que fosse um pouco mais aleatório. Eu queria que parecesse que alguns dos círculos maiores têm círculos muito pequenos dentro dele, e alguns dos círculos menores são cobertos por círculos maiores. Eu também posso reatribuir a variável de tamanho do círculo atribuindo-lhe também um valor de largura de célula aleatória, e mantê-lo como tamanho do círculo. Mas desta vez, porque é reatribuído, vamos obter valores diferentes desta variável aqui em cima. Podemos ver que temos tamanhos diferentes. Você pode ver que a parte amarela aqui é muito pequena em comparação com a parte laranja que podemos ver, e você pode ver aqui que há um ponto laranja muito pequeno dentro do nosso círculo azul. 11. Exportando o design: Agora é o ponto em que você adiciona seus ajustes finais ao seu projeto. Porque a seguir, vamos exportar o projeto. A maneira como eu prefiro exportar um design tão simples é usar a Biblioteca PDF e o processamento. Para usar esta biblioteca, primeiro precisamos importá-la para um esboço usando esta sintaxe. Importar, processar, da biblioteca de processamento Eu quero obter a biblioteca PDF, e então eu vou usar o asterisco para obter todas as funções dentro dessa Biblioteca PDF. Basicamente, o asterisco está indicando que queremos expor todas as funcionalidades dentro dessa biblioteca ao nosso esboço para que possamos usá-lo. Caso contrário, você pode especificar quais funções exatamente você gostaria de importar dessa biblioteca. Vamos explorar quais funções podemos usar para exportar nossa obra de arte gerada final. Para exportar nosso design para um arquivo PDF, temos que começar a salvar ou exportar antes da função de fundo ou da função NoStroke, porque estas são funcionalidades que são adicionadas ao nosso design. Posso gravar usando a função BeginRecord. A função BeginRecord leva em um tipo, então eu vou dar-lhe um tipo PDF. Em seguida, o caminho onde você deseja que seus designs sejam salvos. Os arquivos serão exportados para a pasta de esboços. No entanto, você pode especificar uma pasta que você deseja adicionar dentro dessa pasta de esboço, e é isso que eu gosto de fazer para torná-la um pouco mais organizada. Eu gosto de chamá-lo de saída e, em seguida, eu vou dar o arquivo um nome. Eu digo, grades generativas, e a extensão. Agora, quando começarmos a gravação, teremos que terminar. Porque se começarmos a gravação e nunca terminarmos, nunca conseguirás o ficheiro. O arquivo começará a salvar, mas nunca terminará de salvar. Vou ter que adicioná-lo no final aqui. A função EndRecord é basicamente EndRecord com parênteses sem argumentos dentro dele. Agora, se eu rodar meu esboço, ele é salvo dentro da minha pasta de esboços. Vamos verificar a pasta de esboços. Eles podem encontrar onde você salvou seus arquivos se você esqueceu clicando com o botão direito do mouse no título aqui. Eu posso clicar na pasta e ele vai me levar para onde eu guardei. Se eu clicar duas vezes na abertura para abrir a pasta, então eu posso ver que eu tenho meu design aqui e salvo como PDF. Agora que temos nosso arquivo PDF, podemos abri-lo em qualquer software de imagem. Vou abri-lo e pré-visualizar porque estou no Mac, mas fique à vontade para escolher qualquer programa que abra um PDF e possa salvá-lo em um arquivo de imagem. Depois de abrir e visualizar, irei para arquivo, exportar e, em seguida, escolher PNG. Eu tenho a resolução em 300 pixels por polegada para obter uma imagem de alta qualidade. Você deve escolher onde você quer salvá-lo, ele é salvo. Agora, se voltarmos aqui e visualizarmos o arquivo, podemos ver que a imagem é de alta qualidade. Como em, não há pixelação ou há pixelação menor quando a escalamos. Isso é ótimo. Agora temos um arquivo PDF e um PNG. 12. Como editar o design no Adobe Illustrator: Em seguida, mostrarei como abrir isso no Illustrator para manipulá-lo ainda mais. Você pode clicar com o botão direito do mouse e escolher “Abrir com o Adobe Illustrator”. Agora temos o nosso ficheiro. Se eu clicar duas vezes no Grupo de clipes, você pode ver que eu posso mudar cada círculo. No entanto, abrir PDF no Illustrator pode ser um pouco limitante. Se você olhar no painel de amostras, você pode ver que não há amostras aqui. A maneira como eu faria isso é abrir outro arquivo e copiar e colar o que estiver aqui em outro arquivo do Adobe Illustrator da mesma proporção. Mas vou mostrar-lhe aqui como manipulá-lo ainda mais. Se eu clicar na “Imagem”, a imagem inteira está realmente se movendo porque está dentro de uma máscara de recorte. Se eu for para “Objeto” e, em seguida, eu vou para “Máscara de recorte”, e eu liberar a máscara ou usar a opção de comando de atalho 7, e agora eu posso selecionar os círculos individualmente. Você pode recolorir a imagem, você pode redimensionar suas formas como quiser. Foi assim que criei minha miniatura para esses projetos removendo a parte do meio e adicionando texto a ela. Então é basicamente assim que você o manipula no Adobe Illustrator. 13. Seu projeto: Para sua tarefa, você criará uma autêntica obra de arte generativa baseada em grade. Você pode ir acima e além com o seu projeto. No entanto, o mais importante, você precisará de algum tipo de randomização em seu experimento. Aqui estão três exemplos para mostrar várias maneiras de implementar a função aleatória. Para o primeiro exemplo, criei retângulos, cada um abrangendo a largura e a altura de uma célula na grade. Então eu aleatorizei as cores desses retângulos para obter esse resultado. O segundo exemplo empregou a rotação para alguns dos quadrados desenhados na tela, que é um pouco mais avançado, vez que cria uma nova matriz para cada célula na grade e, em seguida, gira em 45 graus ou um quarto de Pi. Eu também adicionei vários pesos de traço para alguns dos quadrados e aleatorizei as cores de cada forma. Por último, mas não menos importante, criei círculos do mesmo tamanho com pesos e cores mistos para criar esse design. Se você referenciar as primitivas 2D na seção de forma na página de documentação, você deve ser capaz de utilizar algumas delas em seu projeto.