Programação gráfica I: introdução à arte generativa

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