Programmer des graphiques I : Introduction à l'art génératif

1. Trailer: Meu nome é Joshua Davis, sou designer, programador, tecnólogo, amante de código aberto, amante do caos aleatório e vamos ter uma aula sobre como programar composições algorítmicas generativas. O que é arte generativa? É fazer arte que é conduzida principalmente por um programa de computador. Gosto desta ideia de poder olhar para a tela e fazer com que a composição tome decisões que estão totalmente fora do gesto. Talvez demore um pouco para ensiná-lo a configurar este processo, mas uma vez que você está feito com esse processo você tem um sistema para gerar um número infinito de competições. Eu acho que onde eu estou mais animado é ver o que as outras pessoas fazem. Que tipo de desenhos as outras pessoas fazem? Que tipo de cores as outras pessoas usam? Mais uma vez essa obra de arte que é gerada no final, vai ser única para esse indivíduo porque eles fizeram toda a tomada de decisão dentro dos parâmetros. Só estou te dando as ferramentas para definir esses parâmetros. 2. Introdução: configuração do ambiente: Então, agora vamos nos concentrar na configuração do ambiente. Relaciono isso de volta ao skate. Lembro-me de olhar para os profissionais que eu admirava e a forma como eles andavam de skate, e quando descobri como eles montaram suas pranchas, talvez que tipo de rolamentos usavam para tentar replicar essa configuração, me ajudou a entender melhor como que a pessoa fez, como eles patinaram tão bem quanto eles fizeram. Então, eu relaciono isso de volta à tecnologia que estamos fazendo. Vamos trabalhar no ambiente de processamento, mas na verdade não escrevo código dentro do ambiente de criação de processamento ou do IDE. Eu realmente escrevo código em um programa chamado Sublime Text 2. Então, vamos levar algum tempo para baixar Sublime Text 2. Vou mostrar-lhe como instalar o pacote de processamento para obter o processamento a ser compilado dentro do Sublime Text 2, e também vou mostrar-lhe como configurar trechos. Por exemplo, vamos configurar um para configuração. Então, eu vou começar a digitar S-E-T-U-P, e ele vai realmente auto-completar um pedaço muito grande de código que é tipicamente o código que eu reescrevo uma e outra vez e outra vez. Então, por que não configurar um snippet para executar este grande bloco de código. Então, trabalhar dentro do Sublime Text 2 vai ser super útil em termos de otimização de como nós realmente criamos neste ambiente. 3. Baixando o Processing: Ei, este é Joshua Davis e bem-vindos ao Programming Graphics, uma introdução à arte generativa. Nós vamos nos divertir. Vamos nos divertir, e temos uma tonelada de conteúdo para cobrir. Eu vou dividi-los em um monte de vídeos independentes para que você possa digerir em seu lazer, e esta primeira seção que vamos abordar é na verdade configuração do ambiente. Para mim, é o mais crucial. É uma janela de como as pessoas configuram seus ambientes, e eu vou mostrar a vocês como eu configurei meu ambiente e acho isso fascinante e útil. Que tipo de atalhos as pessoas tomam para fazer o trabalho que fazem. Então, nesta aula, vamos cobrir o processamento. Vamos cobrir uma pequena biblioteca na qual eu trabalho chamada Hype, e vamos trabalhar com SVG, Scalable Vector Graphics, que significa que vamos desenhar ativos dentro um ilustrador e, em seguida, mapear esses em programas que escrevemos usando processamento, ok. Então, a primeira coisa que eu quero fazer é passar para baixar e instalar o processamento. Então, se você abrir um navegador e acessar processing.org, você notará no topo da página que há processamento de download. Se você clicar em processamento de download, você pode fazer uma doação. Se você quiser, você pode clicar em nenhuma doação e ainda baixar o processamento gratuitamente. Você pode ver que existem instaladores do Windows, Linux e OS X. Obviamente, eu vou estar usando OS X. Quando você ir em frente e clicar em download você deve obter um arquivo zip, e quando você descompactar esse arquivo zip você realmente começa processando o aplicativo. Agora, se eu fosse executar o processamento do aplicativo seria algo parecido com isso. A primeira coisa que você deve estar ciente é que há um processamento que é um editor de texto. É um ambiente que permite escrever código, executar esse código e visualizar os resultados visuais. Então, digamos que eu queria pintar algo na tela. O que eu poderia fazer é, eu poderia apenas digitar diretamente no IDE de processamento, e eu vou dizer configuração vazia. Eu vou ir em frente e dizer que a cor de preenchimento é laranja, e então eu vou ir em frente e desenhar um retângulo. Digamos que esse retângulo tenha 20 pixels no eixo x, 20 pixels no eixo y, uma largura de 50 e uma altura de 50. Agora, eu acabei de escrever um pouco de código aqui dentro do editor de processamento, e se eu fosse para ir em frente e salvar este arquivo, eu vou continuar e salvar isso como IDE de processamento e eu vou colocar isso em minha área de trabalho. Se eu clicar em Executar aqui mesmo no IDE de processamento, ele vai realmente compilar o código que eu escrevi, e novamente eu posso realmente ver os resultados aqui na tela. Então, na verdade, ele desenhou um retângulo laranja em 20 no eixo x, 20 no eixo y, uma largura de 50 e uma altura de 50. Agora, para o próximo vídeo, eu realmente vou mostrar a vocês como trabalhar com Sublime Text 2. Então, embora eu ame a criação em processamento, na verdade não é o meu editor de escolha. Na verdade, eu gosto de escrever meu código em Sublime Text 2. A razão para isso é que ele tem uma tonelada de atalhos para, na minha opinião, escrever código, mais rápido, mais fácil e um pouco mais eficiente. Então, enquanto eu gosto de processar. Eu não gosto de criar em seu editor. Então, próximo vídeo trabalhando com Sublime Text 2. 4. Trabalhando com o Sublime Text 2: Está bem. Neste vídeo, vamos abordar o trabalho com Sublime Text 2. Então, se você voltar para o seu navegador e ir em frente e digite Sublime Text 2 em um mecanismo de busca deve ser o resultado principal. Se você ir em frente e clicar, você vai notar que o URL Sublime Text 2 sublimetext.com/2. No topo, você tem a opção de baixar e novamente também tem sabores Windows, Linux e OSX. Vou em frente e clicar para baixar o instalador, que já fiz. Eu já instalei. Novamente, se eu rodar Sublime Text 2, você notará que é um editor de texto, assim como o IDE de processamento tem, mas tem algumas vantagens interessantes. Se eu começar a escrever alguns do mesmo código assim como eu tinha feito antes no vídeo anterior, você vai notar que se eu ir em frente e digitar void e se eu ir em frente e digitar configuração e eu faço abrir paren, você vai notar que gera automaticamente o paren de fechamento, e se eu for em frente e digitar colchete aberto, você notará que ele o conclui fazendo o colchete de fechamento. Se eu fosse fazer um retorno rígido, ele coloca esse colchete de fechamento na terceira linha e automaticamente guia minha segunda linha. Então, ele tem maneiras de tornar a escrita de código muito mais eficiente na minha opinião. Agora, e novamente, este é apenas um editor de texto e eu posso fazer coisas como fazer o tipo maior para o caso desses vídeos para que você possa realmente ver o código que estou escrevendo. Então, ele tem essas melhorias que eu acho que são um pouco mais eficientes. Agora, se você entrar no canto inferior direito, você vai notar que estes são todos os pacotes de idiomas diferentes que vêm com Sublime Text 2. Você pode notar que o processamento não faz parte desta instalação base. É algo que temos que acrescentar. Então, se você descer para o Ps foram processando deve ser, seu PHP para Python, mas não há nenhum processamento ok. Agora, acaba por haver um pacote de processamento, então precisamos deixar o Sublime Text 2 saber que o processamento existe. Eu estou indo para ir em frente e voltar para o meu navegador e eu vou ir em frente e digitar o pacote de processamento Sublime Text 2. Quando você faz isso, você está interessado nos dois primeiros links. Este é o repositório do GitHub que hospeda o pacote e há esse ótimo segundo link que realmente tem um vídeo no Vimeo para você digerir o conteúdo. Chá gelado. Então, eu vou em frente e abrir este vídeo do Vimeo Sublime Text 2. É cerca de um minuto de duração. Mais uma vez, é super útil para mostrar como você pode vincular o Sublime Text 2 ao processamento. Agora, eu vou ir em frente e clicar neste link superior porque obviamente eu já assisti o vídeo e aqui é onde você pode obter todas as informações que você precisa para adicionar processamento ao Sublime Text 2. Agora, eu vou fazer isso usando o Controle de Pacote. Agora, a fim de usar o Controle de Pacotes, você verá aqui que queremos olhar sob instalação e o primeiro está usando Sublime Package Control. Agora, se você continuar e clicar neste link. Se você estiver usando o Sublime Package Control, você pode facilmente instalar o pacote de processamento via e, em seguida, ele mostra as etapas. Infelizmente, por padrão, o Controle de Pacote não está instalado. Então, se você vir sob preferências, Controle de Pacote é realmente não está aqui. Então, eu vou clicar neste link, se você estiver usando Sublime Package Control. O Gerenciador de Pacotes de Texto Sublime que torna extremamente simples de instalar agora. Então, quando você clicar em instalar agora, você notará que há algum código que você precisa copiar e colar no console do Sublime Text 2. Agora, o Sublime Text 3 está realmente em Beta, então você verá algumas informações aqui. Eu estou indo para ir em frente e clique neste link para Sublime Text 2. Agora, você vai copiar esta longa sequência de instruções. Então, eu vou ir em frente e copiar isso e eu vou voltar para Sublime Text e eu quero abrir o console. Então, se você ir em frente e clique em exibição, você verá aqui ele diz show console. Agora, quando você diz show console, ele vai carregar a seção inferior do Sublime Text 2 e bem aqui, há uma entrada, cursor piscando, tudo o que eu vou fazer é realmente colar o que acabamos de copiar do navegador. Então, eu vou em frente e colar isso e eu vou em frente e clique em retornar, e você vai notar que um monte de coisas aconteceu e, em seguida, ele apenas disse, por favor, leia começar Sublime Text para terminar a instalação. Então, as instruções para adicionar Controle de Pacote agora foram adicionadas ao Sublime Text 2. Então, é neste ponto que eu posso fechar as instruções de instalação do Controle de Pacote. Preciso sair do Sublime Text 2 e realmente reiniciá-lo. Então, quando eu reiniciar Sublime Text 2, vai parecer que nada é diferente, mas na verdade, se você entrar no menu principal aqui, Sublime Text 2, se você entrar em preferências, você vai notar que na parte inferior é um Controle de Pacotes, onde o Controle de Pacotes anteriormente não estava lá. Agora, se eu clicar em Controle de Pacotes, ele vai me dar este pequeno sub-menu no topo com coisas que eu quero fazer com pacotes. Desejo adicionar pacotes, excluir pacotes assim por diante? Então, o que queremos fazer é realmente instalar um pacote. Queremos instalar o pacote de processamento. Então, eu vou ir em frente e clique em instalar pacote e você vai notar que uma lista de pacotes surgiu. Tudo o que eu tenho que fazer é começar a digitar o processamento e você vai notar que é o resultado principal. Então, ele diz, processando um pacote Sublime Text 2 para o processamento da linguagem de programação. Então, eu vou ir em frente e clicar nisso e notar aqui na parte inferior, ele diz que o processamento de pacotes foi instalado com sucesso. Agora, o que isso significa é que não só o pacote de processamento está instalado, mas agora eu posso clicar no menu inferior direito e você vai notar que o processamento agora surgiu como um idioma na lista de seleção de idiomas. Então, eu vou ir em frente e clique em processamento e eu vou começar a obter coisas como codificação de cores e tudo isso. Então isso é super divertido, mas até faz outras coisas. Você pode notar que quando eu escrevi este código pela primeira vez eu digitei vazio. Digitei a configuração, raspei minutos da minha vida, cara. Quero fazer as coisas mais rápido. Então, o que o pacote faz é empacotar muitos recursos de processamento em atalhos. Então, por exemplo, eu posso realmente excluir todo esse código, e vamos dizer que eu quero fazer a configuração. Tudo que você tem que fazer é digitar S-E-T, e agora você vai notar que ele nos dá uma lista de ações que podemos chamar. Então, eu quero ir em frente e configurar, eu vou em frente e aperte Enter, e você vai notar que ele cospe minha função de configuração de vazio, minha função de desenho vazio. Então, eu não tenho que continuar redigitando esse código mais. Na verdade, posso usar esse atalho para fazer coisas. Então, novamente, digamos que eu queria fazer um For Loop. Você pode ir em frente e dizer Para. Novamente, você vai notar que ele puxa para cima o sub-menu, eu posso ir em frente e clique em Enter, ele automaticamente cuspe para fora a estrutura para For Loop, e ele faz realce tabulação. Então, você vai notar que diz, inteiro i é igual a zero, tudo bem. Se eu seguir em frente e clicar na guia, você vai notar que ele vai para o zero. Se eu pressionar Tab novamente, eu poderia digitar 100. Se você pressionar Tab novamente, ele o colocará no meio do For Loop. Então, essa idéia de não apenas executar atalhos, mas ser capaz de guiar através desses atalhos é super útil. Então, eu quero fazer um retângulo, e você vai e clique em Enter. Ei, onde você quer isso no eixo x? De antes, 20 no x, Tab; 20 no y, Tab; 50 para largura, Tab; 50 para altura. Então, Sublime Text 2 torna super fácil escrever código apenas mais rápido, mais fácil, é bonito, é uma mudança de jogo. Está bem. Então, temos o processamento instalado, temos Sublime Text 2 instalado. Há apenas mais algumas coisas que eu diria que precisamos fazer. Uma das últimas coisas é que nós realmente vamos escrever código em Sublime Text 2, mas quando clicamos em Build, precisamos criar essa ponte entre o processamento do aplicativo e Sublime Text 2. Então, o que a última coisa que eu preciso fazer é realmente iniciar o processamento novamente, e você notará em Ferramentas, há Install Processing Java. Você precisa fazer isso, outras palavras que você pode escrever todo o código que quiser durante todo o dia no Sublime Text 2 e nada vai acontecer porque você ainda não instalou Processing Java ainda. Então, eu vou seguir em frente e clique em Instalar processamento Java. Ele vai dizer, “Deseja instalá-lo para todos os usuários?” blá, blá, blá. “Você pode precisar de uma senha.” Vou em frente e clique em Sim, eu vou ir em frente e colocar minha senha, eu vou ir em frente e clique em Ok, e que agora instalou com sucesso Processando Java no meu ambiente. Então, neste momento, eu posso parar de processar novamente, ok? Porque agora eu instalei Processing Java. Então, se eu fechar esta janela, e se eu fechar esta janela, e se eu fechar esta janela, e vamos continuar e salvar este arquivo. Outra coisa que eu diria que é legal sobre o processamento do IDE é que quando você realmente clica em Salvar arquivo, ele criaria uma pasta e, em seguida, colocaria seu arquivo dentro dessa pasta. Na verdade, é assim que o processamento funciona. O processamento tem que ter um esboço salvo em uma pasta com o mesmo nome exato. Então, se o seu esboço é chamado Joshuadavis.pde, então sua pasta precisa ser chamada Joshua Davis caso contrário você vai obter compiladores. Sublime Text 2 ainda não sabe como fazer isso, ele sabe que ele pode salvar este arquivo, mas ele não sabe para criar a pasta. Então, isso é um que eu diria aborrecimento leve com o trabalho com Sublime Text 2. Então, vamos em frente e criar uma nova pasta na minha área de trabalho. Vou ligar para esta pasta, digamos que se chama Teste Um, certo? Agora, isso é tipicamente o que eu faço, é eu vou abrir o Teste Um e eu vou criar uma nova pasta chamada Construir, ok? Eu vou então tomar este código que eu escrevi, neste caso eu não quero este For Loop, este retângulo é bom. Ainda não vamos cobrir o sorteio. No nosso ficheiro original, tinhamo-la com um recheio de laranja. Vou continuar e salvar isso agora. Eu vou continuar e salvar isso na minha área de trabalho. Eu vou salvar isso na pasta Test One e, em seguida, eu vou salvá-lo na pasta Build, e eu vou apenas chamar este build.pde. Está bem. Então, deixe-me apenas mover isto para o lado e deixe-me apenas mostrar-lhe a minha estrutura de pastas aqui. Então, nós temos Teste Um, nós temos Construir, nós temos Build.PDE. Então agora, neste ponto, você pode realmente chegar a ferramentas e você pode clicar em Construir. Se eu clicar em Construir, o que ele fará será executar Processando Java, e você notará que estou visualizando os resultados visuais exatamente como fiz no IDE de processamento. Está bem. Agora, há algumas coisas que você deve estar ciente. Eu vou em frente e parar com isso. Um deles é Josh. Por que você faz isso como Test One, Build.pde, Build.pde? Porque se eu quiser fazer um monte de mutações do Teste Um, tudo que eu tenho que fazer é arrastar e copiar, arrastar e copiar, arrastar e copiar, arrastar e copiar, certo? Então agora eu tenho cinco testes de talvez este esboço inicial que eu tinha desenvolvido. Mas em vez de, como eu digo isso? Como o nome do esboço tem que ser a mesma coisa que o nome da pasta, se eu fizesse esse tipo de cópia e duplicação, eu teria que ir e renomear o arquivo pde, test1.pde, test2.pde. Mais uma vez, raspei minutos da minha vida, homem. Eu preferiria ter esse tipo de nidificação, então assim eu tenho o Teste Um. Dentro do Teste Um é Build, e dentro de Build é Build.pde. Então, eu nunca tenho que renomear build.pde. Então, eu posso duplicar esse esboço inicial e não me preocupar em ter renomear meu pde toda vez que eu faço uma nova mutação. só eu e sou louco. Agora, esta aula vai ser divertida, divertida. Outra coisa que você deve notar é que algo que acontece no Sublime Text 2 que não acontece no processamento do IDE, e que é esse diretório build-temp. Então, toda vez que eu construir um arquivo, ele vai construir este diretório build.temp, ok? Daqui a pouco, vou mostrar-lhe alguns atalhos de como excluir esses arquivos para que você não esteja acumulando todos esses arquivos build.temp. Infelizmente, o Sublime Text 2 sempre irá gerar esse arquivo build.temp, e não há como desativá-lo dentro do Sublime Text 2. Novamente, o processamento do IDE não faz isso. O IDE de processamento não tem razão para criar este arquivo temporário de compilação onde o Sublime Text 2 faz, ok? Então, agora temos processamento baixado, temos Sublime Text 2 baixado, temos o Bundle instalado. Estamos aprendendo sobre atalhos dentro do Sublime Text 2. Abrimos o processamento e instalamos Processing Java. No próximo vídeo, eu vou mostrar alguns passos adicionais dentro do Sublime Text 2, bem como alguns aplicativos essenciais que eu uso apenas no OSX, e vamos falar sobre por que e como eles são úteis. Vejo você no terceiro vídeo. 5. Dicas finais de configuração do ambiente: Está bem. No vídeo três, quero delinear apenas mais algumas coisas que faço como parte da configuração do meu ambiente. Agora, nós temos este arquivo que eu acabei de bater juntos muito rapidamente, nós chamamos de teste um, construir, construir, construir pde. Você pode ver aqui a partir do código que estamos definindo um preenchimento de laranja e estamos desenhando um retângulo. Agora, eu tenho o mesmo arquivo aberto em ambos Sublime Text 2 e Processing.A razão pela qual eu fiz isso é porque há uma diferença entre esses dois programas quando você realmente constrói o código. Dentro de Processamento, se você clicar neste ícone, ele está executando execução, mas se você realçar Sketch, você verá que executar é realmente Command+R. Então, eu posso realmente bater fora um monte de código, eu posso pressionar Command+R e isso é vai compilar o meu código e ele vai ser executado e podemos ver os resultados visuais. Então, se eu chegar a Processamento e pressionar Command+Run, lá está. Infelizmente, no Sublime Text 2, se você estiver sob Ferramentas, na verdade é Command+B para compilação. Então, eu acho isso um pouco confuso porque no Processamento é Command+R e Sublime Text 2 seu Command+B. Eu tinha passado como um ano trabalhando no Processing IDE antes de usar Sublime Text 2 e assim meu cérebro está conectado de uma certa maneira . Eu estaria escrevendo código em Sublime Text 2 e eu pressionaria Command+R e faria algo completamente diferente. Então, eu realmente quero alterar as preferências no Sublime Text 2 que a compilação é Command+R assim como está em Processamento. Então, assim eu posso trabalhar entre esses dois ambientes e eu não tenho que me preocupar em lembrar, Command+B em um e Command+R em outro. Então, o que eu vou fazer é, eu estou indo para vir para Sublime Text 2 e sob preferências, você vai ver Key Bindings. Agora, você verá Ligações de chave para padrão e associações de chave para usuário. Agora, vou primeiro abrir as Ligações de Teclas para Padrão e você notará que este enorme documento se abre. Você verá aqui você pode mover isso e há um monte de combinações de teclas diferentes associadas ao Sublime Text 2. Agora, eu sou um usuário individual. Então, eu quero abrir Sublime Text 2, Preferências, Key Bindings, User. Ao fazer isso, você notará que este documento está em branco. Você não especificou nenhum vínculo de chave específico relacionado ao usuário. Então, o que eu quero fazer é, eu quero ir para padrão e eu quero encontrar a ligação para compilação. Então, eu só vou fazer Command+F para encontrar e aqui na parte inferior, você vai notar que eu digitando construir e eu clicar em encontrar. Quando você clicar em Localizar, você notará que esses caras se destacam aqui. Com certeza, este é o que eu estou procurando na linha 232, chaves, super plus b ou Command+B é o comando de compilação. Então, eu estou realmente indo para selecionar esta linha aqui, não a vírgula no final, a vírgula é apenas se houver várias ligações de chave que eu quero definir, mas eu estou sempre definindo o um. Então, não preciso da vírgula no final. Vou seguir em frente e pressionar a cópia. Então eu vou para a ligação de chave específica do usuário e eu só vou dar a mim mesmo um pouco mais difícil virar e eu vou colar. Então, agora, eu colado construir na preferência específica do usuário. Então eu só vou mudar isso para super plus R.so, dessa forma eu não estou bagunçando padrão, cargas padrão, mas então ele vai carregar este usuário específico e, em seguida, substituir o padrão. Então, agora, se eu realmente clicar em Salvar e, em seguida, vir para Ferramentas, você notará que a compilação está agora definida em Command+R, o mesmo que está dentro de Processamento. Então, eu posso fechar isso, eu posso voltar para o meu código e apenas pressionar Command+R e ele é executado exatamente como faria em Processamento. Então, isso é apenas outra coisa que eu gosto de configurar para que esses dois sejam semelhantes e eu não tenho que lembrar de construir isso é uma coisa e uma em uma coisa em outra, eu não quero fazer isso. Então agora, é Command+R em ambos os ambientes, o que eu estou super feliz. Agora, aplicativos específicos do Macintosh. Para seus usuários do Windows, você entenderá aqui em um segundo por que essa conversa não se aplica a você. Estou escrevendo código e gosto de organizar as coisas de uma maneira específica. Então, os usuários de Mac realmente precisam desse aplicativo chamado SizeUp. Então, se você realmente abrir um navegador e digitar “tamanho acima”, você vai notar que é o link superior, “Software irradiado, SizeUp”, e é o Gerenciador de Janelas ausente para OS X. Pessoas de PC, você tem isso embutido. Você pega uma janela, você a arrasta para um lado e ela se encaixa e você pode organizar as coisas dessa maneira. No OS X não temos isso. Então, SizeUp é um super eficiente para organizar seu espaço de trabalho para escrever código na minha opinião. Então, uma vez que você tenha SizeUp instalado no OS X, você verá o que todos os atalhos estão aqui, mas é super útil eu posso dizer que eu quero isso para a esquerda, eu quero isso para a direita, eu quero para o topo, eu quero para o fundo, Eu quero isso para cada um dos cantos ou você pode pressionar para realmente tê-lo centrado. Então, são apenas alguns atalhos de teclado agradáveis para o Mac para ajudar a organizar as coisas. Então, você vai notar que, assim como eu tenho aqui, tem esta pequena janela de processamento no canto superior direito, eu tenho meu localizador no canto inferior direito e eu tenho Sublime Text 2 à esquerda. Se eu fosse começar um novo documento novamente, eu poderia não gostar dessa idéia de ter que alternar para frente e para trás e abas, eu posso realmente puxar isso de lado e, em seguida, posicioná-lo para o lado direito da tela e, em seguida, trabalhar em dois documentos lado a lado. Então, eu acho que usar SizeUp para ser super útil na organização do espaço em que eu escrevo Code.Second app que eu realmente gosto é Caffeine. Cafeína que você pode obter a partir da App Store e coloca um pouco de xícara de café em sua bandeja de tarefas. Isso é para não fazer o seu computador entrar em repouso. Porque está tudo drogado com cafeína. Então, se eu encher a xícara de café com cafeína, isso significa que posso ir embora ou assistir algo e não tenho que me preocupar com meu computador dormindo e minhas telas ficarem pretas. Isso é o mesmo que lançar suas Preferências do Sistema e, em seguida, entrar no Economizador de Energia e, em seguida, dentro do Economizador de Energia, você vai Nunca e ele vai, tem certeza? Você clica bem. Você diz nunca e depois diz, “Ok, não coloque discos rígidos dormindo.” Então, em vez de ter que fazer isso toda vez, cafeína apenas substitui isso e basicamente apenas sempre define Nunca sempre define as coisas para dormir. Então, eu gosto de ter cafeína instalado apenas para que eu possa escrever código, fazer pausas quando eu preciso, passo para trás quando eu preciso ir embora quando eu preciso e então não tenho que se preocupar com que tudo foi dormir enquanto eu estava brevemente ausente. Então, dois aplicativos que eu realmente gosto SizeUp e Caffeine e novamente Caffeine, você só começa a partir da App Store. Então, você apenas digita cafeína e ele vai instalar. Então, nós conversamos sobre este terceiro vídeo, Cafeína, nós falamos sobre SizeUp. Falamos sobre o sistema de construção. Agora, a última coisa que eu quero falar sobre um Snippets. Snippets entra em um nível mais especializado de escrita de código, mas eu quero dar-lhe pelo menos um Snippet e mostrar-lhe como usá-lo. Você pode ver por que ele é super útil, e à medida que você fica mais confortável trabalhando com código e especificamente com Hype e especificamente com Sublime Text 2, você vai descobrir que Snippets são simplesmente incríveis. Então, deixe-me parar e fazer algumas coisas aqui. Agora, o que é um Snippet, digamos que você sempre configura seu ambiente de uma certa maneira. Para mim, eu me encontro sempre fazendo a mesma coisa que é, eu vou dizer, configuração nula e eu vou dizer que eu quero que o tamanho seja 640 pixels por 640 pixels e talvez eu queira que o fundo sempre seja preto e talvez eu sempre queira suavizar. Talvez eu sempre queira uma função de desenho. Eu me encontro no processamento sempre escrevendo as mesmas coisas uma e outra vez e outra vez. O que os Snippets permitem que você faça é empacotar coisas que você como um criador de conteúdo individual no dia a dia, empacotar tudo isso em um snippet. Então, deixa-me mostrar-te como é um trecho. Este é o meu snippet inicial e é voltado para usar hype e não foram obviamente não até os vídeos onde estamos cobrindo hype ainda mas o que é bom é que eu quero que você instale os snippets para que mais tarde, quando começarmos cobrindo este conteúdo, podemos executar este atalho. Então, lembre-se quando digitamos um loop for e ele automaticamente cuspir o loop for e ele até tinha todas as guias e permitiu que você pulasse para todas as guias diferentes.? Isso é um trecho. Então, este é apenas um trecho de configuração que eu sempre uso com hype. Novamente, o que é bom é que você pode abrir o trecho dentro do texto sublime dois e você pode ver como as coisas são estruturadas. Você pode ver como executar o código de tabulação, assim por diante e assim por diante. Agora, para instalar este snippet, precisamos colocá-lo na pasta de snippet do processamento e ele está um pouco enterrado. Então, o que eu quero que você faça é realmente ir para a pasta e, em seguida, eu vou digitar em ~/Library. Vou clicar em Ir e você notará que agora está visualizando a pasta da biblioteca. Por predefinição, no OS X, esta pasta de biblioteca está oculta. Então, se você apenas abrir seu disco rígido e tentar encontrar a pasta da biblioteca, você não pode porque é uma pasta oculta. Então, indo para ir, conecte-se à pasta ~/Biblioteca com um L maiúsculo agora podemos ver a pasta da biblioteca. Agora, dentro desta pasta de biblioteca, você verá o Application Support. Em Suporte a aplicativos, você verá Sublime Text 2. Em Sublime Text Two, você verá Pacotes e verá que estes são todos os pacotes de todas as línguas diferentes, aquele que acabamos de instalar, bem aqui processando. Então, se eu clicar em Processamento, agora você verá que há uma pasta chamada Snippets e dentro de Snippets são todos esses trechos que você pode usar no Sublime Text dois como, setup, que quatro loop, retângulo. Agora, em algum lugar eu vou te dar esse arquivo de trecho e tudo que você precisa fazer é copiá-lo para a pasta Snippets. Então, agora foi copiado lá dentro. Isso é chamado hype_set up então, se você fosse realmente para ir para o Hs, você veria que ele está bem ali, hype_setup. Agora, o que isso significa é eu posso voltar para Sublime Text 2 e eu posso apenas ir em frente e começar a digitar este atalho. Então, lá em baixo. Preciso ter certeza de que você selecionou Processamento, já que este é um snippet de processamento. HY e olha, hype_setup aparece. Este é o trecho que acabamos de adicioná-lo e se eu clicar em Enter, você vai notar que ele constrói minha configuração, ele constrói meu desenho, ele constrói meu tamanho como eu sempre gosto. Eu quero que seja 640 por 640? Eu não sei. Olha, eu posso clicar em Tab, eu posso clicar em Tab. Você quer que ele seja 3D? Não, ainda não, então, eu posso ir em frente e clicar em Excluir. Então, agora este esboço de processamento não vai usar coordenadas 3D. Linha três, nós totalmente não cobrimos ainda, mas novamente, eu posso clicar em Tab se eu quiser mudar a cor de fundo. Queremos usar 3D? Não, na verdade desligamos isso. Então, eu posso clicar em Excluir. Auto limpo, você quer isso? Sim ou não? Se você quer, quer que seja verdade ou falso? Eu clico Tab novamente. No sorteio, estamos atirando na fase de sorteio. Estou gravando isso? Vamos falar sobre saída para formatos de imagem. Neste caso, isso renderizaria 900 tiffs, o que equivaleria a 30 segundos de filme. Então, você quer dizer quadro? Talvez sim, talvez não. Vou dizer “Excluir”. Então, é uma maneira para, se você se sentir confortável com a programação e você se encontra fazendo coisas uma e outra e outra vez, em vez de ter que digitá-los uma e outra vez, você pode estar interessado em criar seus próprios snippets personalizados. Dessa forma, você pode apenas começar a digitar parcialmente algo e ir sim, eu quero fazer hype setup e clicar em hyp_setup e você sabe que ele está sempre indo para gerar automaticamente coisas que você está constantemente reutilizando. Isso encerra esta seção, esta é a configuração do ambiente. Então, novamente, instalamos Processing, instalamos Sublime Text dois, instalamos o pacote Processing, aprendemos sobre alguns aplicativos que eu gosto de usar, temos nossa configuração de ambiente. Então, agora, quando passamos para a seção dois que é apenas uma introdução ao processamento e hype e o que essas duas coisas são e por que elas trabalham juntas e como elas são ligeiramente diferentes do que escrever código e processamento e assim por diante assim por diante. Essa será a próxima seção, mas pelo menos agora configuramos nosso ambiente exatamente como eu trabalho. Então, à medida que começamos a escrever código, temos alguns dos atalhos, temos alguns desses processos para tornar a escrita de código um pouco mais fácil, um pouco mais eficiente e divertido. Então, vejo você na próxima seção Introdução ao Processamento e o Hype Framework. 6. Introdução: Processing e HYPE: Para o próximo passo, vamos falar sobre processamento e vamos falar sobre escrever código e processamento. Tudo o que o texto Sublime é, é um ambiente de criação. É um editor de texto. É onde nós vamos realmente escrever todo o código que faz o que quer que seja que queremos fazer. Quando nós realmente escrever o código e executá-lo, o que acontece é, é que o código é então compilado por processamento e algo acontece na tela. Então, se eu digo que eu quero configurar uma tela, eu quero que o fundo seja vermelho e eu quero desenhar um quadrado verde, isso é material que na verdade irá digitar dentro do editor de texto Sublime. Quando nós realmente clicar em Construir, o processamento vai construí-lo, ele vai ler essas instruções e realmente exibir algo na tela. Agora, o que é hype? Hype é a terceira coisa que é, digamos que queremos aquele quadrado verde e outra vez e outra vez porque nós realmente amamos quadrados verdes. Então, poderíamos criar algo chamado de classe quadrada verde. Então, em vez de ter que escrever todo o código para fazer este retângulo, torná-lo verde, colocá-lo aqui, nós vamos realmente escrever uma linha de código que diz “quadrado verde aqui”. Então, é um atalho. Hype é uma série de atalhos para fazer ações maiores e mais robustas dentro do processamento. 7. Baixando o HYPE: Bem-vindos à Seção Dois. Muito emocional. Seção dois. Vamos falar sobre a estrutura HYPE. Então, estamos trabalhando no processamento, mas eu também trabalho nessa biblioteca externa chamada framework HYPE, que é uma coleção de coisas que fazem coisas. Está bem? Agora, se você for para hypeframework.org, você pode ver o site do projeto aqui. Você pode ver todos os exemplos diferentes que eu tenho publicado, mas este é apenas o site para o projeto. O código-fonte real existe no Github. Então, você verá aqui no canto superior esquerdo, há github.com/hype. Está bem? Então, você pode ver URL aqui github.com/hype/hype_processing. Agora, nas etapas do projeto aqui no Skillshare, eu realmente coloquei um URL diferente. Eu coloquei o teste da árvore github.com/hype/hype_processing. Isso ocorre porque a compilação mestre do código não contém todas as alterações que estamos trabalhando no momento. Então, se você vê bem aqui em cima, diz ramos. Há um branch chamado staging aqui e se você clicar em staging, esta é realmente a coleção mais atualizada do código. Novamente, a URL está abaixo nas etapas do projeto. Agora, se você é novo em codificar completamente, você pode tipo de ignorar um monte de coisas. Vamos falar sobre isso daqui a pouco. A única coisa que você está realmente interessado está aqui. Diz “download zip”. Então, se eu for em frente e clicar em baixar zip, você deve notar que ele está baixando o arquivo zip em sua área de trabalho. Agora, esse arquivo zip vai conter tudo o que existe, que você está vendo aqui no site. Então, por exemplo, ele tem uma pasta para documentação em que estamos trabalhando onde estamos documentando alguns dos bits do código-fonte. Ele contém um arquivo de exemplos. Os exemplos é onde eu estou pegando certas coisas que escrevemos e eu estou apenas fazendo alguns exemplos nus para ajudá-lo durante o processo. Java, o nosso código-fonte. PDE, nosso código-fonte. Website, esse site real que você vê aqui, que é na verdade quando ele é atualizado, ele realmente vive na pasta do site, e obviamente há um monte de outras coisas. Está bem? Uma vez que você tenha esse arquivo zip baixado, a única coisa que você vai estar interessado em 100%, a fim de fazer todos os exemplos que vamos fazer é este arquivo chamado Hype.pde. Então, Hype.Pde contém todas as classes que estão na biblioteca. Ele contém todas as coisas que vamos usar para todos os projetos que vamos fazer. Então, depois de ter baixado este arquivo zip, basta olhar para esse Hype.pde porque esse é o arquivo que vamos usar em cada projeto que fizermos. Está bem. Vou terminar este vídeo. Vou criar um novo onde falaremos sobre algumas coisas adicionais que estão dentro deste arquivo zip. Vejo você no segundo vídeo. 8. Passos 2, 3 e 4 do projeto: Certo, segundo vídeo. Então, temos o arquivo zip baixado. Temos que descompactar. Aqui, eu posso mostrar o conteúdo da pasta, e novamente, você vê que ele replica exatamente o que você está vendo aqui no GitHub. Há a pasta de documentação, aqui está a pasta exemplos, assim por diante, e assim por diante. Mais uma vez, aqui está o que estamos totalmente interessados, é Hype.pde. Então, agora, em termos das etapas do projeto que você está vendo aqui no site do Skillshare, vamos abordar neste ponto, dois, três e quatro. Agora, na seção dois das etapas do projeto, ele basicamente diz, hey, cavar em torno desta pasta de teste HYPE e apenas familiarizar-se com algumas das coisas que estão aqui. Duas coisas que são de grande interesse: obviamente, o Hype.pde, eu disse que vamos usar isso em todos os nossos projetos, mas então, esta pasta de exemplos. Esta pasta de exemplos tem mais exemplos do que eu realmente tenho no site por algumas razões. O site publica os esboços para Processing.js, então ele é executado no objeto Canvas HTML5. Nem tudo aqui é suportado pelo Processing.js. Então, há alguns exemplos que eu nunca posso colocar no site porque eles simplesmente não funcionam no navegador. Agora, algumas outras coisas que você deve levar em consideração ao olhar para esta pasta de exemplos, e eu falei sobre isso um pouco na etapa do projeto. Por exemplo, se eu for para Enxame, você vai notar que eu te dou, na verdade vamos mudar isso. Digamos, Hoscillator, porque eu sei que o Hoscillator tem muitos exemplos nele. Hoscillator, você verá que há 14 exemplos. Normalmente, os principais, exemplo um, é o exemplo de ossos mais nuos. Isso significa que eu não introduzi muitas outras coisas, eu apenas criei um exemplo que simplesmente ilustra o que o HOScillator faz. No entanto, todas essas classes podem realmente trabalhar juntas. Então, por exemplo, nesta classe, vamos cobrir um layout de grade, onde você pode misturar um layout de grade com ColorPool, com um oscilador, com HPath. Então, você pode combinar aspectos do HYPE em uma pasta. Então, o primeiro exemplo aqui, exemplo um, se eu fosse realmente publicar isso, novamente, ele está apenas mostrando a vocês o que é oscilação. É uma onda, é uma forma de descrever uma onda. À medida que você navega para baixo através dos projetos de exemplo, eles vão ficar mais robustos. Então, por exemplo, este é apenas 50 linhas de código. Se eu fosse pular para o número 14, por exemplo, você veria o número 14 é 76 linhas de código. No entanto, se eu realmente executar este filme, no caso deste particular, eu estou realmente usando 3D. Então, eu estou oscilando essas caixas 3D. Então, basta levar em consideração que a pasta exemplos, geralmente exemplo um ou os exemplos em direção ao topo, são a expressão mais simples dessa classe específica que você está olhando. À medida que desço, dou-lhes algumas sugestões de ideias para misturar e combinar possíveis aulas. Então, por todos os meios, confira a pasta exemplos, porque há uma tonelada de coisas lá que, novamente, não estão representadas no site. Agora, uma coisa que você pode querer começar com esta pasta particular aqui chamada H_BASICS. H_BASICS tenta documentar os fundamentos básicos para trabalhar com HYPE. Então, o que é o método encadeamento? Como faço para desenhar formas? Como definir onde é uma posição de âncora? Como faço para girar em torno de uma âncora? Como faço para anexar imagens? Como faço para anexar SVG? Então, H_BASICS é realmente a pasta inicial, onde eu estou lhe dando algumas das coisas que, hey, a fim de realmente se balançar, essas são as coisas que você realmente deve digerir primeiro. Então, fora da pasta exemplos, Hype.pde realmente é o arquivo que vamos usar em todos os nossos esboços. Agora, você verá no projeto, passos número três fala sobre como vamos criar nossa estrutura de pastas. Então, por exemplo, eu poderia criar um novo documento, e então, vamos apenas dizer que este documento é chamado de projeto 1, e nisso, eu vou criar uma nova pasta chamada build. Dentro dessa pasta de compilação, vou copiar Hype.pde. Se eu fosse abrir o Sublime Text 2 e mudar isso para Processamento e clicar em Salvar, eu iria para minha área de trabalho, eu iria para o projeto 1, eu iria para construir, e eu chamaria isso build.pde. Agora, eu não vou escrever nenhum código, mas eu estou mostrando a estrutura que dentro desta pasta de compilação está o seu build.pde e Hype.pde. Agora, o que é Hype.Pde? Vou falar um pouco sobre o projeto passo quatro aqui em um segundo. O que Hype.pde é, de fato, se você tentar abrir isso no Sublime Text 2, você vai notar que nós vamos estar esperando um pouco. Hype.Pde contém todas as linhas de código dentro do universo HYPE. Então, o que é o universo HYPE? Por exemplo, se você olhar para a pasta pde, estas são todas as classes diferentes que temos. Agora, veja isso. Vês? Está tudo em uma linha, e na verdade, se você fosse apenas [inaudível], você estaria lá para sempre. Então, Hype.pde é na verdade cada um desses 53 arquivos pde, mas com todos os retornos rígidos removidos e minificados em uma linha. Então, este é o universo HYPE. Então, por exemplo, digamos, falamos sobre hoscilação. Se você abrir Hoscillator.pde, este é realmente o código que contém todas as instruções que lida com qualquer tipo de oscilação que você gostaria de usar em um de seus projetos. Então, acontece que este arquivo aqui, que é 244 linhas de código, é, todas as abas são removidas, todos os retornos rígidos são removidos, e ele está enterrado em algum lugar no Hype.pde. Então, novamente, apenas reiterando, Hype.pde é cada um desses pdes individuais colocados em um arquivo. Então, à medida que adicionamos novas classes, adicionamos em Hype.Pde. Você pode querer continuar voltando para o site do GitHub, você pode querer ouvir no Twitter para ver se eu anuncio quaisquer novas classes que tenhamos escrito, porque se assim for, Hype.Pde será atualizado. Agora, passo quatro na classe Skillshare, JAR versus pde. O que diabos isso significa? Há muitas bibliotecas externas que você pode usar com Processing. O problema é que você não pode usar uma biblioteca externa e saída para JavaScript usando Processing.js. Você não pode usar nenhuma biblioteca externa que é empacotada como um arquivo JAR, e você não pode enviar para Processing.js, o que significa, toda essa funcionalidade de ser capaz de enviar para HTML5, poder visualizá-lo no meu iPhone, ser capaz de vê-lo em um iPad, tudo isso é jogado para fora da janela quando você realmente constrói a biblioteca como um arquivo JAR. Então, é por isso que decidimos fazer do HYPE um monte de arquivos pde. Fazendo-os arquivos pde significa que podemos publicar para HTML5, podemos publicar para Processing.js. Agora, você pode estar se perguntando, bem, como faço para publicar no Processing.js? Então, se você realmente iniciar o Processamento 2 aqui, você notará que aqui no canto superior direito, ele diz Java, e esse é o único modo que está lá. Mas você pode clicar em Adicionar Modo, e você teria este pequeno gerenciador de modo, e você vai notar aqui, modo JavaScript. Se você realmente clicar em Instalar, ele vai baixar o modo JavaScript no Processamento 2. Então, agora, se eu realmente fechar isso, eu posso escrever um monte de código, eu posso publicar em Java quando eu clicar em Executar. Você sabe o que? Talvez eu tenha que reiniciar. Processamento 2, e agora, temos JavaScript. Se você realmente clicar em JavaScript, agora, você pode realmente abrir seus esboços e clicar em Construir. Ele irá realmente empacotar todos os arquivos para uso em um navegador da web. Ele vai gerar o HTML, ele vai cuspir o JavaScript, e agora, muitos desses esboços que fazemos, nós podemos realmente carregar e visualizar em um navegador. Então, as etapas do projeto dois, três e quatro, falamos sobre olhar para o arquivo zip, digerir todo o conteúdo lá, muitas coisas boas, muitos bons exemplos. Etapa do projeto três, localize Hype.pde. Lembre-se da estrutura de pastas que vamos usar porque vamos usar essa estrutura de pastas em cada um de nossos projetos. JAR versus PDE. Eu não quero usar um arquivo JAR, quero usar pde para que você possa realmente publicar na web. Agora, no próximo vídeo, vamos falar sobre HYPE e, especificamente, vamos falar sobre o que é Fluid Interface e o que é o encadeamento de métodos, porque esses são conceitos que fazem parte da fundação do HYPE. Então, no próximo vídeo, vamos falar sobre o que aconteceu na versão AS3 do HYPE e o que aconteceu na versão Processando no HYPE. Vejo você no próximo vídeo. 9. Java versus Javascript: Mudei de ideia. Antes de passar para a próxima seção, eu só quero mostrar muito rapidamente o cenário Java versus JavaScript. Estávamos olhando para o Hoscillator e se você realmente abrir o exemplo um, em Sublime Text 2, por exemplo, aqui está o código. E se eu clicar em “Construir”, estou visualizando esse conteúdo em Java. Ok, então este é Java rodando bem aqui, ok. Agora, se eu pegar exatamente o mesmo arquivo, exemplo um e realmente abri-lo no processamento dois, tudo bem. Você pode ver os dois editores aqui, certo? Estes dois são idênticos, e novamente eu tenho Java selecionado no canto superior direito. Se eu fosse realmente apertado “Click” e executar isso, ok, fora do processamento dois. Novamente, esses dois são idênticos, você está rodando no modo Java. Está bem. No entanto, se eu fechar isso agora, e eu correr até aqui para o modo e mudar para JavaScript, ok. Quero que vigie esta pasta aqui. O fato de eu mudar para JavaScript, adicionar um arquivo sketch.properties, e quando eu realmente clicar em “Executar”, o que você vai notar é que ele realmente o publica na web. Você notará que ele criou um novo arquivo chamado web-export. Ele contém o index.html, ele contém o arquivo PDE que está realizando essa animação, e processando JS que está interpretando seu arquivo PDE para ser executado na tela em HTML5. Então olhe, estes dois são absolutamente idênticos. O que está sendo executado em Java e o que está sendo executado no navegador, o desempenho é o mesmo. Então, novamente, essa é apenas uma razão pela qual decidimos não criar Hype usando o formato JAR. Decidimos usar o formato PDE para que pudéssemos aproveitar a possibilidade de publicar nosso conteúdo em JavaScript. Está bem, vemo-nos no próximo vídeo. 10. HYPE AS3 / Passo 5 do projeto: O que eu quero fazer agora é realmente olhar para como a versão antiga do Hype foi realmente estruturada quando você está escrevendo código. Agora, a versão antiga do hype foi desenvolvida para Flash e ActionScript 3. Foi um fantástico projecto conjunto entre um bom amigo meu Brandon Hall e eu. Ele executou o mesmo serviço que é, eu quero fazer coisas e essas coisas podem ser embaladas em classes separadas para tornar a vida mais fácil. Então, vai ser útil ver como a versão antiga do Hype foi construída porque ele vai lhe dar algumas informações sobre as partidas que fizemos quando fomos fazer a porta de processamento. Então, imagine por um momento que queremos desenhar uma grade na tela. Na versão Hype AS3, eu poderia fazer algo assim onde eu diria var NumAssets é um inteiro igual a 25. Então, essa é uma variável que representa o número de coisas que eu quero tocar na tela. Agora, nós tínhamos um GridLayout na versão AS3 e a coisa boa sobre o GridLayout é que você poderia chamar GridLayout, passar alguns argumentos e que esses argumentos seriam informações sobre como construir visualmente a grade na tela. Então, para fazer isso, eu poderia escrever algo assim onde eu diria, var layout é um GridLayout é igual a novo GridLayout. Em seguida, você pode ver em alguns dos meus exemplos, alguns números sendo passados para GridLayout. Então, pode ser algo como 50,50,100,100,5. Agora, provavelmente a maior queixa com este código é que você não teria idéia do que esses números representavam. Não faço ideia do que 50, 50, 100, 100, 5, é. Você realmente teria que abrir a classe GridLayout, olhar para a função e, em seguida olhar para o que esses argumentos são e o que eles definir. Então, isso significava que em todos os exemplos, eu teria que colocar um comentário dizendo às pessoas quais eram esses cinco argumentos. Então, acaba que os argumentos ou XStart, YStart , XSpacing, YSpacing e colunas. Agora, já que estamos construindo uma grade na tela, os dois primeiros argumentos foram, onde você quer que essa grade na sua totalidade exista na tela? Então, eu diria, “Ok, bem, eu quero que seja 50 pixels, comece em 50 pixels no eixo x, comece em 50 pixels no eixo y. Os dois argumentos seguintes, XSpacing e YSpacing iria definir o espaçamento entre cada uma das células na grade. Então, ele iria começar a anexar o primeiro item e, em seguida, 100 pixels mais tarde ele iria anexar o segundo item. Agora, o último argumento são colunas. Então, neste caso, estamos construindo uma grade que contém 25 ativos, e então, se você pegar 25 divididos por cinco, você recebe cinco. Então, ele sabe que ele vai fazer uma grade de cinco por cinco tomando 25 divididos por colunas. Então, esse quinto argumento descreveria o número de colunas que estão dentro deste grupo. Então, eu acho que olhar para isso dá a você algumas informações sobre como nós partimos quando decidimos fazer a porta Hype Processing. Então, no próximo vídeo, vamos pegar a mesma estrutura exata, mas vamos mostrar como é diferente no processo importante. 11. Processamento do HYPE / Passo 6 do projeto: Ok, então agora estamos abordando a etapa seis no guia do projeto, e isso realmente está abordando o que mudou na porta de processamento do HYPE. Agora, a versão HYPE AS3, grande projeto entre Brandon Hall e eu. No entanto, quando eu decidi deixar de trabalhar no Flash como uma ferramenta de desenvolvimento, e realmente queria passar para o processamento, e ter esse desejo de portar a versão HYPE AS3 para o ambiente de processamento, era uma oportunidade para mim realmente abordar algumas das coisas de como o código foi estruturado apenas para torná-lo mais fácil para mim e para os outros. Então, o porto de processamento é um projeto entre mim e um cavalheiro maravilhoso em Manila, Filipinas, James Cruz. Novamente, começamos a olhar para histórias de sucesso na comunidade de programação e havia algo que fosse benéfico na comunidade de programação que pudesse tornar a porta de processamento do HYPE melhor do que era antes. Com isso dito, essa idéia de Interface Fluente, e esse uso de Encadeamento de Método iria redefinir como a porta de processamento do HYPE é fundamentalmente diferente. Está bem? Realmente, esta foi uma oportunidade para olharmos para a comunidade jQuery e dizer : “Sim, este é o caminho a seguir.” Agora, esses links foram fornecidos nas etapas do projeto para que você possa ler na interface fluente, você pode ler sobre o encadeamento de método. Mas, vejamos o que fizemos nos dias HYPE AS3 e como esse código foi alterado na porta de processamento. Então, digamos que eu abra um novo documento aqui, eu estou obviamente indo para definir o processamento como meu idioma e, em seguida, eu vou apenas para colar o código inicial dos dias AS3. Var NumAssets 25, var GridLayout, e então falamos sobre essa linha dois, que precisa colocar no comentário para que você possa dar alguma instrução para o que esses argumentos são. Agora, o que interface fluente e encadeamento de métodos nos permite fazer é, na verdade, escrever este código um pouco mais elegantemente. Então, vamos apenas dizer que este é o processamento de HYPE. Está bem. Se eu escrevesse o mesmo código, mas na porta de processamento HYPE, eu provavelmente faria algo assim, número inteiro numAssets é igual a 25, ok? Então, isso é escrito um pouco diferente, mas ainda faz a mesma coisa. Estou criando uma variável que vai representar o número de coisas que eu quero desenhar na tela. Agora, se você se lembra, precisamos chamar a classe de layout de grade. Então, eu vou ir em frente e dizer, HGridLayout, layout é igual a novo HGridLayout, assim. Agora, vamos falar sobre isso. Sempre que você estiver usando chamadas específicas do HYPE, a maioria dos métodos será precedida com um H. So, HColorPool, HGridLayout, HOScillator, então é apenas uma maneira de identificar o que é o código de processamento regular e o que código de processamento específico do HYPE. Então, aqui estou criando uma variável chamada Layout, estou lançando como HGridLayout e estou dizendo que é um novo HGridLayout. Agora, neste ponto, você pode estar pensando, “Oh, sim, Josh vai colocar um monte de números lá.” Não, eu não sou. Na verdade, vou definir as variáveis um pouco diferente. Então, o que eu vou fazer é, na próxima linha eu vou dizer, “Ei, Layout, eu só quero que você saiba que você tem essa variável chamada start X e que vai ser igual a 50.” Está bem? Se eu copiasse e colasse isso e mudasse isso para começar Y 50, eu diria espaçamento entre pontos, certo? Lá em cima, era espaçamento X e espaçamento Y. Na versão de processamento do HYPE eu só vou dizer espaçamento de pontos de layout, e então eu vou dizer 100 no X, 100 no Y, e no último argumento, eu vou ir em frente e dizer, “Ei layout as colunas são cinco.” Está bem? Então, este código agora conceitualmente é uma duplicata do que a versão AS3 vai fazer em termos de chamar uma classe e passá-la alguns argumentos. Agora, você pode estar dizendo para si mesmo. “ Uau, ok, isso é muito mais código do que o de cima.” O acima você só tem em três linhas, mas podemos realmente fazer isso mais curto, mostrando o que método encadeamento é. Mas, antes de eu fazer o método encadeamento versão, vamos apenas falar sobre algumas coisas. Uma é, você não precisa mais colocar um comentário porque você está realmente chamando o que é que você está definindo. Então, você está dizendo, “Ei, ponto de layout começar número X.” Então, obviamente, a linha 12 está configurando a posição inicial X. Então, estruturar o código desta forma significa que você está colocando em identificadores para o que os números realmente são. O que eu acho, torna isso muito mais útil para iniciantes. Não só isso, mas você poderia dizer que você queria definir o início X aqui, ele não tem que ser esta ordem rígida acima. Lembre-se, eu disse que o primeiro argumento era sempre X start, o segundo argumento era sempre Y start. Então, tinha que ser nessa ordem. Ao desenvolver o código desta forma, você pode especificar em qualquer ordem que você realmente deseja, e termina que cada classe realmente tem algumas configurações padrão. Então, se você realmente decidiu não escrever X start, Y start, e você realmente executou o código, ele realmente funcionaria porque a classe em si tem alguns números iniciais para iniciar X e começar Y. Então, na minha opinião, esta é uma grande nova adição ao HYPE. Essa ideia de ajudar o iniciante a entender o que os números estão associados a cada classe. Agora, vamos voltar para, “Josh, lá em cima são apenas duas linhas de código e, obviamente, isso é muito mais.” O interessante é, é que podemos fazer este método encadeamento. Então, se você quiser, você pode escrever o código desta forma. No entanto, você também pode escrever o código desta forma que é, você poderia dizer, numAssets inteiro é igual a 25, e então você poderia dizer, HGridLayout é igual a novo GridLayout e, em seguida, depois de fazer o paren de fechamento aberto, você poderia dizer ponto inicial X, você poderia então dizer ponto início Y, você poderia então dizer espaçamento entre pontos, e então você pode terminá-lo com colunas de ponto. Então, esse é o método encadeamento onde você está chamando um método e, em seguida, encadear cada um dos argumentos que você deseja passar esse método depois dele. Então, agora estamos de volta a usar duas linhas de código, certo? Então, você está dizendo, “Ei, eu quero fazer um layout, e pontuar isso, ponto isso, ponto isso, ponto isso”, e você poderia continuar. Então, essa idéia de usar o método encadeamento, novamente, você poderia colocar isso em qualquer ordem ou você poderia fazer o espaçamento primeiro, em seguida, iniciar X e iniciar Y, você pode reorganizar como você escrevê-los. Não é tão rígida como a de cima. Agora, em muitos dos meus exemplos, você pode ver algo assim, onde eu realmente começar com o código dessa maneira, mas eu realmente faço isso que é, eu vou colocar o ponto e vírgula de fechamento em sua própria linha no final, e então eu poderia fazer hard return, tab, tab, Eu estou apenas colocando em hard return e tabs apenas para limpar o código, modo que o argumento é apenas são um pouco mais fáceis de ler. No entanto, todos os três funcionarão, e todos os três estão fazendo exatamente a mesma coisa. Então, novamente, você poderia fazê-lo desta maneira, onde você chamar layout e, em seguida, dizer layout dot argumento, layout dot argumento, layout dot argumento, ou você poderia fazer o método encadeamento maneira de escrevê-lo, onde você está chamando e, em seguida, encadear os argumentos depois. Isto, obviamente, é a mesma coisa, exceto para eu colocar em retornos rígidos e guias que eu possa apenas olhar visualmente para o código um pouco mais fácil. Você vai ver como com algumas classes como Hoscillator, você pode realmente especificar um monte de argumentos no Hoscillator, e se ele tem um monte de argumentos, essa linha 20 poderia realmente ser muito longo. Tanto tempo que posso não ver o que está no final. Então, fazendo a linha 24 a 30 que você vai encontrar é o que eu costumo fazer, só porque torna um pouco mais fácil olhar visualmente para todos os argumentos que eu estou passando para o HGridLayout. Está bem. Neste ponto, fizemos a seção um que é a configuração do ambiente. Estamos encerrando a seção dois, que é apenas uma introdução ao que é HYPE para processamento e o que, novamente, é uma biblioteca inteira de coisas que fazem as coisas. Então, se você quiser trabalhar com cores, temos um pool de cores. Se quiser trabalhar com grades, temos um layout de grade. Então, é uma série de classes que ajudam você a fazer as coisas de forma mais rápida e eficiente para que você não tenha que escrever esse código novamente. Agora, vamos passar para a seção três. Seção três é, desenhar recursos visuais. Na verdade, nós não vamos começar a escrever código real para o nosso projeto até o passo quatro, onde nós realmente estamos pintando para a tela. Então, o passo três é, vamos desenhar nossos recursos visuais. Então, vamos alternar para desenhar algumas obras de arte. Como preparamos essa obra de arte? Então vamos salvar esse trabalho de arte para o lado porque quando vamos para a seção quatro pintura para a tela, temos alguns bancos de obras de arte que podemos realmente começar a pintar com. Então, seção dois, apenas uma visão geral universal do que é HYPE, como ele vai ser fácil de usar, e em seguida, vamos passar para desenhar alguns ativos visuais. Vejo você na próxima seção. 12. Introdução: desenhando recursos visuais: Então desenhando. Sério, isso não é complicado. É como preparamos a obra de arte que vamos fazer. O tipo de programação que eu faço, o tipo de programação que vamos fazer juntos é completamente agnóstico de obras de arte. Então, esta é a parte que fica realmente emocionante porque o programa vai gerar aleatoriamente uma composição baseada no tipo de trabalho artístico que você cria. Comprei isso quando estava na Malásia, e pense nelas, não em toda a composição, mas pense neles como ativos individuais que podem ser os desenhos que fazemos que são preenchidos na programação que escrevemos . Olhem para estas coisas, estes dois são de Istambul, Turquia, e olhem para os padrões destes guerreiros. Posso fazer todo este desenho, mas posso dividir isto em seis bens diferentes. Então, às vezes eu só tenho que ser inspirado por um desenho, mas eu vou dividir esse desenho em seis diferentes ativos abstratos. Especificamente, eu vou ser a saída deles do Illustrator para SVG, que é gráficos vetoriais escaláveis, porque nós podemos puxar esses SVGs para processar muito bem e vamos usar esses desenhos para gerar aleatoriamente composições. Quer fazer algo com gatinhos e motosserras? Gatinhos e motosserras. 13. Desenhando recursos visuais: Bem-vindos à seção três, Desenho de Ativos Visuais. Nesta seção, vamos falar sobre o mapeamento do trabalho artístico para a programação que escrevemos. Então, este tem sido o meu tipo de pensamento por anos e anos e anos. Há pessoas que usam apenas código para desenhar os recursos visuais. Então, por exemplo, há um grande grupo de pessoas que apenas desenham com retângulos, linhas e elipses e isso é bom. Mas o processamento, obviamente, suporta trabalhar com imagens, ele também suporta trabalhar com SVG, Scalable Vector Graphics. Então, o que eu quero fazer é realmente desenhar ativos de base vetorial que eu vou mapear para esses programas que vamos escrever. Então, por exemplo, layout de grade. Por que não fazemos uma grade, mas essa grade é realmente recursos visualmente desenhados à mão? Então, agora você está vendo algumas coisas na tela que eu vou passar algum tempo desenhando. Eu sou uma aberração total quando se trata de caçar estética cultural e conteúdo. Poderíamos passar essa aula inteira só olhando para coisas que colecionei no mundo todo. Então, por exemplo, vamos verificar isso. Aqui está um livro grama 4000 Flores e Motivos Plantas. Novamente, isso é apenas preenchido com diferentes motivos de plantas. Para mim, isso pode ser um começo de uma partida, um começo de inspiração, ou talvez haja coisas aqui que funcionem perfeitamente como estão. Então, eu coleciono um monte de livros que eu estou constantemente procurando inspiração. Mas às vezes, eu só me sento com um caderno de esboços e trabalho ideias no papel. Então, há um motivo floral que desenhei no papel. Talvez eu me sentar e desenhar as plantas da casa que estão na minha casa. E novamente, estou procurando forma, estou procurando forma, estou procurando textura. Talvez eu me sentasse e trabalhasse alguns crânios de açúcar, e então, estes são alguns. Inicialmente, eu me tatuei, mas o tipo inicial de planejamento era apenas esboçar no papel. Às vezes, estou pensando em formas geométricas. Então, às vezes eu me sento e estou pensando em algumas formas geométricas. Ou você pode até ir lá fora, e isso é da arquitetura, então, há uma taxa de toldo de janela aqui, o número do prédio era 314. Estas são molduras de uma janela, e esta tinha um sinal. Às vezes, estou recebendo formas de uma visão abstrata da vida ao meu redor, no caso de ser arquitetura. Passei uma grande viagem em Istambul, Turquia. Então o último projeto que fiz foi baseado nesses guerreiros que acabei comprando em Istambul, e apenas reimaginando algumas dessas formas desses guerreiros. Novamente, estou pensando neles de forma abstrata. Então, eu posso desenhar uma composição inteira, apenas para rasgá-la em partes abstractas individuais. Então, agora, você deve ver algumas coisas na tela. Isto é de um livro que alguém me enviou sabendo que eu ia enlouquecer , Ornamento Nacional da Mongólia. Então, a digitalização que você está vendo na tela é realmente deste livro, e obviamente, eu perdi. Este aqui é só bananas. Algumas das coisas que estão aqui, novamente, são apenas um começo interessante para uma conversa. Mas é um mistério, é um mistério. Tenho de te avisar, não faço ideia se isto vai funcionar. Acho que vai funcionar. Já fiz isso tempo suficiente para saber que acho que vai funcionar. Mas muitas vezes, eu sento e desenho coisas com a única intenção de mapear para um programa, e visualmente não funciona. Então, há esse tipo de tentativa e erro. Esta página para mim é bem segura. É o que você está vendo na tela agora. Penso que isto vai funcionar muito bem. Então, eu digitalizei em 150 DPI, e agora vou passar pelo processo de desenho. Eu quero vetorizá-lo, e é claro, há um monte de ferramentas lá fora para criar vetores. Acredite ou não, eu realmente vou desenhar isso usando flash, e há um monte de razões para isso. Eu realmente gosto de desenhar em Flash, porque é o mais perto de mão livre que eu posso chegar. E inicialmente, eu era um usuário à mão livre. Eu gosto dessa idéia de ser capaz de desenhar linhas vetoriais e outras coisas e depois cortar. Então, sempre que uma linha se cruza, eu posso esculpir ou cortar essas seções, apenas selecionando e excluindo. Então, algo que o Illustrator por muito tempo não suportou. Agora, ele suporta com tinta ao vivo, você pode realmente converter algo em tinta viva e então você pode passar pelo processo de escultura. No entanto, o Illustrator também é, para mim, como uma ferramenta vetorial incrível, quase demais. Flash, de muitas maneiras, não é incrível. Eu gosto disso. Gosto da distorção que o Flash me dá. Então, você vai ver no próximo vídeo, eu provavelmente vou fazer uma coisa de lapso de tempo, ou você vai me ver desenhando muito rapidamente para que você possa ver como eu vetor uma dessas peças. Mas o que eu adoro no flash é que vou usar a ferramenta de lápis e usar uma mesa digitalizadora Wacom, e as linhas não são perfeitas. Você pode ver como eu vou desenhar uma linha e eles vão ser um monte de distorção na linha, e eu realmente gosto disso. Eu gosto que não é perfeito, porque ele dá mais desta mão desenhar sentimento para ele. Eu falava muito sobre discos. Eu ainda tenho um toca-discos aqui no estúdio, eu tenho discos pendurados aqui em cima. E há, na verdade, um calor analógico nos registros, que o áudio digital nunca terá. Quero dizer, podemos ter essa discussão, mas essa é a verdade. Eu gosto que eu tenho este processo realmente técnico para gerar a composição com programação, mas é usar ativos que não são perfeitos. Eles estão usando ativos que são desenhados à mão. Se eu quiser fazer um círculo, às vezes eu vou desenhar esse círculo à mão, para que esse círculo não seja um círculo perfeito. Eu não gosto de usar a ferramenta caneta em fazer curvas bézier perfeitas, é muito limpo para mim. Eu gosto de distorção, eu gosto que minha mão treme, eu gosto desse tipo de, é simétrico, mas é desenhado à mão, e então pegar esses ativos desenhados à mão e colocá-los em uma situação muito imaculada e ordenada, como programação. Então, no próximo vídeo vou passar para a mesa digitalizadora Wacom. Provavelmente não vou ter áudio ligado. Então, a tela que você está vendo agora é uma antiguidade da Wacom, e eu vou usar isso para desenhar. Além disso, eu pego isso, o que é ótimo, e é uma luva feita especificamente para trabalhar nesta antiguidade, porque esta antiguidade é um monitor e aquece. O que vai acontecer, é que a minha mão tenderá a ficar. Então, o que é bom é que isso me permite fazer curvas sem que eu tenha que me preocupar com minha mão grudando na tela. Então, se você é um usuário da Wacom, eu recomendo vivamente a luva, a luva elétrica, porque você pode obter essas curvas de fluido agradáveis sem que sua mão realmente grude na superfície. Seja este antigo ou mesmo se for apenas um tablet Wacom comum, a capacidade de não ficar na superfície e fazer esse tipo de curvas agradáveis é super útil. Então, eu recomendo a luva. Então, próximo vídeo, sem áudio, lapso de tempo, e vamos elaborar um desses recursos. Quero que vejas como uso o Flash para cruzar e esculpir esses desenhos que vou fazer. Agora, eu vou terminar este vídeo com, você deve estar pensando que recursos visuais você quer usar para mapear para este ambiente? Novamente, pode ser floral, pode ser orgânico, pode ser geométrico. Eu obviamente vou fechar alguns ativos para você usar, para que você possa ver alguns dos desenhos que eu faço. Eles serão anexados às etapas do projeto como downloads de arquivos zip. Mas você deve estar pensando, “Josh vai nos ensinar essa programação, e esta programação quer anexar coisas na tela, quais são as coisas que estão sendo anexadas?” Vai ser desenhos que você faz. E é aí que a individualidade realmente vai mostrar através de todas as coisas enviadas pela classe, porque a programação vai estar usando seus ativos, programação vai estar usando meus ativos, assim por diante e assim por diante. Então, cada peça deve ser única, porque cada um de vocês vai mapear diferentes ativos nesse ambiente. Então, me veja desenhar, e pense sobre, o que você vai fazer para mapear neste ambiente. Está bem? Vejo você no próximo vídeo. 14. Desenho de abstração: Eu só queria tirar um minuto para mostrar esta imagem na tela. Aqui está um exemplo perfeito de um ponto de partida de inspiração que é abstraído. Então, por exemplo, esta é a viagem a Istambul. Acabei redesenhando esse cara, mas talvez isso se torne um dos meus recursos visuais, que faz parte do braço dele. Repare que eu não uso os rostos. Eu não quero usar nenhum tipo de imagem que se torne reconhecível, onde você diz “Oh, isso é um rosto.” Eu posso mudar, mas eu tento manter minhas coisas meio abstratas para que você não saiba inicialmente talvez o que você está olhando. Olhe para esta forma independente aqui, que por acaso é uma seleção deste torso. Então, às vezes você pode pegar um desenho e quebrar esse desenho em seis ativos diferentes, ou cinco ativos diferentes, ou o que for. Então, tenha isso em mente, que quando digo procurar imagens para se transformar em ativos, pode ser uma imagem. Em seguida, essa imagem, você poderia dividir-se em arquivos SVG independentes separados. Então, novamente, este é apenas um exemplo rápido de como um desenho ou dois desenhos se tornam meu conteúdo. Está bem. 15. Desenho de time-lapse: - Bom. - Tudo bem. 16. Preparação final do projeto: Ok. Então você acabou de assistir o vídeo anterior que era um lapso de tempo de desenho. Você deveria estar vendo na tela agora a arte que desenhamos. Agora, vocês devem ter notado no lapso de tempo, eu realmente comecei a bloquear alguma cor no desenho real que eu fiz. Faço isso porque me ajuda a organizar como quero que as coisas sejam bloqueadas em termos de cor. Ok. Então, por exemplo, como talvez essas formas particulares aqui, eu quero que todas sejam da mesma cor. Então, eu já fiz algum bloqueio inicial em escala de cinza. Agora, eu preciso tirar isso do Flash e realmente colocá-lo no Illustrator para que eu possa enviar para um arquivo SVG. Agora, se você não estiver desenhando no Flash, se estiver apenas desenhando no Illustrator , obviamente você pode pular esse próximo conjunto de etapas. Mas o que eu vou fazer é realmente destacar o desenho que eu acabei de fazer no Flash e então eu vou ir em frente e dizer Arquivo, Exportar, Exportar Seleção, e quando eu disser Exportar Seleção, ele vai querer salvar isso como um arquivo FXG. Ok, e eu vou em frente e colocar isso na minha área de trabalho. Agora, depois de eu ter feito isso, eu posso ir em frente e minimizar o Flash ou eu posso fechá-lo, e você verá aqui no meu desktop, eu tenho o FMLA e eu tenho este arquivo FXG. Agora, acontece que você pode abrir este FXG dentro do Illustrator, e quando eu faço isso, eu posso ver que ele é emitido todas as informações vetoriais. Então, deixe-me apenas limpar este documento, deixe-me ir para os quadros de arte e eu vou fazer isso uma largura de 300 e uma altura de 300, e eu vou simplesmente centralizar, tentar de novo, Josh. Tente de novo, mais uma vez. Deixa-me centrar isto assim. Ok. Mais uma vez se, eu fosse clicar em View Outline, você veria que esta é toda informação vetorial. Tudo bem. Agora, o que eu quero que você se concentre neste ponto é na verdade a paleta das camadas, porque isso é super importante. Você pode notar que há sete camadas dentro do Illustrator, e as camadas são, na verdade, caminhos compostos. Se você escondesse cada camada e olhasse para cada uma de forma independente, você veria que o agrupamento, ele passou e agrupou todas as cores individuais que eu defini no Flash. Então, isso é importante, como vocês podem ver aqui todas as formas que eu fiz este cinza escuro em particular foram agrupadas como um caminho composto. Tudo bem. Agora, outra coisa que você precisa tomar nota é que a camada superior geralmente são os dados do traçado. Então, os preenchimentos ou, na verdade, os seis inferiores, o topo é essa informação de traço. Agora, neste ponto, eu posso ir em frente e clicar em “Salvar como” e eu posso salvar isso como um documento SVG. Então, a partir do formato, basta selecionar o SVG e eu vou ir em frente e colocar isso na minha área de trabalho e clicar em “Salvar”. Você vai ter esta paleta de opções que se abre, você pode realmente ignorar todas essas coisas e basta clicar em “Ok”. Agora, eu vou fechar este documento e então agora eu tenho um documento SVG na minha área de trabalho. Então, o que é SVG? Bem, você pode realmente arrastar isso para Sublime Text 2, e você veria muito rapidamente que um documento SVG é realmente um arquivo de texto. É um arquivo de texto que contém todos os dados de ponto que compõem o trabalho artístico específico que você viu na tela. Então, novamente, super importante notar que um SVG é um documento de texto. Tudo bem. Então, o que eu fiz é, nesta seção em particular, estamos apenas falando sobre desenhar recursos visuais. Na próxima seção, vamos falar sobre pintura para a tela, como você pinta coisas para a tela, e na quinta seção, vamos falar sobre trabalhar com cores. Então, é realmente uma seção conhecida que eu estou realmente começando a falar sobre código, mas eu preciso compartilhar algum código com você agora e eu estou realmente indo para anexar um arquivo a este vídeo particular porque nós realmente não terminamos de preparar o porque você vai notar que se nós apenas passamos por esses passos, puxá-lo para o Illustrator, nós vamos notar alguns acontecimentos estranhos. Então, olhe o que eu fiz aqui. Criei uma pasta na minha área de trabalho chamada Mongo 1, criei uma pasta chamada Build. Dentro de Build, como minha compilação PDE e meu hype PDE e, em seguida, eu criei outra pasta chamada dados, e é na verdade na pasta de dados que você coloca seus ativos externos. Então, neste caso, aqui está Mongo.SVG. Agora, se eu fosse abrir esse arquivo PDE, eu escrevi algumas coisas. Ok. Eu escrevi que eu quero que o palco seja 900 por 900, Eu especifiquei o fundo, é um cinza claro, eu realmente especifiquei seleção de cores que eu quero que este arquivo use. Aqui está branco, há três cinza, há dois azuis e há duas laranjas. Este bloco de código específico aqui lida com o carregamento e a anexação do arquivo SVG externo. Eu disse que quero que o peso do curso seja 0,5, eu disse que quero que a cor do traçado seja preta. Eu não quero nenhum Phil, eu quero que o ponto de âncora da obra de arte seja no centro. Eu especifiquei sua localização para ser anexada no centro, então largura dividida por dois, altura dividida por dois. Agora, a obra de arte é pequena, então eu coloquei em uma escala três para que fosse apenas um pouco maior. Escala um obviamente sendo 100%, escala três sendo 300%. Agora, linha 19 é onde nós realmente correr através da arte e definir um pouco de cor apenas para os phils. Agora, eu só vou comentar isso porque eu realmente quero executar este arquivo e eu quero ver o que acontece. Agora, quando você executar este arquivo, ótimo, olhe ele fez exatamente o que eu pensei que ele iria fazer que é, ele foi carregado no arquivo SVG, ele anexado ao centro da tela, ele parece idêntico como ele faz dentro de o arquivo do Illustrator. Agora, não é até começarmos a aplicar cores aleatórias que começamos a notar que precisamos fazer um pouco mais de preparação dentro do Illustrator. Então, eu vou ir em frente e colocar este comentário de volta em que é aplicar cor aleatória para apenas os preenchimentos. Tudo bem. Agora, veja o que acontece quando eu executar este arquivo em particular. Quando eu executar este arquivo, ele enlouquece. Eu só não consigo entender o que está acontecendo, como se estivesse fazendo algum bloqueio estranho aqui, algo realmente estranho aconteceu nesta seção. Algo não está certo. Ok. Então, eu realmente vou fechar este arquivo e voltar para o Illustrator. Então, se eu entrar no Mongo, entrar no Build, entrar na minha pasta de dados, há Mongo.SVG e eu vou ir em frente e abrir isso novamente no Illustrator. Ok. Aí está o meu enredo. Vamos abrir a Paleta de Camadas, e deixe-me tentar explicar isso. Quando isso é exportado para o SVG, esse documento SVG contém todas as informações vetoriais de toda a arte que você está vendo na tela. Então, se, e não importa, essa informação vetorial não importa se você definiu um preenchimento ou definiu um traçado. Defina uma espessura de traçado, defina uma cor de traçado, defina uma cor de preenchimento. Esqueça tudo isso. Tudo o que contém são os pontos para desenhar esta obra de arte. Agora, a parte que está surtando agora é na verdade a camada superior do traçado. A razão pela qual os traços estão surtando é porque essa camada superior é apenas traços e quando você carrega isso no processamento e diz, “Ei eu quero fazer preenchimento aleatório”, ele pensa, “Oh você quer fazer preenchimentos em todo o vetor informação.” Então, o que ele está fazendo é tentar aplicar cor de preenchimento a essa saída de traçado. Então, o que eu vou fazer é lixar essa camada. Então, tudo o que me resta nas minhas camadas é o que parece ser apenas preenchimentos. Agora, se eu ir em frente e clique em Salvar e deixe-me apenas mover isso para o lado e vamos realmente voltar para o nosso código e agora vamos executá-lo, vamos ver o que acontece. Boom! Ele funciona totalmente como esperado porque o que ele está fazendo é, ele está aplicando cores aleatoriamente para os preenchimentos. Mas então você pode estar dizendo, “Espere um segundo Josh. Por que os traços voltaram?” Bem, os traços voltaram porque especificamos os traços aqui na linha 11 e na linha 12. Na linha 11 e na linha 12 você disse, “Ei, esses preenchimentos que você tem, esses preenchimentos que você tem que não têm derrame. Sim, eu quero derrames neles.” Dê-me um peso de 0,5, dê-me uma cor de preto. Então, mesmo que o trabalho artístico no Illustrator seja apenas preenchido. Estou aplicando um traço nesses preenchimentos, dentro do processamento. Então, foi a camada superior que tinha a informação do traçado que começou a surtar porque estava realmente tentando aplicar preenchimentos aleatórios para esse caminho composto. Então, excluindo-o, eu volto para onde eu queria estar. Agora, você pode notar que também é aplicada a cor simetricamente em todo o trabalho artístico. Tudo bem. Então, por exemplo, este é azul claro, este é azul claro, este é azul claro, e o mesmo azul claro exato está neste, neste aqui, e neste aqui, tudo bem. Então, deixe-me ir em frente e fechar isso e deixe-me realmente alternar de volta para o Illustrator. Agora, deixe-me olhar para esse conjunto particular de cores e é na verdade este caminho composto bem aqui. Então, se eu fosse fazer isso, agora estamos olhando para todas as obras de arte que têm a mesma cor exata. Na verdade, porque é apenas um caminho composto, ele realmente apenas se aplica, ele só pensa que é uma peça de arte. Então, ele realmente aplicou uma cor para o que ele acha que é apenas uma peça de arte. Então, veja o que acontece quando eu venho até Object e digo Compound Path e digo Liberar. Liberte-o de ser uma forma, quando eu a liberei de ser uma forma, olhe para o que acontece com a paleta de camadas. Ele se separou do caminho composto e agora está tratando cada um deles como peças independentes de obras de arte. Então, agora se eu fosse ligar todos os meus outros preenchimentos aqui. Salve meu documento SVG, alterne de volta para o meu código e clique em Executar, veja o que acontece. O que está fazendo agora é dizer: “Oh, cara. Este é um monte de formas independentes, então eu vou colorir cada um de forma independente. Agora, para as cores eu tenho 1, 2, 3, 4, 5, 6, 7, 8. Eu tenho oito cores, então eu realmente não tenho muitas cores. Então, se você olhar aqui, parece que ele escolheu a mesma cor, mas eu posso dizer agora que este é FFFF e este é F7F7F7, é um pouco diferente. Olha, ele fez essas duas cores diferentes, ele fez essas duas cores diferentes porque esse agrupamento como um caminho composto tratou esta obra de arte como apenas uma peça de arte e, assim, que uma peça de arte acabou de obter uma peça de colorir. Então, se eu fechasse isso e voltasse para o Illustrator, você pode imaginar que se eu selecionasse todos esses caminhos compostos, e então fosse para Object, Compound Path e Release, de repente suas camadas paleta vai pirar. Porque agora, cada forma é uma obra de arte independente. Agora, se eu clicar em Salvar, alternar de volta para este documento e executá-lo novamente, você não teria nenhuma simetria de cor. Porque ele acha que todas essas formas são independentes e porque todas essas formas são independentes, todas elas vão ficar coloridas de forma diferente. Tudo bem. Então, realmente super importante para manter em consideração enquanto você está preparando esses recursos visuais porque se o grupo é apenas caminho composto, você vai obter esta coloração universal. Se você dividi-los todos em ativos separados, então você obtém uma situação de cor não harmoniosa porque ele acha que cada uma dessas formas é diferente. Agora, você pode estar dizendo, “Bem Josh, como eu quebro todas essas coisas e então como eu aplico, colorindo dois objetos específicos?” Então, vamos alternar de volta para o ilustrador e vamos olhar para algo. Olhe para esta forma, esta forma, esta forma, esta forma , esta... Woah ali, whoa. Vamos tentar de novo. Vamos tentar de novo, Dubby. Oh, eu quebrei meus caminhos compostos. Tente de novo Josh. Acabei de liberar o Caminho Composto porque você desfez. Tudo bem. Então, o que estou fazendo é selecionando, assim. Então agora, na verdade aqui, posso fazer assim? Sim, lá vamos nós, muito melhor, isso é muito mais fácil. Tudo bem. Oops. Aqui vamos nós. Na verdade, há duas formas separadas aqui que eu não estava entendendo. Tudo bem. Então, o que eu fiz foi usar a Ferramenta de Seleção apenas para selecionar todos os trabalhos artísticos que me interessam. Então, se olharmos aqui na Paleta de camadas, um monte de coisas são destacadas. Agora, tudo o que vou fazer é agrupá-los. Se eu fizer o Comando G e agrupar tudo isso como uma obra de arte. Vá em frente e clique em Salvar , volte para o meu código e execute-o. Agora você vai notar que uma cor foi aplicada a todas as oito formas. Certo? Então, laranja, laranja, laranja, laranja, laranja, laranja, laranja, laranja, laranja. Então, super importante para levar em consideração enquanto você está preparando seus ativos visuais, é que se todas as formas são independentes, eles vão ficar coloridos de forma independente. Se você começar a agrupar as coisas, então, por exemplo, se você estivesse fazendo um rosto e as partes internas dos olhos fossem ativos separados, você teria David Bowie. Ficaria azul, verde, David Bowie. Pode ser bom. Talvez você queira David Bowie. Se você os agrupar, você terá a mesma cor em ambos os olhos. Tudo bem. Então, lembre-se disso, quando você estiver preparando seus ativos visuais, que mantêm as coisas separadas, toda a cor será separada. Mas como eu gosto de alguma harmonia para permanecer consistente através da minha randomização, eu realmente faço esse agrupamento de formas. Então, dessa forma eu sei que quando o código é executado e a cor é aplicada, todos eles vão obter a mesma cor exata em todos eles. Esta seção é feita, nós estamos realmente indo para começar a escrever algum código agora. Doloroso, mas verdadeiro. Então, vamos passar para a pintura para a tela e vamos começar a falar sobre como começar a escrever um código simples. Não vamos começar a anexar SVG logo no início. Vamos começar com elipses e retângulos e, eventualmente, vamos passar para anexar SVG. Vejo você no próximo vídeo. 17. Introdução: pintando para as telas: Na última seção, falamos sobre fazer desenhos e preparar esses desenhos. Nesta seção particular, eu quero falar sobre pintura para tela e como nós pintamos objetos para tela. Eu venho do Flash. Passei 10 anos trabalhando no Flash, e é diferente o suficiente para passarmos uma seção falando sobre isso. Como nós realmente desenhamos as coisas para a tela porque é muito diferente como nós costumávamos desenhar as coisas para a tela no ambiente Flash? Não só isso, mas o processamento tem algumas limitações em termos de como desenhar as coisas para a tela. Então, novamente, um ótimo momento para apresentar como realmente pintamos as coisas para a tela usando o HYPE Framework. Fazendo coisas como HRectangle, Hellipse, HShape, HiMage. Fazendo algumas coisas 3D como HBox e HSphere. Então, vamos realmente mergulhar em como fazemos essas coisas e, em seguida, como nós realmente pintá-las para tela e o que realmente está acontecendo quando você está pintando para tela. 18. Noções básicas / Linha e Reta: Você está pronto para arrasar? Sim, estou pronto para arrasar. Estamos na seção quatro, pintando para a tela. É aqui que vamos trabalhar alguns conceitos básicos, vamos escrever um pouco de código, e vamos entender como funciona o processamento, por que estamos frustrados com alguns aspectos e introduzir altura. Então, vamos apenas escrever um pouco de código básico para os iniciantes, para começar. Agora, vou criar uma nova pasta. Vamos chamar essa pasta de Basics. Dentro do Basics, eu vou fazer uma nova pasta chamada Passo um. Dentro da Etapa um, eu vou fazer uma pasta chamada Build, e então eu vou abrir Sublime Text Two, Eu vou mudar isso para ser, digamos, Salvar, Desktop, Básico, Passo um, Construir, e vamos chamar isso de build.pde. Quando eu faço isso, o lado inferior direito deve mudar para Processamento. Agora, para começar, vou pedir para escrevermos cinco arquivos diferentes. Então, você vai notar aqui que, vamos apenas pegar esse cara, e notar que, nós vamos fazer Basics, Etapa um, Construir, construir, construir pde. Build.pde é onde vamos escrever todo o nosso código. Vamos trabalhar em cinco arquivos agora. Então, veja o que vou fazer. Eu só vou manter pressionada a tecla Option, ou a tecla Alt, e eu vou apenas clicar e arrastar, há o passo dois, passo três, passo quatro, passo cinco. Vamos trabalhar em cinco arquivos diferentes. A coisa boa é que em cada um destes é construir, e build.pde. Então, temos esta estrutura de base acontecendo, o que é bom. Tudo bem. Então, deixe-me jogar isso no canto inferior direito. Vamos escrever nosso primeiro arquivo de processamento. Agora, isso é como o exercício Hello World para cada documento de processamento. O que você vai fazer é, você vai digitar configuração vazia, abrir paren, fechar paren, e nós simplesmente vamos fazer uma linha. Então, digamos, linha, vamos começar em 25 no eixo x, 25 no eixo y. Então, esse é o primeiro ponto da linha, e agora queremos desenhar o segundo ponto da linha, e o segundo ponto da linha será 75 no eixo x, e 75 no eixo y. vírgula e terminamos. Então, se eu realmente salvar este documento e, em seguida, pressionar Command R para construir, o que você deve notar é que Java começa, e com certeza, há o nosso primeiro esboço. Então, nós especificamos os dois primeiros pontos, x e y, 25, 25, e o segundo ponto 75, 75, e porque nós especificamos linha, ele apenas desenhou uma linha entre esses dois pontos, que foram especificados. Está bem. Então, bom. Fizemos nosso primeiro esboço. Então, eu vou ir em frente e fechar este documento, e eu vou passar para o passo dois. Vá para o passo dois, indo para abrir build.pde. Vamos encontrar algumas maneiras de tornar a escrita deste código um pouco mais rápida. Então, dentro de Sublime Text Two, você pode digitar S E T, e você notará que a configuração fica destacada. Então, se eu apenas ir em frente e apertar Enter, ele automaticamente cospe todo o código que acabamos de digitar em nosso arquivo anterior. Agora, quando você digita setup, ele lhe dará duas funções, configuração e desenho. A instalação é executada uma vez. É onde você configura todas as suas informações, como um ativo igual a 100. É onde você especifica todas as suas coisas preparatórias, como variáveis, e assim por diante e assim por diante. Draw é o seu loop, isso é o que corre mais, e mais, e mais uma vez. Então, se você quisesse animação, a função de desenho é onde você realmente especificaria como as coisas devem ser animadas para a tela. Mas, novamente, não estamos fazendo nenhuma animação ainda. Então, vamos para ir em frente e excluir a função de desenho. Agora, eu quero ir em frente e fazer um retângulo neste exercício. Então, vá em frente e digite rect. Novamente, você notará que ele é iniciado automaticamente. Então, eu vou seguir em frente e pressionar Return. Observe que a primeira variável fica destacada, ela quer saber x, y, largura e altura. Então, eu vou ir em frente e dizer, começar em 25 no eixo x, tab, 25 no eixo y, tab, a largura deve ser 50, tab, e a altura deve ser 50. ' Agora, usando esses trechos de funcionalidade de atalho dentro do processamento, significa apenas que podemos escrever código muito mais fácil em vez de ter que escrever coisas repetidamente, e de novo, e de novo. Clique em Salvar, comando R para construir, e você deve notar que você obtém um retângulo no centro da tela. Ele tem alguns valores padrão. Tem um golpe preto, tem um preenchimento branco, assim por diante e assim por diante. Está bem. Vamos aproveitar o tempo agora para passar para o próximo vídeo onde começamos a adicionar algumas melhorias desejadas, e algumas frustrações que encontraremos ao adicionar essas melhorias, e talvez obter uma visão maior sobre o que realmente quando você está pintando na tela. Vejo você no próximo vídeo. 19. Noções básicas / Rotação: Está bem. Neste vídeo, vamos adicionar algumas melhorias aos nossos esboços básicos que estamos fazendo para entender melhor como o processamento realmente pinta na tela. Então, no básico, passo três, construir, eu vou ir em frente e abrir build.pde. Agora, eu vou ir em frente e digitar configuração. Vou remover a função de desenho. Vou acrescentar algo novo. Vou mudar a largura e a altura do meu esboço. Então, eu vou ir em frente e dizer, “Tamanho 600 pixels por 600 pixels.” Então, agora o meu palco seria de 600 por 600. Agora, eu vou seguir em frente e especificar meu retângulo, mas desta vez eu vou dizer, “100 no eixo x, 100 no eixo y, com uma largura de 50 e uma altura de 50.” Agora, se eu pressionar Command R e construir meu arquivo, novamente, eu deveria ver meu esboço de 600 por 600 com o retângulo na posição desejada, e a largura desejada, e a altura desejada. Agora, foi nesse ponto que eu decidi, “Bem, eu gostaria de girar esse retângulo. Eu gostaria de girar esse retângulo 45 graus.” Então, eu não tinha certeza de como fazer isso. Eu não tinha certeza de como realmente falar com o retângulo e girá-lo. Na verdade, você não sabe. Na verdade, você não fala com o retângulo. O retângulo não é nem mesmo um objeto com o qual você pode falar. Então, como faço para fazer uma rotação? Bem, acontece que o que você realmente vai fazer é girar todo o estágio do esboço. Então, se eu viesse aqui e escrevesse girar, e especificar 45 graus, e se você fosse salvar e executar isso, você notaria que seu retângulo está faltando agora. Então, então eu tive que fazer um pouco mais de leitura para descobrir que, a fim usar girar e se você quisesse girar 45 graus, você tinha que especificar esse número em radianos. Então, se eu voltasse e dissesse, “Girar”, você teria que chamar radianos, e em radianos você poderia passar o número 45. Agora, se eu salvar e construir meu filme, eu posso ver agora que meu quadrado é todo o caminho para a esquerda. Porque é que isto está a acontecer? Então, novamente, eu estava tendo dificuldade em entender como pintar coisas específicas. Então, eu precisava tentar alguns testes. Deixe-me mostrar os testes que acabei realizando para ter uma idéia melhor de como o processamento realmente pinta para a tela. Então, vamos passar para o passo quatro. Passo quatro, construir, build.pde, novamente, eu vou ir em frente e digite setup. Eu vou remover a função de desenho, e dentro da configuração, eu vou especificar o tamanho 600 por 600, e eu vou ir em frente e dizer, “Girar radianos, digamos 10.” Então, agora eu só estou girando 10 graus. Agora, o que eu quero fazer é dizer um retângulo, mas desta vez, eu vou mudar o eixo x. Eu vou dizer 400, 100 com uma largura de 50 e uma altura de 50. Agora, o experimento que eu queria realizar era, o que aconteceria se eu tivesse cinco desses na tela? Então, já que eu tenho um, eu vou ir em frente e apenas copiar essas duas linhas, e eu vou colar até eu ter cinco. Então, agora eu tenho cinco instâncias dessa rotação e retângulo, e eu estava curioso para ver o que ia acontecer. Então salvei meu filme, construí e consegui isso. Então, comecei a entender melhor que o que estava acontecendo neste arquivo era, se eu pegar uma folha de papel é que ela estava subindo ao palco, aqui está zero, zero, para vocês, e estava girando 10 graus e depois desenhando o quadrado . Então ele estava girando 10 graus novamente e desenhando o próximo quadrado. Estava fazendo isso cinco vezes. Então, comecei a entender melhor que eu estava girando o mundo, anexando o quadrado, girando o mundo, anexando o quadrado, e comecei a obter esse tipo de forma. Então, vamos passar para outro teste. vez, quero uma ideia melhor do que está acontecendo aqui. Só para o inferno, sim, vamos escrever o código de novo. Eu vou em frente e fechar isso, eu vou passar para o passo cinco, construir, construir. Pde. Novamente, eu vou ir em frente e fazer a configuração, eu vou remover a função de desenho. Eu vou entrar aqui, e eu vou ajustar o meu tamanho. Agora, vou fazer algo um pouco diferente. O que eu quero fazer diferente é eu quero uma representação visual do palco. Então, o que aconteceria se eu digitasse retângulo e então eu dissesse que o eixo x era zero, o eixo y era zero, e então a largura era 600 e a altura era 600? Então, a largura e a altura eram do mesmo tamanho exato que o tamanho do palco. Só quero testar o filme e ver o que acontece. Então, eu testo e visualmente, parece que esse é o golpe em meus retângulos. Então, sim, acho que está funcionando. Acho que tenho um retângulo que é basicamente o tamanho do meu palco. Então, e se eu pegasse isso e copiasse cinco vezes? Dois, três, quatro, cinco. Agora, a próxima coisa que eu quero fazer é que eu quero dizer que não há preenchimento. Eu só quero olhar para o retângulo sem um preenchimento, apenas um golpe. Então, eu vou ir em frente e dizer, “Sem preenchimento”. Eu vou então copiar isso, dois, três, quatro, cinco. Então o que eu quero fazer é olhar para essa rotação. Então, eu vou ir em frente e dizer, “Girar radianos.” Mas desta vez, vou dizer “10”. Então eu vou copiar para que eu tê-lo na frente de todos os cinco de meus retângulos. Agora, se eu continuar e salvar e construir o filme, você está começando a obter uma representação visual do que está acontecendo, que é, eu estou girando todo o estágio 10 graus porque novamente, zero, zero ainda é o mesmo ponto exato, meu retângulo é 600 por 600, e eu posso ver que o que eu estou fazendo é, está girando o mundo inteiro, anexando este retângulo, girando 10 graus, assim por diante e assim por diante. Então, de fato, se eu adicionasse aquele quadrado de volta menor, eu poderia dizer algo assim, eu poderia dizer, “O preenchimento é branco”, e aquele retângulo que tínhamos inicialmente estava em um eixo x de 400, um eixo y de 100 com uma largura de 50 e uma altura de 50. Agora, se eu copiei esse preenchimento, e novamente, colou mais quatro vezes, e depois salvei e construí meu filme, agora você pode ver esse retângulo inicial, que é o tamanho da largura e altura girando, mas Agora, eu tenho um entendimento de tudo. Então, é assim que ele está criando essa curva. Vamos passar para o próximo vídeo e começar a corrigir alguns desses aborrecimentos, aprendendo a matriz push e matriz pop e entendendo como redefinir o palco depois de anexarmos algo para que possamos realmente voltar a construir um linha de retângulos, e esses retângulos são girados 45 graus. Então, eu quero consertar isso. Eu quero pegar esses cinco, e realmente colocá-los em uma fileira, e fazê-los girar 45 graus. Então, te vejo no próximo vídeo. 20. Noções básicas / Matriz / empurrar e estourar: Então, vamos corrigir alguns desses aborrecimentos nas etapas básicas com a aprendizagem PushMatrix e PopMatrix. Então, eu vou ir em frente e criar uma nova pasta chamada matrix, e dentro da matriz eu vou ir em frente e fazer um arquivo chamado passo um. Agora, neste caso, nós também vamos fazer cinco arquivos, mas eu quero mudar este arquivo enquanto eu avançar. Então, agora mesmo, vamos trabalhar no primeiro passo e depois copiaremos e fazemos alterações à medida que avançamos. Agora, dentro de um passo um, eu vou fazer uma pasta chamada compilação. Eu estou indo para ir em frente e começar um documento em branco no Sublime Text 2, e eu vou salvar isso na minha matriz desktop passo um build e nós vamos apenas chamar isso build.pde. Vamos em frente e começar a escrever o mesmo código que fizemos antes, mas fazer algumas alterações. Então, eu vou em frente e digite configuração, eu vou em frente e remover o sorteio. Eu vou ir em frente e especificar tamanhos 600 por 600. E o que é PushMatrix, PopMatrix? Então, se você se lembra no anterior, se você está anexando cinco quadrados, ele estava girando o mundo anexando o quadrado, girando o mundo novamente anexando o quadrado. O que PushMatrix e PopMatrix fazem é dizer, olhe para o que está acontecendo na tela, faça algumas coisas, e quando você terminar de fazer isso, coloque de volta como nunca tinha sido feito antes. Reiniciar. Ok? Então, isso é o que PushMatrix e PopMatrix fazem. Então, veja o que vai acontecer aqui. Vou em frente e dizer “PushMatrix”. Dar a mim mesmo alguns retornos e digite PopMatrix, ok? Agora, porque PushMatrix e PopMatrix é lembrar o que está acontecendo, liberar o que está acontecendo de volta ao jeito que era. Eu realmente gosto de colocar outra aba dentro do PushMatrix e PopMatrix para que eu possa ver que qualquer coisa entre esses dois está acontecendo naquele momento e então ele está sendo reiniciado. Então, vamos em frente e colocar em nossa rotação, vamos em frente e colocar em nossos radianos de 45 graus, e vamos em frente e desenhar nosso retângulo. Vamos colocar este em um eixo X de 100, um eixo Y de 100, e uma largura de 50 e uma altura de 50, ok? Agora, se eu pressionar o comando R e construir este arquivo, eu deveria estar de volta àquele cenário estranho onde meu retângulo está todo o caminho para o lado esquerdo. Agora, se eu copiasse essas quatro linhas de código e colasse mais quatro vezes. Dois, três, quatro, cinco. Agora eu tenho cinco instâncias de PushMatrix PopMatrix girar e retângulo, mas vamos mudar o eixo X para cada um deles. Então, vamos em frente e dizer que este retângulo em particular vai estar em um eixo X de 200, o próximo vai ser 300, o próximo vai ser 400, e o último vai ser 500. Agora, se eu testar este filme, você vai notar que ele agora faz isso na fila. Ok. Então, PushMatrix e PopMatrix está redefinindo a rotação de volta para zero, zero. Desculpe, definindo a rotação de volta para zero. Então, giramos 45 graus, anexamos o retângulo, PopMatrix o redefine novamente para zero e, em seguida, o processo começa tudo de novo onde ele gira 45 graus, desenha o novo retângulo, mas isso tempo em um X de 200. Em seguida, PopMatrix coloca a rotação de volta em zero inicia o processo novamente. Então, novamente eu estava confuso sobre por que ele estava fazendo esse tipo de padrão. Então, neste ponto, vamos aprender algo novo. Vamos ir em frente e salvar e fechar isso, e eu vou dar este passo um, mantenha pressionada a tecla Alt opção, arraste para criar a etapa dois e realmente reabra esse arquivo novamente, certo? Então, agora vamos fazer um aprimoramento para este arquivo. Acaba isso, se você apenas dizer que o retângulo está em um X de zero e um Y de zero e realmente fazer isso para todos eles, porque o que queremos fazer é adicionar algo novo chamado traduzir. O que a tradução faz é, se girar estiver girando a tela, traduzir está movendo a tela. Está movendo a tela do palco em um eixo X e um eixo Y. Então, se eu viesse até este PushMatrix eu poderia dizer traduzir e eu vou apenas colocar em coordenadas 2D. Vou dizer traduza para 100, 100. Então, traduza para um eixo X de 100 pixels acima de 100 pixels para baixo, gire o palco e desenhe o quadrado. redefinições PopMatrix traduzem de volta para zero, zero, conjuntos giram de volta para zero e inicia todo o processo novamente. Então, vamos em frente e copiar nossa tradução para cada uma das matrizes push e pop, mas neste momento eu vou dizer traduzir para 200, traduzir para 300, traduzir para 400, e traduzir para 500. Filme da editora e oh, meu Deus, estamos chegando a algum lugar. Então, o que aconteceu foi que ele disse que isso é zero, zero, ok. Mover 100 pixels 100 pixels, mas isso ainda é zero, zero, ok. Gire 45 graus, prenda o quadrado. PopMatrix, coloque de volta onde começou. Mas o novo diz para ir mais de 200, descer 100, girar assim por diante e assim por diante. Então, agora estamos começando a obter o que eu queria visualmente para começar, que era uma linha de retângulos girados 45 graus. Ok, isso é legal, mas eu realmente quero essas pequenas formas de diamante apareçam no centro do palco, então o eixo Y deve estar no centro. Então eu vou ir em frente e fechar isso, e novamente eu vou manter pressionada a tecla de opção. Eu vou ir em frente e arrastar isso para criar um passo três e vamos em frente e reabrir este build.pde. Ok. Tudo bem. Tão legal. Quero que a tradução esteja no auge do filme dividido por dois. Isso parece ótimo. Então, vamos em frente, copie isso, e cole-o para cada um dos tradutores. Vá em frente e execute seu filme. Isso totalmente não se parece com o centro da tela. Parece que é insignificante. Bem, vamos confirmar que é insignificante. Vamos em frente, e dizer que queremos fazer uma linha. Ok. Vamos em frente, e dizer que a primeira da linha deve estar em zero no X, e deve estar em altura dividida por dois, então isso vai colocá-lo no lado esquerdo do meio do palco. Vamos em frente e dizer que a largura da linha deve ser largura, e sua próxima posição deve ser a altura dividida por dois. Ok. Então, que eu deveria desenhar uma linha no centro completo da tela. Então, eu vou testar meu filme, e eu percebo, oh, sim, claro. Quando você desenha o retângulo, o retângulo é zero, zero. Então, quando gira assim. Certo. Está pendurado neste ponto de rotação zero, zero. Na verdade, se eu adicionar algumas reticências aqui, deixe-me apenas dizer elipse. Oh, você pode digitar Josh. Experimente isso. Digamos que a elipse será a mesma que os tradutores. Então, para a primeira elipse digamos 100 altura dividida por dois, e eu quero que o tamanho da elipse seja cinco por cinco. Ok. Então agora, se eu copiasse 2,3,4,5, a próxima tradução é em 200, 300, 400, 500. Teste o filme, teste o esboço. Eu venho do Flash Man. Teste o filme, teste o esboço. Então, eu estou desenhando esse pequeno círculo para representar onde zero, zero está no meu retângulo. Ok? Então, agora, estou em um dilema. Na verdade, se eu fosse realmente fazer isso, certo? Se eu dissesse, “Ei, eu estou girando 45 graus divididos por cinco retângulos, você veria que 45 dividido por cinco é nove. Então, se eu realmente mudar o raio para ser nove vezes um, nove vezes dois, nove vezes três, nove vezes quatro, e nove vezes cinco. Se eu rodar meu filme, eu posso realmente vê-lo girando para 45 graus. Eu podia ver esse pivô. Eu tenho representação de como ele está girando fora de zero, zero do retângulo, certo? Então, tudo bem. Oh meu Deus! Eu tenho que tentar descobrir isso. Então, vamos em frente, salvar e fechar este filme. Vou para a opção arrastar o passo três para o passo quatro. Vou reabrir o prédio de novo. Então, eu tive que pensar como, ok, como eu centralizo o retângulo? Mais uma vez, este sou eu sem saber nada sobre processamento. Eu não tinha cavado toda a documentação. Eu não sabia todos os truques. Estava a tentar resolver isto sozinha, está bem? Então, legal. Vamos colocar os radianos de volta em 45 neste exemplo. Ok. O que eu precisava descobrir é, se eu rodar um retângulo que é 50 por 50, esse não é o tamanho do retângulo. Na verdade, se você pegar um retângulo e girá-lo 45 graus, esse retângulo agora é 70,711 para uma largura e 70,711 para uma altura. Já não é 50 por 50. Então, eu estava tipo, ok, eu vou pegar a altura dividida por dois, e então eu preciso subtrair, certo? Então, eu estava colocando isso entre parênteses. Eu ia dizer, “Oh, 70.711 dividido por dois. Isso seria o meio da largura e o meio da altura.” Então, se eu realmente copiar isso. Isto é doloroso. É doloroso que você esteja escrevendo esse código comigo, porque isso é ridículo. Então, se eu fosse salvar e testar este esboço. Eu estava tipo, sim. Agora eu tenho isso fazendo o que eu preciso que ele faça, que é que eu queria pegar esses retângulos, girá-los 45 graus, que eles se tornassem diamantes. Mas então eu queria centrá-los, e é assim que você faz. Eu tenho que te dizer, eu estava começando a pensar que o processamento era loucura, que eu iria ter um momento realmente difícil como artista visual, apenas pensando em como eu iria fazer as coisas na tela. Agora, salve e feche este filme. Salve-o como um passo cinco. Este é o último que vamos fazer, porque então eu cavar em torno de alguns documentos, e percebi que isso era apenas loucura. Eu não tinha que fazer isso. Se eu realmente me livrar de tudo isso, tudo que eu tinha que fazer era escrever uma linha de código para especificar o RectMode. Então, se eu chegar ao topo aqui, e dizer, RectMode, você poderia então passar CENTER em todas as maiúsculas. Então, o que isso significava foi, que qualquer que seja um retângulo que você faça, o ponto de ancoragem está na verdade no centro de qualquer largura e altura especificadas. Então, se você fosse salvar e testar este esboço, você notaria que você recebe exatamente a mesma coisa. Ok. Na próxima série, quero falar sobre como faço para girar essas coisas? Então, legal. Eu tenho esta arte anexada no centro da tela, onde eu quero que ela vá. Mas e se eu quisesse aplicar alguma animação? Agora, a razão pela qual eu estou mostrando a animação como um exemplo, é porque eventualmente, nós vamos ser apresentados ao Hype. Vamos ser apresentados a como todos esses tipos de aborrecimento para mim poderiam ser simplificados usando o Hype Framework. Ok. Vejo você no próximo vídeo. 21. Noções básicas / Rotação e Cores: Então, da maneira que eu vejo isso é antes de nós realmente passar para falar sobre hype, há dois arquivos extras que nós temos que fazer para que você possa ver quais cenários acontecem em um cenário não-hiperficado. Então, o primeiro é aplicar rotação. Então, eu estou indo para ir em frente e fazer uma nova pasta e eu vou chamar esta pasta de “Rotação”, e dentro desta pasta, rotação, eu vou apenas copiar o passo cinco da matriz. Então, eu vou dar o passo cinco e apenas copiá-lo para a rotação da matriz e para a rotação. Agora, deixe-me mudar isso para o primeiro passo e eu posso ir em frente e fechar a pasta matriz e eu posso ir em frente e abrir este build.pde. Agora, se eu rodar este esboço aqui, o que eu quero que aconteça é alguma rotação desses quadrados para que, novamente, você possa ver como o processamento lida com certos aspectos da pintura para a tela. Então, vamos em frente e dizer algo um pouco diferente que é que eu falei anteriormente que uma configuração funciona funcionalmente uma vez. É uma função de desenho que é executado várias vezes, e então eu quero realmente mover algumas dessas coisas para uma função de desenho. Então, se eu vir aqui e digitar void draw, open paren, close paren, eo que eu vou copiar é tudo da elipse, da linha, e o PushMatrix e PopMatrix. Então eu vou ir em frente e cortar isso, e agora você verá que a única coisa que está em configuração é definir o tamanho e o RectMode. Agora dentro do desenho que é um loop, ele corre uma e outra vez, eu realmente vou colar este PushMatrix, PopMatrix, a criação da linha, e a criação dessas elipses. Agora, se eu construísse o esboço, você percebe que talvez não pareça muito diferente porque, novamente, não há animação acontecendo aqui. Tudo bem. Então, eu tenho cinco ativos. Então, eu estou realmente indo para criar cinco variáveis. Eu vou dizer inteiro r1 para rotação um é igual a zero, e eu vou ir em frente e copiar este dois, três, quatro, cinco e mudar isso para dois, três, quatro e cinco. Agora, o que eu vou fazer é, em vez de girar radianos 45, eu vou realmente mudar isso para a variável que eu configurei acima. Então, eu vou dizer radianos mais r1. Então isso significa adicionar um ao valor de r1. Então zero se torna um, um se torna dois, dois se torna três, três se torna quatro, e basicamente, é um contador, essa coisa está sempre contando agora. Então, se eu copiasse isso e fizesse isso mais r2, mais r3, mais r4, e mais mais r5. Agora a rotação, todos os cinco deles têm cinco números diferentes que estão contando 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Então, se eu testar o esboço, você deve notar que ele está girando, mas o que acontece é que, na verdade, você não está limpando a tela. Então eu estou realmente apenas pintando a rotação e assim como o quadrado se move, ele está deixando um resíduo da obra de arte em sua posição anterior. Então, a fim de limpar a tela na função de desenho, eu só vou dizer fundo é CCCCCC. Então, o que acontece lá é, toda vez que a função draw é executada, ela limpa o fundo e depois desenha o quadrado, limpa o fundo, desenha os quadrados, limpa o fundo, desenha os quadrados. Então agora, quando eu realmente testar este esboço, você deve notar que parece que cada um dos quadrados está girando por conta própria. Então, nós movemos o conteúdo fora da configuração, nós colocamos dentro do empate. Percebemos que se você não chamar fundo na linha 13, vai deixar um resíduo da arte porque você não está limpando o fundo. Então, novamente, essas são coisas para pensar enquanto estamos avançando. Agora, há uma espécie de último duplo-whammy aqui. Eu vou continuar e salvar isso, e eu vou copiar todo esse arquivo de rotação para cores. Então eu apenas copiá-lo e eu vou renomeá-lo para cor e eu vou ir em frente e abrir a compilação PDE. Agora este é o mesmo arquivo exato da rotação, mas eu quero definir uma cor aleatória. Então, eu tenho esses quadrados e eu só queria ter uma cor de preenchimento aleatório. Então, dentro do PushMatrix e do PopMatrix de cada um dos cinco, eu realmente vou colar isso, e isso é definir a cor de preenchimento. Agora, o preenchimento é RGB; vermelho, verde, azul. Então eu estou dizendo escolher um número 255 aleatório para o vermelho, um número 255 aleatório para o verde, e um número 255 aleatório para o azul, então isso deve me dar um valor RGB aleatório, que é RGB é um número de 0-255. Agora, se eu copiasse isso em cada um dos PushMatrix e PopMatrizes, você veria a última e última gota para mim pessoalmente, quando eu testar este esboço. Em vez de eu pensar que ele iria apenas definir uma cor, o que acontece é, é porque a função de desenho está sendo executado uma e outra vez, ele assume que você quer escolher um preenchimento aleatório cada vez. Então, uau, isso foi apenas uma grande diferença para mim vindo do ambiente flash porque você poderia fazer esse tipo de coisa no ambiente flash e na verdade a cor de preenchimento só seria definida uma vez. Novamente, entendo que estas são línguas completamente diferentes, mas para mim esta foi a gota d'água. Eu realmente precisava pensar sobre como eu poderia construir uma biblioteca para ajudar a fazer algumas dessas coisas que eu acho que são complicadas. Então, por exemplo, você pode escolher uma cor aleatória dentro da configuração e, em seguida, o sorteio irá apenas acessar cor aleatória que você já está pré-escolhido. Então, vamos passar para o próximo vídeo onde nós realmente começamos a olhar para algum código hype e entender como podemos pegar as mesmas idéias exatas, a mesma animação exata, mas vamos ver como é muito mais simples realmente usar o hype. Vejo você no próximo vídeo. 22. HYPE / Noções básicas: Está bem. Então, vamos começar com um arquivo HYPE. Então, tudo o que acabamos de cobrir, limpou sua mente. Legal. Vamos começar um novo documento, uma nova pasta, e eu vou chamar isso de Hype_Basics. Dentro de Hype_Basics, vou criar uma pasta chamada etapa um, vou criar uma pasta chamada build. Agora, você pode abrir esta pasta de processamento HYPE que baixamos do Preparação, porque aqui está Hype.Pde, que novamente contém toda a biblioteca HYPE. Então, eu vou opção arrastar e copiar isso para Build. Então, agora posso fechar isso. Então, eu tenho Hype_Basics, passo um, build e HYPE pde. Então, eu vou ir em frente e criar um novo arquivo chamado build.pde na área de trabalho, no Hype_Basics, passo um, build, bem ali com meu arquivo pde HYPE. Está bem. Então, vamos entender algumas coisas que são um pouco diferentes do que no processamento. Então, vamos em frente e construir nossos retângulos visuais como fizemos no último arquivo. Agora, eu vou ir em frente e dizer configuração vazia (). Eu não vou fazer um atalho ainda porque eu vou mostrar algumas diferenças. A primeira coisa que eu vou especificar é o tamanho, 600 por 600, e eu vou passar para a próxima linha. Agora, para usar uma biblioteca externa, preciso inicializar a biblioteca HYPE. Então, eu preciso dizer ao Processamento que o HYPE existe. Eu vou fazer isso dizendo H.init (isto). Agora, se você já baixou outras bibliotecas no passado, você provavelmente está muito familiarizado com disparar o construtor de uma biblioteca. Então, neste momento, nesta linha quatro, estou dizendo ao Processing para estar ciente de que a biblioteca HYPE realmente existe. Então H.init (isto). Agora, em vez de ter Processing fazer o desenho, eu vou pedir para HYPE fazer o desenho. Então, seja lá o que eu digitar daqui em diante, eu vou dizer, HYPE. Então, no final, preciso dizer ao HYPE para pintar a tela. Então, eu vou fazer isso, dar a mim mesmo alguns retornos difíceis dizendo H.Drawstage. É aquela linha ali que realmente vai pegar todas as coisas que temos empurrado para HYPE e realmente ser capaz de pintá-la na tela. Então H.DrawStage é sempre uma das últimas coisas que eu faço. Agora, vamos em frente e fazer o nosso primeiro retângulo. Então, no topo aqui, eu vou criar uma instância de hRect, e é um R maiúsculo, hRect, eu vou dizer d1, d é para drawable. Então, há um monte de drawables dentro do HYPE. Há HRetangle, há Hellipse, há HBox, há HSphere. Esses são todos extraíveis de HYPE. Então, eu vou dizer hRect d1, o d é para drawable. Agora, dentro da configuração, eu vou dizer que d1 é igual a um novo HRCT. Então, em vez de ligar para o Ret, vamos ligar para o Hrect. Agora, eu posso começar a fazer algum método de encadeamento. Posso dizer, ei, d1, quero que seu tamanho seja 50. Quero que sua rotação seja 45. Eu quero que sua posição de âncora esteja no centro, modo que quando ele gira, este é o modo Rect, de modo que ele gire em torno do ponto central. Faço isso dizendo Anchorat. Anchorat tem um monte de coisas que podemos passar. Vou dizer H.CENTER, assim como foi o centro de modo rect, estou dizendo âncora no H.CENTER. Agora, onde eu quero colocar este primeiro quadrado? Essa é a localização e sob a localização, eu vou dizer 100 no eixo x e altura dividida por dois. Tudo bem. Agora, se neste momento eu fosse salvar e testar isso, você notaria que nós não vemos nada. Então, onde está o meu retângulo? Então, você está faltando uma última linha, que é adicionar este drawable para HYPE. Então, eu vou dizer H. Adicione esse cara D1. Então, agora você está adicionando este drawable para HYPE. Então, quando chegamos à linha 12 e ele diz H.DrawStage, este drawable foi adicionado e ele pode realmente pintá-lo para a tela. Então, adicionando essa linha, se eu testar o esboço, você deve notar que o retângulo está bem ali no centro. Agora, vamos adicionar algumas coisas aqui. Após H.drawStage, eu realmente vou copiar e colar as informações de linha e elipse dos arquivos anteriores em que estávamos trabalhando. Então, desenhando a linha através do meio e, em seguida, colocando essas cinco elipses. Agora, se eu rodar este arquivo, você notaria que ele está de fato bem no centro da tela. Então, tamanho, defina-o para 50 por 50. Rotação, eu não tinha que dizer brilho, eu poderia apenas dizer que eu quero girar 45 graus. Anchor, estou especificando onde é o ponto de registro. Neste caso, estou dizendo âncora no H.CENTER. Localização, Eu só disse 100 pixels no x e altura dividido por dois. Agora, se eu pegasse isso e copiasse isso mais cinco vezes, duas, três, quatro, cinco, agora, obviamente eu precisaria mudar isso para d2, d3, d4, d5. Então, no topo aqui, vou dizer hRect d1. Também vai haver um d2, um d3, um d4 e um d5. Então, eu posso listá-los todos em uma linha. Agora, posso começar a fazer as modificações aqui. Eu posso dizer d2, d2, adicionar d2, d3, d3, adicionar d3, d4, adicionar d4, e d5, d5 e adicionar d5. Agora, a única outra coisa que tive que mudar foi a localização. Este estava em 200, este estava em 300, este estava em 400 e este estava em 500. Tudo bem. Eu vou fazer o meu esboço e você deve notar que é exatamente como o anterior. Então, legal. Estamos começando a aprender um pouco sobre HYPE. Estamos inicializando a estrutura HYPE. Estamos usando os desenháveis do HYPE, neste caso, o HRect. Estamos adicionando esses itens no universo HYPE. Então, na linha 27, estamos pedindo ao universo HYPE para pegar tudo o que ele sabe, que nós empurrámos para ele, nós adicionamos nele, e realmente pintá-lo para o palco. Então, se eu fosse salvar isso e fechá-lo e, em seguida, fazer um passo dois e abrir o código aqui, veja o que eu vou fazer aqui. Tenho uma turma chamada HRotate. Então, lembre-se, antes, tivemos que criar um empate vazio e tivemos que copiar todo o código para o sorteio. Bem, eu vou pegar um pequeno atalho aqui, e eu vou dizer, hey, hRotate, novamente, é um R maiúsculo Vamos chamar este r1 para girar um, é igual ao novo HRotate, e quem eu quero girar? Quem é o alvo? Bem, neste caso, o alvo é d1, que é o nosso HRect, d1. Que tipo de velocidade você quer ter? Vá em frente e faça uma velocidade de um. Agora, neste ponto, se eu fosse testar o esboço, você notará que nada é girado. A razão pela qual nada está girando é porque, novamente, isso está tudo na configuração. Então, se eu viesse aqui e dissesse empate vazio, abrir paren, fechar paren, e apenas copiar as elipses, a linha e o H.DrawStage, isso é tudo que eu tenho para copiar, e realmente colar isso em o sorteio. Então, o que está acontecendo é que dentro de desenhar o loop ele está disparando H.Drawstage uma e outra vez. Então, ele está realmente desenhando o universo do hype uma e outra vez. Então, neste ponto, se eu realmente testar o esboço, você deve notar que esse primeiro quadrado está realmente girando, e ele está girando uma velocidade de um. Agora, se eu copiasse isso, e colasse, colasse, colasse e colasse, e mudasse isso para r2, r3, r4 e r5, e mudasse quem são os alvos, d2, d3, d4 e d5. Agora, se eu testar o esboço, você deve notar que estamos de volta onde começamos. Agora, repare em algumas coisas. Dentro do sorteio, você não precisava se lembrar de fundo. Ele realmente faz isso automaticamente construído por padrão. Aprenderemos um pouco mais tarde como adicionar o código de volta para que ele não limpe o plano de fundo. Então, ele apenas desenhar palco limpa automaticamente o plano de fundo, a menos que você especifique o contrário. Agora, se eu dissesse que a velocidade era negativa, isso obviamente iria na outra direção. Então agora, o primeiro está indo no sentido anti-horário e os próximos quatro estão indo no sentido horário. Eu não tinha que criar nenhuma variável para a velocidade, eu não tinha que dizer mais, mais a variável para contar cada rotação, vai apenas lidar com a rotação para nós. Bem, ótimo. Isso significa que, este eu poderia dizer que tem uma velocidade de 1,5. Este eu poderia dizer que tem uma velocidade de dois. Este, eu poderia dizer, tem uma velocidade de 2,5, e este tem uma velocidade de três. Novamente, se eu testasse o esboço, você notaria que todas as rotações de velocidade são diferentes. Se avançarmos, vou salvar isso. Vou fechá-la. Vou então copiar para um passo três e reabrir aquele PDE construído. Agora, isso é super importante. Eu não posso dizer o quanto eu amo isso. Dentro de um flash, você poderia criar uma peça de arte e você tinha este ponto de registro, e onde você moveu o ponto de registro era super importante porque se o ponto de registro estava aqui, e você fez isso em uma rotação, ele iria girar desta forma, e se você tivesse no centro, então ele iria girar desta maneira. Então, você deve ter notado que dentro do processamento por padrão você está fazendo 00, ou você está fazendo modo rect de centro. Você não pode fazer qualquer tipo de rotações tortas, ou talvez o ponto esteja aqui em cima, e isso como balanços ao redor. Você não pode fazer isso rapidamente, você realmente tem que escrever um monte de código, a fim de apoiar como fazer esse tipo de rotações. Então, neste momento, eu quero falar sobre âncora. Então aqui âncora em sempre tem uma constante, como H.center, H.up, H.esquerda. Se eu mudá-lo para apenas âncora, então eu posso realmente especificar qualquer X e Y que eu quiser. Então, eu só vou me livrar dos meus H.centers aqui, e vamos ver que tipo de diversão podemos ter com âncora. Digamos que a primeira âncora seja cinco no eixo X, cinco no eixo Y. Digamos que o próximo seja 10 no eixo X, 10 no eixo Y. Digamos que o próximo é 15 no X, 15 no Y. Quatro, eu vou realmente fazer 25, 25, e a razão pela qual eu vou fazer 25, 25 é porque o tamanho é 50. Então, âncora 25, 25 é o mesmo que âncora no H.center. Tomando a largura dividir por dois, a altura divide por dois, 50 dividir por dois, 50 dividir por dois, 25, 25. O último pouco desenhistável, eu quero fazer algo incomum ou eu quero dizer, ok, legal, aqui está a arte. Eu quero, no eixo X vir para o meio, então o meio seria 25, e no eixo Y, eu quero que seja negativo 25. Então, ele realmente coloca o ponto aqui em cima. Então, eu vou dizer negativo 25. Vá em frente e salve e teste este esboço, e você deve notar que agora, estamos recebendo todos os tipos de rotações fantásticas. Apenas auto-magicamente sem ter que escrever qualquer código adicional, você pode usar âncora para realmente especificar exatamente como os antigos dias flash onde o ponto de registro é e onde esse ponto de registro vai afetar a posição X e Y de onde as coisas são anexadas e, obviamente, a rotação. Agora, a última coisa que eu quero fazer, vá em frente e feche isso, e eu vou salvar isso como um passo quatro. Este é o último que vamos fazer nesta série em particular, e é isso que eu quero adicionar cor. Então, se você se lembrar, eu poderia dizer, de novo, que eu poderia mudá-lo. Mas isso está começando a ficar longo. Então, vamos apenas dizer d1.fill, e então algo. Então, o que eu quero fazer com este preenchimento? Bem, se você se lembra no arquivo anterior, eu queria escolher aleatoriamente um azul verde vermelho. Então, se eu fosse apenas copiar algum código que eu já pré-cozido aqui, onde eu estou dizendo d1 preencher aleatório r, g, e b, número de 0-255. Se eu fosse colar isso em cada um desses, então deixe-me apenas copiar e colar, colar e colar e colar, então, é claro, eu preciso mudá-lo para d2. Este aqui, eu preciso mudar para d3. Este, eu preciso mudar para d4, e este para d5. Como toda essa criação de ativos está acontecendo na configuração, você pode realmente executar o arquivo e ele só vai pintar uma cor. Considerando que, no anterior, estava escolhendo a cor uma e outra e outra vez. Então, uma grande vantagem. Grande vantagem de ser capaz de usar hype, e apenas na função draw, apenas colocando que H.drawStage, e o que quer que façamos na configuração, isso só é executado uma vez, e é que H.drawStage que é realmente olhando para todos os parâmetros que você definiu na configuração e fazendo o cálculo. Então, neste caso, sendo rotação. Agora, eu poderia fazer algumas outras coisas aqui no H.init isso. Eu poderia dizer. background e eu poderia especificar 666666, um cinza escuro como este, então eu poderia definir a cor de fundo, e eu posso então fazer AutoClear. Um AutoClear é azul em valor. Então, se você disser AutoClear verdadeiro, e realmente executar este arquivo, o que AutoClear verdadeiro está fazendo é limpar o plano de fundo. Então, se eu mudei AutoClear para falso, e realmente executar meu filme, você teria esse efeito de pintura. Então, vamos passar a olhar para alguns dos objetos extraíveis do hype. Então, vamos apenas fazer uma rápida execução de todos os diferentes tipos de objetos desenháveis que você pode usar usando o framework hype. Seguindo em frente. 23. HYPE / Desenháveis: Está bem. Então, agora vamos passar para uma pasta chamada Hype underscore objects, e você deve notar que ele foi compactado e foi anexado a este conteúdo de vídeo. Se eu não estiver ganhando algum tipo de prêmio pelo número de conteúdo de vídeo da Skillshare em uma aula, eu vou ficar muito chateado. Há uma sugestão ao adicionar esses vídeos que diz: “Faça cada vídeo entre três e sete minutos”. Desculpe, falhei nesse departamento. Há muitos drawables em HYPE, e eu realmente não adicionei todos eles. Há alguns que estão faltando. Este vídeo teria três horas de duração se nós realmente escrevêssemos todo o código para falar sobre todos os diferentes drawables. Então, o que eu vou fazer é, nós vamos apenas olhar para alguns dos desenháveis aqui, e nós vamos olhar para o código, e você pode estar trabalhando lado a lado, e nós podemos passar por isso. Agora, a mesma estrutura vai estar em cada uma dessas pastas. Eu tentei retirá-lo até o básico absoluto. Vamos ver o que está acontecendo aqui. Há uma armação de vazio. Não há empate vazio. Eu digo H.init (isso), eu vou em frente e coloco em um fundo de um cinza escuro. Linha seis eu disse suave, que às vezes vai fazer os pixels um pouco mais agradável. Linha 22 H.DrawStage, então o que quer que adicionemos ao universo HYPE, pinte na tela. Agora, na linha 8-20, estou fazendo um for-loop. Um for-loop é algo que executa um número definido de vezes. Então, neste caso, eu disse que eu quero que este for-loop seja executado 100 vezes. Se você não está familiarizado com a programação, um for-loop é três etapas básicas, onde começar até quando como contar. Então, inteiro i é igual a zero, começar em zero, executar enquanto i é menor que 100, um i++. Então, se você se lembrar de antes, adicione um em i. Então, zero torna-se um, um torna-se dois e isso continua contando até atingir 100. Então, quando atinge 100, este for-loop pára. Agora, dentro deste for-loop, estamos criando um retângulo, um hRect. Então, isso significaria que nós vamos estar anexando 100 HRECTs na tela. Então, vamos olhar para alguns dos parâmetros que passamos. Eu disse que quero que o StrokeWeight seja um. Eu disse que quero que a cor do traço seja FF3300, laranja escuro agradável. Eu quero que o preenchimento seja 111111, bom cinza escuro. Quero que o tamanho seja um número aleatório. Então, observe que estamos passando apenas um número para o tamanho, então isso significa que vai ser uma caixa perfeita. A largura e a altura estão recebendo o mesmo número exato. Mas, eu disse aleatório 25 vírgula 125. Isso é um intervalo, o que significa que ele vai escolher um número entre 25 e 125, e qualquer número que ele escolher, ele dá isso para a largura e a altura. Girar, eu peço para escolher um aleatório de 360 graus. Para o local, aleatório.width random.height. Agora que ainda não cobrimos isso, largura é igual a 600 e a altura é igual a 600. Então, você pode apenas especificar com os tamanhos aqui em cima, e esse tamanho pode então ser chamado como largura e altura em todo o resto do seu documento. AncoRat (H.center), então, estamos definindo esse ponto de registro para o centro. Depois de terminarmos, dizemos H.add (d), d sendo desenhável. É um atalho para desenhável. Então, se eu fosse testar este esboço, você deve notar que há 100 HRECTs adicionados ao palco. Todos eles têm um alcance entre 25 e 125. Eles têm uma rotação aleatória. Então, agora, talvez você esteja começando a ver alguns desses pensamentos anteriores e conversas que tive sobre aleatoriedade. Não sei se isto é necessariamente bonito ou não. Na verdade, é apenas aleatório, mas, é aleatório com um alcance. Não ficou muito pequeno porque não foi menor que 25 por 25, e não ficou muito grande porque não foi maior do que 125 por 125. Então, se eu puder adicionar aleatoriedade, mas tiver limites, geralmente, melhores serão os resultados. Então, legal. Nós gostamos dessa. Vamos olhar para o próximo HRect e ver o que está acontecendo neste arquivo específico. Esta, eu mudei a cor de preenchimento para ter um alfa de 200. Então, alfa é um número entre zero e 255. Então, eu disse que quero que o preenchimento seja esta vírgula cinza escuro e depois alfa. Você vai notar que o alfa aqui é, você pode ver alguns dos traços dos retângulos que estão realmente atrás. O HRect também suporta o arredondamento das bordas. Então, vocês podem notar na linha nove que eu disse, .arredondando e então eu coloquei em um raio de 10, então meus retângulos realmente têm um raio de canto de 10. Muito agradável. Passando para o próximo. Se olharmos para este, mudei de tamanho aqui porque, se o tamanho é passado de um número, então ele se aplica à largura e altura. Aqui, estou aleatorizando a largura e estou aleatorizando a altura. Então, neste caso, HRect se torna uma série de retângulos em vez de quadrados perfeitos. Então você vai notar que estamos recebendo um monte de retângulos na tela em vez um monte de quadrados perfeitos como no passo um e no passo dois. Hellipse, não muito diferente do HRectangle. Novamente, você especifica um tamanho. Esse tamanho é o raio do círculo. Então, muito semelhante ao HRect, exceto que estamos fazendo círculos em vez de retângulos. No segundo passo, acredito que ao invés de fazer círculos perfeitos, mudei o tamanho para ser a largura, um conjunto aleatório de números, e a altura para ser um conjunto aleatório de números. Então, novamente, se você testar isso, nós deveríamos estar recebendo algumas ovais. No primeiro passo, rotação, aleatório 360 eu não fiz porque você não pode ver um círculo girado aleatoriamente. Mas, no segundo passo, como são ovais, posso fazer aquela rotação aleatória de 360 graus, e posso girar ovais. Agora, há também H.Path. H.Path é onde você pode fazer coisas como polígonos. No H.Path podemos fazer estrelas, podemos fazer triângulos. Então, não vamos olhar para tudo isso. Eu quero que você olhe para todos eles, mas, se você executar um polígono, por exemplo, você vai notar que eu posso obter coisas como octógonos e hexágonos, e assim por diante e assim por diante especificando que é um polígono e então quantos lados esse polígono tem. Então, no caso deste, eu disse, “ H.Path é um polígono e esse polígono tem cinco lados”, e então eu tenho um polígono de cinco lados. Claro, no polígono dois, eu aleatorizo. Eu digo: “Ei, polígono aleatorize entre três e nove.” Então, quando você executar este arquivo, você obterá tudo de triângulos, octógonos, hexágonos, e assim por diante e assim por diante. Então, puxando. Estrela. Acredite ou não, é uma estrela. Estrela tem dois argumentos, profundidade e bordas. Então, se você fosse executar isso, eu acho que este acaba sendo como uma estrela tradicional perfeita de cinco lados. Então, cada caminho também pode fazer estrelas. Claro, há um monte de triângulos diferentes que podemos ter. Há isósceles, há ângulos retos, assim por diante e assim por diante. Então, aqui estou eu dizendo que eu quero um triângulo, eu quero que esse triângulo seja isósceles, e eu quero que ele aponte para o topo. Então, olhe através do H.Path e olhe para todos os diferentes tipos de formas que podemos realmente fazer lá dentro. Agora, vamos passar para HBox e HSphere. HBox que ainda estamos trabalhando, mas o bom é que HBox é uma forma tridimensional, então você pode notar um pouco de diferença é que no tamanho aqui, eu tive que dizer-lhe para usar P3D. Por padrão, ele usa P2D, matrizes bidimensionais e vetores. Então, na linha quatro, eu preciso especificar que eu quero usar coordenadas tridimensionais. Eu também tenho que dizer HYPE que eu estou usando coordenadas tridimensionais, então você pode notar que eu digo na linha cinco, H.init e então eu uso 3DTrue, modo que ele alterna HYPE para usar coordenadas 3D em vez de coordenadas 2D. Linha 11, 12 e 13, já que é uma caixa, eu tenho que especificar sua profundidade, eu tenho que especificar sua largura, eu tenho que especificar sua altura. E novamente, coloquei um monte de números aleatórios aqui. Então, se você realmente executar este esboço, você vai notar que nós estamos realmente recebendo um monte de caixas tridimensionais no espaço. Está bem, muito fixe. Eu fiz um passo 2 para HBox. O que eu fiz para isso? Eu fiz rotação X, rotação Y, e rotação Z, o que eu achei muito legal. Então você pode realmente criar uma caixa e, em seguida, começar a mudar o eixo em que é girado, X, Y e Z, e então eu pensei compositivamente que começou a ficar bastante interessante. Eu também coloquei esse alfa no preenchimento para que você pudesse ver algumas das outras formas que estão acontecendo atrás da caixa. Certo, Sphere, ainda não vendi a Sphere. É muito lento ao fazer animação. Olha, eu atirei o golpe desta Esfera e você deveria ter algo parecido com isso. Ainda estou trabalhando com a Sphere. Ainda estou tentando fazer algo divertido aqui. Naquele passo 2, eu provavelmente fiz a rotação X, rotação Y, e rotação Z, então se você seguir em frente e executar isso, ele vai apenas girar o eixo dessas esferas. Então, em alguns deles, você pode ver o fundo ou o topo da Esfera, novamente compositivamente, é interessante. Agora, os dois últimos que queremos olhar são H.image, e H.image, passo 1, há uma pasta de compilação e há também uma pasta de dados, e dentro da pasta de dados, eu apenas coloquei um pouco de JPEG que eu fiz para o meu amigo Joel Aqui. Agora, se você olhar para o build.pde, você pode notar que eu digo, “Ok, legal, eu estou usando imagem H ”, e então eu realmente entre aspas especificar qual imagem ir buscar. Você não precisa especificar a pasta de dados, ele só sabe automaticamente para obtê-lo. Você pode notar nas linhas de um a sete, se eu quisesse publicar isso para processar JS, você tem que ter essa linha de código para que ela pré-carregue as imagens para uso dentro do navegador e JavaScript. E se eu rodar isso, isso deve anexar 100 dessas imagens na tela. Então, há um monte deles lá. Novamente, no passo 2, adicionei alguma rotação, adicionei algum alfa às imagens. Muitas vezes, eu acho que em Java, ele se torna um pouco pixelizado. Você pode ver que a imagem se torna um pouco mastigável. Curiosamente, isso não acontece na versão JavaScript, mas na versão Java, você meio que começa a escada pisar nas imagens. Agora, o último que eu quero que você digerir mais porque ele se relaciona com esta classe, é HShape. HShape vai ter uma pasta de dados, mas dentro dessa pasta de dados vai ser SVG. Então vamos pegar nossos ativos que desenhamos e usá-los nessas séries de esboços. Então, dê uma olhada. HShape D, desenhável, linha nove, D é igual a nova HShape, “Ei, carregue neste arquivo SVG. E você pode notar que há algumas coisas que eu passei aqui, como habilitar estilo falso que é não usar o estilo que eu usei no Illustrator, realmente matá-lo, porque eu vou especificar o estilo aqui no processamento. Então, habilitar estilo falso mata o estilo e me permite configurá-lo aqui. Peso do traçado 1, uma laranja agradável para o traço, um cinza escuro para o preenchimento, assim por diante e assim por diante. Agora, quando eu executar este esboço, você deve notar que eu estou pintando com o arquivo SVG que eu fiz no Illustrator. Então é aqui que começa a ficar realmente empolgante, onde vamos pegar alguns desses desenhos que fazemos e mapeá-los para esses ambientes. Agora, este esboço de amostra é como um bom porque você pode ver como as coisas vão se misturar na tela. Caso em questão, olhe para o passo 2, onde se você olhar para os dados, SVG, é enorme. É um arquivo SVG muito grande, e é muito complexo nas formas que usa. Então, quando você realmente abre build.pde e você realmente executar este esboço, ele realmente não parece tão bom. Devo lembrá-los que se estamos gerando uma composição complexa, se a obra de arte é complexa, então isso é complexo duplo, e complexo duplo não parece tão bom o tempo todo. Na verdade, quanto mais simples forem meus formulários, melhores esses resultados serão, então tenha cuidado ao fazer sua arte muito detalhada. Neste caso, isso não funciona tão quente. Vejamos o passo 3. A etapa 3 são alguns desses desenhos que fiz na mesa digitalizadora Wacom. Na verdade, eu fiz um monte deles, então eu vou te dar um monte desses arquivos SVG de amostra para você brincar. Então, um pequeno SVG agradável aqui. Agora, dentro deste build.pde, você pode notar, não mate o estilo, mantenha-o como está dentro do Illustrator. Faça alguma rotação aleatória, faça algum tamanho aleatório, basta ir em frente e jogá-los na tela e vamos ver o que acontece. Então, eu vou executar este esboço e eu tive que virar o loop for para baixo para 20 porque o trabalho artístico era tão detalhado, você vai ter esse erro como eu acabei de receber, que é eu estou tentando desenhar 20 desses arquivos SVG e porque eu estou tentando fazer 20 deles, eu basicamente ficar sem memória. Diz: “Cara, você está tentando criar 20 coisas que têm muita informação vetorial.” Então, ele lhe dá algumas instruções de como realmente aumentar a memória dentro das preferências. Agora, deixe-me sair disso e em vez de mudar as preferências de memória, eu só vou mudar meu loop de quatro para cinco, então ele só vai anexar cinco peças de arte. Minha esperança é que isso funcione. Ok, então você pode ver que ele anexou esses arquivos SVG na área de trabalho, e novamente, ele está apenas levando-os - anexando-os à área de trabalho, oh meu Deus, eu estou falando tão rápido e meu cérebro está indo tão rápido que eu poderia dizer que eu queria você para raspar uma girafa. Por favor, vá ao Serengeti e raspe uma girafa. Onde estávamos? Vamos apenas seguir em frente. Certo, passo 4. Passo 4, eu coloquei em que habilitação de estilo. Deixe-me derrubar isso para o loop quatro sendo 10. Espero que eu não fique sem memória e você pode ver aqui ativando o estilo, eu poderia entrar e colocar em um preenchimento, colocar algumas informações de AVC, e eu estou começando a obter esta composição, mas você pode notar que quando eu faço isso na configuração e eu especificar um preenchimento, apenas um preenchimento universal que é preenchido em todo o conjunto de arte, mas isso é realmente um monte de coisas individuais. Então, o que eu fiz foi, apesar de eu estar pulando em frente, a próxima seção será sobre trabalhar com cores, se você realmente ir para o passo 5, eu só mostrei um exemplo do que acontece quando você tem especificou algumas cores e, em seguida, peça ao trabalho artístico para começar aleatoriamente a escolher cores para os preenchimentos. Agora, quando você faz isso, você começa a obter algo que visualmente vai parecer muito mais interessante, então em vez de aplicar uma cor, ele está correndo por aqui e está colorindo todos esses agrupamentos individualmente, como cobrimos na outra seção. Está bem, fixe. Agora, novamente, mesmo pulando mais adiante, avançando no tempo, passo 6. Na verdade, eu só queria mostrar como você importou processamento de PDF, como você diz que você quer capturar e gravar o que é renderizado na tela, e se eu pressionar a tecla S no meu teclado, capturar tudo o que foi desenhado. Então, se eu rodar este filme, pressione a tecla S, ele realmente geraria um PDF, e este arquivo PDF você pode realmente abrir no Illustrator. Então, agora eu tenho um ambiente para escrever código, anexar algum trabalho artístico e, em seguida, produzir essa composição aleatória de volta para o Illustrator, e obviamente, nas próximas seções, vamos descobrir como fazer todos os tipos de diferentes Estilos e outras coisas. Está bem. Uau, muito para abordar nesta seção, sobre como pintar para tela, como HYPE ajuda você a pintar para tela muito mais fácil do que eu acho que o processamento faz. Na próxima seção, vamos voltar um pouco e falar sobre cor. Conceitualmente, vamos falar sobre cor e depois vamos falar sobre aplicar cor a alguns novos esboços que criamos. Então, cor. Vejo você na próxima seção. 24. Introdução: trabalhando com cores: Cor. Muito importante. Temos que falar sobre cor. Sabe por que temos que falar de cor? Porque você é péssimo na cor. Não sei melhor maneira de dizer isso. As pessoas são terríveis na cor, e meu objetivo é fazer com que as pessoas não sejam ruins na cor. A cor é super, super importante para mim. Não só isso, mas tenho alguns segredos para trabalhar com cores. Novamente, a metáfora que eu costumo usar é uma caixa de lápis de cor. Vamos escrever um código que diz: “Ei, passamos todo esse tempo desenhando essa obra de arte. Ei, nós gastamos todo esse tempo executando este programa, e agora nós acabamos de definir esta caixa de lápis de cor.” Esta caixa de lápis de cor tem todas as cores com as quais podemos colorir. Então, o que vai acontecer é que, quando nós realmente executar nosso arquivo, ele vai escolher aleatoriamente do banco de ativos que nós desenhamos, ele irá gerar aleatoriamente coisas na tela, e então ele vai acessar esta caixa de lápis de cor e dizer, “Ei, meu trabalho é colorir aleatoriamente as coisas na tela, mas eu só posso usar as cores que foram especificadas nesta caixa de lápis de cor.” Essa ideia pode parecer simples. No primeiro exercício que fazemos, será muito simples. Você vai literalmente configurar esta caixa de lápis de cor, e ele vai escolher aleatoriamente entre os lápis de cor, e vai colorir as coisas na tela. Mas então podemos começar a entrar em coisas como a cor esperando. Como esperamos mais cores do que outras? Podemos fazê-lo com uma cor e podemos realmente fazê-lo com várias cores. O que significa que, quando as coisas são geradas na tela, podemos forçar uma estética de cor específica e a composição. Então, isso é trabalhar com algo chamado pool de cores. Mas temos outro truque chamado colorista de pixels. Pixel colorist, nos permite realmente tirar fotografias e tirar a cor de uma fotografia. Tenho que dar o nome de Eric Nowitzki, porque ele é um dos primeiros caras que viram fazer isso. Onde ele saía e tirava fotografias, borrava-as, e então usava a informação de cor daquela fotografia para preencher a cor que vamos pintar na tela. O terceiro passo, é uma classe chamada cada campo de cor. O que cada campo de cor nos permite fazer, é na verdade configurar pontos de cor no espaço. Então, como estamos gerando aleatoriamente uma composição, se eu quisesse que ela fosse verde na parte superior, e então amarela no meio, e então azul na parte inferior, poderíamos usar cada campo de cor para realmente criar essa transição de cores. Então, vamos passar muito tempo com cores, porque eu acho que é uma coisa super incrível para ser obcecado. Eu acho que vai ressoar no trabalho que você cria e, finalmente, você pode dizer a todos os seus amigos que você não é ruim na cor. 25. O ladrão de cores: Estamos na Seção 5, que está trabalhando com cores. Tenho a camiseta do meu colega professor de Skillshare John Conteno. Sente o poder? Por onde começar? Cor. Super, super importante, estou obcecado com isso. Adoro a cor ao ponto em que estou sempre à procura e à procura de inspiração, estou sempre à procura de cor. Agora, no passado, era isso. Costumávamos ser designers de impressão e você tinha o seu livro Pantone e você passava e encontrava, mas você estava sempre olhando uma cor de cada vez, mas foi aqui que começamos a obter cores. Há muitos lugares para inspiração de cores, por exemplo, Kuler, você poderia ir para Kuler. Kuler é legal. Vou mostrar-te alguns truques para hackear com o Kuler. Meu problema com Kuler é que são apenas cinco cores, e em alguns casos, isso é ótimo para começar com essas cinco cores, mas eu estou sempre procurando uma gama de cores, uma gama muito mais ampla, especialmente quando se trata de adicionar essas cores programaticamente, o que você vai descobrir é que, se eu estivesse gerando aleatoriamente um monte de arte na tela e eu só usasse cinco cores, ele acabaria parecendo muito plana. Então, o que eu quero fazer é que eu quero obter uma gama muito maior de cores. Então, a questão é, onde vem a cor? Onde posso procurar inspiração colorida? Bem, acaba que na maioria das vezes é de fotografias. Se eu fosse abrir um navegador, por exemplo, e digamos que eu fosse ao Google e digitasse Beach and Ocean, talvez, e clicasse em “Imagens”, eu poderia percorrer essa seleção de imagens para procurar cores. Por exemplo, como este, se eu gostar deste, se eu estivesse procurando por esse tipo de azul com esse tipo de cor de areia e talvez aquele soco de amarelo, então este poderia ser um ótimo lugar para roubar cores. Acontece que passo muito tempo no Flickr olhando o que os amigos fazem. Estes são alguns amigos meus, Kozyndan, e eles são mergulhadores ávidos e eles estão sempre postando essas fotos simplesmente incríveis debaixo d'água. Acabei por ver este e apavorei-me. Eu era como, “Uau, isso tem alguns blues realmente incríveis. Tem um grande ouro e transita para uma incrível e rica cor de chocolate.” Então, como posso usar isso como um ponto para roubar cores? Vamos tirar essa imagem do Flickr e abri-la aqui no Photoshop. Agora, novamente, aqui está a imagem. Um monte de coisas realmente boas acontecendo e este é um JPEG, e porque é um JPEG, ele suporta milhões de cores, então a informação de cores aqui é enorme. Essa idéia de pegar a ferramenta Conta-gotas e selecionar uma cor e, em seguida , “Oh, eu gosto disso ou eu quero ir mais silenciado?” Isso levaria uma eternidade para ver esta fotografia e encontrar cor. Bem, eu tenho alguns truques. O que eu vou fazer, é eu vou subir e dizer “Salvar para a Web”. Quando você diz Salvar para Web, você obtém esta pequena janela agradável aberta aqui, e a coisa é que se você estivesse em JPEG, você notaria que a tabela de cores está em branco, e novamente, é porque o JPEG e o PNG podem suportar milhões de cores. Mas você pode ter visto que, se você realmente salvar isso como um GIF, você reduz essa imagem para uma tabela de cores e essa tabela de cores pode ter até 256 cores nela. Agora, se eu selecionei “GIF32 Dithered”, o que você vai notar é que a tabela de cores novamente, reduzida para as 32 cores top média em toda a peça. No entanto, eu tenho um pouco de um problema com o dithering, e o que é dithering, é que ele vai dispersar os pixels em torno de modo que seu olho realmente misturá-los um pouco melhor na tela. No entanto, se eu vim aqui e disse “GIF 32 No Dithered”, então eu vou obter apenas piscinas muito maiores de cor. Agora, a coisa boa é que enquanto eu estiver nesse Salvar para Web, e enquanto eu estou vendo essa tabela de cores, eu posso dizer, “Ei, você sabe o quê? Eu realmente não quero essa cor escura, deixe-me ir em frente e lixá-la.” Então, eu posso realmente começar a remover talvez algumas das cores que eu não estou interessado em. Então, de novo, isso é muito bom. Na verdade, vejo um aqui. Este não é um verde acastanhado muito bom, então eu posso usar a ferramenta conta-gotas para realmente selecioná-lo. Ele destaca na minha tabela de cores e eu posso ir em frente e lixá-lo. Talvez eu não seja tão louco por esta cor e eu possa selecionar esta e eu posso ir em frente e lixá-la. Então, eu posso ir em frente e começar a fazer algumas edições iniciais removendo algumas das cores que talvez eu não esteja muito interessado. Ok, então o que eu vou fazer é eu vou apenas clicar em “Salvar” e eu vou realmente colocar isso na minha área de trabalho e eu vou chamar isso de Color1.gif. Agora, a coisa é que o que você pode ter visto é que esta fotografia tem algumas divisões bem claras, especialmente, nesta seção aqui, há uma divisão clara entre a alga e o azul, certo? Então, uma coisa que eu normalmente vou fazer, eu salvei esse GIF, mas eu vou subir para filtrar e eu vou dizer “Borrão”, e eu vou dizer “Borrão gaussiano”, e eu vou em frente e jogar um borrão gaussiano como 10. Agora o que isso está feito é apenas misturado. Todas as cores. Então, agora, não há essa borda dura entre uma cor e outra cor. Na verdade, todas as cores são misturadas. O que você vai descobrir é que, se eu realmente salvar para Web novamente, e às vezes ele irá manter os dados da tabela de cores da imagem anterior. Então, eu sempre faço questão de clicar em jpeg, mostrar-me todos os milhões de cores e, em seguida, reescolher GIF 32 No Dither. Quando eu faço isso, olhe para essas grandes piscinas de cor que reescolheu a tabela de cores aqui. Mais uma vez, eu poderia pegar a ferramenta conta-gotas e me livrar dessa cor particular. Novamente, eu poderia entrar e editar talvez algumas dessas cores que eu sei que eu não estou realmente sentindo. Então, eu guardo uma que é a foto exatamente como foi planejada, e eu faço a segunda onde eu faço esse borrão gaussiano. Então, eu vou salvar isso como color2.gif. Neste ponto, você pode ir em frente e fechar a imagem que você tem, e você pode ir em frente e fechar o Photoshop. Agora, o que eu costumava fazer é que eu costumava ter um aplicativo da Web, onde você iria para um URL e ele dizia, “Ei, por que você não me dá um GIF e eu vou olhar para todas as informações de cores que estão lá e cuspi-lo em código.” Eu usei isso por anos e anos e eu acabei dando uma aula em Aspen, Colorado, no Complexo de Arte Anderson Ranch e um dos meus alunos era um cara incrível Michael Swenson. Michael disse, “Ei, você se importa se eu pegar esse conceito e realmente empacotar como um aplicativo autônomo?” Esse aplicativo deve ser anexado a este vídeo. O que é, é a ferramenta Color Separação. Então, quando você iniciar isso, você pode ver que você pode dizer carregar imagem e você tem alguns outros valores aqui. Tudo o que eu vou fazer é eu estou indo para carregar imagem e vamos em frente e basta carregar no primeiro color1.gif e clique em Abrir. Você pode notar que o que ele é feito é, ele é realmente extraído as cores deste GIF. Agora, você pode classificar. Você pode dizer, “Ok, mostre para mim em HSL. Mostre-me no HSV. Mostre-me no laboratório.” Eu meio que gosto de laboratório porque ele classifica a partir de, Vou atualizar mais tarde muito obrigado. Então, eu gosto de laboratório para a triagem. Agora, há algumas cores aqui que eu não quero, e talvez agora que eu possa vê-las um pouco melhor em vez daquele chip de amostra no Photoshop. O que eu vou fazer é, eu vou manter pressionada a tecla Ctrl e eu posso realmente começar a editar algumas das cores que eu sei que eu não quero. Quando eu editá-los, na verdade isso começa a se organizar. Agora, digamos que eu queria apenas ver o blues, você realmente pode mover as amostras para cima e eu poderia realmente começar a olhar para os azuis tudo em uma fileira para ter uma noção de como essas cores estão se misturando. Eu quero remover alguns deles Então aqui, eu estou apenas movendo esses filhotes. Quando eu faço isso, agora eu tenho uma sensação muito melhor de, oh, ok. Eu realmente não quero essa cor, eu não quero essa cor. Estes dois aqui têm um pouco de verde demais , então eles não estão realmente gelificando com alguns dos outros. Então, eu poderia remover isso e remover isso. Então agora, eu começo a ter um pouco melhor harmonia com esses azuis. Agora, vamos apenas dizer que eu quero jogar uma areia. Então, eu poderia escolher essas duas cores de areia, e vamos dizer que eu quero essa série de laranjas. Então, novamente, eu poderia remover alguns desses marrons que eu realmente não acho que estão funcionando, e como eu editar realmente as amostras ficam maiores. Então, eles me ajudam a organizar um pouco melhor o que está acontecendo. Então, legal, terminamos. Ótima paleta. Eu tenho um, dois, três, quatro, cinco, seis, sete, oito, nove, 10, 11, 12, 13, 14, 15 cores que é ótimo. Então, em vez de usar mais frio e ter cinco, eu realmente tenho 10 cores extras aqui, o que é ótimo. Agora, se eu estivesse fazendo animação, você poderia realmente clicar em usar exibição de enxame, então eu poderia realmente olhar e ver como seria se essas cores estivessem se movendo na tela e tendo algum desvanecimento para elas. Você pode clicar em usar GridView para voltar a analisar isso em uma grade. Na verdade, essas cores estão se misturando muito bem. Então, o que eu quero fazer é clicar em Exibir lista de cores, e você terá essa pequena saída aqui. Digamos que eu vá em frente e comece um novo documento no Sublime Text dois e eu possa realmente clicar em Exibir para processamento. Se eu clicar em Exibir para processamento, ele realmente cospe todas as cores como hexadecimal. Você pode salvá-lo como um arquivo ASE que você pode importar novamente para o Photoshop ou Illustrator, ou eu posso copiar dados para a área de transferência. Então, eu vou ir em frente e copiar os dados para a área de transferência, vá em frente e clique em Colar e agora eu tenho todas essas cores extraídas dessa fotografia e pronto para uso em código. Então, eu posso salvar isso na minha área de trabalho como colors.text. Vamos colocar isso na área de trabalho. Então, agora, eu estou realmente começando a salvar algumas das cores. Agora, se eu fechar isso e realmente fechar a ferramenta Color Separação e realmente reiniciá-la. Se eu fosse importar na segunda foto, lá você tem que atualizar. Você deve atualizar. Você está insistindo que atualize imediatamente. Então, eu vou deixar você atualizar porque você tem que atualizar. Não há dúvida de que você está atualizando. Atualizou-se. Ferramenta de recorte. Carregue imagem. Vamos apontar para o segundo. Às vezes, com o segundo, com aquele borrão gaussiano, as cores são na verdade em muitos casos, podem ser um pouco mais harmoniosas porque novamente, você não tem essas divisões difíceis entre cores, você tem uma agradável gradação sutil entre as cores. Então, às vezes, se eu quiser que as cores façam uma transição um pouco melhor, novamente esse borrão gaussiano, como você pode ver, às vezes faz um trabalho melhor. Então, uau. Ótima ferramenta para extrair cores de imagens. Então, vamos começar um novo vídeo e eu vou mostrar-lhe um pequeno truque sobre como continuar usando esta técnica, mas em conjunto com mais frio. Ver o próximo vídeo 26. Expandindo o Kuler: Ok. Então, como podemos usar Kuler talvez como um lugar para pegar cinco cores e expandi-la em algo maior? Então, por exemplo, vamos olhar para o conjunto bem aqui em cima no topo. Na verdade, não é ruim. São dois bons azuis, dois bons verdes, assim por diante e assim por diante. Então, o que eu vou fazer é eu estou indo para captura de tela. Na verdade, eu só vou tirar uma pequena captura de tela dessas cores e então eu posso ir em frente e fechar o navegador e eu tenho as amostras bem aqui na minha área de trabalho. Agora, deixe-me ir em frente e abrir isso no Photoshop e novamente, eu posso ver as cores são. Agora, o que eu vou fazer é pegar esse conjunto limitado de cores e realmente expandi-lo em algo um pouco maior. Então, digamos que eu vou fazer um novo documento e eu vou dizer que este documento é 600 por 200. 600 pixels de largura, 200 pixels de altura e boom! Podemos ir assim. Agora, o que eu vou fazer é eu vou escolher esse azul e então eu vou manter pressionada a tecla Option e selecionar aquele azul escuro. Então, agora eu tenho as duas cores acontecendo no meu negócio de amostras de cores thingamajig. Então, o que eu vou fazer é alternar para esta nova imagem que eu criei e eu vou realmente ir em frente e fazer um gradiente, e quando eu faço um gradiente, eu posso ver aqui no topo eu estou indo de uma cor mais clara para a cor mais escura. Então, eu vou apenas manter pressionada a tecla Shift e eu vou apenas arrastar de uma extremidade para outra extremidade, e então agora eu criei um gradiente. E, claro, eu posso dizer, “Salvar para a web”, e eu posso ir em frente e dizer, “Eu gostaria de um gif por favor.” E quantas cores você gostaria de fazer a transição da luz para o escuro? Então, digamos que eu queria seis blues. Você poderia vir aqui ao Colors e dizer, “Ei! Dê-me seis”, e olhe para isso. Você começa a obter o movimento da cor mais clara para a cor escura em seis passos. Então. Vou seguir em frente e clique em Salvar. Vamos em frente e chamar este azul e vamos em frente e guardá-lo na minha área de trabalho. Ótima. Vamos voltar à imagem e vamos fazer a mesma coisa com os verdes. Então, eu vou clicar no verde mais claro, manter pressionada a opção e clicar no verde mais escuro, alternar de volta para a minha imagem aqui, ir em frente e fazer a ferramenta de gradiente novamente, e apenas ir em frente e desenhar esse verde. Novamente, vou fazer Save for Web. Talvez eu não queira seis desta vez. Talvez eu só queira quatro, então quatro passos da luz à escuridão. Eu posso ir em frente e salvar isso na tela como green.gif. Ok, e eu vou ir em frente e voltar para a nossa imagem aqui e eu poderia tentar algumas outras coisas, como o que parece quando você alternar deste verde claro para este verde escuro? Que tipo de cor é que isso vai produzir? E se eu ir em frente e criar o gradiente e ir em frente e fazer Salvar para Web, novamente, eu poderia talvez mudar isso para oito cores e eu posso começar a ver essa transição da cor mais clara para a cor mais escura. Então, deixe-me guardar isso como Trans para a transição, quem sabe. Ok. Então, agora que fizemos isso, posso ir em frente e fechar todas as imagens que tenho. Agora, eu acho que isso é apenas branco. Certo? Não, não é só branco. Veja o que eles estão fazendo. Então, vamos fazer isso. Vamos pegar essas novas imagens que acabei de criar e reabri-las no Photoshop de novo, certo? Oh! Eu não queria fazer isso. Continuar colocando arquivos adicionais? Não, obrigado. Desculpe por isso. Você pode clicar em Abrir, e deixe-me clicar em Azul, Verde e Trans e clique em Ok. Tudo bem. Então, agora novamente este documento aqui é 600 por 200. Então, o que eu poderia querer fazer é criar um novo documento que é 600 por 800. Ok? E deixe-me ir em frente e pegar aquele azul e colá-lo aqui em cima, em cima. Deixe-me ir em frente e pegar este verde e colá-lo no topo e vamos em frente e pegar o trans. Talvez queiramos usar isso e simplesmente ir em frente e colar isso ali. Legal. Deixe-me ir para a cor de fundo porque isso realmente não é branco e deixe-me preencher o fundo com essa cor. Agora, aqui eu tenho cinco no topo, quatro no meio e oito no fundo e, em seguida, minha cor esbranquiçada aqui. Então, agora que eu tenho estes todos compilados em um tipo de chip mestre, eu poderia realmente ir em frente e dizer 32 No Dither e ele vai apenas encontrar todas as cores que estão neste. Não há 32, estas são todas as cores que ele poderia encontrar. Certo? Então, então eu posso ir em frente e clicar em master.gif. Tudo bem? Então, agora eu tenho um gif que contém todas essas cores que eu extraí do Kuler. Tudo bem? Então, deixe-me ir em frente e fechar o resto desses caquinhos, e agora, eu posso ir em frente e lançar a Ferramenta de Coloração. Eu posso ir em frente e dizer Load Image. Eu posso ir em frente e apontar para master.gif. Mais uma vez, ele queria fazer 32 cores, mas eles não são 32 cores, então ele gera um monte desses pretos. Posso seguir em frente e manter pressionada a tecla Option e, novamente, sinto muito a tecla Control, e remover essas cores extras que não conseguimos encontrar. Tudo bem? Uau! Sim. Estes dois aqui no final ou não funcionam para mim. Vou em frente e remover isso. Então, há alguma edição adicional. Estas duas cores estão bem, mas são as transições entre este verde e o azul. Quem sabe? Talvez eu esteja sentindo, talvez eu não esteja. Mas a questão é que você pode ir para Kuler. Você pode começar com cinco cores iniciais e, em seguida, começar a fazer alguns gradientes sobre eles para realmente pegar essas cinco cores base e expandi-los em uma lista muito maior. Mais uma vez, você poderia vir aqui e dizer Ver Lista de Cores. Você poderia dizer Exibir para processamento, Copiar para área de transferência. Eu poderia vir ao meu arquivo de texto aqui e pagar algumas novas cores neste documento. Então, eu literalmente começo a construir essas tabelas de cores a partir de imagens. Posso tirar uma imagem que eu encontrar e continuar refinando as paletas, refinando as paletas. Terei arquivos de texto que talvez tenham 10 ou 20 diferentes agrupamentos de cores que acabo trocando dentro e fora de programas que estão certos. Incrível. Grande truque. Internet alta cinco. Ponha a mão no monitor. Então, agora o que fazemos com isso? Roubamos estas cores das fotografias. Encontramos essas ótimas maneiras de compilar tabelas de cores. Agora, vamos seguir em frente para pegar essas cores e colocá-las em nossa programação. Então, agora, quando esses ativos geram aleatoriamente na tela, estamos pedindo a eles para escolher uma cor dessa tabela de cores. Vejo você no próximo vídeo. 27. HColorPool: Ok. Então, no Hype, temos três maneiras diferentes de lidar com a cor. Neste vídeo, vamos começar com HColorPool. Agora, o que eu fiz é, você pode ver aqui na tela que eu estou usando o exemplo em H drawables o Hype_objects.zip, um dos drawables é HRect. Aqui você pode ver o primeiro passo, build, build.pde. Agora, neste arquivo em particular, estamos executando nossa configuração. Estamos executando um for-loop que vai executar um número definido de vezes e nós estamos apenas adicionando-os ao palco. Estamos fazendo uma randomização para tamanho, rotação e localização. Então, se você testar este filme, você deve notar que ele apenas joga aleatoriamente um monte de coisas na tela. Então, o que eu quero fazer neste ponto é usar isso como um ponto de partida. Então, eu vou criar uma nova pasta aqui chamada HColorPool. Eu vou abrir esta pasta e em HColorPool, eu só vou pegar este passo um fora de HRect e arrastá-lo para ColorPool. Então, deixe-me colocar isso aí. Então, novamente, pasta chamada HColorPool dentro dele, passo um, construir, build.pde. Novamente, quando eu executar o esboço, você deve notar que ele está apenas gerando aleatoriamente um monte de quadrados na tela. Então, vamos fazê-lo para que os preenchimentos tenham algum tipo de cor aleatória. Agora, a fim de fazer isso, no topo aqui, eu vou escrever HColorPool e eu vou chamá-lo de cores. Então, novamente, esta é uma classe dentro de Hype para trabalhar com cores. Então, vamos em frente e adicionar algumas cores a este pool de cores. Então aqui em baixo eu diria, “Cores é igual a new HColorPool ();” para terminar a linha. Agora, aqui dentro é onde vou colocar algumas cores. Então, agora, só para o inferno, eu vou colocar em quatro cinza e eu gosto de definir cores como hexadecimais como você viu eles saindo da ferramenta de seleção de cores. Então, vamos fazer um branco. Então, eu vou dizer FFFFF, vamos fazer uma luz, mesmo como um cinza branco claro F7F7F7 e vamos fazer outro cinza claro, ECECEC, e então vamos fazer um cinza escuro 333333. Então, os três primeiros são muito leves; branco para um cinza muito claro e, em seguida, o quarto é realmente um cinza escuro. Agora, eu vou colocar em dois blues. Então, eu vou dizer 009a58 e eu também vou colocar em outro azul, 00616f. Para terminar, vou colocar duas cores laranja FF3300 e FF6600. Então, incrível. Temos oito cores em nossa piscina para colorir e novamente, tratá-lo como uma caixa de lápis de cor. Ele vai subir lá, escolher aleatoriamente uma dessas cores e nós vamos pintá-las até o preenchimento. Então, vamos fazer algumas mudanças. Neste momento, nosso traço é na verdade essa cor laranja, então eu vou mudar o traço para preto. Então, eu vou dizer 000000 e agora para preencher em vez de realmente colocar em uma cor, veja o que eu vou fazer eu vou criar um pouco de espaço aqui. Então eu vou dizer, “Ei, cores. Eu quero. GetColor ()”. Agora, o que isso vai fazer é aquela linha quando ele vai para definir o preenchimento, ele realmente vai subir para a linha nove, ele vai escolher aleatoriamente uma dessas cores e adicioná-lo à cor de preenchimento. Agora, se eu for em frente e testar este esboço, você deve notar que tudo deve estar funcionando como esperado, ele fez um traço preto e aleatoriamente está escolhendo cores do pool de cores. Agora, o ponto interessante é que cada uma dessas cores tem uma probabilidade igual de ser escolhida. Então, cada cor tem uma chance em oito de ser escolhida. Então, o que eu quero fazer é adicionar essa idéia de cor esperando. Como você adiciona peso a cores específicas mais do que outras? Então, deixa-me mostrar-te como se faz isso. Vou seguir em frente e fechar este arquivo, salvar e fechar este documento. Em HColorPool para o primeiro passo, eu vou ir em frente e duplicar isso para um passo dois. Agora, vamos em frente e abrir esse arquivo novamente e, em vez disso, o que eu vou fazer é, eu vou tirar as cores fora do pool de cores. Vou em frente e colocar o ponto e vírgula final da linha, dado alguns retornos difíceis. O que eu posso fazer é, eu posso dizer, “Ok, crie um pool de cores e eu vou adicionar as cores manualmente e dizer quantas delas eu quero armazenar.” Então, deixem-me dar-vos um exemplo. Posso dizer.add e dentro de.add eu poderia dizer FFFFFF e eu poderia continuar fazendo isso, vamos escolher algumas novas cores. Vamos fazer EC, C3 ou blues e nossas laranjas. Então, vamos mudar isso para ECECEC. Vamos mudar este para CCCCCC, vamos mudar este para 333333, vamos mudar isto para aquele 0095a8 azul, vamos mudar este para 00616f. Então, é claro, existem duas laranjas: FF3300 e FF6600. Agora, ele é digitado um pouco diferente, mas eu realmente gosto de fazer a cor desta maneira porque eu posso especificar a importância de certas cores sobre outras. Mais uma vez, se eu testasse o esboço deve parecer absolutamente idêntico no sentido de que ele escolheu cores aleatoriamente fora do pool de cores. Agora, no passado, eu costumava fazer algumas coisas bem engraçadas onde eu dizia, adicionar branco, branco, branco, branco, branco, branco, branco, branco. Eu faria isso para que houvesse mais exemplos da cor branca do que essas outras cores. Então, quando ele iria aleatoriamente para escolher, ajuste escolhido este um iria ficar branco e se ele escolhesse aleatoriamente e eu tenho este, ele ficaria branco, e se ele escolhesse aleatoriamente este um seria cinza escuro. Então, eu estava apenas adicionando mais instâncias de uma cor, a fim de dizer que eu queria que ele escolhesse mais destes do que outro. Agora, na piscina de cores há realmente um atalho para fazer isso. Então, se você especificar o pool de cores dessa maneira, se você disser.add, você pode dizer FFFFF, e então você pode fazer vírgula e, em seguida, especificar quantos deles você deseja. Então, no caso disso, eu disse que quero 20 de branco. Então, se isso fosse para escolher aleatoriamente, se ele escolhesse os números 0 a 19, eu realmente saberia que ele está ficando cor, essa cor de branco. Então, agora, se eu testar meu esboço, branco deve ser a cor predominante em toda esta peça que na verdade é. Então, eu posso começar a especificar agora quais cores eu quero mostrar mais do que outras. Então, por exemplo, se eu me livrasse disso e então eu diria: “Tudo bem, legal. Eu quero 15 laranja escuro e cinco laranja claro, e eu testar o esboço, novamente você deve ver que a laranja está predominantemente dominando este esboço. Então, especificando o pool de cores dessa maneira, eu poderia realmente marcar quais cores devem acontecer mais do que outras. Então, eu diria neste esboço final, eu realmente fiz algo assim onde eu diria, havia nove desses, havia nove desses, e havia nove desses. Com para os três, eu só fiz três deles e para o blues, eu coloquei dois. Então, você pode ver que eu especifiquei muito mais dessas cores cinza mais claras e , em seguida, apenas alguns cinza escuro e, em seguida, dois dos azuis sobre a laranja. Então, se eu testar o esboço, você deve ver isso novamente, você tem muito desse cinza claro acontecendo, um pouco do azul, e depois o laranja. Porque eu não especifiquei, um número é obviamente a mais rara das cores. Então, realmente grande truque para usar pool de cores para pegar essas cores que nós puxamos para fora a ferramenta de seleção de cores e pesá-los, para especificar quais cores estão acontecendo mais do que outros. Agora, no próximo vídeo, vamos passar para o segundo tipo de classe de cor que é Pixel Colorist. Então, neste ponto, eu convidaria você a pegar algumas imagens, roubar algumas cores, executá-las através da ferramenta de seleção de cores, e usar o pool de cores para aleatoriamente ter sua arte colorida pelas cores que você extraiu nessas fotografias. Ok, o próximo vídeo é Pixel Colorist. Vejo você lá. 28. HPixelColorist: Neste vídeo, vamos cobrir o trabalho com HPixelColorist e eu realmente amo essa aula. É um truque que aprendi com Eric Nowitski. Ele está usando uma fotografia e o arranjo de cores, e fluxo, e posicionamento de cor em uma fotografia como um mapa para roubar a cor e puxar para a arte. Eu vou ir em frente e criar uma nova pasta chamada, HPixelColorist e eu vou literalmente começar de novo assim como eu fiz com HColorPool. Eu estou indo para ir em frente e abrir objetos HYPE, Eu estou indo para Hrec e copiar o passo um novamente. Vamos deixar a piscina de cores em paz. Está feito então vamos começar de novo. Novamente, se eu abrir o primeiro passo, abrir construir, abrir build_pde, testar o esboço. Você deve ver apenas um arranjo de notas. Agora, o que eu quero fazer com PixelColorist é usar um ativo externo, então sempre que temos que usar um ativo externo dentro da pasta de compilação, eu vou criar uma nova pasta chamada dados e dentro desta pasta é onde novamente, você vai colocar qualquer tipo de ativo externo. Um jpeg, um tipo de letra, um SVG e assim por diante. Se eu alternar para o Photoshop, vocês podem ver aqui que eu tenho aquela imagem alga, eu tenho um borrão gaussiano de 10 nele, então as cores estão meio esfarrapadas e eu vou em frente e dizer, “Salve para web, jpeg, máximo”, e eu vou apenas salvá-lo diretamente na minha área de trabalho. Posso minimizar o Photoshop, tenho a imagem aqui na minha área de trabalho e vou arrastá-la para a pasta de dados. Para este primeiro exemplo, quero carregar a fotografia no fundo para que possamos ter uma ideia do que está acontecendo. Para fazer isso, vou fazer um atalho aqui. Eu vou dizer, “H.Add”, e em H.Add, eu vou dizer, “New HiMAGE”, e dentro de HiMAGE, eu vou dizer “kelp.jpg”. Se eu testar o esboço, ele deve ir para a pasta de dados, ele deve ir para o jpeg e realmente carrega esse jpeg em segundo plano, então agora eu posso vê-lo escolhendo através dos retângulos. Os retângulos são um pouco grandes. Vamos torná-los um pouco menores mudando o tamanho para aleatório, 25 para 75. Agora, o quadrado vai ser um pouco menor. Agora, eu vou subir até o topo e eu vou dizer, “HPixelColorist”, e vamos chamá-lo de cores, assim como fizemos em HColorPool. Então eu vou escrever uma linha aqui que diz, “Ok cores, você é igual a um novo HPixelColorist e você deve ir buscar kelp.jpg para obter informações sobre cores.” Outra coisa que eu também posso fazer é especificar o que eu quero que ele para colorir. Então, neste caso, eu vou dizer, “FillOnly”. Então só vai ser colorir os preenchimentos e não os traços. Se eu fosse para baixo para o meu loop quatro aqui, ao contrário do ColorPool, nós não vamos usar GetColor em nosso primeiro exemplo. Na verdade, eu vou continuar e manter o traçado de um, eu vou mudar a cor do traçado para preto 000000 e porque ele diz, “Somente preenchimento”, eu posso realmente remover essa linha ou realmente especificar a cor de preenchimento. Isso é porque aqui na parte inferior da linha 23, eu vou dizer, “Ei cores, eu quero que você aplique cor a D”, então essa linha 23 vai correr através de todos os D que foram criados aqui, ele vai até linha 11 e olhar para o jpeg e puxar a cor para o FillOnly.” Agora temos uma melhor representação do que realmente está acontecendo aqui e está tudo ligado à âncora. Se esta for a arte e a haste de âncora estiver no centro, quando ela for posicionada aleatoriamente na tela, essa âncora terá um eixo X e eixo Y específicos, portanto, 100,100. O que acontece é na linha 23 quando ApplyColor é acionado, ele vai até HPixelColorist, vai para o jpeg chamado alga, vai para a posição X de um 100, posição Y de 100, olha para aquele único pixel que é residindo entre 100 e 100 e diz, “Oh, esta é a cor”, e então puxa essa cor para o preenchimento. Então está fazendo isso toda vez que uma dessas coisas é aleatorizada em nossa tela. Está olhando para as mesmas coordenadas exatas na imagem e puxando a cor para o preenchimento. Vamos em frente e fechar isso e vamos trabalhar algumas construções extras aqui. Então, eu estou indo para opção arrastar passo um para um passo dois e eu vou ir em frente e abrir build_pde e neste exemplo, eu vou apenas remover a linha nove. No primeiro, eu mostro a imagem no fundo, mas honestamente nós realmente não precisamos vê-lo. Eu vou mudar meu tamanho de volta para 1,5 e eu vou executar meu esboço. Então, eu estou usando a imagem para a informação de cor, mas eu realmente não preciso ver a imagem. Eu só fiz isso no primeiro exemplo para que possamos tipo de obter uma representação de como sua posição está agarrando a mesma cor nessa posição. Mas honestamente, não precisamos ver a fotografia ao fundo. Vamos em frente e fazer um passo três, e se fizermos um passo três vamos em frente e abrir build_pde e, no caso deste, eu quero mudar isso de FillOnly para StrokeOnly. Vamos mudar o StrokeWeight para três e eu não preciso especificar a cor do traçado, mas eu vou especificar uma cor de preenchimento e eu vou mudar a cor de preenchimento para um cinza escuro, 111111. Agora, se eu testar o esboço, a linha nove só deve aplicar a coloração aos traços. Eu vou ir em frente e fechar este arquivo e eu vou dar o passo três e copiá-lo para um passo quatro e eu vou abrir build_pde e no caso deste, eu vou dizer FillandStroke. Vamos manter o StrokeWeight em três, mas eu posso ir em frente e remover esta chamada para FillColor. Agora, se eu executar este esboço, você não pode realmente dizer que na verdade um preenchimento e um acidente vascular cerebral estão ficando coloridos ao mesmo tempo. Se eu realmente colocar em uma pequena linha de código aqui se eu dissesse, “Alpha (100)”, e então executar o esboço, você veria que, de fato, um preenchimento está ficando colorido e um traço está ficando colorido e só colocando isso alfa (100) temos uma sensação de que existem duas coisas separadas que estão ficando coloridas. Com isso dito, talvez eu devesse fazer outro exemplo como um passo cinco e esse será o último que eu faço aqui. Então vamos em frente e copiar este passo quatro para um passo cinco. Vou em frente e abrir o build_pde aqui e no caso deste, vou mudar o código um pouco. Em vez de chamar FillandStroke, eu só vou passar o jpeg para colorir, e em vez da linha 21 chamando ApplyColor, eu vou ir em frente e excluir isso. Eu vou continuar e manter o peso dos três, mas vamos nos livrar do alfa e vamos dizer, “Ei, eu quero fazer algo com o derrame e ei, eu quero fazer algo com o preenchimento.” Agora, no caso deste arquivo, eu quero que ele pegue a cor e coloque no traço e eu queria pegar a cor e colocá-lo no preenchimento, mas com o preenchimento, eu quero aplicar alfa. Então eu não quero aplicar alfa para ambos, eu só quero aplicar alfa para o preenchimento. Agora, assim como um HColorPool, eu posso dizer, “colors.getColor”, e eu vou copiar isso e colá-lo no preenchimento. Agora, GetColor no exemplo HColorPool, estava indo para a matriz de cores aleatoriamente escolhendo uma e puxando-a para baixo. O que temos que fazer aqui é GetColor no caso de HPixelColorist como ele precisa saber uma coordenada X e uma coordenada Y para que ele possa procurar isso no jpeg. Eu vou fazer isso dizendo, “GetColor”, mas então obter eixo d.x e obter eixo d.y. Então, vou colocar aquele D.X e aquele D.Y e esqueci de colocar uma vírgula. Então D.X, D.Y. Vou fazer a mesma coisa para preencher. Eu vou dizer D.X, D.Y, exceto no preenchimento, eu vou dizer, “Eu quero que o alfa seja 100.” Então eu digo, “colors.get color () ”, e dentro disso eu estou dizendo, “Obter d.x, obter d.y”, e depois fora desta chamada de função, eu digo, “100 para o alfa.” Veja o que acontece quando faço este esboço. Quando eu corro isso, de repente, todas as cores são iguais. A razão pela qual todas as cores são iguais é porque d.x e d.y realmente não tem uma localização ainda. O local não está definido até a linha 19. Então agora, ele está apenas voltando 00 que acontece de ser tudo da mesma cor. Então, se eu fosse pegar esta linha 19 aqui onde eu estou realmente definindo a localização aleatória, o eixo x e y aleatório, e realmente mover isso para ser a primeira coisa para que ele defina a localização aleatória primeiro. Quando d.x e d.y são disparados nas linhas 16 e 17 agora, eles agora são x único e y. então agora quando eu executar este esboço, você deve notar que todas as cores agora são únicas, mas apenas o preenchimento está recebendo alfa e o derrame não é. HPixelColorist novamente outra ferramenta realmente grande para amostragem de cores de uma imagem, e novamente essa imagem não precisa ser uma fotografia. Você pode abrir o Photoshop agora mesmo, começar a fazer gradientes, começar a fazer pools de cores. “ Eu quero rosa aqui, eu quero verde aqui”, e então quando nós geramos aleatoriamente nossa composição, há na verdade uma estrutura para o que está acontecendo cor sábia na tela porque nós definimos o roubo da cor deste particular Fotografia. ColorPool, realmente ótimo. Especificando a caixa de lápis de cor, pegando aquelas caixas de lápis de cor. HPixelColorist roubando de uma imagem. Então, agora, eu quero passar para o próximo vídeo que vai estar usando uma nova classe chamada ColorField e ColorField nos permitirá definir gradientes radiais de cor no espaço. Coisas boas. Veja o próximo vídeo. 29. HColorField: Então, a classe de cor final que vamos trabalhar com é HColorField. Agora, campo HColor é provavelmente melhor descrito como o que você está vendo na tela agora. É uma forma de especificar um ponto e, em seguida, anexar um gradiente radial a esse ponto. O que vai acontecer é, se eu anexar aleatoriamente obras de arte se algo acontecer aqui em cima nestes cantos externos, então ele vai ficar colorido preto. À medida que começa a fazer o seu caminho para dentro, ele vai passar do vermelho escuro para o vermelho médio para o vermelho brilhante no meio. Agora, o engraçado sobre esta classe em particular é, se eu colocasse isso aqui e, em seguida, se eu criasse uma cópia e colocasse a cópia aqui, você notaria que não há interação entre esses dois pontos. Então, se eu fosse mudar isso para um azul, por exemplo, novamente a arte ficaria azul colorido aqui. Passaria lentamente para um azul escuro. Eventualmente ele iria retornar preto aqui no centro e então iria fazer o seu caminho para fazer vermelho. Então, o bom é que, se eu fosse mudar o tamanho deste gradiente radial, então vamos mudar isso para 600 por 600 e deixe-me mudar este para 600 por 600. Observe o que está acontecendo agora. Assim que as duas cores realmente começam a se sobrepor, elas misturam roxo no meio. Então, cada campo de cor vai fazer exatamente a mesma coisa. Você pode especificar pontos no espaço, especificar qual cor existe no centro absoluto, especificar o raio desse gradiente radial e se os gradientes radiais se sobrepuseram, então o que vai acontecer é que ele realmente vai começar a misturar as cores na tela. Então, novamente, nós ficaríamos amarelos neste ponto. Começaria a transição para uma laranja, eventualmente encontraria seu caminho para um vermelho, assim por diante e assim por diante. Legal. Então, vamos em frente e fazer uma nova pasta na tela chamada cada campo de cor. Você adivinhou, nós vamos voltar para os objetos de propaganda e vamos direto para o HRCT e copiar o passo 1 novamente. Adoro começar do zero. Agora, vamos em frente e abrir campo HColor, passo 1, construir, build.pde, e apenas para reiterar, gerando aleatoriamente um monte de caixas na tela. Então, vamos em frente e ir até o topo aqui e dizer que HColorField é cores é o que vamos chamá-lo e vamos ver o que eu vou fazer aqui. Digamos, vamos nos livrar do StrokeWeight e digamos que não há Stroke. Então, nós vamos ser apenas para colorir campos. Agora, a cor de preenchimento que eu quero definir para preto, 000000 e você vai ver por que aqui muito em breve. Agora, vamos em frente e adicionar nossa cor. Então, eu vou ir em frente e dizer, “cores = new HColorField ();” fim da linha. Agora, o que eu vou fazer aqui é, com HColorField, você tem que especificar qual é a largura e a altura do campo. Neste caso, quero que a largura e a altura sejam do mesmo tamanho do esboço. Então, eu poderia digitar 600, 600 ou eu posso apenas fazer largura, altura. Tudo bem? Na verdade, vou amarrar uma cor aqui. Então, porque eu não quero que isso seja uma longa linha, o semi dois-pontos Eu só vou me dar um retorno difícil para deixá-lo para baixo algumas linhas e usar guia para vir até aqui. Então, vamos em frente e adicionar uma laranja. Então, eu vou ir em frente e dizer, AddPoint. No ponto, eu quero, então eu tenho minha tela e eu quero apontar para estar no centro exato da tela. Então, para chegar ao centro, vou em frente e dizer, “largura dividida por 2, altura dividida por 2.” Então, os primeiros argumentos são a posição do ponto. Você pode colocar 100, 150, você pode colocar em largura dividir por 2, altura dividida por 2. Agora, o terceiro argumento é a cor que você deseja usar. Então eu vou em frente e usar laranja. Então, eu vou dizer FF3300 e, em seguida, o quarto argumento é o raio do gradiente. Então, eu vou dizer 0.3. Agora, assim como Pixel Colorist, você pode especificar o que está ficando colorido. Então, eu vou ir em frente e dizer, fillOnly (), assim. Agora, novamente, também como Pixel Colorist, eu vou ir em frente e adicionar colors.ApplyColor para d. Ok. Então, novamente, que deve ser executado através de todos os ds gerados aleatoriamente que são hRect e devem mapear para ColorField. Então, novamente, é muito semelhante a um Colorista de Pixel porque é sobre cor estar em um determinado local no espaço. Assim, o FF3300 final está localizado em um eixo x e y de largura dividido por 2, altura dividida por 2. Em seguida, ele gradaria lentamente para fora. Agora, vamos testar o esboço e ver o que conseguimos. Tudo bem. Então, nós pegamos essa laranja bem no centro e, em seguida, ele grada lentamente para fora, mas gradientes para fora para preto. Ele avança para preto porque dissemos na linha 18 que a cor de preenchimento era 000000. Então, se por exemplo eu fosse mudar isso para branco; FFFFFF, vamos ver o que acontece. No centro da tela, nós pegávamos a laranja e, em seguida, ele iria lentamente transição para o branco. Então, essa é a coisa legal sobre ColorField é que você está especificando um campo de cor, mas se ele cai fora desse campo de cor, então ele está fazendo a transição para o que você disse que a cor de preenchimento de base era, neste caso na linha 18, Eu disse que a cor inteira era FFFFFF. Então, novamente, começa em laranja e depois muda lentamente para o branco. Agora, vou voltar para o preto aqui. Novamente, você pode fazer isso com qualquer cor. Eu poderia dizer um azul, eu poderia dizer 0000FF. Mais uma vez, se eu testar o meu movimento eu iria obter aquela laranja no meio e então ele iria lentamente transição para o azul. Pode me dar um aleluia? É coisa boa, isso é bom. Isso parece bom. Você está feliz? Bastante feliz. Incrível. Vamos voltar ao preto, 000000. De volta ao preto, é definitivamente uma referência de ACD. Legal, salvando, fechando, vamos fazer um passo dois opção arrastar. Etapa dois e reabrir a compilação PDE. Agora, no passo dois vamos adicionar dois pontos de cor, mas vamos colocar um à esquerda e outro à direita. Então, para o da esquerda aqui, eu só vou dizer que o eixo x é zero. Então, o x, x vai ser zero, mas a altura é ainda, altura dividida por dois, então ele vai estar no centro. Então eu vou copiar esta linha e eu vou colá-la. Neste eu vou apenas dizer que sua posição é largura. Então, agora é a largura da tela. Vamos mudar isso para um azul, 0095a8. Mas veja o que vou fazer, vou manter o raio no ponto três. Vou em frente e testar aqui. Novamente, assim como o exemplo no Illustrator, eu tenho laranja acontecendo à esquerda, eu tenho aquele azul azul-cerco acontecendo à direita, mas como as cores não interagem umas com as outras, esse centro ainda é Pegando o preto. Então, eu vou ir em frente e salvar e fechar isso. Eu vou salvar o passo dois para um passo três e eu vou ir em frente e abrir construir PDE. Então, neste exemplo, tudo o que vou fazer é mudar o raio. Então, digamos que eu diga 0,5 e 0,5. Agora, isso deve ser grande o suficiente onde ambas as cores realmente interagem umas com as outras. Então, se eu testar este esboço, você deve notar que você tem a laranja à esquerda, o azul azul-cerco à direita, e então novamente como essas cores começam a interagir umas com as outras, nós temos uma área cinza aqui no centro . Agora, vamos fazer uma última compilação aqui. Então, vou guardar e fechar isto. Deixe-me salvar, esta é uma compilação quatro e abrir construir PDE. Então, deixe-me fazer isso. Então, sabemos que isso é laranja. Oh, meu Deus. Josh, você é incrível. Isso é soletrar, laranja. Este é um cerco, e vamos em frente e adicionar mais duas cores. Então eu tenho um à esquerda, um à direita, vamos fazer um no topo e outro no fundo. Vamos fazer esta cor amarela no topo e vamos fazer esta cor verde na parte inferior. Agora, eu quero dizer com dividido por dois, e a altura é zero, e a cor é FFF00. Então, essa é a largura dividida por dois. Então, está no ponto central da largura, mas zero no Y. Então pegue o no fundo, vou dizer, largura dividida por dois e altura. Digamos que essa cor é 00FF00. Agora, olha para isto. Tenho 0,5, 0,5, 0,5, 0,5, 0,5, esses raios são grandes. Então, se eu testar o esboço aqui, você deve notar que tudo está se misturando. Então, talvez eu tenha muito amarelo acontecendo, muito verde acontecendo, e eu só quero abaixar isso. Então, eu posso mudar o raio. Posso dizer que é 0,3 para o amarelo, 0,3 para o verde. Então, realmente, minha laranja e azul-petróleo são os raios maiores e meu amarelo e verde são radius menores. Agora novamente, se eu testar este esboço aqui. Então, agora estou a ter uma noção disso. Vejo um raio menor para o verde, um raio menor para o amarelo. Legal. Eu quero mudar isso um pouco mais, eu quero dizer, preencher e traçar. Quero copiar o preenchimento e colá-lo. Em vez de dizer sem derrame, vou dizer que a cor do traço é preta. Vamos também adicionar um peso de traçado de dois, e vamos fazer o preenchimento com um Alpha de 100. Então, agora, quando eu salvar e testar este esboço, eu especifiquei esses pontos de cor. Estou colorindo tanto o traço quanto o preenchimento, mas só o preenchimento está realmente recebendo este Alpha. Então, técnica muito legal para colocar cor no espaço. Adoro usar isso com a conexão no Leap Motion. Você literalmente pode colocar pontos de cor no espaço. Então, se eu estiver usando o Leap Motion, por exemplo, e eu estou pintando com a mão, eu posso realmente mapear cores para certos quadrantes. Então, você pode ter visto alguns vídeos que eu postei onde eu venho para a direita e pinta azul, eu venho para a esquerda ele pinta laranja, eu venho para o topo, amarelo, o fundo, o verde. Então, eu realmente gosto de usar o campo de cores para mapear cores no espaço. Então, temos três ótimas aulas de cores. Temos cada piscina de cores, só estamos fazendo uma pequena recapitulação aqui. Temos cada piscina de cores onde estamos dizendo, “Ei, caixa de lápis de cor. Estes são os lápis de cor. Escolhe estes lápis de cor. Estes são os únicos lápis de cor que você pode usar.” Temos cor de pixel que é amostragem de informações de cores de uma fotografia, mas então também temos campo de cor especificando gradientes radiais no espaço, e novamente, temos esta bela mistura acontecendo. Então agora, neste ponto, terminamos com a seção cinco, trabalhando com cores. Agora vamos passar para as seções seis e sete que são layouts. Então, estamos chegando tão perto em termos de ter todo esse processo e estrutura no lugar. Estamos desenhando alguns recursos visuais e entregando-os ao SVG. Estamos trabalhando com cor, então vamos definir a cor para o lado. Então vamos passar para cada layout de grade e layout de forma, onde estamos realmente anexados. Veja, isso é apenas aleatório. Estamos apenas anexando aleatoriamente a arte na tela, mas por que não temos essa arte anexada com base em um padrão, ou com base em um layout específico, e ambos os layouts nos ajudarão a fazer isso. Então, quase temos todas as peças do quebra-cabeça no lugar. Vamos desenhar recursos visuais, trabalhar com um banco de cores que rasgamos e, em seguida, trabalhar com layouts para gerar algum padrão na tela. Então, eu estou ficando animado porque estamos chegando perto da magia negra. Chegando muito perto da magia negra. Vejo você na próxima seção. 30. Introdução: HGridLayout: Deixe-me dar-lhe um exemplo. Estou em Linz, Áustria, e vou jantar com uns amigos. Um dos caras com quem estou jantando, trabalho dele na foto era programar o cabelo do Sulley na “Monster's Incorporated “e estávamos falando de aleatoriedade. Aleatoriedade por conta própria, não é particularmente bonita. Na verdade, se você fosse aleatoriamente o cabelo de Sulley na Monster's Incorporated, o cabelo estaria indo em todas as direções e não haveria nenhum tipo de padrão ou elegância nisso. Dentro do framework hype, temos várias classes para realmente gerar layout, gerando layout aleatório. Ok? Então, para esta seção em particular, vamos cobrir cada layout de grade. Então, seu único propósito é alinhar as coisas em uma grade. Então, você pode estar pensando em si mesmo, “Por que estaríamos usando um layout de grade para nos ajudar com aleatoriedade, um layout de grade parece muito estruturado?”. Sim, é. Mas onde vamos começar a mutação é, como os objetos giraram aleatoriamente dentro da célula da grade? Como eles escalam aleatoriamente dentro dos limites da grade? Eu acho que o que você vai encontrar muito naquela conversa que eu tive com o senhor que programou o cabelo de Sulley na Incorporação Monster, nós estamos começando com uma estrutura base e estamos aleatorizando fora dessa estrutura base. Você vai descobrir que muitas dessas coisas, vai ser mais esteticamente agradável, porque eu acho que como humanos, nós não gostamos de aleatoriedade, nós não gostamos de caos, nós gostamos de coisas a serem ordenadas, nós gostamos de listas nós gostamos de ímãs em nossa geladeira e cada linha tem um item que precisamos comprar da mercearia. Nós gostamos de estrutura. Gostamos que as coisas sejam organizadas. Então, como podemos aleatorizar essa organização? 31. HDrawablePool + Hrect: Tudo bem. Bem-vindo à seção 6, que é layout H-Grid. Antes de começarmos a mergulhar nos layouts, há uma última coisa que quero compartilhar com vocês, que é esse código que vocês veem na tela. Neste momento, este código na tela está usando um loop de quatro. Quatro loop é executado um número definido de vezes e ele está anexando este ativo. Agora o problema com este código é que você só está anexando uma coisa. Na linha nove, diz que D é igual ao novo HRect e esse é o único ativo com que estamos pintando. Mas e se eu quiser fazer essa ideia de onde tenho vários ativos? Eu estou assumindo que nós vamos desenhar um monte de diferentes peças de arte e mapear um monte de diferentes peças de arte para esta composição. Neste momento, este código só suporta uma coisa, Hrect. Então, a fim de corrigir isso antes de entrar em layouts, vamos cobrir algo chamado HDRAWablePool e o que HDrawablePool faz é muito semelhante a um loop de quatro. Ele nos permite executar algo um determinado número de vezes, mas também nos permite especificar os ativos de arte que estão sendo usados. Então, em vez de apenas uma coisa, poderíamos realmente apontar para cinco SVGs diferentes ou um HRECT e um loop H. Então, podemos apontar para um monte de ativos diferentes em HDrawablePool. Agora HDrawablePool tem um monte de outras funcionalidades como se estivéssemos fazendo animação você pode fazer coisas como reciclagem de ativos que é realmente ótimo para a memória, você pode anexar algo à tela, liberar algo da tela. Então HDrawablePool tem um monte de funcionalidade, mas nós vamos apenas usá-lo muito basicamente e vamos apenas trabalhar através de um pequeno arquivo passo aqui e vamos ter uma noção disso. Então, vamos manter isso na tela apenas para que possamos ver as diferenças sutis aqui. Então, eu vou criar uma nova pasta chamada HDrawablePool, e eu estou indo para ir em frente e abrir esta pasta e, obviamente, dentro de HDrawablePool eu quero criar uma pasta chamada Passo 1, e dentro de lá eu vou criar uma pasta chamado Build, e dentro de Build Eu estou tendo uma compilação PDE e uma cópia de hype PDE. Agora, esta compilação PDE eu estou literalmente apenas copiando este que você vê na tela agora. Então, eu vou ir em frente e abrir isso e eu vou apenas apagar alguns dos bits aqui. Então, à esquerda temos usando um loop de quatro, à direita vamos usar HDrawablePool. Agora você vai ver que eu faço configuração anular, Eu definir o tamanho h.init este, Eu definir uma cor de fundo como um suave na linha dez sim eu sei que eu quero fazer H.DrawStage. Então, vamos em frente e começar a escrever algum código de pool. Então HDrawablePool e nós vamos apenas chamar esse pool, e então o que eu vou fazer é eu vou dizer pool é igual novo HDraablePool e aqui é onde você especifica quantos ativos você deseja pintar com. Então aqui no loop de quatro nós dissemos 100 assim na linha oito eu vou dizer HDrawablePool. Você vai sacar 100 ativos. Agora, um pouco disso vai ficar um pouco abstrato, mas deixe-me escrever o código e resolveremos isso. Então, vamos em frente e adicionar o bit que realmente especifica o trabalho artístico que está sendo usado e criando esse trabalho artístico e solicitando que o trabalho artístico seja pintado. Então, eu vou ir em frente e dizer pool.auto adicionar dois estágios. Agora aqui eu colocaria um ponto-e-vírgula, e então, é claro, eu posso encadear um monte de eventos. Mas nós vamos encadear tanto que eu vou ir em frente e fazer o que eu tenho feito em todos os arquivos que é trazer esse ponto-e-vírgula para baixo algumas linhas e vamos apenas começar a adicionar um monte de coisas que tipicamente iríamos encadear em na string. Mas isso vai ficar tão longo. Então a primeira coisa que eu quero fazer é apenas dizer.adicionar e. add é onde eu especificar o que eu vou estar pintando com. Então, digamos que, neste caso, novo Hrect. É R maiúsculo assim. Então essa é uma das coisas que eu gostaria de pintar com é um HRect. Agora estou indo para fora para outros pedaços de código aqui. Eu vou dizer, “On Create”, e então eu vou dizer, “solicite tudo”. Tudo bem. Agora, é o on create que eu vou liberar um monte de código aqui, então fique comigo, mas essas são as três coisas fundamentais com as quais estamos trabalhando quando estamos dizendo adicionar automaticamente ao palco. Um, com quem estamos pintando? Então eu disse, “.adicionar Hrect.” Pedir tudo basicamente diz me dar todos os 100 deles. Então, é esse pedido tudo o que basicamente vai disparar todas as 100 coisas de uma só vez, assim como este quatro loop faz. Quatro loop executa todas as 100 coisas de uma só vez. Mais tarde, se estivéssemos fazendo animação você não usaria pedido tudo o que você poderia fazer um temporizador e então você poderia realmente acelerar a criação dos ativos com algum tipo de temporizador. Mas agora só queremos jogar tudo fora na tela. Então, eu vou dizer pedir tudo. Agora, quando pedir todos os incêndios e ele vai disparar você sabe 100 vezes é isso em criar. Isso é o que acontece com cada coisa individual sendo desenhada na tela. Então pense que em criar vai executar um 100 vezes. Então, é no on create que eu quero especificar basicamente este código aqui da linha 17 para a linha 11 como o tipo de coisa que as propriedades que é definido em um Hrect. Agora eu vou dizer que isso em criar tem um pouco de estrutura de código para ele e deixe-me apenas liberar isso para fora. Então, o em criar aqui isso eu vou empurrar este paren perto para baixo alguns espaços, e deixe-me apenas trabalhar fora alguns do código que eu tenho que digitar aqui. Então, o on create é realmente vai ser um novo HCallback e , em seguida, o callback vai ter algumas informações dentro dele, e eu vou dizer algo como executar vazio público e objeto OBJ. E abrir o colchete próximo. Agora, neste vazio público, eu vou dizer algo como HDrawable. D é igual a HDrawable- tão perto Josh, tão perto OBJ. Então, é esta linha14 agora então o que acontece é que um 100 vezes este em criar está disparando e dentro deste em criar nós temos este callback. Este callback cria uma instância de nosso drawable chamado D, e nós estamos dizendo, “Ei, D é igual a este objeto desenhável que você especificou aqui na linha 10 que acontece de ser um novo HRCT.” Agora que temos este elenco como D podemos começar a usar o mesmo código que fizemos aqui. Então, eu posso realmente pegar isso um pouco de código aqui e novamente me dar um pouco de retornos rígidos e realmente colá-lo e eu diria d e então você está definindo o peso do curso assim por diante e vírgula para terminar a linha. Agora, é um pouco mais de código do que apenas usar um loop de quatro, mas há muitas outras melhorias que podemos fazer se estruturarmos tudo dessa maneira. Agora, vamos apenas fazer este esboço e ver o que acontece. Então, eu vou em frente e salvar isso. Eu vou seguir em frente e executar o esboço e ele deve parecer absolutamente idêntico ao exemplo de quatro loop. Então, você pode estar dizendo como bem Josh eu realmente quero usar uma piscina você eu não tenho certeza, a resposta é sim, e a razão é porque você pode começar a fazer coisas como esta onde this.add é onde você está especificando com o que está pintando. Então, por que eu não apenas copiar que colar outro para outro hRect, mas neste HRect eu faço algo como arredondamento e eu digo que o arredondamento é 10. Então agora este pool está desenhando um 100 itens, mas ele vai aleatoriamente escolher um desses dois HRCT ou um HRCT sem arredondamento ou um HRCT com arredondamento. Então, se eu testasse este esboço, se você olhar na tela aqui, você veria que, no caso disso, ele usou o HRCT sem os cantos arredondados e este com os cantos arredondados. Agora a outra razão pela qual eu realmente gosto de usar HDrawablePool é apenas como pool de cores. Podemos realmente esperar esses ativos que vão ser usados. Então, por exemplo, se eu quisesse ter mais HRECTs sem arredondamento. Eu poderia vir aqui e dizer vírgula 20 e isso significaria que existem 20 instâncias do HRect que não têm arredondamento. Então, se eu testasse este esboço aqui, você deve notar que os cantos quadrados devem ser a maioria, mas baixos e eis que aqui em baixo nós temos um que tem o canto arredondado. Então, eu prefiro usar isso porque nós podemos usar o mesmo tipo exato de espera de ativos neste ambiente. Agora, no próximo vídeo, eu vou dar um passo adiante e realmente apontar isso para SVG. Então vamos em frente e fechar este vídeo, vamos passar para o próximo e eu vou pegar exatamente a mesma funcionalidade HDrawablePool, mas vamos vinculá-lo aos nossos ativos SVG, ok? 32. HDrawablePool + HShape 1: Está realmente a juntar-se neste momento. Vamos trabalhar com HDrawablePool e anexar alguns ativos SVG nele. Então, aqui estão seis ativos SVG usando alguns triângulos agradáveis. Aqui está o número 2 aqui o número 3, aqui está o número 4, aqui está o número 5, e aqui está o número 6. Então, apenas elaborou algumas formas realmente básicas. Você deve notar que, esta arte é de 50 pixels por 50 pixels. Então, esses pequenos esboços em si são, esses pequenos ativos vetoriais são minúsculos. São 50 por 50. Agora, o que eu vou fazer é, aqui eu tenho eles na minha área de trabalho, aqui eu tenho esta pasta chamada HDrawablePool. Eu vou seguir em frente e dar o primeiro passo que acabamos de completar, e pegar isso e puxá-lo para um passo dois. Vou entrar no Build e vou criar uma nova pasta chamada Data. Dentro da pasta de dados, vou colocar esses ativos externos. Eu vou ir em frente e arrastar SVGs um a seis, e despejá-lo na pasta Data. Agora, vamos em frente e abrir, construir PDE e começar a fazer alguns ajustes aqui. A primeira é, aqui estamos trabalhando com HWrecked. Em vez disso, eu quero trabalhar com esses ativos SVG. Então, vamos em frente e apenas modificar isso para dizer, novo HShape e você pode especificar svg1.svg. Eu não quero fazer nenhum recurso esperando ainda, então essa linha deve ser exatamente assim. Agora, há seis deles, então vamos em frente e copiar e dois, três, quatro, cinco, seis e modificar isso para dois, três, quatro, cinco, seis. Então, agora cada pool desenhável foi especificado seis ativos SVG externos para pintar com. Incrível. Vou fazer mais alguns ajustes aqui. Eu vou mudar HDrawable para H forma uma forma de H Obj. Agora, eu não vou mudar nada. Eu vou manter tudo como era com uma faixa, onde eu vou manter o peso do traçado um, o traço e cor laranja, o preenchimento um cinza escuro, o tamanho, aleatório 25 a 125, não muito certo como que vai funcionar, girar aleatório 360, localização largura aleatória, altura aleatória. Agora, se eu executar este esboço, você deve notar agora que HDrawablePool está pintando com esses ativos SVG. Então, agora o que você desenhar, em qualquer ferramenta baseada em vetor que você quiser, você pode começar a produzir esses arquivos SVG e adicioná-los ao pool HDrawable, e assim como pool de cores, cada um desses ativos SVG tem um em Seis chances de ser pintado. Agora, você vai notar que nenhum dos estilos entrou vigor e a razão para isso é porque nós não adicionamos esta linha de código, onde dissemos, “Habilitar estilo e transformá-lo em falso”. Então, substitua o estilo no Illustrator e aplique esse estilo abaixo. Curso de laranja e preenchimento de cinza escuro. Vá em frente e execute este arquivo e agora devemos estar substituindo o estilo dentro do Illustrator e usando o que é especificado aqui. Agora, se for esse o caso, quero acrescentar mais algumas coisas. Eu descobri que usando coisas como StrokeJoin of Round e usando StrokeCAP of Round, tendem a me dar melhores resultados para o que eu estou vendo na tela e posteriormente, quando eu realmente saída isso de volta para um vetor baseado no final desta classe. Então, sempre que estou trabalhando com SVG, eu normalmente defino meu Join e Caps para arredondar. Agora, vamos em frente e adicionar um pouco dessa coloração aleatória, por exemplo, certo? Então, temos HDDrawablePool trabalhando, temos escolher aleatoriamente alguns dos nossos seis ativos SVG, vamos em frente e adicionar algumas cores. Na parte superior, cores HColorPool. Vou copiar as cores que fizemos antes, que eram estas brancas, estes cinza claro, este cinza escuro, dois azuis e duas laranjas. Eu quero mudar a cor do traçado para ser preto 000000, e eu não quero especificar um preenchimento porque eu vou ter um pool de cores fazer isso para mim. Então, eu posso vir aqui, e eu posso dizer D.RandomColors, e então, eu posso dizer hey cores.fill apenas assim. Agora, neste ponto, eu deveria ser capaz de executar o esboço, erro de sintaxe, ponto e vírgula faltando. Sim, isso é absolutamente verdade, linha 34, fim de linha boom. Tenta outra vez Josh. Corra. Super. Então, agora você pode ver. Oh, meu Deus. Está totalmente se juntando, certo? HdrawablePool é a cola. É aquela coisa que vai amarrar todas essas peças. Então, linhas 13 a 18 falando com um monte de ativos externos. Linha nove especificando algumas cores, linha 34 definindo essas cores, preencher apenas. Mas, o que eu amo sobre HDrawablePool é que você pode fazer ativos esperando assim como fizemos em HColorPool. Então, por exemplo, este ativo aqui é SVG6. Eu adoro isso. Então, podemos vir aqui e dizer, hey SVG6, me dê 20 desses. Agora, quando eu realmente executar o esboço, você vai ter mais SVG6 anexado à tela do que os outros cinco, certo? Então, esta é a chave porque, muitas vezes eu vou desenhar um monte de coisas e uma é o ponto focal. Como se um só de composição funcionasse muito, muito bem. Eu vou fazer esse tipo de espera, para que eu possa especificar que esse recurso será pintado mais do que os outros. Os outros apoiam, mas talvez eu não queira que eles sejam o foco. Então, é essa linha 18, onde eu posso realmente especificar quantas instâncias desse SVG é adicionado, me permite controlar a quantidade de coisas que estamos vendo na tela. Então, incrível. Vou fechar isto. Nós vamos salvar isso. No próximo vídeo, eu vou fazer um passo três, e eu vou mostrar alguns novos ativos SVG que até tornam essa composição mais complexa. Assim que terminarmos isso, vamos começar a organizar isso. Porque, agora estamos apenas aleatorizando a largura, aleatorizando a altura, e isso é apenas jogar coisas na tela. Como podemos usar uma classe como layout de grade para realmente organizar isso em uma estrutura? Ótima. Vejo-te no próximo vídeo. 33. HDrawablePool + HShape 2: Muito bem, ornamento nacional da Mongólia. Nós digitalizamos esta página, incrível, um monte de coisas realmente legais lá. Bem, você provavelmente assistiu aquele lapso de tempo onde eu desenhei um deles bem na verdade, eu desenhei seis deles e aqui estão eles, então aqui e eu acabei de nomeá-los como mongo1.svg, aqui está mongo2.svg, mongo3, mongo4, mongo5 e mongo6. Você deve tomar nota de que toda essa arte é de 300 pixels por 300 pixels, certo? Agora, esta obra de arte é obviamente muito mais detalhada do que os primeiros SVGs que acabamos de usar no último vídeo. Agora, eu vou ir em frente e fechá-los fora do Illustrator, aqui estão eles na minha área de trabalho, eu vou em frente e salvar nosso passo três, entrar em construção, entrar em dados e eu vou remover esses svg1 a seis e eu vou para ir em frente e despejar no meu mongo1 a seis. Então eu vou abrir meu build_pde e eu posso mudar isso para mongo1 e eu vou fazer os ajustes aqui no resto deles. Então temos mongo2, três, quatro, cinco, seis. No caso disso, vou tirar a ponderação. Então, novamente, todos eles têm uma chance em seis de serem sorteados. Agora, sempre que uso algo super detalhado, fico um pouco nervoso com a linha 11 que diz, “Ei, desenhe 100 coisas.” Eu poderia falhar no processamento, eu poderia obter um erro que diz que ele fica sem memória porque isso é um monte de coisas. Então, vamos tentar mudar isso para dizer 10 ativos apenas para começar. Agora, a outra coisa que eu quero mudar é aqui no tamanho, lembre-se que a arte é 300 pixels por 300 pixels dentro do Ilustrator. Então, talvez eu queira dizer que o tamanho aleatório pode ser algo como 50 por 50 a 300. Então, eu sei que no máximo, é seu tamanho original em 300 por 300 e no mínimo seria 50 por 50, que pode funcionar, que pode não funcionar. Novamente, vamos testar o esboço para ver. Eu acho que tudo está bem com o universo, vamos em frente e executar este esboço e ver o que acontece. Então, neste ponto eu posso começar a brincar com o tamanho. Então, neste caso talvez 50 seja muito pequeno, olhe para este carinha bem aqui você mal pode vê-lo, então eu posso começar a fazer coisas agora como, bem, 150 seria metade do seu tamanho original e talvez eu queira ir nu, talvez eu queira ir 400 ou talvez 150 Eu acho que é muito pequeno, talvez 200, 400, modo que 300 é o meio da estrada, nós estamos indo 100 pixels a menos e 100 pixels a mais. Se eu fosse executar o esboço novamente, eu poderia ver como as coisas estão se misturando na tela. Então, legal ele correu com 10, eu provavelmente posso até isso, então vamos vir aqui e dizer que o pool tem 50 ativos svg, vá em frente e executá-lo e devemos ver a tela misturando muito mais do que antes. Tão legal, neste ponto, eu realmente sinto que eu estou feito com HDrawablePool, nós estamos começando a colar essas idéias juntos usando HDrawablePool para especificar quantos ativos nós desenhamos com, ponto adicionar com quem estamos desenhando, eles têm algum peso ou precedente sobre alguns dos outros ativos? Temos cada piscina de cores aqui, então as coisas estão ficando coloridas aleatoriamente. É agora neste ponto que eu quero me afastar de um pouco dessa apenas aleatoriedade na tela e começar a estruturá-lo um pouco mais. Então, no próximo vídeo, vamos implementar cada layout de grade em RhDrawablePool e começar a organizar alguns dos ativos na tela e ver quais variações podemos criar. Próximo vídeo, HGridLayout. Vejo você lá. 34. HGridLayout: Então, toda esta seção nos traz a este ponto, puxando HGridLayout. Então, novamente, todas essas peças do quebra-cabeça estão se encaixando. Então, eu vou criar uma nova pasta na minha área de trabalho chamada HGridLayout e eu vou para o HdrawablePool, passo 2 exemplo. O exemplo da etapa 2 é usar os ativos SVG de 50 pixels por 50 pixels que são de natureza triangular. Então, deixe-me copiar esta etapa 2 para HGridLayout e deixe-me renomear isso como passo 1 e eu vou abrir build.pde e novamente, eu tenho meus seis ativos SVG dentro da pasta de dados. Agora, aqui está o código. Aqui, vou fazer alguns ajustes aqui. Uma é, eu vou tirar o 20 de SVG seis. Então, eliminando isso, cada um dos ativos tem uma chance em seis de ser sorteado. Agora, eu estou atrás do.add, eu vou me dar alguns retornos difíceis e eu vou simplesmente dizer que DrawablePool tem um layout anexado a ele e o tipo de layout que ele anexou a ele é um novo HGridLayout. Agora, há algumas coisas que precisamos especificar qual é; onde você quer que essa grade comece? Então, eu vou ir em frente e dizer, StartX é zero e eu vou dizer que StartY é zero. Agora, o próximo argumento é porque é uma grade e porque uma grade é composta de células, linhas e colunas, qual é o espaçamento entre cada uma dessas células? Então, eu vou ir em frente e dizer, espaçamento e eu vou dizer, 50,50 porque nossa arte é de 50 pixels por 50 pixels, modo que deve construir uma grade perfeita onde cada célula tem 50 pixels de distância de outra e mesma movendo-se para a próxima linha. Agora, porque é uma grade, há linhas, há colunas, mas você realmente só precisa dizer quais são as colunas e, neste caso, eu vou dizer 11. Agora, a única razão pela qual você precisa especificar colunas é porque HDrawablePool tem um número de ativos que estão sendo desenhados. Então, 100 divididos por 11 dirão quantas linhas a grade terá. Então, não há necessidade de especificar linhas, só precisamos especificar quantas colunas queremos. Tudo bem? Agora, há algumas coisas que eu preciso mudar abaixo em D. Por exemplo, eu não quero especificar um tamanho porque a arte é 50 por 50, vamos apenas anexá-lo 50 por 50. Então, vou em frente e deletar essa linha. Estou construindo uma grade aqui, eu não quero ver rotação ainda e a última coisa é, é esta última linha de.location. Se você remover.location que foi a linha que aleatorizou todos os ativos na tela, se você remover que, em seguida, o layout terá precedência em HDrawablePool. Então, agora, sempre que estes forem criados, este layout e todas as instruções para a estrutura dessa grade serão empurrados para a criação de D, que é o nosso HShape. Agora, vamos ver o que acontece. Então, eu vou em frente e executar este esboço e você deve notar algumas coisas. Uma é, nossa grade termina bem aqui. Agora, a razão pela qual a grade termina ali é porque nós apenas dissemos que o HDrawablePool era 100. Então, se eu realmente viesse aqui e dissesse, bem, o que é 11 vezes 11? Isso seria 121. Então, se eu agora executar meu esboço, você deve notar que é uma grade perfeita, 11 linhas e 11 colunas. Então, 11 vezes 11, o pool extraível deve ser 121 ativos, a fim de fazer uma grade perfeita. Agora, porque na linha 38 dissemos, H.center que afeta StartX, StartY. Então, como o trabalho artístico é de 50 pixels por 50 pixels, se a âncora em H.center for o centro, isso significa que o ponto central está em 25,25. Então, portanto, se nós startX, StartY em 0,0 então isso significaria que a obra de arte é 25,25 negativo no X e negativo no Y, então nós tê-lo pendurado deste lado aqui. Então, na verdade, o que eu vou fazer é, por enquanto, eu vou apenas comentar o H.center. Agora, se eu comentar H.center e executar meu esboço, agora a grade deve começar em 0,0. Agora, porque isso é 50 por 50, nós temos um pouco de espaço extra onde eu poderia colocar outra linha e outro conjunto de colunas porque meu esboço aqui é 600 por 600, mas em vez disso, eu vou mudar StartX, Starty para ser 25,25. Agora, fazendo 25,25, apenas significa que esta é a posição inicial do eixo X e do eixo Y. Então, agora eu tenho essa grade que está flutuando no espaço aqui. Agora, porque minha arte é 50 por 50, vamos fazer alguns testes aqui. Vamos fingir por um momento que StartX era zero e StartY era zero e você poderia dizer que o espaçamento era 55 por 55 e isso significaria que há um buffer de cinco pixels entre cada uma das células, então eu posso espaçá-las. Ou você poderia dizer que o espaçamento é 50 no X e 60 no Y. Então, isso significaria que eles estão perfeitamente bem em cada linha, mas então há um espaçamento de 10 pixels entre cada linha. Então, espaçamento e StartX e StartY é onde eu posso começar a mudar alguns desses argumentos para mudar a estrutura da minha grade. Digamos isso por exemplo, digamos que eu disse 25 para o X e 25 para o Y. Isso significaria que cada célula está sobrepondo 25 pixels no anterior. Então, talvez essa sobreposição possa ser interessante, quem sabe. Então, vamos levá-lo de volta para onde eu quero que seja que é StartX 25 e StarTY 25 e vamos fazer o espaçamento 50 e o espaçamento 50 e vamos em frente e executar nosso filme. Agora, quando rodarmos o nosso filme, outra vez, temos esta bela grelha a acontecer. Agora, apenas a partir desta estrutura base, eu posso começar a salvar os passos de várias maneiras diferentes e apenas modificar para ver o que acontece. Então, veja isso. Vamos em frente e salvar e fechar isso e eu vou dar o passo 1 e salvá-lo como um passo 2. Se eu abrir o build.pde, eu poderia dizer, “Ei, por um momento, eu não quero ver SVG um a cinco.” Então, deixe-me apenas comentar e eu só estou pintando com SVG seis. Eu vou em frente e executar meu filme e novamente ele deve construir minha grade de 121 ativos, mas eu estou vendo perfeitamente SVG seis todo o caminho através. Ok, tudo bem. Mas, o que aconteceria se eu girasse aleatoriamente? Cada uma dessas células individuais em 90 graus. Vamos ver o que acontece. Eu vou fazer esse ditado. Rodar, certo? Então, na rotação, eu vou dizer inteiros, então isso é um número inteiro, e então eu vou dizer aleatório (4) vezes 90, certo? Então aleatório (4) vai me dar zero, um, dois, três, certo? Zero vezes 90 é zero, 90, 180, 270. Então, eu recebo todas as quatro rotações desta obra de arte. Agora, quando eles girarem aleatoriamente, deixe-me ir em frente e executar este esboço e ver que tipo de resultados obtemos. Agora, olha o que aconteceu. Tudo bem. A razão pela qual isso aconteceu é porque a linha 38, comentamos out.Anchorat (H.CENTER), o que significa que- Eu não tenho um pedaço de papel. Ok, isso significa que nós estamos girando o papel daqui nós somos, de zero, zero e então nós estamos girando 90 graus e, em seguida, girando 90 graus, certo? Então, neste caso, talvez isso.Anchorat (H.CENTER) é exatamente o que estamos procurando mas vamos comentar a rotação e colocar o.Anchorat (H.CENTER) de volta. Agora, quando eu rodo este esboço, porque eu o centralizei, eu estraguei meu início X e começo Y, porque eu o compensei novamente por 25 pixels no X e 25 pixels no Y dizendo.Anchorat (H.CENTER). Então, a fim de corrigir isso, o início X deve ser 50 e o início Y deve ser 50. Se eu fizer isso, ele deve colocar a grade agradável e centrada grade de volta no meio da tela com um pouco de buffer em torno do exterior. Legal. Agora, essa rotação vai parecer muito mais interessante porque agora está girando em torno desse ponto médio e agora, quando eu realmente executar meu esboço, você começa a ver alguns padrões realmente bonitos começando a emergir dessa arte, certo? Muito legal. Então, novamente, eu posso começar a mudar isso de tantas maneiras diferentes. Ok, use este SVG com estes números, use este SVG com estes números e ele apenas começa a mutar, mutar, mutar. Então, vamos fazer outra coisa. Vou ir em frente e fechar isso e vou salvar isso, e vou tirar um passo três aqui. No passo três, vamos tentar aleatorizar o tamanho, certo? Então, a obra de arte é sempre 50 por 50, então e se eu fosse aleatorizar e fazer o tamanho da obra de arte em incrementos de 50. Agora, isso seria algo parecido com isso, onde você diria. Tamanho, ok. Agora, eu quero que ele comece em 50 pixels mais algo, ok, e neste algo é onde eu coloco inteiro, digamos aleatório (2) vezes 50. Legal. Então, aleatório (2) vai retornar a zero ou a um. Zero vezes 50 é zero e, mas você não pode ter um tamanho de zero, porque você não veria nada nele. Então é por isso que eu faço isso 50 mais no final. Então, aleatório zero vezes 50 é zero, mais 50 é 50. Legal. Então, sabemos que no menor nível, vai ser 50 por 50. Aleatório uma vez 50 é 50. Cinquenta mais 50 é 100. Então agora esta linha 40. Trabalhe comigo aqui, me ame, me abrace. Esta linha 40 aqui vai escolher um aleatório de 50 por 50 ou aleatório 100 por 100. Legal. Agora, quando eu rodar meu filme. Filme. Pare de dizer filme. Quando eu faço este esboço, agora ele começa a se transformar em algo muito mais interessante porque eu estou realmente aleatorizando o tamanho do ativo de 50 por 50 ou 100 por 100, e quando eles se sobrepõem, tudo isso, Confira isso, isso acaba sendo 100 por 100, mas porque eu matematicamente criei essas linhas usando uma grade dentro do Illustrator, mesmo que eu esteja aumentando vezes dois, as linhas realmente combinarão, o que é incrível. Agora, se eu dissesse que eu queria que fosse aleatório (4), isso significaria que eu estou recebendo quatro tamanhos, 50 por 50, 100 por 100, 150 por 150, e 200 por 200. Novamente, se eu viesse aqui e descomentar para que eu estivesse usando todos os seis ativos, isso significaria que essa obra de arte vai ficar ainda mais estranha. Ok? Assim. Neste momento, tudo está girando em torno desse ponto central, e então lembre-se que se eu comentar que AncoRat, então essa rotação é uma varredura muito diferente e se for uma varredura muito diferente, então talvez isso vá funcionar para mim melhor na tela. Então, esse tipo de idéias é algo com que eu tenho jogado bastante, e eu realmente quero mostrar a vocês um URL aqui onde eu tenho a minha página do Pinterest. Na minha página do Pinterest, eu meio que adicionei todo o meu arquivo de design, e há um pequeno projeto aqui chamado Social Grid. A Rede Social sou eu pegando essa ideia, esse código que você tem aqui, certo? Então, deixe-me encontrá-lo, bingo! É SVG 6 com rotação aleatória de 90 graus. Então, eu peguei esse motor e mutei todos os parâmetros para tentar ver quantos tipos diferentes de arranjos de grade eu poderia criar, certo? Então, alguns eram muito básicos e, em seguida, alguns eu iria aleatorizar a rotação, a escala e eu começaria a obter esses padrões realmente, realmente fascinantes. O que é bom sobre a série é que, todas essas coisas agora são apenas preto e branco, não há nenhuma cor em tudo adicionado a esses documentos e apenas adicionando cor, nós apenas adicionar uma outra camada inteira para a complexidade desses padrões. Vi que alguns de vocês são designers têxteis, certo? Então, isso deve ser bananas. Isso significa que você pode trabalhar no Illustrator, trabalhar esses tipos de pequenas texturas e, em seguida, usar HGridLayout para construir essa estrutura, mas aleatoriamente dentro da estrutura. Novamente, no caso deste arquivo em particular, a única coisa que estou aleatorizando é sua rotação aleatória e seu tamanho aleatório, mas eu estou permitindo que o layout realmente estruturar a arte na tela em um sistema muito rígido, um sistema de grade. Novamente, se vocês aproveitaram a oportunidade de olhar para o meu site, espero alguns de vocês tenham visto as coisas que eu tenho feito com Libs Elliot em Toronto, Canadá, onde, novamente, ela está pegando esse arquivo que vocês têm agora e aleatoriamente gerando essas grades e, em seguida, usando essa informação grade para realmente fazer colchas e ela está costurando essas colchas à mão onde é apenas, mente explodida, o que é incrível. Tudo bem. Então, cada layout da grade. Realmente ótimo exemplo aqui, então espero que você faça o download do arquivo zip, você alterará alguns desses passos e descobrirá que tipo de padrões você pode criar alterando alguns desses números. Além disso, você pode começar a criar seus próprios ativos visuais dentro do Illustrator e obter uma variedade infinita de coisas diferentes acontecendo. Por exemplo, aqui está um conjunto perfeito de coisas que está localizado sob coisas que eu fiz para- oh, aqui estava uma capa de livro que eu fiz, Aim High, Keep Moving. Novamente, isso é usar o mesmo sistema exato onde eu estou usando layout de grade e apenas um novo conjunto diferente de geometria e mapeando isso para uma grade que é super legal. Então houve outro que eu fiz. Deixe-me tentar encontrá-lo. Deixe-me ir à minha prancha e quero procurar a Orbit. Lá vamos nós. O que acontece quando você mistura em algumas formas circulares? Ok. Novamente, isso está usando HGridLayout. Então, estou super animado para ver que tipo de ativos você desenha dentro do Illustrator e o que acontece quando você começa a mapeá-los para chegar a esse tipo de arranjos. Agora, esta seção está concluída. Vamos passar para a seção sete que é HShapeLayout e você vai perdê-lo porque HShapeLayout é incrível. Então, nos vemos na próxima seção. 35. Introdução: HShapeLayout: Vou mostrar-vos uma tonelada de exemplos usando esta próxima estética. Este é layout em forma de H e eu amo camada em forma de H. Digamos que eu desenhe um monte de flores, certo? Então, eu desenhei um monte de flores independentes e então o que eu posso fazer é realmente eu poderia fazer outro recurso que é a minha mão. Então, o que o layout da forma faz é olhar para o desenho e se ele atinge um pixel transparente, ele tenta novamente. Então, digamos que eu desenhe seis flores e digamos que escrevemos um programa que diz, eu quero desenhar 10.000 flores. O que vai acontecer é que ele vai começar a escolher aleatoriamente até acertar minha mão. Então, minha mão inteira será feita de todas aquelas pequenas flores independentes que fizemos, e eu posso realmente começar a definir essas formas aleatórias na minha tela e toda vez que o programa é executado, ele vai dizer, “Oh, eu tenho essas formas. Eu tenho esses bancos de ativos”. Há instruções sobre quais tipos de bancos de ativos se apegam a que tipo de formulários. Acredite ou não, toda esta impressão é gerada a partir de um guerreiro. Você pode ver que ele tem um pequeno cinto aqui e se você olhar para o padrão que é gerado ao longo deste cinto, isso é realmente bem aqui. Você pode ver que a forma do cinto acontece bem nesta coisa de cima aqui. Aqui, é aleatorizado de novo. Você pode ver o cinto. O que te resta não é mais o material original. Já não é este guerreiro. É essa amálgama de abstração que, para mim, é aqui que estou encontrando beleza em pegar algo familiar e remixar de uma forma em que se torne algo completamente diferente. 36. HShapeLayout: Certo, Seção Sete. Tão incrível que mal consigo me conter. Adoro este próximo projecto. Eis o que vou fazer. Acabamos de cobrir cada layout da grade, Seção Seis. Se eu for para HGridLayout, e eu for para a etapa um , e eu vou para build_pde, e eu executar este filme, ele constrói uma grade. Então, vamos trabalhar fora deste arquivo. Então, eu vou criar uma nova pasta chamada HShapeLayout, e dentro de HShapeLayout, eu vou copiar este passo um. Então, HShapeLayout, eu estou copiando o passo um, e vamos em frente e abrir este build_pde aqui. Então, algumas coisas boas. Agora, o que o HShapelayout faz? É bananas. O que vou fazer é olhar para o meu filme, o meu filme é 600 por 600. Então, eu vou balançar sobre o Photoshop e eu vou criar um novo documento que é 600 por 600. Aí está, e eu vou pegar a ferramenta Type e eu escolhi Georgia Bold em 400 pontos, e eu vou escrever, “Oi.” Vou selecionar isso e centralizá-lo assim. Agora, o que eu vou fazer é, você pode ver que eu tenho duas camadas aqui dentro do Photoshop, eu vou esconder a camada de fundo. Então, é transparente, e eu tenho esse tipo que está saindo. O que eu vou fazer é Salvar para Web, e em Salvar para Web, eu vou chegar ao PNG-24. Agora, a coisa boa sobre PNG-24 é que ele suporta transparência, e assim você pode ver que eu tenho meu pequeno quadro de verificação em segundo plano porque PNG pode lidar com transparência. Vou salvar isso na minha área de trabalho como shapeMap.png. Legal? Legal. Feito. Agora, eu vou minimizar isso porque nós vamos voltar para esta ciência. Agora, estou dentro da pasta chamada HShapeLayout. Estou dentro do primeiro passo. Estou dentro da construção, e há uma pasta chamada Data e é aí que colocamos todos os nossos ativos externos. Então, eu vou copiar ou eu vou mover shapeMap.png para a pasta de dados. Agora, isso é um negócio maléfico. Eu vou editar este build_pde. A primeira coisa é que eu não quero desenhar com todas essas formas. Na verdade, eu só quero desenhar com svg5, e svg5 acontece ser um triângulo. Então, há o SGV5, um belo triângulo. Então, vamos desenhar com esse triângulo para começar. Vou modificar algumas coisas aqui dentro. Não vamos fazer o layout ainda, só um segundo. Vamos ativar o Estilo (false). Na verdade, não quero ter um derrame. Não quero ter um derrame, sou muito jovem. Sou muito jovem. NoStroke, minha próxima aula, como fazer humor nerd? Âncora no H.CENTER, eu gosto disso, e eu vou colocar algumas outras coisas, mas eu vou esperar. Agora, o que Shapelayout faz? Bem, o que você pode fazer é, você pode dizer que layout é igual ao novo HShapeLayout. Agora, você tem que passar um argumento de.target. HShapeLayout quer saber, o que estou usando? O que estou usando como forma? Estou sendo vago por razão. Agora, eu quero definir qual é a forma e assim, eu digo, .target (). Eu vou ir em frente e colocar esse parêntese próximo em sua própria linha e isso é porque eu estou indo para tabulação aqui, e dizer que o alvo forma é um novo HiMage e dentro de novo HiMage eu vou dizer o nome do nosso PNG, então ShapeMap. PNG Agora, vamos em frente e mudar aqui no topo, HDrawablePool para 100. Estou muito entusiasmada com isto. O que vai acontecer é que o HShapeLayout ultrapassa o alvo, e o alvo é a forma que os ativos devem manter. Então, se eu fosse salvar e executar este esboço, o que acontece no caso do layout da forma é, isso é estranho, o que ele está fazendo? Bem, ele está olhando para a sua imagem, está escolhendo aleatoriamente uma posição, e se esse pixel é transparente, ele escolhe novamente. Na verdade, ele continua escolhendo um espaço na imagem até atingir pixels não transparentes. Se atingir pixels não transparentes, o trabalho artístico realmente adere a ele. Então, espero que em algum lugar, as mentes estejam explodindo. Porque isso significa que dentro do Photoshop agora, eu posso realmente usar gesto, forma e tipo, e eu posso desenhar formas. Eu posso desenhar o que eu quiser, e a arte vai ficar com pixels não transparentes. Então, vaca sagrada, vamos fazer algumas edições aqui. Pool é igual a HDrawablePool (2000), Eu quero anexar 2.000 peças de arte. Agora, nossa arte é de 50 pixels por 50 pixels, então eu quero reduzi-lo um pouco para baixo. Então, eu quero que ele seja menor para que você possa realmente vê-lo grudar no tipo. Então, eu vou dizer.size e dentro do.size, vamos em frente e colocar inteiro e aleatório. Digamos que, no mínimo, são 10 pixels por 10 pixels, e um máximo de 30 pixels por 30 pixels. Vamos também adicionar uma rotação aleatória. Então, eu vou ir em frente e colocar em uma rotação aqui, e eu vou dizer (int) aleatório (360). Você está pronto? Aqui vamos nós. Vá em frente e execute o esboço e agora 2.000 de svg5 estão aderindo a qualquer forma que você fizer dentro do Photoshop. Então, espero que agora, você esteja começando a entender as possibilidades de como eu faço um monte de minha impressão generativa. Você sabe muitas vezes, eu vou dizer, “Bem, ok, eu quero esse tipo de formulário aqui e eu quero aleatoriamente gerar um monte de coisas apenas nesta área”, e layout de forma vai colar meus ativos aleatórios nessa área. Então, veja isso. Vamos salvar isso, vamos fechá-lo, vamos em frente e salvar um passo dois. Dentro do passo dois, vou abrir o prédio. Vou voltar para o Photoshop aqui. Posso ir em frente e fechar isto. Na verdade, no passo dois, construir , dados, vou reabrir shapeMap.png. Então, se eu tiver isto aberto, basta verificar isto, eu posso apagar isto. Vamos tentar algumas coisas, vamos colocar um quadrado lá, vamos colocar um retângulo aqui, vamos mudar para a ferramenta de elipse e vamos desenhar um círculo. Então, estou apenas definindo algumas formas. Agora, se eu fosse, novamente, salvar isso como um PNG, e desta vez vamos colocá-lo dentro de ShapeLayout, passo dois, construir e dados. Então eu estou sobrescrevendo shapeMap.png, substituir, substituir. Alterne para sublinha o texto dois, salve e execute o esboço. Com certeza, ele gruda nesses ativos. Novamente, você poderia até vir aqui com um pincel se você quisesse, e você poderia fazer esse tipo de negócio. Salve como PNG, sobrescrever, shapeMap.png, alternar de volta para sublinha texto dois, vá em frente e crie seu esboço, e novamente, agora você verá que ele está realmente mapeando para essa forma. Então, ShapeMap é simplesmente brilhante porque se você começar a olhar para algumas das coisas que eu tenho feito, então vamos para a minha página do Pinterest, e vamos olhar para algo. Vamos dar uma olhada nesse cara aqui. Vamos fazer este roxo aqui. Então, se você olhar para isso, olhe para esses pequenos círculos brancos. Reparaste que nenhum dos círculos brancos está aqui em baixo? Por que é isso? Bem, isso é porque eu defini um ShapeMap bem nesta área, assim como esta, e disse, “Oh, ok escuta. Eu quero apenas círculos para anexar a esta área.” Então, quando eu rodar o filme, eu teria círculos aleatoriamente dentro dessas posições. Então, agora, posso começar a definir formas no meu código, e dizer, “Ok, eu quero coisas mapeadas para essas formas.” Novamente, ainda estou capacitando a grandeza do aleatório, mas é controlado. É um cenário controlado que estou definindo o que vai para onde e tudo isso. Realmente, eu estou esperando que você realmente vai gostar desta aula, porque HshapeLayout é divertido. Então, neste ponto, você pode pegar esse código que eu compactei e anexei a essa lição e você pode usar novamente o Photoshop para definir qualquer forma. A coisa a lembrar é que HShapeLayout está procurando pixels não transparentes. Então, se um pixel é transparente, ele vai continuar escolhendo novamente até encontrar um pixel não transparente. Se ele atingir um pixel não transparente, o trabalho artístico irá realmente aderir a essa forma. Então, super excitante. Ótima. Vamos passar para a Seção Oito e falar sobre como vamos pegar os arquivos HGridLayout, os arquivos HShapeLayout, e como vamos exportá-los para alguns ativos com os quais podemos trabalhar. São imagens baseadas em pixels? São imagens baseadas em vetores? Então, vamos passar para isso na última seção, e então vamos falar sobre alguns pensamentos finais. Muito bem, vemo-nos na próxima secção. 37. Introdução: arquivos de saída: Então, você está agora na fase final deste processo. Então, neste ponto, o que eu quero fazer é tirar esse conteúdo da tela e voltar para algum formato com o qual eu possa trabalhar. Vamos dar uma olhada nesta composição, por exemplo. Novamente, gerado aleatoriamente, mas enviado de volta para um sistema baseado em vetores. Eu queria que esta área fosse muito, muito calma. Então, todos esses pequenos círculos que foram gerados aleatoriamente nesta seção, eu fui capaz de excluir. Agora, olhe para o número oito, se você olhar diretamente para baixo, há um círculo que está perfeitamente alinhado no centro com o oito. Isso aconteceu aleatoriamente? Não, Josh colocou isso aí. Esse círculo provavelmente foi gerado aqui e eu mudei deliberadamente para baixo do oito. Então, enquanto 90 por cento disso é gerado aleatoriamente, 10% sou eu indo e realmente limpando coisas, movendo coisas ao redor. Minha esperança é que você esteja confortável o suficiente com o ilustrador, que você gostaria de voltar para este ambiente baseado em vetores, que você possa fazer esse tipo de edição obsessiva compulsiva. Quero dizer TOC. Estamos namorando. Estavam namorando. 38. letsRender / ruim: É isto. Seção oito, mostre os arquivos. Então, uau, nós temos tudo no lugar. Desenhamos nossos recursos visuais. Aprendemos como pintá-los na tela. Aprendemos como roubar cores de fotografias e colocar isso em nosso trabalho. Aprendemos como anexar esses ativos externos em um layout de grade. Aprendemos como anexar esses ativos em uma forma. Agora, como vamos tirá-lo do processamento? Tenho que pensar em quatro vídeos que ainda tenho para fazer. Vamos começar com o primeiro. Então, eu vou fazer uma nova pasta chamada LetsRender. Tudo bem. Dentro do LetsRender, eu vou para HGridLayout, e eu vou para o passo 1, e eu vou abrir build.pde, e eu vou apenas mostrar este arquivo. Este é o que está usando HGridLayout. Agora, este código que vamos escrever vai funcionar em tudo. Então, legal, eu vejo essa grade na tela, eu quero, eu quero pegá-la. Agora, o que eu vou fazer é eu vou copiar o passo 1 fora do HGridLayout e eu vou copiá-lo para LetsRender. Agora, vamos em frente e abrir este build.pde, e por que não fazemos o que o site de processamento nos diz que devemos fazer. O que diz é, bem, ok, se a linha 47 é onde estamos desenhando o palco, estamos pintando o palco, vamos salvar o que está acontecendo. Então, se você fosse para ir para o site de processamento, ele diria SaveFrame. Em SaveFrame, há tantos formatos de imagem diferentes que você pode passar aqui. Por exemplo, eu poderia dizer render.jpg. Agora, se eu salvar e construir este esboço, veja o que acontece com a minha pasta. Eu vejo o que acontece na tela, e na minha pasta, ele cuspe render.jpg. Agora, eu posso ir em frente e fechar o esboço, eu posso abrir o JPEG dentro do Photoshop, e com certeza verificar isso, ele renderizou o que eu vejo na tela. Agora, é um JPEG e JPEG tem alguma compressão para ele. Se você realmente começar a ampliar aqui, JPEG não é nosso amigo. Chewbacca é muito mastigável para Josh Davis. Então, eu não gosto disso. Então, eu vou fechar isso fora do Photoshop, e eu vou voltar e eu vou mudar isso. Eu poderia dizer render.png, eu poderia salvar, eu poderia construir nosso esboço. Você deve notar que ele cospe um render.png dentro de sua pasta de compilação. Posso ir em frente e fechar este esboço. Eu poderia abrir este render.png dentro do Photoshop e muito melhor. Não é um formato compactado, não temos nenhum tipo de negócio estranho de artefatos JPEG, então tudo está bem com o universo. Eu gosto de PNG, PNG é legal. Mas há algumas coisas que eu não estou gostando, que é, não seria ótimo se fosse transparente? Nós realmente temos que renderizar o plano de fundo? Neste momento, isto é plano. E se eu quisesse renderizar isso e apenas renderizá-lo como um PNG transparente? Como você pode ver bem fora do portão, ele realmente não faz isso. Agora, só para mostrar se você realmente não quer qualquer compressão em tudo e você quer apenas arquivos raw, é claro, você poderia dizer render.tif e isso irá cuspir um arquivo TIFF. Você também pode fazer TARGA, e, claro, se você renderizar seu esboço, você verá que ele também cospe um arquivo TARGA. Então, isso é bom, mas está faltando em algumas áreas. Então, o que eu realmente gostaria de fazer é expandir isso de alguma forma. Então, o que eu vou fazer neste momento é parar este vídeo, vamos começar um novo, mas desta vez vamos tentar fazer as coisas um pouco melhores. Saída dois, próximo vídeo. 39. letsRender / bom: Está bem. Então, agora, eu quero fazer alguns resultados mais avançados. Então, vamos dar este passo um e eu vou apenas copiar o passo um para um passo dois. Tudo bem. Dentro do passo dois, dentro da construção, eu vou ir em frente e apenas lixo essas imagens existentes que foram copiadas e eu vou abrir build.pde. Agora, vou fazer algumas mudanças. Neste momento, só estamos usando a configuração, tudo bem. O que eu quero fazer é dar a mim mesmo alguns retornos difíceis aqui para mover essas coisas. Vou me livrar desse SaveFrame, e agora, acabamos de estar na instalação. Bem, ao que parece, eu gostaria de apresentar um empate vazio, ok? No empate do vazio, quero copiar este H.Drawstage nele, ok? Agora, se você se lembra de antes, um empate é um loop. Ele corre mais e mais e mais e mais uma vez. Bem, podemos cancelar isso dizendo “NoLoop”. NoLoop basicamente irá executar a função draw uma vez e depois desligá-la, ok? Então, NoLoop vai desligar essa função draw depois que ele é executado uma vez. Agora, eu quero introduzir uma nova função, bem chamada void SaveHires. O que eu quero fazer é antes de ligar para NoLoop é que eu quero chamar SaveHire, certo? Ao chamar esta função, vou passar-lhe um inteiro, certo? Tudo isso vai fazer sentido aqui em um momento. Vou passar-lhe um, está bem? Aqui em baixo, na função, eu vou dizer, “Oh meu Deus, tem um número chegando.” Tudo bem, então deixe-me dizer int, e então vamos chamar esse ScaleFactor, ok? Então, int ScaleFactor. Agora, o que eu vou fazer é escrever um pouco de código que me permite fazer algumas coisas acima e além do que o primeiro passo faz. Eu vou ir em frente e dizer PGraphics, e vamos chamar isso de contratações é igual a CreateGraphics, ok? Dentro de CreateGraphics, eu vou dizer largura vezes ScaleFactor e, em seguida, eu vou dizer altura vezes ScaleFactor e , em seguida, eu vou passar um renderizador. Então, eu vou dizer JAVA2D. Legal. Então, estou criando um PGraphics que é largura vezes o ScaleFactor e altura vezes o ScaleFactor, mas estou passando um. Então, se você chegar ao topo aqui, nosso esboço é 600 por 600, então 600 vezes 1 é 600 para a largura, e 600 vezes 1 para a altura é 600, certo? Então, esperançosamente, você vai ser capaz de ver aqui, você será capaz de passar em um número para renderizar o tamanho da imagem que você deseja com base em algum ScaleFactor. Então, se eu dissesse SaveHire dois, em vez de renderizar um gráfico que é 600 por 600, ele realmente renderizaria nosso gráfico 1200 por 1200. Então, eu posso renderizar uma versão de resolução mais alta do que o que você realmente está vendo na tela. Na tela, você ainda verá o 600 por 600, mas em nossa pasta, estaremos enviando essa imagem para 1200 1200 se SaveHires foi passado o número dois, mas chegaremos lá. Agora, depois que eu definir este PGraphics, eu vou apenas ir em frente e dizer BeginRecord e depois de BeginRecord, você tem que EndRecord assim. Dentro do BeginRecord, vou passar-lhe este PGraphics de contratações, ok? Então eu vou dizer que os contratados devem escalar o que veio como ScaleFactor, ok? Então, estamos ampliando o trabalho artístico com base em nosso ScaleFactor aqui, mas novamente , agora, ele é apenas um, então ele vai ter o mesmo tamanho exato do nosso palco, largura e altura. Então eu vou colocar uma pequena declaração de “se else” aqui. Então, deixe-me apenas fazer se e, em seguida, deixe-me definir um outro e tab estes como assim. Dentro do “se “, eu vou dizer que se contrata igual a nulo, então ele deve fazer H.Drawstage, ok? Agora, se contratações não for igual a nulo, eu vou dizer H.Stage, então eu vou demitir nosso cara interno, PainTall, e dentro de PainTall, eu preciso passar algumas informações. Então, dentro do PainTall, eu preciso passar o PGraphics. Ele também quer saber se ele está usando 3D ou não. momento, isso ainda está em desenvolvimento porque queremos ver se podemos renderizar espaço tridimensional para um gráfico bidimensional, mas este é um trabalho em andamento. Então o terceiro argumento é o Alfa que está chegando, certo? Dentro do PaintAll, nossos PGraphics são chamados de contratações. Não estamos usando 3D, então é um valor booleano, eu só vou dizer falso, e para Alpha, eu vou apenas passar um valor de um, ok? Agora, temos o nosso EndRecord e depois de terminarmos a gravação, agora vou renderizar a imagem. Novamente, JPG, não é nosso amigo. Você pode gostar se quiser um alvo, mas eu quero chegar ao PNG. Então, eu vou dizer hires.save e dentro do save, eu vou dizer por favor salve-o para render.png, ok? Agora, eu estou cavando isso, então vamos ver o que acontece aqui. Eu vou ir em frente e salvar e eu vou construir o esboço. Espero que não tenhamos erros. Nós não temos. Boom. Ele é executado e podemos ver que ele processa o render.png dentro da nossa pasta aqui. Então, pelo que eu posso dizer, vamos em frente e abrir esse png, ele parece idêntico ao primeiro passo. Sim, é sim, está bem? É absolutamente idêntico. No entanto, há realmente algumas funcionalidades ocultas aqui. Confira isso. Isso realmente renderiza uma imagem 600 pixels por 600 pixels. Então, se eu excluir este PNG e pedir esta chamada de função para salvar contratações com um fator de escala de dois, se você salvar e construir seu esboço, o que está acontecendo neste momento é que ele exibe 600 por 600, ok? Mas se eu fechasse isso e realmente olhasse para o PNG, você notaria que ele realmente foi distribuído para 1200 por 1200. Então, se eu vir aqui para o tamanho da imagem, eu posso ver que as dimensões foram renderizadas em 1200, 1200. Então, agora eu posso renderizar esta imagem do tamanho que eu quiser apesar do que estamos vendo quando construímos o esboço. Então, ser capaz de renderizar para um tamanho muito maior é algo que eu acho que é extremamente útil. Agora, há mais um pouco aqui e essa é a questão da transparência, certo? É um PNG, então eu vou voltar aqui, eu vou apagar este PNG, e ele acaba no topo aqui, eu estou definindo a cor de fundo para um cinza escuro, 20, 20, 20. Bem, você conseguiu. Você pode realmente vir ao fundo e dizer H.CLEAR. H.CLEAR seria um fundo transparente. Então, se eu salvar e construir este esboço, eu deveria vê-lo renderizado na tela. Agora, eu obviamente não estou vendo o fundo de 20, 20, 20, 20, mas se eu realmente fechar este esboço e vir para renderizar PNG e abrir isso dentro do Photoshop, ele realmente renderizou isso com transparência. Então, agora, eu posso puxar um monte de coisas diferentes no Photoshop e colocá-los em cima um do outro, eu posso definir uma cor de fundo diferente, eu posso começar a modificar isso de uma maneira que eu acho que é um pouco mais robusto do que o primeiro passo. Estou muito entusiasmada com isto, está bem? Agora, no próximo vídeo, vamos fazer um passo três, certo? Na etapa três, vamos levar essa saída de volta para dados vetoriais. Então, saída três, vejo vocês lá. 40. letsRender / MELHOR: Está bem. Estamos em LetsRender e vamos balançar um passo três. Passo três para mim é isso, é o Santo Graal dos renderizadores. Se estamos usando ativos vetoriais, então eu quero voltar para uma saída baseada em vetores. Então, vamos implementar isso. Eu vou dar o passo dois e eu realmente vou copiá-lo para um passo três. Vou abrir a pasta Build. Vou excluir render.png e vá em frente e abra build.pde. Agora, eu vou modificar um pouco do código na parte inferior, mas antes de fazermos isso, há algumas coisas que eu quero fazer lá em cima. A primeira é que, se você estiver indo para ser renderizado de volta para um formato baseado em vetor, você realmente precisa importar uma biblioteca para ser capaz de fazer isso. O que vamos fazer é, está no topo, vamos simplesmente digitar import processing.pdf.*;. Então, isso é importar biblioteca PDF do processamento para que, novamente, possamos trabalhar em vetor e voltar como vetor. Agora, a segunda coisa que eu quero mudar é a linha oito, onde diz H.CLEAR. Eu não estou mais trabalhando com um PNG transparente, isso é baseado em vetores, então eu estou bem para ver o fundo neste momento. Então, eu realmente vou colocar o fundo de volta para o nosso cinza escuro de 202020. Rolando para baixo até o fim, vamos fazer algumas alterações aqui. Obviamente, eu não quero mais chamar isso de SaveHire, eu quero chamar isso de SaveVector. Nos SaveHire, estávamos passando em um fator de escala. Este é vetor e porque é vetor, não importa se esse arquivo vetorial é do tamanho de um selo postal ou é do tamanho do Taj Mahal. É vetor, você pode escalá-lo para qualquer tamanho desejável que desejar. Então, não precisamos passar em um fator de escala, podemos apenas dizer disparar essa função chamada SaveVector. Então, vamos em frente e atualizar a função aqui para SaveVector. Novamente, eu posso matar este argumento para fator de escala e agora eu vou modificar nossos PGraphics e, em vez de usar contratações porque, novamente, para mim isso parece meio específico que você está renderizando uma versão mais alta res do que talvez o que você vê na tela, vamos em frente e mudar isso para pGraphics tmp. PGraphics temperatura é igual a nulo. Agora, a próxima coisa que eu vou fazer é dizer que tmp é igual a BeginRecord, e dentro do BeginRecord eu vou dizer, eu quero que você grave, mas eu realmente quero que você grave em PDF. Então, vamos ser saída para um documento PDF. Agora, o segundo argumento é o nome do arquivo. Então, vamos apenas dizer render.pdf. Agora, eu não preciso dessas linhas em 60 e 61, então eu posso ir em frente e excluí-las porque novamente, elas se relacionaram com a saída baseada em pixels, então eu posso excluir. Esta declaração if and else apenas modifica um pouco porque mudamos o nome para tmp, então eu vou dizer se tmp é igual a null e aqui no outro, h.stage () .paintall e novamente estamos passando este novo cara de tmp. Agora, precisamos ter um registro final, mas não precisamos do hires.save (“render.png”) porque o formato de arquivo que estamos salvando, novamente, é definido aqui nesta linha 59. Agora, se tudo correr bem, eu deveria ser capaz de salvar e construir o esboço e quando eu construir o esboço, eu deveria ver na tela 600 pixels por 600 pixels exatamente como esperado, mas na minha pasta, eu vejo um render.pdf. Vou em frente e abrir este render.pdf dentro do Illustrator. Então, aqui estamos dentro do Illustrator, eu posso abrir a paleta Camadas e, oh eu vejo, ela cria automaticamente uma máscara de recorte. Então, se eu for em frente e abrir isso, você deve notar que provavelmente há um caminho de recorte no topo, você poderia excluir esse caminho de recorte se você quisesse, você poderia desagrupar tudo isso e, oh meu Deus, nós estamos de volta a um formato vetorial. Você pode vir aqui e clicar em View, Outline, nós poderíamos dançar neste ponto porque é aqui que ele está. Se estamos usando ativos baseados em vetores, vamos voltar para ativos baseados em vetores porque agora, tudo isso é editável. Se eu não gostasse que fosse azul, caramba, queria que fosse uma laranja, posso modificá-la. Onde é muito mais difícil modificar se estivermos renderizando o PNG. Então, no exemplo da etapa dois, porque estamos renderizando para uma imagem baseada em pixels, melhor você gostar do que vê porque é muito mais difícil editar esse arquivo depois que ele é renderizado e você o abriu no Photoshop, mas se Estamos renderizando para vetor, eu posso entrar aqui e fazer todo tipo de mudanças. Então, se eu não gostar do peso do traçado, eu poderia selecionar o peso do traçado de um dos vetores aqui, eu vejo que ele é selecionado o traço preto e eu poderia vir para selecionar a mesma cor do traçado, e se eu quisesse eu poderia mudar o traço para cinco, se é isso que eu estava procurando. Então, eu gosto dessa idéia de trabalhar com ativos baseados em vetores fazendo algum tipo de geração aleatória em vez de processamento, mas, em seguida, a capacidade de renderizá-lo de volta para uma composição vetor-b ased para que eu possa começar a fazer alguma edição dentro do Illustrator. Vamos em frente e fechar este vídeo, eu vou mostrar a vocês um último vídeo em termos de fazer alguma edição. Vejo-te no passo quatro. 41. letsRender / edições finais: Porque é isso. Na verdade, não conheço essa música. Mas é isso, é isso. Quero mostrar-te outra coisa. Eu vou abrir HGridLayout. Em HGridLayout especificamente, eu vou abrir o passo três. Olhe para este, este é aquele em que nós aleatorizamos a rotação, e nós aleatorizamos o tamanho, e ele se parece com isso. Agora, eu não fiz um comentário antes porque eu realmente queria abordar isso aqui. Como você está aleatorizando o tamanho, você percebe que o peso do traçado mudou em todo o documento? Como aqui, onde ele fez 50 por 50, o peso do traçado parece um, e aqui, onde o traço pesa bastante grande, ele ficou muito mais grosso porque o traçado está realmente dimensionando com a arte enquanto você está anexando em um tamanho maior. Agora, eu me importo? Talvez não inicialmente, mas eu definitivamente quero editar isso no Illustrator. Então, eu vou te mostrar alguns últimos truques aqui. Agora, este é HGridLayout, e este é o passo três, mas já temos um passo três dentro do LetsRender. Então, eu vou copiar isso para minha área de trabalho assim, e então, eu posso fechar essa pasta, e eu estou realmente indo para mudar isso para um passo quatro, e então, eu vou arrastar o passo quatro para a pasta LetsRender. Agora, eu quero abrir a etapa três, e eu também quero abrir a etapa quatro, e a razão pela qual eu quero fazer isso é para que eu possa simplesmente copiar e colar meu negócio como taxa aparecer no topo que processamento de importação PDF. Sim, por favor. Eu vou colar isso, e em seguida, no fundo aqui, eu tenho esta bela, digamos, função vetorial. Então, eu vou copiar até que salvar a função vetorial, e então, eu vou vir aqui, e eu vou colar onde ele diz H.draw estágio. Então, legal. Posso fechar agora este passo três. Então, eu estou na etapa quatro, e tudo o que eu fiz foi adicionar a renderização a um PDF. Então, se eu salvar e construir meu esboço, novamente, eu deveria ver algo na tela, e eu também vejo que ele saiu um render.pdf. Então, o que eu quero fazer é apenas mostrar algumas coisas realmente no Illustrator. Então, eu vou fechar meu esboço, e eu vou ir em frente e fechar a compilação PDE, e eu vou abrir essa renderização dentro do Illustrator. Agora, tudo parece bom. Se você vir para ver contorno, sim, certeza, é tudo vetor, isso é incrível. Ele faz essa máscara de recorte, então eu vou abrir minhas camadas, e com certeza, há o caminho de recorte bem ali, e eu vou ir em frente e dizer, excluir o caminho de recorte. Quando eu fizer isso, esse cara abre, vou selecionar tudo e clicar em desagrupar. Então, agora, eu estou apenas olhando para os vetores e toda a sua beleza maravilhosa. Agora, o que eu vou fazer é pressionar o A no teclado, que é o cara da seta da sub-seleção bem aqui, e eu vou selecionar o traçado, e eu vou dizer selecionar a mesma cor do traçado. Agora, isso vai passar e vai encontrar todos os meus traços porque todos os meus traços têm a mesma cor exata. Novamente, se eu ordenar H para esconder a seleção e eu vir para traçar aqui, você verá que o peso está em branco porque há tantos traços diferentes que aconteceram por causa das mudanças de tamanho. Então, eu poderia vir aqui e dizer que eu quero que o derrame seja um, então, que corrige a maneira como isso parece dentro do Illustrator. Agora, quero mostrar-vos um outro truque que acabo a fazer no meu trabalho, e não contem a ninguém porque este é o nosso segredo. Eu amo esta paleta que é a paleta de aparência, e eu aposto que a maioria de vocês nem sequer sabe que esta paleta existe. Eu amo a paleta de aparência porque o que você pode fazer com a paleta de aparência é enquanto os traços ainda estão selecionados, eu posso ver aqui, legal , hey, você tem traços selecionados. Eles estão usando um ponto sem preenchimento. Bem, você pode realmente selecionar a camada de traçado e realmente duplicá-la. Então, eu vou duplicar aqui, e agora, eu tenho dois traços que estão realmente bem em cima do outro. Ambos, um peso de golpe de um e nesta de baixo. Vou ajustá-lo para um peso de três. Então, de repente, você percebe que todas as linhas ficam mais grossas na tela. Bem, a razão pela qual eu gosto da paleta de aparência é porque eu poderia pegar essa paleta de aparência em conjunto com transparência e eu posso dizer, “Ei, eu quero que a transparência dos traços que são três seja 20%.” Você notaria que, se você realmente abrir esta pequena alternância aqui, ele mostraria que o traço está realmente acontecendo em três pontos com uma opacidade de 20%, mas o traço em um ponto não é nenhuma transparência em tudo. Agora, se você fosse ampliar, você notaria que acabou de ficar agradável e confuso, e eu faço isso em cada uma das minhas impressões digitais porque quando isso realmente impressiona em papel em uma das minhas impressoras de grande formato aqui, tendo que 20 por cento Alpha em ambos os lados do traçado, apenas suaviza a obra de arte em apenas uma bela maneira. Agora, quero mostrar-vos um outro truque antes de encerrarmos este negócio. Novamente, também no Illustrator e essa é a paleta de amostras. Então, eu vou vir para amostras aqui, e eu posso dizer adicionar cores usadas. Então, se eu clicar nisso, ele deve ser executado através do meu documento e realmente adicionar todas as cores que estão arrepiando aqui dentro do meu documento. Agora, o que eu quero fazer é com as amostras, eu realmente quero selecioná-las e transformá-las em um grupo, novo grupo de cores. Então, aqui na parte inferior, eu clico na pasta pequena e grupo de cores e eu digo, ok. Então, isso pegou essas cores e as agrupou em um pequeno grupo de cores aqui. Agora, a razão pela qual eu quero fazer isso é porque você pode realmente selecionar tudo dentro de seu arquivo do Illustrator, e a maioria das pessoas não tem idéia do que esse pequeno botão faz aqui. Diz recolorir obras de arte. Então, você clica neste pequeno botão, recolorir o trabalho artístico e ele realmente puxa esta pequena paleta aqui, e quaisquer amostras que você adicionar a esta paleta de amostras, eles automaticamente são adicionados a essa coisa de grupos de cores. Então, eu realmente vou selecionar isso, e eu poderia vir aqui e dizer, “Ei, não escale o tempo como torná-lo exato.” Mas a razão pela qual eu gosto dessa paleta é porque eu gosto de cores aleatórias, e termina que há um pequeno botão aqui que diz mudar aleatoriamente a ordem das cores, e eu posso sentar lá e dizer, oh, yeah, oh, sim . Posso apertar este botão o dia todo. O que está fazendo é que está passando pela minha arte e reorganizando as cores ao redor. Então, é apenas um passo extra de eu ser capaz oferecer um monte de variações diferentes para meus clientes definindo algumas cores iniciais, mas talvez usando este truque e produzindo esta composição uma tonelada de maneiras diferentes, mas com diferentes arranjos de cores. Agora, de repente, alguém diz, “Oh, sim. Mas podemos mudar uma das cores?” Você pode realmente criar um conjunto totalmente novo de cores, e você pode recolorir todo este trabalho artístico usando um novo grupo de amostras de cores. Então, esses são dois pequenos segredos que eu amo compartilhar com os Illustrators, é este recoloring de cores e, em seguida, aquele golpe, colocando dois em cima um do outro e tendo o de baixo, tem um pouco de transparência para ele, modo que suaviza as bordas. Está bem. Oh, meu Deus. Embarcamos em uma jornada de chutados. Alguns traseiros foram chutados. Eu podia sentir isso. Eu podia sentir que muitos traseiros foram chutados, e estou tão animado que você decidiu passar seu tempo com minha loucura. Mal posso esperar para ver o que vocês fazem e garotas. Eu acho que há um monte de técnicas aqui que, novamente, a coisa que eu quero continuar dirigindo para casa é que o código não se importa com as cores que você usa, ou quais ativos de arte você usa. Você pode fazer um conjunto totalmente novo de desenhos com motosserras e gatinhos, e você pode mapear esta composição aqui mesmo com serras de trem e gatinhos. O código é completamente agnóstico de arte. Estamos especificando quais ativos devem ser usados. Então isso significa que no final desta jornada, o trabalho que você cria, e o trabalho que você compartilha com todos nós que fizemos essa aula será completamente único para você, e a razão pela qual ele está indo ser único para você é porque você é atraído por cores diferentes do que o resto de nós. Você é levado a formas diferentes do que o resto de nós e mesmo usando esses blocos de construção simples, há um número infinito de possibilidades que devem atingir nossa galeria, e estou animado para ver isso acontecer. Ótima. Espero que esta seja uma das muitas aulas. Eu adoraria fazer outra aula sobre animação, e eu adoraria fazer uma terceira classe em hardware como o Leap Motion e o Connect. Então, se gostou desta aula, diga às pessoas da Skillshare que sou o melhor professor que você já teve em toda a sua vida e que estamos namorando. Estamos namorando. Obrigado. Me ligue no Twitter. Me ligue no Facebook. Eu gosto de e-mail. Eu leio e-mails. Obrigado mais uma vez. Obrigado por fazeres esta aula. Vejo-te mais tarde. 42. Algumas palavras de despedida...: Chegamos a este grande final de produção. Aqui é onde eu estou realmente animado para ver o que vocês fazem, porque espero, vocês já viram neste ponto, seus desenhos são seus desenhos, suas escolhas de cores são suas escolhas de cores, e é essa saída que é aleatoriamente acontecendo dentro dessas classes de layout. Assim como as coisas que eu te mostro são completamente únicas para mim, e é conduzido por esta viagem indo para Istambul, é longe do computador, certo? É onde esta magia está. Não é na frente do computador, é sobre fazer uma viagem a Istambul, e caminhar pelo Grande Bazar, e encontrar esses desenhos, e ter este momento de, “Eu posso pegar este desenho e eu pode torná-lo meu próprio. Eu posso torná-lo meu próprio redesenhando e abstraindo-o, uma forma que esta programação de computador vai usar para gerar essa emoção na tela.” Então, ele vai ficar preenchido com cores que eu posso ter experimentado naquela viagem. Eu faço uma curva, e vejo mosaicos com certas cores, e tiro uma foto dessas cores, e vou extrair as cores dessa fotografia. Então, toda essa saída é completamente conduzida pelas escolhas iniciais que você faz, que significa que todo esse trabalho que você vai vomitar nesta classe é específico para você. É específico para as imagens pelas quais você é atraído, seja floral ou orgânico. Tenho a minha fase de flores. Talvez, você vai ter sua fase de flores. Então desenhei muitas flores e mudei para a geometria. Tive que ir matemático. Então, esse tipo de estética que você é atraído para definir sua saída. Sua saída, novamente, completamente exclusiva para você. Então, eu estou super animado porque você deveria estar deslumbrando todos nós com sua grandiosidade. Pode me dar um aleluia? 43. hexGrid / Randy Steward: Ei! Então, pensei que levaria um tempo para adicionar uma seção nove chamada Projeto Inspirações, onde eu levaria coisas que vejo que vocês estão postando na galeria estudantil, e talvez mostrar algumas coisas que eu faria. - Sim. Então, aqui está um post que Randy fez, e ele está fazendo esses hexágonos, e apenas olhando para esses hexágonos, eu pensei em mostrar a vocês como combinar um monte de diferentes pools com um monte de diferentes layouts de grade. Então, anexado a este vídeo, vai haver um arquivo hexGrid.zip, e vamos ver, eu tinha dividido em seis etapas. Então, vamos dar uma olhada no primeiro passo. primeiro passo é, obviamente, eu tenho uma compilação PDE, Eu tenho altura PDE, Eu tenho uma pasta de dados, e dentro da pasta de dados eu tenho hexágono SVG. Se alternarmos para ilustrador, você pode ver que eu fiz um hexágono muito simples aqui, e também esta arte é uma largura de 50 e uma altura de 50. Certo. Então, cada um desses hexágonos é 50 por 50. Está bem. Então, deixe-me mostrar-lhe, abrindo esta compilação PDE aqui alguns truques. Então, a primeira coisa é que, deixe-me apenas fazer o tamanho da fonte um pouco maior. Está bem. É que eu compactei o código HDrawablePool. Ok, e você vai ver o porquê, porque novamente nós vamos adicionar seis piscinas diferentes aqui. Tudo bem. Então, no topo eu disse dp1 para uma piscina desenhável. Eu disse que quero desenhar 88 itens. Na linha 10, eu especifiquei que eu quero usar um hexágono hexagon.svg. Na linha 11, eu criei um layout de grade, e eu disse, Ok, eu quero que você comece no 27 no eixo x,40 no eixo y este espaçamento é 78, o espaçamento Y é 51 e colunas é oito. Ok, e neste particular, eu digo tudo bem, vamos matar o estilo que vem do ilustrador, vamos acabar com o traço, e vamos adicionar um preenchimento de cinza escuro, e colocar o ponto de ancoragem no centro. Tudo bem. Agora, então é um pool usando SVG hexágono, e se eu executar isso, você vai notar que ele constrói uma grade assim. Agora, vocês notarão que os números que eu criei me permitem escrever, colocar uma nova grade dentro do espaçamento, isso é o que o espaçamento é, seus 78 pixels porque ele está alinhado de uma forma que eu possa colocar em outro hexágono aqui. Mas este hexágono, obviamente está em um início diferente x, e em um início diferente y, porque não está alinhado com esta grade particular. Tudo bem. Então, vamos passar para HGrid dois, e em HGrid dois no topo, eu mudar cada pool drawable, digamos que eu vou ter um pool drawable um, e um pool drawable dois. Na piscina desenhável dois, eu digo ok, Eu quero 70 itens, Eu ainda estou usando hexágono SVG, mas você vai notar que eu tenho um início diferente x eu tenho um diferente y início, mas o espaçamento ainda é 78 por 51, e o coluna é sete. No caso deste SVG hexágono, é idêntico ao acima, exceto para um conjunto a cor de preenchimento para que laranja escuro. Tudo bem. Então, agora temos duas piscinas desenháveis usando o SVG de hexágono. Então, se eu construir o arquivo, eu agora tenho uma segunda grade e usando um segundo pool desenhável com um layout diferente, mas eu sou capaz de colocá-lo de tal forma que ele preencha o espaçamento entre a primeira grade que criamos. Está bem. Agora, vamos estender isso um pouco mais. Então, na construção três, eu disse ok, bem, eu quero fazer um colorista de pixel H. Está bem. Então, veja isso. Eu digo H piscina desenhável, eu vou adicionar um terceiro, mas agora eu vou adicionar um colorista de pixel, certo? Eu quero roubar a cor de um Jpeg gradiente. Tudo bem. Então, há nosso hexágono e dentro do Photoshop, eu criei uma imagem que 600 por 600, e eu fiz um gradiente que passou de branco para preto. Está bem. Então, se fôssemos olhar para piscina desenhável três, novamente é idêntico ao pool atraível dois exceto, porque eu mudei algumas coisas. Eu disse que quero que o tamanho seja 40 por 40 em vez de seu padrão 50 por 50, e então na linha 36, eu disse, hey vamos pegar este gradiente de pool de cores, e aplicar cor somente para o preenchimento. Então, agora, quando eu testo este filme, eu agora tenho uma terceira grade que está em cima da segunda grade, mas usando cada colorista de pixel para a transição do branco no topo, para o preto, para o fundo. Certo. Então, agora eu tenho três piscinas desenháveis, três grades, e novamente eu posso continuar esse tipo de empilhamento. Então, vamos abrir HexGrid quatro, e é claro que agora estou adicionando um quarto pool desenhável. Mas desta vez, eu adiciono pool de cores H, e em H pool de cores, eu tenho as cores que basicamente temos trabalhado em todas as nossas compilações de amostra. Então, alguns cinzentos e dois azuis, e duas laranjas, assim por diante e assim por diante. Agora, aqui em baixo, eu copio exatamente a mesma coisa da piscina 3. Então, eu copio pool traçável três, renomeá-lo como pool drawable quatro, novamente é 70 hexágono SVG, mas eu mudei o tamanho para ser 20 em vez de 40, e então eu digo, em vez de CP um, aplicar cor eu digo CP2 aplicar cor. Agora, isso deve colocar uma quarta grade em cima da terceira grade que está em cima da segunda grade, e nós temos algo como isso. Tudo bem. Então, agora podemos ver que ele está escolhendo cores aleatoriamente na quarta grade. Agora, nós temos essa grade, a primeira que recriamos que ainda é cinza. Então, por que não duplicamos a mesma coisa, mas talvez revertemos? Tudo bem. Então, vamos em frente e abrir a grade H cinco, e uma grade H cinco no topo, eu crio um pool desenhável cinco, e no Pool 5 desenhável, eu realmente copio pool um. Certo? Porque dois, três e quatro estão empilhados um em cima do outro. Eu quero que cinco sejam empilhados em cima de um. Novamente, eu mudei o tamanho para 40, e eu faço o CP2 que é o pool de cores H. Então, se eu fosse para executar este arquivo, ele deve colocar o pool drawable cinco em cima de um pool drawable, que você pode ver aqui nesta linha é aleatoriamente escolher cores fora do pool de cores. Certo. Então, nós invertemos isso do que esta pilha. Agora, vamos adicionar a última grade. Se você vai para a grade H seis, e você abrir construir PDE, é claro, no topo, eu criei uma piscina desenhável seis, piscina desenhável seis é apenas uma cópia de piscina desenhável cinco, mas eu mudei o tamanho para 25, e eu realmente usei o colorista pixel gradiente aplicar cor. Tudo bem. Então, agora, piscina desenhável seis está em cima da piscina atraível cinco, e piscina atraível cinco está em cima da piscina desenhável um. Então, estamos basicamente fazendo empilhamento de grade. Tudo bem. Então, agora se olharmos, podemos ver que temos alguns hexágonos que vão da cor branca até a cor escura. Tudo bem. Então, usando essa estrutura, podemos realmente empilhar um monte de pools desenháveis todos usando o mesmo SVG hexágono, mas apenas usando layout diferente com parâmetros diferentes, e assim podemos obter este empilhamento de camada. Agora, o que eu acho que vai ficar bem. Deixe-me apenas ir para o URL aqui. Skillshare. Agora, o que eu acho que vai ficar bem no arquivo de Randy em vez de usar um SVG, se ele estava usando todas essas mutações diferentes de SVG, certo. Então esse arquivo realmente assumiria esse novo padrão textural, que eu acho que seria o iniciante. Tudo bem, eu vou acabar com isso. Eu vou continuar a ser totalmente inspirado pelas coisas que vocês estão postando, e eu tenho algumas outras idéias para alguns outros projetos inspiração remix vídeos que eu vou postar nesta seção. Tudo bem, te vejo mais tarde. 44. hypnoWheel / Luke L: Está bem. Pensei em gravar. Oi, como você está? Como está a aula? Bom? Pensei que faríamos outro tutorial para a seção nove, que é inspirações de projetos. Esse aqui, Luke L, realmente gosta de algumas das imagens que ele está trazendo aqui. Mas eu pensei em quebrar este aqui e mostrar algumas possibilidades com ele. Então, criei uma nova pasta na minha área de trabalho chamada HypnoWheel. Usei o projeto do Luke como um ponto de partida, mas na verdade vou recriar os vetores um pouco diferente e conversaremos sobre isso. Agora, o bom é que você pode clicar no link do Luke aqui, e você pode realmente ver esse arquivo em particular em execução. Tem algumas coisas que talvez eu faria um pouco diferente. Então, pensei que talvez pudéssemos fazer a mesma coisa de antes, quebrar alguns passos, mostrar algumas possibilidades, e partir daí. Agora, no arquivo do Luke, vamos fechar isso. No arquivo do Luke, seus ativos SVG são realmente preenchimentos. Na verdade, eu não usaria preenchimentos. Eu usaria traços. Deixe-me explicar o porquê. Então, se eu alternar para o Illustrator, você pode ver aqui que eu recriei os ativos, mas em vez de usar preenchimentos, estou usando traços. Acabei de fazer quatro SVGs. A obra de arte é de 100 por 100. Acabei de pegar um círculo e dividi-lo em um monte de subseções. Então, novamente, importante lembrar que a obra de arte é 100 por 100. Novamente, tenho quatro amostras de SVGs aqui. Então, primeiro, estamos olhando para Construir um. Este pequeno projeto vai ter cinco passos diferentes, e eu vou mostrar algumas características diferentes. Então, vamos apenas falar sobre algumas das coisas que Luke faz em seu arquivo, e como eu iria abordá-lo em meu arquivo, e também adicionar alguns recursos. Então, Luke, eu também estou falando com você especificamente e outras pessoas que estão apenas ouvindo. A primeira coisa é que, em vez de, em seu arquivo particular, você copiar branco um monte de vezes, não se esqueça que no pool de cores você pode adicionar ponderação de cores especificando a cor, em seguida, especificando quantas instâncias de a cor que você quer. Então, em vez de copiar e colar branco, branco, branco, branco, branco, branco, branco, branco, branco, branco, branco, você pode realmente definir seu conjunto de cores dessa maneira. Novamente, aqui você pode ver que eu disse, “Ok, eu quero um cinza escuro.” Um cinza médio me dá seis deles, um cinza mais claro me dá quatro deles, e um cinza mais claro me dá dois deles. Então, novamente, posso me concentrar na ponderação da cor dessa maneira. Agora, eu adicionei algumas outras coisas a este arquivo. Aqui estão meus quatro SVGs. Novamente, lembre-se que são traços, não preenchimentos. Por que é isso? Bem, a primeira coisa que eu quero falar é usar escala em vez de tamanho. Agora, em alguns dos exemplos que fizemos ao longo deste curso, ele está definindo o tamanho. Definir tamanho é quando você está definindo como, ok, eu quero que a largura seja 100, e eu quero que a altura seja 100, ou eu quero que a largura seja essa e a altura seja aquilo. O que a escala faz é escala é baseada no tamanho original da arte proveniente do Illustrator. Então, eu estou dizendo puxando esta obra de arte do Illustrator. Esse trabalho artístico no Illustrator já tem uma largura e altura definidas. O que eu quero fazer é mudar a escala. Escala é uma porcentagem. Então, 0,5 seria 50% menor. Uma escala de dois seria 200% maior. Então, novamente, verifique este arquivo onde eu estou usando escala em vez de tamanho. Então, na linha 38, eu digo, “Bem, ok, eu quero definir uma escala aleatória.” Eu digo na base, deve ser um e, em seguida, escolher um número 16 aleatório e saltar em incrementos de 0.3. Você vai ver o que isso faz em um momento. Dentro do desenhável, habilita o estilo falso. Então, coloquei a âncora no centro. Eu anexo-o ao centro da tela. Então, em vez de usar o tamanho do ponto, eu estou usando escala de pontos e passando nessa escala aleatória que eu configurou na linha 38. Agora, eu não estou usando preenchimentos. Então, eu vou em frente e digo que não preencha. O que eu faço é que estou brincando com o derrame. Agora, uma das perguntas que você fez foi, como eu posso anexar algo, mas ter tudo a ser do mesmo peso? Então, novamente, é por isso que eu gostaria de usar traçado em vez de preencher porque você pode ver na linha 47, eu posso dizer StrokeWeight, começar com uma base de 10, mas depois multiplicado um dividido por RANScale. Então, o que acontece é que, à medida que o trabalho artístico aumenta, ele dimensiona o peso do traço para baixo. Então, dessa forma, parece que o StrokeWeight é na verdade o mesmo peso, não importa o tamanho, seja no menor no centro ou no maior do lado de fora. Linha 51, eu defino um RandomColor e nas linhas 55 a 57, eu defino um RandomSpeed para HRotate. Aqui, eu estou dizendo que se picaretas aleatórias é zero, dê-lhe uma velocidade de um. Agora, vamos em frente e testar este esboço para que você possa ver o que está acontecendo aqui. Então, como você pode ver, ele realmente parece que o StrokeWeight é o mesmo, e isso é porque enquanto eu estou dimensionando o SVG para cima, eu estou realmente dimensionando dinamicamente o peso dos traços para baixo. Então, todos parecem ter o mesmo StrokeWeight. Não se esqueça nas linhas 48 e 49, você pode especificar o que você deseja que o StrokeJoin e StrokeCAP sejam. Então, você pode ver aqui eu estou recebendo tampas arredondadas. Agora, eu adicionei alguns outros recursos realmente legais aqui. A última seção da classe é, na verdade, como eles saem. Então, eu pensei que talvez você gostaria de produzir este arquivo em particular. Então, você pode ver no topo, eu coloquei no importprocessing.pdf. Eu também coloquei duas alternâncias aqui, uma para pausar e outra para gravar. Se você realmente rolar para baixo para baixo, eu copiar e colar nossa mesma função vetorial, que novamente está na última seção da classe, e então eu colocar em uma tecla vazia para fazer um par de coisas. Barra de espaço irá pausar e reiniciar, a tecla mais irá avançar para a próxima iteração da animação e pressionar a tecla R seria realmente renderizar para PDF. Se eu rodar este esboço mais uma vez o que você veria é que eu posso pressionar a barra de espaço e ele realmente pausa a animação, eu posso pressionar a barra de espaço novamente, ele reinicia a animação, eu posso pressionar a barra de espaço para pausá-lo e, em seguida, eu posso pressionar a tecla de mais no meu teclado e realmente avançar a iteração da animação por um. Então eu posso realmente começar a olhar para esta animação e ir “Ok, deixe-me pressionar isso algumas vezes até eu chegar a algo que eu gosto”, e então, claro, se eu pressionar a tecla R, ele realmente irá renderizá-lo. Se eu definir isso para o lado você vai ver que ele é renderizado um documento PDF que obviamente, eu posso abrir dentro do ilustrador e toda a informação vetorial está lá e tudo parece bom. Esse é o arquivo um. Se avançarmos para o arquivo dois, tudo o que eu fiz no arquivo dois foi dizer que eu quero que a junção e a tampa para realmente ser quadrado, então isso começa a parecer um pouco mais como sua animação porque eu não estou arredondando as tampas, eu estou quadrando tampas. Vamos começar a construir três. Na compilação três, adicionei um pouco mais de funcionalidade aqui, que é, e se eu aleatorizasse o peso base? Então, você verá na linha 39 Eu escolho um peso base aleatório para o traçado e quando eu realmente definir o peso do traçado para definir os tempos de peso base e a escala dinâmica, então em vez de parecer que é tudo o mesmo peso, se você realmente executar este arquivo, eu estou realmente aleatorizando o peso base e eu acho que ele começa a parecer um pouco mais interessante. Acontece que o que estou vendo na tela agora, não sou louco pela cor. Então, pensei em introduzir a capacidade de aleatorizar parte da cor. Se você descer para pressionar a tecla, você vai notar que eu adicionei uma nova tecla pressionada para a letra C, C obviamente sendo cor. O que é bom sobre ool é que eu posso fazer este tipo de conversa aqui, que é para enquanto você encontra cortantes dentro da piscina. Então, este para loop agora irá iterar sobre o pool e encontrar todos os drawables que definimos dentro do pool. Então eu disse, “Cool”, HDrawable temperatura dentro da piscina e, em seguida, eu criar um novo HShape d e configurá-lo para o objeto de temperatura e, em seguida, reativar o traço de cores aleatórias. Então, se eu fosse testar o esboço, essa coisa correr, novamente, se eu não gostasse das cores, eu poderia realmente pressionar a tecla C e ele realmente iria re-randomizar as cores na tela para mim. Agora, novamente eu posso pausar. Basta saber que na linha 101 há redesenhar, e redesenhar vai redesenhar tudo e, infelizmente, também vai redesenhar a animação HRotate em execução. Então, se você realmente pressionar a tecla C agora, não só irá re-randomizar, mas também está avançando a animação hRotate em um. Então, tenha cuidado para que C aleatorize a cor, mas também irá executar novamente o HRotate. Novamente, se eu pressionar R eu poderia realmente renderizar isso para fora, agora eu posso ir para construir três, e você vai ver que eu posso abrir isso no Illustrator, e eu estou tornando para fora uma bela obra de arte de peça. Vamos ver a compilação quatro. Na verdade, comento o uso do ativo um, dois e quatro. Só estou usando SVG3. A razão pela qual eu estou apenas usando SVG3 é porque eu vou introduzir algo novo e eu sei que isso começa a entrar em animação e minha esperança é que eu vou fazer uma classe hype skillshare sobre animação, mas o que eu tenho feito aqui é que eu realmente troquei a animação de HRotate e introduziu o HOScillator. Hoscillator é muito bom porque ele está realmente desenhando com uma função de onda, e neste caso, eu estou usando uma onda de sinal. Então, o que eu estou fazendo aqui é dizer “Eu quero um Hoscillator e o que eu quero oscilar é realmente rotação. Então, eu quero oscilar de -180 graus para +180 graus.” Especifico um tamanho e especifico uma frequência da onda. Se eu fosse testar este esboço usando o Hoscillator em vez de hRotate, eu posso começar a obter algumas animações de onda realmente interessantes usando isso em vez de hRotate, e novamente, eu posso executar isso e pausá-lo, e de Claro, eu posso renderizá-lo. Agora construir cinco, que é a última, a coisa boa sobre hype é que você pode realmente empilhar comportamento. Então, neste caso, eu estou empilhando dois HOScillators, um que está fazendo rotação e outro que está fazendo escala. Então aqui você pode ver nas linhas 67 a 74, eu apresento um novo Hoscillator onde eu estou mudando a escala da obra de arte de 0,25-1,5. Se eu testasse o esboço, você começaria a ver que o sistema agora se parece com isso. Então, essas são apenas um monte de coisas diferentes, um monte de recursos diferentes que estão em hype que, novamente, mesmo que eu esteja fazendo impressão estática, eu posso executar um comportamento como este e “Ok, deixe-me mudar as cores até eu obter algo que eu gosto” e então quando pressionamos a tecla de mais para avançar para a próxima iteração da animação, “Legal, eu gosto disso ali” e eu acabo fazendo e talvez eu use em um cartaz e eu uso essas formas para dedigitar ao longo das formas, as possibilidades são infinitas. Continue postando novos projetos na galeria de estudantes e eu continuarei fazendo esses tipos de vídeo. Espero que se divirta. Vejo-te mais tarde. 45. Processing 3 + biblioteca HYPE / atualização: Para gravar um pequeno vídeo rápido de uma atualização. Quando eu fiz esses cursos pela primeira vez há quatro anos, Processamento 2 era a coisa. Em conjunto com o uso do Processing 2, HYPE e como descrevi o HYPE em todas essas classes, também foi um arquivo.pde. Então, nessas três classes, você tinha um Hype.PDE. Hype.pde continha toda a biblioteca HYPE. Isso também significava que você poderia usar coisas como processar JS na época. Mas agora, muita coisa mudou. Quatro anos depois. Processar JS realmente não é uma coisa muito mais, mas P5 JS é o novo, novo. Claro, temos o Processamento 3. Bem, como eu estava fazendo mais em uma base de aplicativo, e realmente não usando mais o navegador, nós realmente atualizamos HYPE para uma biblioteca de processamento adequada. Então, o que eu fiz é, eu passei por todas essas classes que eu tinha feito anteriormente quatro anos atrás usando HYPE pde e Processing 2, e atualizá-los para que eles estavam usando Processing 3 e HYPE, o biblioteca de processamento. Então, eu só queria mostrar-lhe muito rápido, se você continuar em github.com/hype, você verá que há processamento HYPE bem aqui. Este é o Master_Repo. No entanto, eu só quero mostrar que se você clicar em ramificações e dentro de ramificações há lib_staging. lib_staging é sempre a mais atual. É onde estamos empurrando mais coisas, mais mudanças, fazendo ajustes. É sempre o trabalho em andamento antes de ser empurrado para o Mestre. Então, porque queremos o novo, novo, o segredo novo, novo, vamos em frente e ir para lib_staging e você vai apenas clicar neste botão verde que diz “clone ou download”, e então você vai dizer “download zip”. Agora, o que isso está fazendo é baixar toda a biblioteca HYPE incluindo o código-fonte e tudo mais. Mas, queremos usá-lo dentro do processamento. Então, você notará que se você for para o arquivo de documentos, Processamento, há uma pasta chamada Bibliotecas, e no caso deste exemplo em particular, minha pasta está vazia. Então, eu vou abrir o zip que acabei de baixar, e eu deveria pegar esse cara. O que isso tem é que tem referência, exemplos e recursos. Realmente, a única coisa que você precisa olhar é a pasta Distribuição. A distribuição significa que esta é a compilação atual que você pode enviar dentro da pasta Bibliotecas de Processamento de documentos. Então, vá para Distribuição e você notará que há HYPE.jar e HYPE.zip. Vamos em frente e descompactar HYPE.zip, e ele irá criar esta pasta chamada HYPE, e você só vai arrastar essa pasta para sua pasta Bibliotecas de Processamento. Então, dentro deste HYPE, você deve ter exemplo, biblioteca, referência e origem. Se você olhar para exemplos como, “Oh meu Deus, há uma tonelada de exemplos aqui.” Agora, se formos iniciar o processamento do IDE, você notaria que, se você viesse , provavelmente vai me dizer para atualizar. Não. Sim. Não. Vamos para a biblioteca de importação de esboços. Olha, devias ver o HYPE. Então, agora HYPE é uma biblioteca de processamento adequada. Então, a questão é, isso significa que posso usar isso em um navegador? Não, você não pode usar isso em um navegador. Se você queria enviar suas coisas para JavaScript, eu não sugiro usar este ambiente em tudo, vá em frente e veja o projeto P5 JS que está acontecendo que está processando para o navegador em JavaScript. Mas, se você quiser atualizar todos esses arquivos de classe que eu fiz nos últimos dois anos, eu mudei para o sistema agora. Onde você vai usar Processing 3 e, em seguida, você está usando HYPE, a biblioteca de processamento. Então, legal. Então, nós temos isso dentro do processamento e apenas para o inferno dele, se eu fosse para mover isso de lado e aqui estão algumas dessas aulas de Skillshare e Gumroad que eu tenho trabalhado, e você vai notar se eu for para Programming Graphics 1, Eu agora incluí neste zip todas as atualizações para este código para usar Processing 3 e usar HYPE, a biblioteca. Então, se você for para, digamos apenas Drawing Visual Assets, e você deveria ir e olhar dentro da pasta, você notará que Hype.pde agora é removido completamente de todos os projetos. Se você clicar em buildpde, você vai notar no topo aqui que temos uma nova estrutura, que é agora que é uma biblioteca de processamento adequada, você tem que importar HYPE como uma biblioteca externa. Então, no topo, você pode ver que eu disse hype.Asterisk importação, o que significa carregado em. Se você quiser usar outras coisas, então, se você está apenas importando HYPE, você obtém os bare bones necessários para usar o HYPE com o Processamento 3. Se você quiser coisas extras como, “Ei, estou usando um pool de cores ou estou usando um layout de grade”, então você também tem que importar manualmente a classe que lida com o que quer que você esteja tentando usar. A melhor coisa a fazer é entrar em exemplos e dizer: “Ei, eu quero usar um oscilador.” Então, se você olhar para o oscilador, você vai notar oh, eu tenho que importar oscilador. Isso significa que isso mantém a biblioteca HYPE muito fina. Considerando que antes com Hype.Pde você importava tudo, mesmo que não estivesse usando tudo. Então, isso é magra, isso é mau, é muito mais eficiente como uma biblioteca de processamento adequada. Importar as classes com as quais deseja falar. Então, novamente, olhar para a pasta exemplos, ele irá mostrar-lhe como estruturar as coisas. Além disso, se você olhar para este arquivo zip, você verá que todos os arquivos estão lá exatamente como eles estavam antes, mas todos eles foram atualizados para suportar esta nova estrutura. Eu vou fazer isso para todas as classes, e eu obviamente vou usar essa estrutura para todas as novas classes daqui para frente. Espero que isso ajude. Conversar em breve.