Padrões Truchet: faça seu primeiro código no Illustrator para gerar mosaicos com facilidade

1. Introdução: Bem-vindo a esta aula. Estou tão animada para mergulhar no mundo dos padrões de Truchet com você. Eu sou [inaudível] artista generativo, e designer de padrões de superfície, com quase 20 anos de experiência em escrever código, e eu sou sua líder de torcida nesta classe. Os padrões de truchet são padrões que parecem muito complexos e são infinitamente vários, mas cada um esconde um segredo muito simples, um azulejo. Quando você toma um verdadeiro azulejo Truchet, girado aleatoriamente e repetido por todo o lado, você obtém padrão Truchet. Nesta aula vamos discutir o que são as telhas Truchet e como elas funcionam. Vamos aprender a construir alguns mosaicos clássicos Truchet no Adobe Illustrator e, finalmente, a parte divertida, vamos escrever nosso próprio script simples para fazer um padrão Truchet aleatório, em segundos a partir de uma telha quadrada. Agora, não surte e corra na outra direção. Sei que escrever um roteiro parece assustador, mas eu cuido de você. Se você conseguir superar seu medo e fazer isso comigo, você ganhará um passo de confiança para codificar em geral e escrever scripts em ilustrador. Você ganhará um apreço pelos azulejos Truchet e pelas regras simples que os tornam. Você vai ganhar as ferramentas, para fazer infinitamente vários padrões, e você vai fazer padrões reais que você pode adicionar ao seu portfólio. Eu não espero que você já tenha escrito um código ou um script antes desta aula. Essa classe é para usuários intermediários, avançados do Adobe Illustrator ou iniciantes aventureiros. É para quem pensou que um dia gostaria de tentar escrever um roteiro ilustrador, mas não sabia por onde começar. É para aqueles que se perguntam quão complicados padrões de aparência como estes são feitos. É para designers de padrões que querem uma habilidade nova e única sob seu cinto e, finalmente, é também para o nerd no coração, como eu. Você não precisa de nada para começar, exceto o Adobe Illustrator e a vontade de experimentar algo novo e incrível. Você ainda está comigo? Vamos fazer isto. 2. Antes de começar: Nas minhas aulas mais recentes, comecei a tomar alguns minutos no início da minha aula para tentar aliviar a ansiedade que os novos alunos têm em relação à escrita de código. Se você já passou por várias das minhas aulas, perdoe minha divagação, e vá em frente e pule para o próximo vídeo. Por outro lado, se você já escreveu um código antes e chegou aqui comigo, então bem-vindo, estou feliz em vê-lo aqui. É meu objetivo ajudar as pessoas a dar os primeiros passos para escrever código. Eu sei que para algumas pessoas, a parte mais assustadora sobre escrever código é encontrar a vontade de tentar e até acreditar que eles podem fazê-lo. Estou aqui para dizer que você consegue e vai ser divertido, acredite. Também quero dizer que, às vezes durante esta aula, você pode sentir que o que estou dizendo está passando por cima da sua cabeça, se isso acontecer, está tudo bem, não se preocupe. Basta continuar se conectando e você está aprendendo mesmo se você acha que está perdido. Mesmo que tudo que você entenda é pegar o que eu digitar, então isso será uma grande vitória, porque se você simplesmente digitar o que eu digitar e executá-lo e funcionar, você acabou de escrever código e executá-lo e isso é um grande negócio. Por outro lado, se você entende alguma coisa que eu digo em cima disso, então, uau, você aprendeu habilidades inestimáveis e você está dando grandes trancos e barrancos para entender código. De qualquer forma, estou orgulhoso de você por ficar comigo nesta divagação sobre código até agora. Isso me diz que você tem isso. 3. Quais são padrões de Truchet ?: Primeiro vamos tentar entender exatamente o que nossos padrões de truchet. Os padrões de truchet são nomeados em homenagem a Sebastian Truchet, que primeiro descreveu esses padrões em 1704. Desde então, muitas pessoas acharam esses padrões realmente fascinantes e trabalharam muito mais com eles até que eles realmente se tornassem um grampo da arte generativa. Praticamente qualquer um que interprete uma arte generativa em algum momento ou outro provavelmente faz um padrão de truchet porque eles são tão legais. Se você fez uma busca rápida no Google de padrões de truchet como este eu fiz aqui. Você notará rapidamente que os padrões de truchet são, de fato, o domínio dos codificadores. A maneira como você pode dizer isso é porque tudo é preto e branco. Meus amigos estilistas, é hora de mudar isso. Não há razão para que os designers não devam fazer esses padrões. Eles não são tão complicados, na verdade, quando você sabe como assim, vamos descobrir como eles funcionam. Eu tenho aqui um pedacinho de um padrão de truchet muito famoso que você provavelmente já viu. Você pode não ter percebido que este é um padrão de truchet. Claro, na verdade você pode nem dizer agora saber o que é um padrão truchet. Deixe-me explicar para você. Estes padrões são feitos de um monte de pequenos azulejos que são todos exatamente iguais. Parece difícil de acreditar agora, mas é verdade. Você olha para essas linhas que se perguntam através da tela e você acha que elas estão todas alinhadas. Bem, na verdade é um monte de ladrilhos quadrados um ao lado do outro. É assim que o azulejo se parece. Cada pequeno quadrado desta coisa é feito do mesmo azulejo ou ao mesmo tempo girado 90 graus você vê. O que isso significa é que para fazer um padrão truchet, tudo o que temos que fazer é projetar um pequeno bloco quadrado e então girá-lo e jogá-lo, integrar-se aleatoriamente na tela. Ótimo, você pode pensar, mas como você desenha uma telha que faz um padrão legal como esse? Bem, é disso que se trata esta aula. As coisas importantes a lembrar deste vídeo, são que os padrões de truchet são muito mais simples do que parecem. Eles são compostos de telhas quadradas dispostas em uma grade e giradas aleatoriamente em múltiplos de 90 graus. Os próprios azulejos são especialmente projetados para se esconder para que não pareça ser feito de azulejos. O próximo vídeo vamos falar sobre telhas truchet si e como eles são colocados juntos. 4. O que faz uma boa telha de Truchet: Agora que entendemos o que é um padrão de truchet, vamos tomar um minuto para falar sobre as próprias telhas truchet. Do que é feito um truchet telhas? Ou como foi montada? Vou revisar isso com mais detalhes, mas brevemente. Os padrões de truchet são feitos de telhas quadradas que são rotativamente assimétricas. Eles se conectaram de maneiras interessantes. Então, é claro, você pega essas peças e as gira aleatoriamente e as coloca em uma grade para obter um padrão de truchet. O que tudo isso significa? Não se preocupe, vamos falar sobre isso. Vamos discutir isso agora mesmo. Em primeiro lugar, obviamente, telhas truchet são quadradas nesta classe. Eles podem tecnicamente ser triângulos ou hexágonos, mas nesta classe, todos os azulejos que vamos fazer com nossos quadrados perfeitos. Sempre certifique-se de fazer quadrados perfeitos quando você tenta fazer esses azulejos. Eles também são rotacionalmente assimétricos. Tudo o que significa é que se você pegar o azulejo e girá-lo 90 graus ou 180 graus ou 270 graus, ele parece diferente do original. Se você olhar para os meus exemplos de peças à esquerda, se você vir o primeiro bloco em cada linha, ele foi girado 90 graus e 180 graus e 270 graus nas peças restantes, e você vê coisas diferentes. Mas se olharem para os meus exemplos à direita, não importa quantas vezes os rode. Eles sempre parecem iguais. Os exemplos à esquerda fazem boas peças de truchet e os exemplos à direita não. Outra coisa importante sobre as telhas truchet é que queremos que elas não apareçam mais. Uma vez que você colou o padrão juntos, você não quer ver que ele é feito de um monte de telhas quadradas. Para fazer este trabalho, os azulejos foram projetados de uma maneira muito especial para que eles se encaixem bem com si mesmos. Se você notar no exemplo à esquerda, já mostramos esse padrão, mas vejamos novamente. Uma vez que o padrão é colocado junto, você não vê mais as peças. Os azulejos foram projetados de tal forma que quando eles são colocados juntos, você não pode vê-los mais. Versos que a cauda à direita não foi projetada para ser uma telha truchet, e por isso não se conecta bem consigo mesma e não faz um padrão agradável. Não se preocupe sobre como fazer esses azulejos você mesmo neste momento. Nesta aula, vamos apenas construir os azulejos clássicos. Eu poderia, no futuro, fazer uma aula para ensiná-lo a projetar seus próprios azulejos de truchet. Mas por enquanto, você não precisa se preocupar muito com isso porque eu vou te mostrar exatamente como colocar essas peças juntas, as clássicas. Na verdade, é isso. Se você tem um azulejo que segue essas regras, que é perfeitamente quadrado, é rotativamente assimétrico e se encaixa bem consigo mesmo, como os azulejos iam fazer nesta classe, é tudo que você precisa. Você pode então girá-los aleatoriamente em múltiplos de 90 graus e colocá-los em uma grade e você terá um padrão muito legal. O guião que vamos escrever nesta turma fará isso por nós. partir deste vídeo, as coisas importantes a lembrar são que os padrões de truchet são padrões compostos por telhas quadradas que são rotacionalmente assimétricas e se conectam consigo mesmos de maneiras interessantes. Em seguida, as telhas são giradas aleatoriamente e colocadas em uma grade. No próximo vídeo, vamos direto para o Illustrator e começar a criar nosso primeiro bloco simples. 5. Primeira telha: Vamos projetar nosso primeiro azulejo. Este vai ser muito, muito simples. Vou fazer um novo documento, não me importo com o tamanho ou qualquer uma dessas coisas, basta clicar em Criar. Agora, é claro, precisamos começar com um quadrado, então você pode usar a ferramenta de retângulo aqui na barra de ferramentas ou apenas pressionar M no teclado, e se você pressionar Shift, você pode arrastar um quadrado perfeito. Novamente, o tamanho não importa, qualquer quadrado serve. Agora, não lhe dê um golpe, mas dê-lhe uma boa cor de preenchimento. Agora, vamos desenhar um triângulo acima da metade disso, então se você pressionar P no teclado, você terá a ferramenta Caneta e você pode clicar no canto superior esquerdo, e então, no canto superior direito, no canto inferior direito e, em seguida, voltar direto para o canto superior esquerdo. Isso fez um triângulo que agora você pode preencher com uma cor diferente, e esse é o nosso primeiro azulejo. Se você arrastar sobre ambos e pressionar Command G ou Control G no teclado, poderá agrupá-los e o primeiro bloco será concluído. Salve este arquivo em algum lugar, e então, vamos continuar e começar a escrever um código simples. 6. Script: cópia e movimento: Agora que temos nosso primeiro bloco pronto, é hora de começar a escrever algum código, que é completamente a parte divertida, acredite em mim, é realmente. Vamos fazer isto. Espere um segundo, o que é script e o que é código? São duas palavras que significam a mesma coisa. São instruções que você digita para que o computador siga. Qual é o nosso objetivo que precisamos alcançar exatamente com o código? Vamos deixar isso claro primeiro. Nós temos o nosso bloco e tudo o que este código vai fazer é copiar em uma grade como esta em linhas e em colunas, e então ele vai girar aleatoriamente estes. Poderíamos tecnicamente fazer isso à mão também. Mas por quê? Por que você faria isso à mão quando poderia fazer isso por código? É assim que penso o tempo todo. Se o código pode fazer isso, vamos fazer o código fazê-lo, porque é muito mais rápido e pode fazer aleatoriedade muito melhor do que nós. Olhe para mim, estou tentando fazer aleatoriedade aqui e nada pode sair aleatoriamente. Continua sendo não aleatório. Nós vamos apenas escrever um script simples que vai girar aleatoriamente essas coisas 90 graus e colocá-las em uma grade. Agora você precisa abrir um editor de texto e eu literalmente quero dizer o editor de texto mais simples que você pode encontrar. Então, se você está no Windows, abra o Bloco de Notas e eu não estou brincando, abra o Bloco de Notas e, se você estiver em um Mac, abra o TextEdit. Nunca ouvi falar do Bloco de Notas ou TextEdit antes, tudo bem. Eles são apenas o editor de texto mais simples que vem com o seu computador. Se você não sabe onde encontrá-los, basta procurá-los em seu computador. Na verdade, tem que ser esses editores de texto simples. Word não funcionará, o Pages não funcionará, tudo o que adicionar formatação não funcionará. Então, mesmo no TextEdit aqui, vamos subir para formatar e dizer Make Plain Text. No Bloco de Notas no Windows, você já deve estar bem. Não deve haver formatação de rich text acontecendo. Mas no TextEdit você precisa fazer isso. Texto simples significa apenas que é apenas texto sem formatação e rich text significa texto formatado. Quando você tem rich text, ele tem código oculto que você não pode ver atrás dele que define a formatação. Para escrever código, precisamos de texto simples. Assim que você receber um Bloco de Notas ou TextEdit e se você estiver no TextEdit, você o alterou para texto simples, então você precisa salvar seu arquivo imediatamente. Vou chamar o meu verdadeiro script de padrão de forma. Agora, o pouco de magia, o pequeno pouco de magia que vai fazer isso ser script em vez de apenas um arquivo de texto, é que nós vamos para type.js no final. Esses três pequenos caracteres dizem ao computador que isso é código, código JavaScript e não apenas texto.. js e.jsx são ambas extensões de arquivo que significam que este arquivo é um arquivo JavaScript .. jsx significa realmente um arquivo JavaScript especificamente para Programas da Adobe. O Illustrator pode usar qualquer um. Eu serei using.js, mas você poderia usar.jsx e qualquer um funciona bem. Com isso, poderemos executá-lo como um script no Illustrator. É tão simples assim. Só temos que ler o código certo agora, é claro. Vamos começar isso simplesmente, vamos ler um par de linhas e experimentá-lo e depois ajustar à medida que avançamos. É assim que eu sempre trabalho e como provavelmente a maioria dos programadores normalmente funcionam. Nós apenas, pouco a pouco, construímos. Primeiro precisamos ser capazes de acessar nosso objeto em código. O que vamos fazer é sempre selecionar nosso bloco e, em seguida, executar nosso script e o script irá verificar o que está selecionado e, em seguida, fazer coisas com ele. Como podemos obter o nosso objeto selecionado em código? Bem, vamos fazer um objeto de código variável e vamos defini-lo igual ao app.ActiveDocument.Selection [0]. O que isso significa? Duas palavras que você vai me ouvir jogando fora muito são a palavra variável e a palavra função. Variável, você pode pensar nisso como uma caixa. É um lugar para guardar um valor. Eles têm nomes como objeto ou i, e eles têm valores como 10 ou um bloco no Illustrator. Além disso, uma função é um comando que você dá ao computador para fazer algo como girar este objeto ou mover este objeto. Tudo bem se isso ainda não está claro, vamos ter muitos exemplos. Objeto é apenas um nome que eu inventei agora que vai conter o que eu coloquei nele. Poderia ter sido J, poderia ter sido qualquer coisa. Eu só estou chamando isso de objeto e eu estou recebendo a seleção à direita aqui. Como é que estou a fazer isso? App é Illustrator, ActiveDocument é o documento que eu tenho aberto aqui, este bloco é documento, seleção é uma lista de todos os itens selecionados porque você pode ter mais de um, e, em seguida, nos colchetes eu coloco zero, que significa o primeiro objeto selecionado. Presumo aqui que só haverá uma coisa selecionada. Se você tiver mais de uma coisa selecionada e executar esse script, quem sabe o que acontecerá. Após esta linha, agora podemos usar objeto em nosso código e fazer coisas para o nosso objeto. Em particular, o que eu gostaria de fazer é copiá-lo. Eu gostaria de fazer uma duplicata. Vou fazer outra variável chamada novo objeto e defini-lo igual a object.duplicate. Object.Duplicate literalmente apenas faz uma cópia do objeto e , em seguida, agora podemos nos referir a essa cópia como novo objeto em nosso código. Agora, essas duas linhas são realmente suficientes para que eu possa executar este script agora e ver algo acontecer. Eu salvei e agora vou dizer Arquivo, Scripts, Outro Script, e vou encontrar meu script que acabei de salvar e clicar em “Abrir”. Agora, parece que não aconteceu nada, mas veja isso. Há dois deles agora. Então vamos ajustar nosso script para fazê-lo mover o novo objeto para que possamos realmente vê-lo. Agora, depois de duplicá-lo, digamos novo objeto.traduzir e o que traduzir significa é mover. É tão simples quanto isso e você precisa dar a ele o quão longe deve se mover horizontalmente e quão longe deve se mover verticalmente. Bem, até onde queremos movê-lo horizontalmente? Na verdade, só a largura. Queremos movê-lo exatamente tão largo quanto ele é, não importa o quão largo ele é, eu não sei o quão largo ele é e eu quero ter que me importar quão largo ele é. Eu vou dizer que eu quero ir na direção horizontal, objeto.largura. Eu não quero me mover verticalmente, então na segunda opção aqui, vou colocar zero. Vamos tentar e ver se funcionou. Salvei meu script e vou selecionar meu objeto e executá-lo novamente. Arquivos, Scripts, Outro Script, selecione meu script e diga Abrir. Isso é perfeito. Se não funcionou exatamente como o meu para você, vá verificar seu código, certifique-se de que digitou tudo exatamente como eu fiz. Cada ponto-e-vírgula, cada letra maiúscula ou minúscula é importante. Algumas coisas para lembrar quando você estiver copiando código, certifique-se de copiá-lo exatamente. Não adicione espaços onde eu não digitei nenhum e não exclua espaços onde os deixei. Não faça nada que fosse maiúsculo ou qualquer coisa que fosse maiúscula minúscula. Não se esqueça de ponto-e-vírgula ou outros sinais de pontuação. Apenas seja muito meticuloso e certifique-se obter tudo exatamente como eu fiz e você vai ficar bem. Se você não obteve, verifique, verifique se tem a mesma aparência e tente novamente. Se funcionou para você, ótimo trabalho. Você está bem no seu caminho para ser um ninja de codificação, e eu estou tão orgulhoso de você, e vamos continuar no próximo vídeo. As coisas importantes a serem lembradas desta lição são certificar-se de que você está usando um editor de texto sem formatação para escrever seu código. Quando você salva o arquivo as.js ou.jsx, você está dizendo ao computador que este é código JavaScript e ele pode executá-lo como tal. Para executar o script no Illustrator, vá Arquivo, Scripts , Outro Script e procure o script. Dentro do script, o que fizemos foi criar uma nova variável para se referir ao objeto selecionado. Usamos d.duplicate para fazer uma cópia, e usamos d.translate para mover o objeto. No próximo vídeo, vamos aprender a girar nossos azulejos e como fazer isso aleatoriamente. 7. Script: rotine Script:: Nesta lição, vamos ajustar nosso script para que nosso novo objeto seja girado em uma direção aleatória. No espírito de construir as coisas lentamente. Vamos começar girando 90 graus cada vez, e então vamos tentar aleatoriamente depois disso. Novo ponto de objeto girar 90, é tão simples quanto isso. Noventa por 90 graus. Vamos guardar isso e executá-lo. Selecione seus objetos, salve arquivo, scripts, outro script, pegue seu script, lá vai você. Foi girado 90 graus, como dissemos. Agora vamos fazer isso aleatório. Agora, o jeito que vou fazer isso pode parecer um pouco complicado. Deixe-me ir em frente e digitar a coisa toda primeiro, e então eu vou explicar para vocês pedaço por pedaço como isso funciona. Esqueci de mencionar o que estamos tentando fazer aqui é que queremos que nosso objeto gire por qualquer múltiplo aleatório de 90. Pode ser 90, ou 180, ou 270, ou 360. 360 sendo o mesmo que zero, é claro. Como funciona este código? No meio aqui, a parte que diz matemático ponto aleatório. O que isso faz é escolher um número aleatório em qualquer lugar entre zero e um, não incluindo um. Este será um número decimal, algo como 0,37543, algo assim. Qualquer coisa entre zero e um. Agora, se você ver o ponto final aleatório, eu estou multiplicando vezes quatro. Agora o número estará entre zero e quatro, não incluindo quatro. Por exemplo, pode ser 3.265. Tudo bem? Tudo isso está incluído nesta função chamada Math dot floor, e Math dot floor apenas corta o ponto decimal fora de qualquer número. Se fosse 3,8, agora são três. Se fosse 2.1, agora são dois. Não arredonda para cima ou para baixo. Só corta os pontos decimais. Finalmente, no final aqui, estou multiplicando vezes 90. É aí que vou conseguir os meus ângulos. Se Math dot floor acabou com zero, eu vou pegar o ângulo zero. Se Math dot floor tem um, eu vou pegar o ângulo 90. Se Math Dot andar tem dois, eu pego 180. Se Math Dot andar tem três, eu vou conseguir 270. Dessa forma, estou recebendo um múltiplo aleatório de 90 como meu ângulo. Agora, se essa matemática ou essa explicação foi um pouco demais para você, eu realmente sinto muito. Está tudo bem. Basta digitar da maneira exata que eu digitei e entender que isso está nos dando 0, 90, 180 ou 270 para que possamos girar por isso, aleatoriamente. Legal? Tudo bem, então vamos salvá-lo e executar o script novamente. Fizemo-lo girar numa direcção diferente do que antes e nada explodiu. Não tivemos nenhum erro. Estamos indo bem. Estamos em um rolo. Eu só vou executar o meu mais uma vez muito rápido. Você pode ver que ele vai girar em uma direção diferente novamente, e lá vai você. Neste vídeo, aprendemos que o ponto matemático aleatório dá um número entre zero e um, um número decimal, não incluindo um. Se multiplicarmos isso vezes quatro, teremos um número entre zero e quatro. Se usarmos o chão de ponto Math nesse número, ele cortará todas as casas decimais. Finalmente, se multiplicarmos o resultado dessa vez 90, obtemos os múltiplos de 90, 0, 90, 180 ou 270. Finalmente, se usarmos ponto girar em nosso novo objeto, vamos girar o objeto por esse número de graus. No próximo vídeo, vamos começar a construir a nota. 8. Script: uma linha completa de telhas: Neste vídeo, vamos gerar aleatoriamente uma linha inteira do nosso padrão. Vou fazer o meu título um pouco menor só para me dar mais espaço. Então vamos abrir nosso backup de código. Agora, para fazer uma fileira de peças, o que precisamos fazer é essas três linhas onde duplicamos, movemos e giramos. Precisamos fazer isso um monte de vezes. A primeira linha, só precisamos fazer uma vez onde obtemos nosso objeto selecionado, mas o resto, queremos fazê-lo um monte de vezes. Agora, há uma maneira no código que podemos fazer o mesmo código várias vezes. Vamos chamar um loop for. Aqui mais uma vez, eu vou digitar a coisa toda e então eu vou explicar para você como ele funciona. Fique comigo por um segundo. Tudo isso significa que queremos fazer o que está dentro das chaves aqui, queremos fazê-lo 10 vezes. A maneira como isso funciona é que dentro dos parênteses aqui, há três coisas que você precisa dizer. Primeiro, você dá uma variável. Eu estou chamando o meu i, e eu estou começando em 0. Então aqui à direita onde diz i++, o que isso significa é que cada vez que este código no meio é executado, eu vai ser maior por 1. Primeiro é 0, e depois este é 1, e depois é 2, e assim por diante. Agora, estou aqui no meio onde diz que tenho menos de 10 anos. Isso significa que o código deve continuar repetindo enquanto eu for menor que 10, assim que eu for igual a dez, ele vai parar e continuar indo o que quer que esteja depois do loop. Agora, há mais uma coisa que precisamos mudar. Se eu fosse executar isso agora, eu colocaria todos os meus novos objetos bem em cima um do outro, à direita do meu primeiro bloco aqui. Na verdade, deixe-me fazer isso para mostrar o que quero dizer. Eu tenho 10 peças e eles são girados aleatoriamente e tudo mais, mas eles estão todos sentados um em cima do outro aqui. Preciso que cada um se mova um pouco mais longe do que o último. Bem aqui dentro de trânsito, onde dissemos objeto.largura, é onde estávamos dizendo o quão longe deve se mover. Precisamos que cada objeto se mova por largura vezes o número de objeto que ele é, e qual o número que ele é, é i.O primeiro não vai se mover em tudo. O segundo se moverá pela largura vezes 1. O terceiro por largura vezes 2, etc Vamos salvar e executar essa versão e ver o que acontece. Legal. Isso é muito próximo do que eu quero. A única coisa é que este primeiro acabou em cima do meu primeiro azulejo. Podemos ajustar o código um pouco. Em vez de apenas multiplicar vezes i, vamos multiplicar vezes i+1. Dessa forma, o primeiro objeto será movido pela largura. O segundo objeto por 2 vezes a largura. O terceiro objeto vezes 3 vezes largura etc Eu só quero acabar com um em cima do meu tempo original. Vamos tentar de novo. Ótima. Isso é incrível. Não tenho um em cima do meu azulejo original. Legal. Nós geramos aleatoriamente uma linha inteira do nosso padrão. Tudo o que temos que fazer agora é fazer um monte de filas e acabaremos com nosso roteiro. Neste vídeo, aprendemos que podemos usar um loop for para fazer algo um monte de vezes em código. I igual 0 significa que estamos fazendo uma nova variável que vai começar em 0, e será o número que contamos em nosso loop com, i menos de 10 diz-lhe para continuar enquanto i é menor que 10, i++ faz i maior que 1 cada vez que o execuções de loop. Você pode usar i dentro do loop para fazer as coisas de forma diferente cada vez que é executado. Assim como fizemos quando multiplicamos a largura vezes i para fazer com que cada objeto se mova um pouco mais longe do que o último. No próximo vídeo, vamos terminar nosso roteiro e seremos capazes de começar a fazer toneladas de incríveis padrões de forma verdadeira. 9. Script: padrão completo: Tudo bem, pessoal. Estamos quase terminando nosso roteiro. Último pouco, vamos fazer um monte de filas, e então teremos um padrão completo. Agora, no último vídeo, fizemos este loop para fazer uma linha completa. Vou colocar uma pequena fila aqui em cima. Quando eu coloco essas duas barras na frente dele, este é um comentário, e eu posso digitar o que eu quiser eo código irá ignorá-lo. Um comentário é basicamente uma nota para si mesmo que o Illustrator ignorará, e é qualquer coisa que você digita após as duas barras. Você pode colocar absolutamente tudo o que quiser depois dessas duas barras que o ajudam a pensar ou a lembrar o que está acontecendo, Illustrator irá ignorá-lo completamente. Esta parte aqui faz uma fila. Agora, eu quero fazer uma fila um monte de vezes, e nós aprendemos uma maneira de fazer algo um monte de vezes que foi com um loop for. Nós vamos fazer outro para loop em torno do nosso primeiro para loop. Se você notar, neste loop para, eu estou usando j em vez de i. eu poderia estar usando qualquer nome de variável aqui. Só estou escolhendo J desta vez. O importante é que não sou eu de novo. Precisa ser uma variável diferente, então eu escolhi usar j. Se você notar, eu fiz parecer exatamente como a primeira. Eu tenho o para com os parênteses e as chaves em torno das coisas que eu quero fazer um monte de vezes. Espera, o que se passa com todas estas tretas de I e J? O que são I e J? Eles são apenas nomes curtos muito simples para as variáveis que estamos usando para contar em um loop for. Você poderia tecnicamente tê-los chamado qualquer coisa como Bob ou pizza, mas quase todos os programadores usam i, e j, e k, e nomes realmente curtos que são fáceis de digitar. Além disso, é apenas uma boa prática usar a mesma coisa toda vez que você faz um loop, então é muito fácil lembrar que, “Oh sim, eu é a coisa que eu estou usando para contar no meu loop e não outra coisa.” Isso para loop significa fazer o material dentro dele 10 vezes, então faça uma fileira 10 vezes. Agora, nós realmente queremos que nossas linhas se movam verticalmente. Antes, eles não estavam se movendo, mas queremos que cada linha seja um pouco mais para baixo do que a última, então vamos movê-lo pela altura do objeto vezes j mais 1, j sendo o contador da linha em que estamos. É o contador para aquele loop externo. Vamos guardar isso e tentar. Selecione o nosso bloco e salvar arquivos script, então este script, script final. De novo, e uau. Eu não previ isso chegando. Eu não esperava que ele subisse. Tudo lá o suficiente, eu acho que no Illustrator, números mais altos significam para cima. Vá descobrir. Podemos ajustar o nosso escopo um pouco para fazê-lo descer. Agora, se colocarmos menos na frente de quão longe estamos nos movendo verticalmente, ele se moverá na outra direção, então isso deve resolver nosso problema. Vamos tentar. Temos um padrão completo de forma verdadeira com um clique. O que geramos aqui é, na verdade, um padrão completo sem costura. Se eu selecionar toda essa parte gerada aqui e arrastá-la para cima sob as amostras, eu poderia usá-lo para preencher um objeto. Estou apenas fazendo um novo círculo muito grande e clicando neste relógio que eu arrastei até aqui, e ele o preenche perfeitamente. Ótimo trabalho se você fez seu roteiro e ele está funcionando. Agora, precisamos seguir em frente para jogar com diferentes peças. Todas as formas verdadeiras foram construídas exatamente da mesma maneira com o mesmo script, então nós realmente não precisamos ajustar nosso script mais. Podemos brincar com diferentes azulejos e ver que tipo de padrões eles fazem. Neste vídeo, aprendemos que podemos fazer outro loop em torno do primeiro loop para fazer um monte de linhas, e o importante a lembrar é usar um nome de variável diferente. Usamos j no segundo loop, e podemos alterar nosso valor y usando a altura do objeto vezes j. Além disso, eu não mostrei isso, mas você pode alterar o número de vezes que os loops são executados. Tivemos eu indo para menos de 10 e J indo para menos de 10. Você pode mudar 10 para algum outro número e fazer um padrão maior ou menor. Como seu instrutor, declaro que é seu dever de casa. Vá tentar mudar esses dois números para fazer um dois por dois, e que tal um padrão de 12 por 12? Deve ser simples o suficiente. Vejo você no próximo vídeo. 10. Telhas de Truchet clássico: Neste vídeo, vou orientá-los sobre como construir as telhas Truchet mais famosas e comuns. Como sempre, vamos começar com um quadrado perfeito, para que você possa obter a ferramenta de retângulo pressionando M no teclado e, em seguida, mantenha pressionada a tecla Shift, enquanto arrasta um quadrado perfeito. Dê uma cor de preenchimento, mas sem cor de traçado. Agora pressione L no teclado para obter a ferramenta de elipse e o que precisamos fazer é desenhar um círculo do mesmo tamanho que o nosso quadrado. Então eu espero até que ele clique no canto e mantenha pressionada a tecla Shift, e então clique em outro canto aqui embaixo também. Agora, para o círculo, nós realmente não queremos preenchimento, mas queremos uma cor de traçado. Nós vamos até fazer aquele derrame com o largo. Fiz o meu cem pontos. Agora eu vou pegar o centro do círculo e puxá-lo para cima, para encaixar no canto superior direito exato do meu quadrado. Em seguida, mantenho a tecla Opção pressionada, modo que faça uma cópia, e arrastarei a cópia para baixo até o canto inferior esquerdo. Agora eu vou realmente copiar o que eu fiz até agora, que eu possa usá-lo novamente para outro design. Vou selecionar tudo isso e agrupá-lo com o Command G e, em seguida, clique na opção para fazer uma cópia, e arrastá-lo para fora do caminho. Então eu vou trancá-lo e escondê-lo para que eu possa trabalhar com o que eu estou trabalhando. Agora eu preciso converter esses traços e os círculos em preenchimentos. A maneira como você faz isso é selecionar os círculos e, em seguida, ir Opção, Expandir e selecionar Expandir traçado. Isso agora converteu meus traços em preenchimentos. Vou selecionar tudo e pressionar Shift M para obter a ferramenta de construtor de formas. Em seguida, mantenho a tecla Alt pressionada enquanto seleciono essas partes do círculo que estão fora do quadrado para excluí-las. Finalmente, se eu selecionar tudo e pressionar Command G e agrupá-lo, este bloco estará pronto. Se eu encolher, posso rodar meu script nele. Vamos construir outro. Vamos abrir aquela obra de arte que copiamos e escondemos antes. Vamos desagrupá-lo, Comando Shift G para desagrupar. Agora podemos selecionar esses círculos e, em vez de colocar um golpe, vamos tirar o golpe e colocar um preenchimento sobre eles. Em seguida, podemos selecionar tudo isso novamente, e pressione Shift M para o construtor de formas e excluir as partes do círculo que estão fora. Aqui temos outro azulejo que podemos tentar. Selecione tudo e pressione Comando G para agrupá-lo. Torná-lo muito menor, e tente seu script neste. Vou agrupar tudo isto e encolhê-lo e movê-lo para o lado, eu possa ver o que eu fiz até agora. Enquanto estou nisso, vou refazer o primeiro padrão novamente, para que eu possa fazer o mesmo. Vou agrupá-lo, torná-lo menor e movê-lo para o lado. Vamos tentar outro. Vou fazer outro quadrado. Agora, desta vez, vou fazer um círculo que é duas vezes maior que o meu quadrado. Eu vou começar em um canto, e eu vou segurar ambos Alt e Shift e arrastar o círculo para fora, até que minha massa atinja o canto oposto completo. Vou preencher este círculo com uma cor diferente e selecionar o círculo e um quadrado e pressionar Shift M no teclado, e enquanto eu mantenho pressionado Alt, clique nesta parte do círculo que está fora do quadrado, basta re- colorir mina muito rápido, e então eu vou selecionar tudo e aperte Command G, e agora temos outra telha para tentar. Torná-lo menor e vá executar seu script. Adoro este pessoalmente, acho que parece muito legal. O último azulejo que vou mostrar a vocês como fazer é, na verdade, apenas uma linha. Eu sei que eu disse que eles estão todos em quadrados e isso tecnicamente é em um quadrado, nós não estamos apenas desenhando o quadrado. Se você for até a ferramenta de linha e mantenha pressionada a tecla Shift enquanto arrasta a linha em uma direção diagonal, ela a manterá em 45 graus. Você vai querer dar a esta linha um golpe e um bastante grosso, para que você possa vê-lo muito bem. Em seguida, dê-lhe tampa redonda e canto e, em seguida, encolhê-lo um pouco, em seguida, com apenas essa linha selecionada, vá executar seu script. Com isso, espero que você esteja começando a ver o reino da incrível possibilidade que pode ser realizada com este roteiro. É definitivamente a sua vez de ir brincar agora. Neste vídeo, vimos como juntar quatro peças clássicas Truchet no Illustrator. Na verdade, estamos chegando perto de ser feito. Eu tenho mais algumas coisas para mostrar, mas você também pode ir em frente e começar a jogar sozinho, para ver o que você pode vir acima com. 11. Mescle o padrão: Neste vídeo, nós vamos aprender como mesclar todos os blocos separados do seu padrão em um padrão. Agora, nosso script, é claro, produz todos esses quadrados separados e mesmo que nosso padrão pareça que tudo se encaixa, como essas linhas azuis parecem que todas combinam tecnicamente eles são objetos separados. Gostaríamos de poder fundi-los juntos. Agora, do jeito que temos esse roteiro escrito agora, é realmente muito difícil fechar essas linhas. Quero dizer, claro que poderia ser feito, mas na verdade se fizermos um pequeno ajuste ao nosso roteiro, vai tornar muito fácil fazer isso. Deixe-me mostrar primeiro o que aconteceria se eu tentasse mesclar isso da maneira que eu gosto de fazer sem ajustar meu script. O que eu gosto de fazer é desagrupar todos esses blocos, então eu vou selecioná-los todos e apertar Command Shift G e, em seguida, eu vou selecionar apenas esta cor de fundo azul claro e pressionar Selecionar, Mesmo, Cor de preenchimento. Então o que isso fez foi selecionado toda a parte azul claro, o fundo, mas não o primeiro plano e eu não quero selecionar este bloco aqui. Agora, se eu for para o Pathfinder e apertar Mesclar, mesclar é suposto colar tudo o que está ao lado um do outro que é da mesma cor juntos. Mas olhe para estas linhas em branco que deixou de fora. Não apanhou tudo o que devia estar a sobrepor-se e não sei porquê e é muito irritante, mas está tudo bem, podemos resolver isto. Além disso, a mesma coisa vai acontecer se eu selecionar todas as linhas na frente e tentar apertar mesclar agora, ele simplesmente não faria uma coisa muito boa. Para que possamos corrigir isso alterando nosso roteiro um pouco. O que vamos fazer é fazer com que todas as peças separadas se sobreponham por apenas um ponto. Será pequeno o suficiente para não notarmos isso com o nosso olho, mas grande o suficiente para que o Illustrator possa ver que essas coisas se sobrepõem e, portanto, pode fundi-las. Agora observe isso com cuidado porque é um pouco sutil. Eu estou colocando um parêntese esquerdo antes object.width e, em seguida, eu vou colocar um parênteses direita depois dele e dentro dos parênteses eu vou alterá-lo para object.width menos uma mesma coisa para object.height. Estou colocando a coisa toda entre parênteses e colocando menos um com ele. É difícil explicar com palavras, então apenas certifique-se de olhar para o código com muito cuidado para todos os parênteses e tudo no lugar certo. Tudo o que eu fiz foi dito ao script quando ele move cada bloco em direção ao lugar, em vez de movê-lo pela largura e a altura vezes o que quer que seja, eu vou movê-lo pela largura menos uma vezes o que quer e a altura menos 1 vezes Que seja. Então isso acabará fazendo com que nossos azulejos sejam sobrepostos por um ponto que nos permitirá fundi-los facilmente. Então, cuidadosamente faça essas alterações seu script e vamos voltar e experimentá-lo em alguns blocos. Então vá em frente e execute sua versão modificada deste script em um bloco e se você selecionar todos os seus blocos agora e ampliar realmente perto dessas linhas. Se você aproximar o suficiente, você verá que eles estão sobrepostos por um ponto que é perfeito. Agora vamos fundir o padrão. Da maneira que fazemos isso com cuidado, vamos mover este bloco original para fora do caminho, selecionar tudo e desagrupá-lo com o Command Shift G e, em seguida, selecionar o plano de fundo e ir Selecionar, Mesmo, Cor de Preenchimento. Se você pressionar Shift e clicar na cor de preenchimento do bloco original, ele irá desmarcá-lo. Agora vá para o Pathfinder e pressione Merge e você verá que agora temos um bom fundo sólido. Se você pressionar Command Shift B, ele enviará todo o caminho para trás e se você abrir suas Camadas, você pode bloquear o plano de fundo agora. Enquanto eu estou nisso, eu vou trancar meus azulejos originais para eu não estragar tudo. Agora eu posso apertar o Comando 8 para selecionar tudo que não está bloqueado, que seria apenas minhas linhas no topo e agora se eu apertar Mesclar no Pathfinder naqueles, ele agora mesclou todas as linhas que devem ser conectadas a si mesmas. Agora ele fez um grupo, então se eu apenas desagrupá-lo agora Command Shift G, eu posso obter todas essas linhas separadas individualmente. Agora eu vou desfazer para colocá-los todos de volta onde eles vão e, finalmente, eu vou desbloquear minha camada de fundo e ele selecionar todas as linhas e o fundo juntos e agrupá-los e agora que é um bloco de padrão c mos que eu sou Orgulhoso de. Ele se conecta a si mesmo de uma forma que faz sentido. Neste vídeo, nós aprendemos como ajustar nosso script para que nossos blocos se sobreponham um pouco que possamos fundi-los juntos e a maneira de fazer isso é desagrupar tudo e selecionar cada cor, tudo cada cor individualmente e, em seguida, pressionando Mesclar no Pathfinder. No próximo vídeo, discutiremos os diferentes efeitos que você pode obter fazendo uma grande repetição versus uma pequena repetição. 12. Repetição grande vx: Neste vídeo, vou mostrar o efeito de usar uma repetição grande versus uma pequena repetição. O que eu quero dizer com uma grande ou uma pequena repetição é apenas o número de telhas Trisha que estão presas juntas. Neste exemplo aqui, como em todos eles que fizemos até agora, geramos 10 blocos de largura e 10 telhas de altura, e parece altamente aleatório. Dentro dessas 10 peças, você não vê nada se repetir. Como já mostrei antes, você pode pegar esse bloco de 10 por 10 e arrastá-lo para as amostras e preencher algum objeto com ele. Quando você faz isso, é difícil ver a repetição. O que é ótimo. Isso pode ser exatamente o que você quer, mas você tem outra opção que eu gostaria de lhe mostrar aqui. Se você pegar um número muito pequeno desses azulejos, por exemplo, estes dois por dois aqui, e fazer uma amostra deles e preencher outra forma com essa amostra, você pode notar um tipo muito menor e mais regular de padrão. Eu poderia ter gerado dois por dois, ou eu poderia gerar este grande 10 por 10 e então pegar pequenas seções fora dele assim. Estou pegando pequenas seções retangulares e arrastando-as para as amostras e enchendo as coisas com elas. Você vai notar que esses padrões são muito mais regulares, mas eles também são completamente infinitamente vários. Você poderia fazer tantos padrões diferentes apenas escolhendo diferentes seções pequenas de um padrão grande como este, ou gerando pequenas seções. Além disso, enquanto eu não vou mostrar a vocês como fazer isso nesta aula, não há nada impedindo você de pegar seu azulejo e colar amostras interessantes juntos à mão. Por exemplo, você pode pegar esse bloco e colocar dois deles ao lado do outro que pareçam uma certa maneira que você gosta e transformá-lo em uma amostra também. Você poderia fazer isso também. Mas nesta classe, estamos focando no que é gerado automaticamente pelo nosso script. Então brinque com isso, gere um padrão e vá pegar pequenas seções dele, seções retangulares, e arraste-as para aquelas amostras e preencha formas com elas e veja que tipo de padrões interessantes emergem. Não se esqueça, se o que você está procurando é algo que parece muito aleatório, você sempre pode gerar um grande 10 por 10 ou até mesmo maior, e usar isso como sua amostra também. Não vá muito grande. Qualquer coisa maior do que dizer, 15 por 15 ou 20 por 20, pode congelar seu computador, então não faça isso. Neste vídeo, aprendemos sobre o efeito de usar uma repetição grande, exemplo 20 por 20, versus uma pequena repetição, por exemplo, duas por três. Uma grande repetição parecerá muito aleatória e será difícil escolher a repetição, e então um pequeno padrão, será muito regular, mas também muito interessante. Ambos são interessantes e valiosos, então vá em frente e jogue com ambos. 13. Padrão de linha diagonal sem costura: Vamos voltar ao padrão de linha diagonal que eu mostrei como fazer alguns vídeos atrás para resolver um pequeno problema que você pode encontrar. Agora lembrem-se, eu mostrei muitas vezes até agora que vocês podem pegar qualquer um desses padrões gerados e simplesmente arrastá-lo para as amostras de padrões, e vocês terão um padrão perfeito, certo? Farei de novo bem rápido, caso não tenha se cansado de ver isso ainda. Vou arrastar uma forma e preenchê-la. Opa, não no acidente vascular cerebral. Preencha com o padrão, e você tem um lindo, padrão sem costura que você não pode ver as bordas, não é? Está bem. Agora este outro padrão que eu mostrei a você como fazer com a linha diagonal, você também pode fazer isso. Mas se você fizer isso, você verá algo um pouco engraçado acontecendo no padrão que preenche seu objeto. Então deixa-me mostrar-te. Se você selecionar todo esse padrão e arrastá-lo para as amostras de padrões, e eu vou apenas movê-lo para fora do caminho aqui, e fazer um círculo, e agora eu vou preenchê-lo com meu padrão, você vai notar ao longo das bordas do meu azulejo, as coisas não estão alinhadas como eu esperava. Você pode ver as bordas da telha porque os traços não estão se juntando na borda. Na verdade, vou diminuir um pouco este padrão para tornar isso ainda mais claro. Se você pressionar S para a ferramenta de escala e, em seguida, pressionar Tilde e Shift você pode arrastá-la também, e você pode ver as bordas dessa amostra. Parece pequenos quadrados. Certo, então a maneira de consertar isso, vou deletar tudo, exceto minha pequena linha aqui por um minuto. Para fazer isso funcionar, eu realmente preciso ter certeza de que esta linha é algum tamanho que eu sei o que é. Eu vou fazer o meu 50 por 50 porque eu preciso fazer apenas um pouquinho de matemática para saber o tamanho da minha amostra mais tarde. Então eu faço o meu 50 por 50, e então eu vou rodar meu script nesta linha novamente. Ok, então agora eu vou mover esta linha original para fora do caminho e selecionar tudo e arrastá-lo para as amostras de padrão e eu vou preencher um objeto com ele. Na verdade, eu vou agrupá-lo, tirá-lo do meu caminho, e agora eu vou preencher um objeto com o padrão, e eu ainda posso ver essas linhas. Mas agora, o que posso fazer, clique duas vezes nessa amostra e ela abrirá no Illustrator Pattern Maker. Agora que estamos aqui, se você olhar para as bordas deste azulejo aqui, você pode ver o que aconteceu, a razão pela qual estamos vendo essas linhas. O Illustrator escolheu a borda do traçado de nossa linha para ser a borda de nosso padrão e não esses endpoints. Se eu tivesse escolhido os endpoints, isso teria colocado perfeitamente em mosaico. Os pontos finais se alinhariam entre si na borda do bloco. Mas escolheu a borda do acidente vascular cerebral. Portanto, tudo o que precisamos fazer para tornar isso perfeito é ajustar o tamanho do nosso bloco para corresponder a esses pontos finais. Agora, vamos pensar sobre isso por um segundo. Nossa linha era de 50 por 50, e geramos 10 deles. Então, um bom primeiro palpite para um bom tamanho de azulejo seria 500 por 500. Então, se tentarmos isso, é mais perto, mas não está lá. A razão é, lembre-se de alguns vídeos atrás, nós realmente ajustamos nosso script para fazer nossos blocos se sobrepor em um ponto. Então nós fizemos nossa linha 50 por 50, mas depois que eles se sobrepõem, basicamente, é 49 por 49. Então 49 por 49 vezes 10 dessas coisas, e dez para baixo, isso significa 490 por 490. Então, se você ajustar aqui, o bloco para ser 490 por 490, agora você não pode mais ver essas linhas entre os quadrados. Agora posso fechar o Criador de Padrão pressionando Concluído no topo da Janela de Exibição aqui. O preenchimento em nossa forma será atualizado automaticamente e não vemos mais nossa linha. Você pode reduzir o zoom em seu padrão usando a ferramenta de escala e, em seguida, segurando Tilde e Shift e ver seu belo padrão diagonal repetindo perfeitamente. Neste vídeo, aprendemos que para tornar o padrão de linha diagonal perfeito, basta ajustar o tamanho da amostra de padrão para ficar um pouco menor no Illustrator Pattern Maker. Para um padrão de 10 por 10 com 50 por 50 linhas e uma sobreposição de um ponto, a amostra deve ser de 490 por 490. 14. SEU PROJETO: É hora de você fazer o seu projeto agora. Felizmente, você tem seguido junto na classe para escrever o script e fazer seus mosaicos. Se não o fez, volte e faça isso agora. Experimente algumas das telhas truchet clássicas como eu mostrei, mas também tentar ser um pouco criativo e ver o que você pode vir acima com como uma telha quadrada para tentar o seu script em. Não se esqueça de postar o projeto para mim e todos os outros para ver e, em seguida, opcionalmente, você também pode postá-lo no Instagram e me marcar para que eu possa vê-lo lá também. 15. Agradecemos e próximos passos: Se você chegou até aqui durante a aula, muito obrigado por assistir e espero que você tenha aprendido muito e gostado. Se você fez, vá em frente e vá conferir minhas outras aulas sobre Skillshare onde eu ensino muitos outros aspectos da arte generativa e design de padrões e também certifique-se me acompanhar no Skillshare para ser notificado quando eu publicar novas aulas. Se você gostou desta aula, considere deixar um comentário e um projeto. Isso realmente ajuda minhas aulas e eu a ser encontrado no Skillshare e é isso. Muito, muito, muito obrigado.