Programação gráfica II: animação de arte generativa

1. Trailer: Olá. Sou Joshua Davis. Eu sou o diretor de artes de mídia aqui na bela Sabrosa onde eu uso muito deste código que você vai aprender nesta aula para criar experiências físicas interativas dinâmicas. Esta classe é, obviamente, uma excelente extensão da primeira classe que eu ensinei, gráficos de programação e introdução à arte generativa, mas, especificamente usando uma biblioteca que eu criei chamado Hype Framework. Agora, isso nos traz para a segunda classe que é programação gráficos de animação de arte generativa. Então, agora, vamos pegar todas essas coisas que aprendemos na primeira classe, ainda usando Hype Framework, ainda usando processamento, sentado em cima do Java, mas agora, vamos realmente aprender como animar as coisas na tela 2-dimensionalmente e tridimensional. Eu estou fora. 2. Unidade 1, Vídeo 1: O que? Sobre o que foi isso? Devíamos começar a festa. O que você diz? Sim. Queremos começar a festa? Sim. Vamos começar esta festa. Sim. 3. Unidade 1, Vídeo 2: Bem-vinda de volta. Segunda classe. Incrível. Tenho que agradecer a todos por tomarem a primeira aula, para tornarem essa segunda aula possível. Nem vou hesitar. Vou jogar fora um grande aviso agora. Um aviso enorme, e isto é, esta aula é incrível. No entanto, se você só fez esta aula e você não tomou minha primeira aula, que é, eu vou fornecer um link para ele, mas é Programação Gráfica e Introdução à Arte Generativa. Se você não tomou essa classe, esta classe vai falhar miseravelmente, e isso é porque naquela primeira classe, eu apresentei a você o Hype Framework, que é uma biblioteca em que trabalhamos que faz todas as coisas que estamos aprendendo possíveis. Então, aprendeu tudo isso na primeira classe, certo? Então você aprende a usar o Sublime Text 2 em conjunto com o processamento, e estamos aproveitando essa biblioteca que nos ajuda a esboçar coisas mais rapidamente. Então, esse é o grande aviso. O grande aviso é que se você está fazendo essa aula e você não fez minha primeira aula, o primeiro vídeo, quando começamos a cobrir o HRotate, você não vai saber do que estamos falando. Então, é melhor que você pause esta aula e realmente pegue a primeira. Outras palavras, você não terá sido cortado para acelerar sobre toda a funcionalidade que o Hype Framework permite que você faça. Está bem. Então, isto é Programação Gráfica Dois: Animação de Arte Generativa. Agora, não me entenda mal. Adorei aquela primeira aula, mas é aqui que, na minha opinião, a diversão acontece. Eu acho que a diversão acontece aqui porque você vai ver quando entrarmos em muitos dos arquivos posteriores, resultados inesperados. Hoscillator, incrível. Vai fazer coisas que você simplesmente não acreditou. Então, eu passo muito tempo ajustando pequenos aspectos dos programas para descobrir coisas que eu nunca soube que eu poderia chegar. Então, adorei a primeira aula. Esta aula é fantástica porque estamos basicamente cobrindo animação. Então, vamos olhar para um monte de coisas que cobrimos na primeira classe em termos de usar piscinas e anexar coisas na tela. Mas agora, vamos entrar nos comportamentos de Hype que apenas lidam com coisas em movimento. Está bem. Então, vou encerrar este vídeo. Se você passar para o próximo, vamos apenas fazer uma introdução rápida a algumas das coisas que você aprenderá, bem como ver onde muitas dessas classes de animação estão dentro da pasta Hype Framework que que você baixou anteriormente para o GitHub. Vejo você no próximo vídeo. 4. Unidade 1, Vídeo 3: Então, eu só queria tomar um pouco de tempo apenas fazendo uma visão geral do framework hype que você baixou do GitHub. Se você realmente abrir a pasta de teste de processamento de hype, novamente, apenas uma atualização rápida, há uma pasta chamada pde, e dentro da pasta pde estão todas as classes que estão atualmente disponíveis no hype. Você pode ver que eu tenho alguns que estão destacados que nós realmente vamos cobrir. Por exemplo, HFollow, HostIllator, HRandomTrigger, HRotate, HsWarm, HTimer, HTWeen. Trata-se de animar coisas sobre movimentar coisas ou mover coisas com base em um sistema como HsWarm. Não se esqueça que dentro de exemplos há sempre toneladas de exemplos, há na verdade uma pasta HTween, há realmente uma pasta HSWarm. No entanto, os arquivos que realmente fizeram para esta classe eu tento desviar-se desses exemplos para que eu possa obter um pouco mais em profundidade para algumas das classes e talvez mostrar algumas coisas novas que eu realmente não tenho muito publicado dois exemplos ainda. Então, embora existam exemplos para algumas das coisas que vamos aprender dentro da pasta exemplos, muito do conteúdo que realmente vamos aprender nesta classe não está online. Então, você não está em alta, nós gostamos de exclusividade. A maior parte destas coisas que vou trabalhar contigo nesta turma é a maior parte das coisas que tem sido este projecto que tenho feito no Tumblr. Então, se você realmente ir para pre-station.tumblr.com, este é o experimento que é que eu me dei algumas regras. Eu disse, “Ok, ele só tem que incluir animação, cada clipe tem 30 segundos de duração, eu por alguma razão me dei a restrição dele tem que ser preto e branco então eu não estou realmente usando nenhuma cor neste projeto, e legal. Eu tenho cerca de 50 anos, então arquivos de animações que eu tenho compartilhado no Tumblr.” Então, se eu fosse apenas para mostrar algumas dessas peças, estes são apenas alguns dos estudos abstratos que eu tenho andado a mexer usando o hype e novamente publicar no Tumblr. Então, vamos trabalhar através de alguns desses e falar sobre como alguns deles são feitos, e então vamos entrar em como produzir isso. Assim como a primeira classe, podemos realmente ainda imprimir isso se realmente escolhermos, mas não vamos gastar muito tempo produzindo isso para imprimir. Vamos falar sobre produzir isto para animação. Então, eu vou mostrar a vocês como colocar isso em um formato de filme, como colocá-lo em um mp4, algum software que eu uso para me ajudar com esse processo. Nosso último projeto vai ser muito dinâmico como este, vai ser divertido, vai ser emocionante como um parece realmente ótimo refletido. Agora, a maioria dessas coisas por realmente ter usado no novo vídeo da música fantasma Graham, então meu vídeo musical co-dirigido para o Fantasma Graham chamado de apaixonar-se por uma equipe realmente incrível e talentosa liderada por Timothy Cicenty. Eu vou mostrar a vocês como eu peguei um monte desses programas, usá-los para o vídeo da música, e novamente, agora podemos colocar isso em um filme, alguns de vocês podem querer fazer clipes mais curtos e transmiti-los para Gif animado, eu sei O Tumblr adora Gif animado, mas eu tenho feito esses rasgos de 30 segundos, então MP4 tem sido o formato que eu tenho ido. Então, confira o playstation.tumblr.site que eu vou te dar um sabor de todas essas pequenas animações diferentes que eu tenho feito exclusivamente com as coisas que nós realmente vamos aprender nesta classe. Atualize-se com o processamento de hype, teste, olhar para a pasta pde ou olhar para a pasta exemplos, novamente, há algumas coisas lá que não vamos cobrir nesta classe. Então, isso encerra esta primeira seção que é apenas uma visão geral, que é apenas introduções, dando-lhe um sabor de algumas das coisas que vamos abordar nesta classe. Na próxima seção vamos cobrir cada rotação. Então, vamos novamente, começar muito devagar e lentamente vamos construir esses arquivos. Esta é uma classe intermediária que significa que tudo começa tão básico quanto eu posso no início, quando chegarmos ao Hoscillator e combos, eu tenho certeza que eu vou ter arrancado sua alma e seus olhos estarão sangrando. Vai ficar complicado, mas vou orientá-los por esses passos de criar esses sistemas complexos com passos muito simples. Então respire fundo, caminhe comigo, prometo que será divertido, mas vai ficar complicado e para alguns de vocês processando pessoas intermediárias lá fora. Felizmente, esta é a classe que você tem procurado, para vocês que são novos no processamento, eu te amo, estou tão feliz que você está nesta jornada conosco, mas eu vou segurar sua mão, andar devagar. Tudo bem. No próximo vídeo, hRotate. 5. Introdução ao HRotate e Anchor: Aqui estamos na primeira seção, hRotate e Anchor. Então, nós cobrimos âncora um pouco na primeira classe, que era essa idéia de ter um objeto e ser capaz especificar um ponto de ancoragem particular para esse objeto. Nesta seção, isso vai funcionar muito bem com o hRotate porque hRotate vai nos permitir girar um objeto em torno dessa âncora de rotação. Então, vamos olhar para todos os aspectos do HRotate. Temos a habilidade de especificar algumas constantes para ancorar, certo? Então, existem nove posições possíveis, centro, canto superior esquerdo, inferior direito, por exemplo, ou podemos trabalhar com âncora, onde especificamos uma posição X e Y, e essa posição de âncora vai funcionar em conjunto com HRotate . Agora, o HRotate quer saber algumas coisas. Ele quer saber quem está girando e a que velocidade ele deve girar esse objeto em particular. A velocidade pode ser dividida em dois eventos. Você pode usar graus ou radianos. Então, você pode dizer, “Ok. Eu quero algo para girar positivo dois graus cada vez, ou eu quero algo para girar dois graus negativos.” Então, podemos especificar se algo gira no sentido horário ou anti-horário. 6. Unidade 2, Vídeo 1: Tudo bem. Vamos nos preparar para a magia. Esta é a primeira seção em que vamos começar a cobrir o código. Esta seção é hRotate e âncora. Anexado a este vídeo, deve haver um arquivo zip que você vai baixar. Esse arquivo zip vai incluir todos os exemplos para hRotate e âncora. Então, se você baixar o zip e descompactá-lo, você notará que há 10 exemplos dentro desta pasta. Mais uma vez, vamos começar de forma muito simples. Em seguida, continuaremos adicionando a esses arquivos para ver que tipos de resultados obtemos. Então, se você seguir em frente e olhar para o exemplo um, EX 1, você vai notar que há um build.pde e há hype.pde. Novamente, Hype.pde é uma versão minificada de cada classe que está dentro da pasta pde que você baixou do GitHub. Então, Hype.PDE contém todo o universo HYPE. Então você nunca deve ter que abrir esse documento em particular. Vamos abrir o prédio. Pde. Agora, se você abri-lo, você deve ver este código aqui. Nós só vamos passar, como um refrescante, nós vamos passar pelo que isso faz. Em seguida, vamos executá-lo e, em seguida, vamos adicionar hRotate. Agora, cada arquivo de processamento tem duas funções. Você notará que o primeiro aqui está configurado. Esse é novamente o nosso construtor. Funciona uma vez. Então é onde colocamos todas as nossas informações de configuração. Então, nossa função de desenho é o loop. É o que corre uma e outra e outra vez. Agora, você deve ter notado na primeira classe que podemos nunca ter usado a função de desenho ou este H.DrawStage, que se você lembrar de tintas, a tela estava sempre dentro da configuração. Então queríamos fazer algumas coisas e depois pintar a tela, mas só precisávamos pintar a tela uma vez. Porque estamos animando, nós realmente vamos mover o H.DrawStage para a função de desenho para que ele seja executado uma e outra e outra vez. Então vamos ver o que estamos fazendo aqui. Do ponto de vista da configuração, nossos filmes terão uma largura e uma altura de 640. Vamos em frente e adicionar o construtor do HYPE, H.init (isto). Lembra da primeira classe? Vamos definir um fundo. A cor vai ser um cinza escuro de 20, 20, 20. Eu vou ir em frente e dizer suave. Agora eu quero anexar algo na tela. Então eu vou anexar um Hrect. Então apareça no topo. Eu disse hRect r1, para o retângulo um. Aqui em baixo, nas linhas 8 a 13, vou adicionar algumas informações sobre esse retângulo em particular. Por exemplo, qual é o tamanho do retângulo? Bem, eu quero que seja um quadrado, que é um 100 por 100. Mas eu também gostaria de cantos arredondados com um arredondamento de 10. Agora, na linha nove, estamos dizendo, “Ok, eu quero adicionar este retângulo a H, H sendo HYPE, para que o HYPE saiba que esse retângulo existe e ele adiciona o retângulo, modo que quando o palco H.draw é executado, ele tem informações sobre r1 Agora, onde queremos anexar este retângulo? Eu digo localização, .loc. Eu vou dizer largura dividida por 2, altura dividida por 2, o que significa que ele vai colocar esse retângulo no centro da nossa tela. Linha 11, não quero nenhum derrame. Linha 12, um preenchimento, uma cor laranja agradável. Agora, observe que não estamos cobrindo âncora neste momento. Se você se lembra da primeira classe, se você não especificar âncora, então você está girando fora de 0, 0, certo? Então ele o coloca no canto superior esquerdo. Agora, desça para o sorteio. Nós vamos fazer um loop H.DrawStage agora está desenhando uma e outra e outra vez e outra vez. Então, nas linhas 22 e 23, coloquei um código de processamento para visualizar onde está a âncora. Então você vai notar, eu disse, “Ei, não faça nenhum preenchimento para que ele mate o cheio de laranja na linha 12. Dê-me um peso de traço de 2 e me dê uma cor de um azul azul-cerco, 0095A8.” Então, novamente usando um código básico de processamento, eu disse: “Eu quero fazer uma elipse. A posição x e y da elipse é, bem, qual é a posição x e y de r1?” Então você percebe que eu disse que o x é r1.x aberto parenth perto parenth. Então ele obtém a posição x de r1, e então ele obtém a posição de r1 no eixo y e a largura e altura dessa elipse é de 4 por 4. Agora, você vai notar que eu tenho este código aqui comentado porque nós ainda não estamos prontos para ele. Mas se eu ir em frente e testar o esboço, você deve ver que ele realmente nos deu um arquivo que 640 por 640, a cor de fundo é cinza. Ele anexou nosso retângulo. Ele fez ao redor das esquinas. É laranja. Adicionamos aquele pequeno ponto azul bem no centro para que saibamos onde está o ponto de ancoragem. Então você notará que esse ponto está no centro exato da largura dividido por 2, altura dividida por 2, e que a obra de arte fica pendurada no canto inferior direito porque esse canto superior esquerdo é o ponto de ancoragem, é o registro. Acredite ou não, isto é uma animação. A função de empate na linha 19 está disparando uma e outra vez, mas o que está acontecendo é que nenhuma posição mudou. Então ele não está se movendo é posição x ou posição y ou escala ou rotação, mas ele está realmente pintando aquela coisa rapidamente uma e outra vez e outra vez. Acontece que está no local exato anteriormente. Então, há uma animação acontecendo. Isto é muito conceitual. Não há um loop acontecendo, mas nada está mudando visualmente na tela. É só repintar tudo no local exato uma e outra vez e outra vez. Agora, eu quero girar essa coisa. Girar coisas e processar para mim sempre foi um pouco confuso porque graus versus radianos, onde está o ponto de ancoragem? O que estou girando? Então, honestamente, eu espero que se você está querendo girar as coisas, você vai adorar usar HYPE para girar as coisas porque eu acho que é um pouco mais fácil do que ter que fazer uma matriz push, uma matriz pop e então girar com isso e blá blá blá. Então vamos em frente e descomentar os contornos 15 e 16. Este é apenas um exemplo de como você pode usar o hRotate. Na verdade, este código vai ficar um pouco mais simples à medida que avançamos , mas vamos dar passos de bebê aqui. Então, na linha 15, eu estou simplesmente dizendo que eu quero fazer um hRotate e eu vou chamá-lo hr1. Então, Hrotate1. É um novo hRotate. Então, a linha 15 diz, “Ok. Legal. Hype, você adicionou um comportamento de rotação para você, mas eu preciso saber algumas coisas.” O que ele precisa saber é quem está girando e uma velocidade. Agora, a velocidade fica um pouco complicada porque pode ser um número positivo ou negativo. Positivo no sentido horário, um número negativo no sentido anti-horário. Então olhe para a linha 16. Eu digo: “Ei, Hrotate1, seu alvo é aquele retângulo, r1. Então esse é o cara que você quer rodar. Sua velocidade é 2.” Repare que eu não tenho que especificar radianos. Só estou dando um número. Agora, como acontece, HYPE por padrão faz graus. Então, se eu realmente executar este arquivo, você vai notar agora que o retângulo está girando dois graus de cada vez. Então, novamente, a velocidade pode ser um número positivo. É um carro alegórico. Então, se você quisesse realmente abrandar isso, você poderia dizer 0,5 e você poderia executá-lo e você notaria que ele desacelera. Você poderia mudar isso para um 2 negativo e isso simplesmente iria no sentido anti-horário. Então lá vamos nós, nós animamos algo. Estamos girando nosso retângulo em torno de um ponto de ancoragem. Agora, eu vou ir em frente e fechar esse arquivo e eu vou olhar para a nossa pasta aqui no exemplo dois. Novamente, no exemplo dois, há apenas um build.pde e um hype.pde. Agora, se você abrir o exemplo dois, código ainda é basicamente o mesmo. Eu só quero mostrar que se acontecer de você ser um amante de radianos, você realmente pode fazer Speedrad, em vez de .speed. Então, a velocidade vai fazer graus, Speedrad vai te dar aquela rotação em radianos. Então, no exemplo dois, esta é a única coisa que é diferente é especificar SpeeDrad em vez de velocidade. Então essa é a única diferença no exemplo dois. Novamente, se você é um amante de usar radianos como negativo 2 Pi dividido por 90, então é claro que você pode fazê-lo dessa maneira. Então esse é o exemplo dois. Finalmente, neste vídeo, eu só quero falar sobre o exemplo três antes de passar para o próximo vídeo. Novamente, no exemplo três, há apenas um build.pde e Hype.pde. No exemplo três, você pode ver aqui no exemplo um ou no exemplo dois criando uma rotação, criou duas linhas de código. Você tinha que criar uma instância de hRotate e, em seguida, dizer-lhe destino e velocidade. Mas, novamente, quero fazer as coisas rapidamente. Eu quero ser capaz de esboçar minhas idéias rapidamente sem ter que se preocupar em escrever um monte de código. Então é realmente um arquivo três que é o meu favorito porque ele usa a quantidade mais mínima de código. Nesse caso, tudo o que você precisa fazer é dizer uma linha de código. Mais uma vez, é assim que gosto de fazer. Linha 21 você pode apenas dizer, “Ei, Hype, eu quero fazer um novo hRotate.” HRotate pode ser passado dois argumentos. O primeiro é o alvo, o segundo é a velocidade. Então, a linha 21 é a mudança no arquivo três dos arquivos um e dois. Está simplificando duas linhas de código para uma linha de código. Novamente, apenas executando o esboço, você vai notar que ainda temos a rotação. Ainda estamos girando em torno daquele ponto de ancoragem, mas estou escrevendo menos código. No final do dia, quero escrever menos código. Quero obter resultados e escrever menos código. Então, linha 21, novo hRotate, r1, o alvo, 0.5, a velocidade. Novamente, você pode entrar aqui e tornar este um número negativo e então ele irá animar no sentido anti-horário. Agora, isto termina este vídeo. Nós realmente não lidamos com âncora em tudo. Então, no próximo vídeo, vamos olhar para a próxima extensão de arquivos HRotate que falam sobre as diferentes coisas flexíveis que podemos fazer com o âncora. Vejo vocês no próximo vídeo. 7. Unidade 2, Vídeo 2: Tudo bem. Então, neste vídeo, eu quero trabalhar através dos próximos quatro arquivos, que serão exemplo quatro, cinco, seis e sete, porque eles estão todos agrupados juntos porque eles vão lidar com âncora, você verá aqui em um momento. Então, vamos olhar para o exemplo quatro e vamos analisar o que eu criei aqui. Em vez de girar um retângulo, eu realmente vou girar três. Então, vamos apenas olhar para alguns dos ajustes. Lá em cima, temos HRCT r1, r2, r3, já que vamos anexar três retângulos, e tudo o que eu fiz basicamente foi copiar e colar um retângulo mais duas vezes, e fiz alguns pequenos ajustes. Então, r1, r2, r3 apenas copia, e a única coisa que foi mudada é que as cores vão fazer uma gradação de laranjas. Então, você tem uma laranja escura, laranja médio, e uma laranja clara. Então, obviamente, estou mudando a localização deles. Então, desde que eu tenho três retângulos e eu quero que o do meio esteja no centro da tela, se você olhar para d2, localização diz largura dividida por duas altura dividida por duas. Então, sabemos que r2 vai estar no centro da tela. Agora, se você olhar para R1, eu só disse, hey, largura dividida por dois, altura dividida por dois. Mas quando você faz essa largura dividida por dois, basta subtrair 160. Então, ele começa no centro e, em seguida, move 160 pixels para fora do centro. Claro, r3 é mais 160. Então, se você olhar para o local para r3, é a largura dividida por dois mais 160. Agora, a razão pela qual eu coloquei três retângulos nesta peça é para que pudéssemos realmente começar a explorar as diferentes facetas do uso de ancoragem. Agora, nós cobrimos isso um pouco na primeira classe, mas novamente esta é uma boa atualização. Vejamos as linhas 29 a 31. Temos três hRotate separado e, novamente, você pode chamar vários hRotate. Então, o que acontece é que estou basicamente registrando três comportamentos de rotação e especificando alvos diferentes. Então, o primeiro hRotate está indo para o destino r1, a segunda instância do hRotate r2, a terceira instância do hRotate r3. Agora, se olharmos dentro do nosso sorteio, adicionei novamente um pouco mais de código de processamento para especificar onde está o ponto de ancoragem de rotação. Então, vamos testar este esboço e ver o que acontece. Então, temos três retângulos. Temos eles se movendo em velocidades de rotação diferentes porque registramos três HROTates diferentes. Novamente, estamos olhando para o ponto de ancoragem aqui. Então, se nenhuma âncora for especificada, novamente, nós temos que 00 e os três desses caras estão se movendo. Ótimo. Então, vamos agora pegar isso e apenas salvá-lo mais algumas vezes e começar a explorar o trabalho com âncoras. Então, com isso, vou para o exemplo cinco. Eu só vou jogar isso aqui na tela. Tudo bem. Então, se você abrir agora exemplo cinco, esta é uma duplicata do exemplo quatro, exceto que nós adicionamos um sistema de ancoragem. Tudo bem. Então, se você olhar para r1, r2 e r3, você pode ver que nós colocamos no que é chamado de constante. Então, esta é uma constante Hype, e nós vamos explorar constantes aqui em um pouco. A constante aqui é H.CENTER. Então, estamos dizendo que o retângulo é 100 por 100, então, nas linhas 10, nas linhas 18, e nas linhas 26, estamos dizendo ótimo, encontre o ponto central com base na largura e altura do objeto. Então, uma vez que os retângulos são 100 por 100, que AncoRat H.CENTER acaba sendo 50-50, e vamos testar este esboço e você deve ver que ainda estamos recebendo a rotação, mas nós de fato mudamos onde ocorre a âncora de rotação. Então, agora, novamente, nossos pequenos pontos azuis são representações das âncoras não mudaram, você pode ver que eles ainda estão nas mesmas posições exatas. Mas agora, estamos recebendo essa boa rotação dessa maneira porque pedimos a AncoRat para ser o H.CENTER. Agora, se você quiser, você poderia abrir a pasta Processamento HYPE, e se você realmente entrou em pde, você veria que há um Hconstants.pde. Se você realmente abriria isso, você veria muitas das constantes disponíveis que estão dentro do Hype. Temos coisas como esquerda, direita, centro, cores. Então, você pode ver aqui nós temos centro, e é claro que ele é preenchido com alguns números padrão, mas esses são substituídos com base no tamanho de seus ativos. Então, veja isso. Temos outras constantes como superior esquerdo, superior direito, inferior esquerdo, inferior direito, assim por diante e assim por diante. Então, este H.constants.PDE é bom porque você pode olhar através disso e ver todos os diferentes tipos de constantes que temos liberado dentro da altura. Então, centro, ótimo. Temos aquele ponto central de pivô. Agora, vamos em frente e passar para o exemplo seis porque ele vai começar a explorar algumas dessas outras constantes que temos dentro da estrutura Hype. Então, novamente, o exemplo seis é o mesmo que quatro e cinco, acabamos de mudar as constantes de Anchorat. Então, olhe para R1. Neste, na linha dez, nós dissemos bem, ok eu quero Anchorat, mas desta vez vamos fazer center-top. Então, se tivéssemos uma peça de arte, ela iria para o topo, mas então centraria na largura desse objeto. r2, apenas fazendo H.CENTER novamente, r3, olhando para ver o que parte inferior direita faria. Então, agora, se testarmos este esboço, estamos começando a olhar para os diferentes tipos de pontos de ancoragem disponíveis que temos. Agora, o único que realmente parece diferente é R1 porque você disse center-top. É difícil ver que realmente r3 é inferior direita porque parece muito semelhante a nenhum Anchorat tudo o que é 00. Então, você tem que estar ciente que às vezes algumas dessas âncoras, que saberiam que isso é na verdade inferior à direita porque parece muito semelhante a uma rotação de 00. Então, essas constantes existem, não necessariamente representam na tela, que hey não é 00 é realmente estamos ancorando na parte inferior direita. Você veria visualmente ancorado no canto inferior direito se estivéssemos girando talvez algum trabalho de arte que fizemos um ilustrador, ou um tipo de letra e para que você pudesse ver que como ele estava girando em torno daquela âncora não estava no topo da letra a, mas talvez a parte inferior direita da letra a, se estivéssemos fazendo algo com o tipo. Agora, Anchorat é legal, mas começamos a entrar em coisas muito mais interessantes quando você só usa âncora. Então, Anchorat sempre quer ser alimentado com uma constante, âncora quer saber coordenadas. Então, eu vou ir em frente e fechar o exemplo seis e eu vou passar para nosso último exemplo para este vídeo que é o exemplo sete. Agora, quando você abre o exemplo sete, como você deve ter adivinhado, é o mesmo que quatro, cinco e, seis exceto para em vez de usar AnchRat, estamos usando âncora. Agora, eu gosto de ficar âncora porque eu gosto de ser capaz de mexer com os números e ver diferentes tipos de resultados. Agora, a âncora permite que você especifique qualquer coordenada x e y. Então, novamente, se olharmos aqui na linha 10, na linha 18 e na linha 26, você pode especificar qualquer posição x e y como ponto de ancoragem para rotação, e aqui é onde Hype realmente brilha. Para fazer isso apenas em Processamento regular, torna-se eu acho que um pouco mais difícil realmente ter um objeto girar em torno uma posição de âncora especificada tão facilmente quanto é com o uso do Hype. Agora, vamos olhar para r1 e r2 e r3. Todos sabemos que a obra de arte é 100 por 100. Então, se olharmos para r1, vejamos a primeira posição de âncora. Nós dissemos que o x é 50 e que o y é 25. Então, o que isso nos diria é que se esta é nossa obra de arte, sabemos que a exposição é o meio. Porque 50 é metade de 100, para que saibamos que no eixo x é metade da distância. Mas o y agora é 25, o que significa que ele acabou de cair 25 pixels do topo. Se olharmos para r2, podemos ver que seu x também é 50, mas é y é negativo 25, o que significa que na verdade o ponto de ancoragem está fora do trabalho artístico e ligeiramente acima dele 25 pixels. r3, novamente um pouco incomum, a posição de âncora é zero para o x mas 150 para o y. Então, também é fora da obra de arte. Agora, vamos em frente e testar este esboço, e vamos começar a ver esses diferentes tipos de rotações. Então, novamente, eu realmente gosto de âncora, porque à medida que eu começo a mover coisas ou animar coisas na tela, eu tendem a ficar mais surpreso quando eu estou usando âncora e especialmente quando eu estou usando âncora com números que estão fora do obras de arte. Então, a obra de arte está varrendo e tal. Então, isso encerra esse vídeo onde nós realmente cobrimos esses quatro arquivos que nos apresentam a âncora e o AncoRat. O último vídeo vai cobrir os últimos três arquivos e a seção que apenas mostra alguns ajustes e possibilidades com o uso de hRotate. Também provavelmente vamos introduzir algumas coisas que não vamos cobrir até mais algumas seções mas eu acho que é bom mostrar algumas coisas que estão por vir. Então, lembre-se que a âncora não é apenas com rotação, é com qualquer comportamento. com HTWeen, seu Hoscillator. Então, âncora se torna super importante à medida que começamos a mover as coisas na tela, porque ele vai realmente ditar o tipo de animação que estamos vendo. É algo que é fixo e girando em torno de um ponto central ou temos esses movimentos arrebatadores porque nós realmente definimos a âncora fora da obra de arte. Então, tenha isso em mente enquanto você começa a tentar seus próprios ajustes quando você está animando coisas que âncora pode ser essa coisa que você pode tentar um monte de números diferentes e nós vamos obter um monte de diferentes resultados animados. Ok. Faltam mais três arquivos. Vejo você no próximo vídeo. 8. Unidade 2, Vídeo 3: Ok, então nós vamos cobrir os últimos três arquivos na seção do HRotate. Só tem alguns truques. Eu realmente amo alguns desses recursos aqui. Então, vamos começar com o exemplo oito. exemplo oito cobre a idéia de aninhamento e o que acontece se um objeto estiver aninhado dentro de outro objeto, mas esse objeto principal tem um hRotate atribuído a ele. Então, amo isso, e este é um grande truque que você pode usar aqui. Então, vamos quebrar o exemplo oito. Quero desenhar dois retângulos. Então, eu tenho R1 e eu tenho R2. R1 é um 100 por 100. Tem uma âncora de 50 negativos. Então, sabemos que a obra de arte vai ser centrada. Mas, por que posição vai ser negativo 50 pixels fora da arte acima dela, ok? Também podemos ver que r1 tem uma cor de laranja. Aqui está a parte importante. Olhe para isso, bem aqui, linha 9 é H.add (r). Então, estamos adicionando ao palco, estamos dizendo ao hype que estamos adicionando esse retângulo chamado r1. Agora vamos esquecer r2 por um segundo porque aqui na linha 23, você pode ver que eu tenho que comentar, mas ele diz novo hRotate (r1), então sabemos apenas a partir deste bloco de código que a rotação vai ser aplicada a r1. Agora estou apresentando R2. R2 tem algumas configurações ligeiramente diferentes. Primeiro de tudo, a arte é de apenas 50 por 50, então é um retângulo menor e você pode ver que ele tem um ponto de ancoragem diferente. Ele tem uma âncora de 25 que, naturalmente, é metade de 50, modo que sabemos que ele vai ser centrado, mas é negativo 25 fora de seu Y. Então nós sabemos que é 25 pixels acima. Você pode ver aqui pelo preenchimento que é um também um tom de cerco. Agora a linha 17 é a magia. Linha 17, adicionamos r2 a H? Não! Na verdade, vamos colocar o retângulo r2 dentro do retângulo r1. Então você pode ver lá na linha 17 estamos dizendo r1.add (r2) e então se eu testasse este esboço o que você veria são dois retângulos. Mas o que você não sabe visualmente pelo menos ainda é que r2 está realmente dentro de r1, mas porque ele é adicionado mais tarde segundo ele reside acima dele. Então ele tem uma profundidade maior porque nós adicionamos em segundo lugar. Mas se você pudesse pensar em r1 como apenas este objeto que tem espaço infinito, ele termina que r2 está dentro de r1 mas flutuou acima dele. Agora, a melhor analogia que talvez eu pudesse criar é como agrupar no Photoshop ou Illustrator. Então, se você tivesse duas camadas, você poderia agrupá-las em uma pasta ou algo assim. Então, se você realmente moveu essa pasta, você moveria todos os ativos que estavam nesse agrupamento específico. Agora a razão pela qual isso é incrível é porque se eu descomentar a linha 23 e dizer girar r1 como você deve ter adivinhado, ele realmente gira r2. Então, o simples fato de que eu estou aplicando um hRotate a um ativo, mas, em seguida, investir outro ativo dentro desse ativo, sim, ele vai girar com ele. Então, eu gosto dessa idéia de aninhamento porque torna meu código um pouco mais fino porque eu só preciso especificar um hRotate e r2 é apenas dentro de r1 então não se esqueça que você pode fazer esse tipo de aninhamento. Então, sempre que você H.add, ele está adicionando esse objeto ao palco. Mas depois que um objeto foi adicionado, você pode começar a fazer o aninhamento. Como nos arquivos anteriores, tivemos um r1, r2, r3, você poderia adicionar r1 a H e então r2 poderia estar em r1, r3 poderia estar em r1, r3 poderia estar em r2. Você pode fazer qualquer tipo de nidificação multinível como esse. vez, só precisamos de um hRotate porque os outros objetos estão dentro dele então é claro que eles são girados como um grupo. Bastante assassino. Algo em que pensar. Vamos passar para o exemplo nove. Agora abra o exemplo nove e eu vou apresentar algumas coisas. vez, gosto de mostrar uma prévia das coisas que vieram. Aqui em baixo, você vai ver que vamos mostrar ao Hoscillator. Hoscillator não cobrimos até mais algumas seções , mas novamente é apenas o poder do incrível. Eu vou mostrar a você. Então, vamos resolver este. A primeira coisa é, antes de chegarmos ao Hoscillator, vamos dar uma olhada em algumas das mudanças que aconteceram. Primeiro, eu coloquei em um auto claro falso então isso é algo que eu não acho que nós realmente cobrimos na primeira classe porque novamente nós não estávamos animando nada. Mas se o draw está sendo executado uma e outra vez, se for um loop, auto clear true é padrão, o que significa que se você não especificar auto clear, é verdade por padrão, que significa que eu vou limpar o fundo antes de pintar algo outra vez. Então, no caso de todos os outros arquivos que mostramos, ele se parece com um único objeto que está se movendo sozinho e não tem deixado nenhum resíduo, porque nós realmente estamos limpando a tela antes de pintarmos o exibir. Bem, mudando construtor hypes para dizer auto clear falso estamos dizendo, hey homem não limpar a tela apenas continue pintando aquela coisa para sempre e sempre e nunca e não limpe a tela em tudo e vamos ver o que isso faz. Algumas outras mudanças. Adicionamos um traço e o traço em todos os três é laranja escuro e adicionamos um preenchimento. O preenchimento é da mesma cor que o plano de fundo e tem posições de ancoragem diferentes. Então, 50,150 para r1, 50, 200 para r2 e 50, 250 para R3. Então, há um par de diferentes parâmetros de rotação de idade aqui. Então, positivo um, positivo dois e negativo três. Então, vamos apenas ir em frente e olhar para o que este auto clear false faz. Se eu rodar este esboço aqui, você verá que não estamos limpando a tela antes de pintarmos a tela novamente. Então, novamente, limpar automaticamente é verdadeiro por padrão em hype se você não especificá-lo. Então, em qualquer um dos outros arquivos que vimos, ele sempre limpou a tela antes de ser pintada a tela. Bem, agora estou dizendo, não faça isso. Por que você não continua pintando essa coisa enquanto anda por aí? Então, agora começa a ficar interessante porque aqui eu estou apenas usando uma rotação simples e nós estamos pintando o rastro dessa coisa enquanto ele se move em torno de sua rotação. Então, divertido. Bem, vamos em frente e fechar isso e olhar para isso Eu adicionei um pouco de oscilador H e eu não vou entrar em grandes detalhes sobre cada oscilador até mais tarde na seção quando cobrirmos essa seção. Mas, veja o que acontece quando eu faço este esboço com três osciladores, e tudo o que o oscilador está fazendo com esses três retângulos está mudando a escala. Então, ele vai estar oscilando a escala para cima e para baixo. Então, eu vou seguir em frente e executar este esboço e você pode ver que eu tenho a rotação em torno de sua âncora, e eu estou deixando um rastro porque eu estou dizendo AutoClear falso, mas oscilador está oscilando a escala para cima e para baixo com base em alguns configurações. Então, você pode ver apenas a partir desta quantidade simples de código, podemos começar a obter alguns padrões bastante interessantes e, obviamente, isso é apenas um retângulo se colocarmos em alguns svg ou alguns outros ativos, você pode começar a imaginar como eu estou tendo um auge no Tumblr com estas coisas, criando estas pequenas animações no Tumblr. Apenas usando essas propriedades muito simples. Nosso exemplo nove, uma prévia do incrível que está por vir. Temos um último arquivo aqui. Eu só queria mostrar o SVG rotativo. Então, nos outros arquivos, estávamos girando alguns retângulos. Se eu fosse abrir a pasta exemplos 10, você poderia ver que eu tenho uma falha de dados, então certo, há um build.pde, há Hype.pde, mas agora há uma pasta de dados e dentro dessa pasta de dados, eu tenho dois svgs. Eu tenho uma pequena engrenagem e eu tenho uma grande engrenagem. Então, eu só fiz isso no Illustrator e os produziu como ativos svg. O que eu quero fazer é animar essas engrenagens. Então, dê uma olhada. Eu, basicamente, esta é a adição da obra de arte e a rotação da obra de arte. Então, você pode ver aqui. Estou dizendo que quero importar um SVG. Por favor, vá buscar a engrenagem pequena. Quero habilitar o estilo falso. Então, se você se lembrar da primeira classe que mata qualquer uma das cores que foi especificada dentro do Illustrator, eu não ancorei no centro, porque eu quero que a engrenagem gire em torno de seu ponto central. Dei-lhe uma localização para 223 no x, 413 no y, e obtive como uma laranja escura e depois olha o que eu fiz aqui. Eu disse, “H gire, hey, eu quero girar svg1 negativo 0.5.” Então, no próximo bloco aqui, eu disse, “Ok, svg2, vá buscar o SVG grande.” Mais uma vez, ativar stylus false, novamente, Eu quero um centro. Eu estou colocando isso em um x e y de 690 para 60 e o preenchimento é uma laranja média, e eu disse hRotate svg2 0.3333. Agora, quando eu realmente executar este esboço, você veria que eu tenho uma animação dessas duas engrenagens girando um contra o outro. Tudo isso está usando é hRotate. A coisa boa é, se eu apenas mover isso para o lado aqui e eu vou apenas abrir um novo navegador porque HYPE não é um arquivo jar. Eu só quero mostrar aqui que se eu for para movabletype.com, você pode ver que eu realmente publiquei isso em JavaScript. Então, essa é na verdade a animação que está sendo executada aqui no fundo do site do tipo móvel. Eu sou capaz de criar essa animação usando tela. Então, eu abri isso no processamento, eu mudei o modo para JavaScript, e realmente fiz isso usando o processamento JS, que faz uma tela e você está vendo essa animação na tela. Então, olhe para estas 29 linhas de código. Eu era capaz de produzir esta animação para este site em cerca de, eu acho, 11 minutos e isso é o que o HYPE é ótimo em fazer, está me ajudando a protótipo e esboçar ideias muito rapidamente sem ter que escrever muito código. Então, eu era capaz de usar HYPE para puxar as formas e usar HRotate para animar essas engrenagens uns contra os outros que se sentariam lindamente em segundo plano, e novamente isso é executado em tablets e navegadores mais modernos. Incrível. Isso conclui o hRotate e uma seção âncora. Agora vamos passar para a próxima série de vídeos que lida com cada tela e como pintar para algo diferente do palco. Então, veja na próxima seção. 9. Introdução ao HCanvas: Agora, ótimo. Nós giramos algo, mas aquele objeto que nós giramos na seção anterior, bem como na primeira classe, tudo foi pintado no palco. Então, precisamos de um backup por um segundo e agora vamos cobrir HCanvas. O que é HCanvas? HCanvas está processando gráficos P. Então, pense nisso como você está criando uma imagem e nós realmente vamos pintar para essa imagem. Agora, por que isso é melhor do que pintar para o palco? Bem, podemos empilhar vários HCanvases um em cima do outro. Assim, assim como o Photoshop ou o Illustrator, podemos usar o HCanvas para fazer camadas, certo? Então, podemos ter certas coisas pintadas em um plano inferior e certas coisas sendo pintadas em um plano superior. Então, o outro benefício de ter esse tipo de camada de tela é pensar se estávamos pintando para palco e temos algum tipo de comportamento como desvanecimento ou desfocagem. Esse desvanecimento ou desfocagem aconteceria a cada coisa que estava sendo pintada no palco. Então, outro benefício do uso do HCanvas é que podemos especificar tipos de desvanecimento ou desfocagem para acontecer somente em uma camada por tela. Assim, por exemplo, uma animação pode acontecer em nossa camada superior que não tem nenhum tipo de desvanecimento, mas podemos ter um comportamento de enxame na parte inferior que queríamos deixar trilhas. Então, nesta seção, você verá que usar HCanvas tem maiores benefícios do que apenas pintar diretamente para o palco. 10. Unidade 3, Vídeo 1: Está bem. Estamos agora em HCanvas. Novamente, anexado à seção há um arquivo zip para cada tela, e há seis arquivos de exemplo nesta pasta. Agora, na primeira classe e até este ponto, temos pintado objetos no palco. Sim, então temos estado a dizer H.Add e o que acontece é que quaisquer objectos com os quais estamos a pintar se são desenháveis como elipses ou retângulos, ou se são imagens, ou caminhos ou SVG, todo esse conteúdo tem sido pintado no palco. Então, em alguns cenários isso não seria favorável. Vamos descobrir quais são esses cenários. Então, vejamos o primeiro exemplo. O primeiro exemplo é como um exemplos Hrotate. Parece que estamos anexando um Hrect chamado R1. R1 é um quadrado que é 100 por 100. Tem cerca de 10. Tem uma âncora de 50 e 125. A localização é o meio da tela com divisão por dois, altura dividida por dois. Este retângulo não tem um traçado, e é uma cor de preenchimento de laranja. Você pode ver que temos um Hrotate, e ele está girando R1 e está girando a uma velocidade de dois graus cada vez. Agora, você vai notar na linha cinco que eu estou configurando AutoClear falso. Então, eu não quero que ele limpe a tela, eu quero que ele continue pintando as trilhas. Agora, veja o que acontece quando rodamos este esboço. Você notará que o retângulo começa, e voilá. Como estamos fazendo AutoClear falso, ele pinta o retângulo em torno da rotação e, obviamente, uma vez que ele faz uma volta completa de 360 graus, você não tem idéia de que realmente uma animação está acontecendo aqui. Mas, na verdade, há um que as caixas estão lentamente fazendo uma rotação em torno desse caminho. Então, e se eu quisesse desvanecer isso? E se eu quisesse que aquela caixa deixasse um rastro, mas depois desvanecesse lentamente o rasto no fundo? Agora, vou mostrar-vos um truque de não-propaganda para fazerem isso. Você provavelmente verá isso em muitos esboços de processamento. Então, o exemplo um é um problema que precisamos resolver. Então, vamos passar para o exemplo dois. Agora, se você entrar no exemplo dois, você vai notar que é esta cópia de um exemplo um, no entanto, eu fiz algo um pouco complicado no sorteio. Novamente, você pode ver isso em outros esboços de processamento, mas ele tem algumas limitações. Agora, o truque é dentro do desenho, antes de eu pintar esse retângulo movendo-se em uma rotação, eu estou dizendo ok, eu quero criar um preenchimento, e esse preenchimento é 20, 20, 20, a mesma cor exata do fundo, mas em vez de o alfa ser 255, o alfa é apenas 10. Então estamos criando um preenchimento, mesma cor que o plano de fundo, mas ele tem um alfa de 10. Agora, olhe para a linha 21. Aqui está o pequeno truque divertido que as pessoas têm usado, que é, se tivéssemos o palco e se fizéssemos um retângulo do mesmo tamanho exato do palco, mas esse retângulo tinha esse preenchimento de 20, 20, 20 em um alfa de 10, e foi pintado em cima do palco? Em seguida, o retângulo seria desenhado, em seguida, o loop seria executado novamente. Então, ele está constantemente batendo este enorme retângulo, do mesmo tamanho que o fundo, mas com um preenchimento e um alfa de 20. Então, fazendo isso uma e outra vez, parece queimar a trilha no fundo. No entanto, se você usou este truque você sabe o que vai acontecer a seguir, que é, ele tem um pouco de uma limitação. Então, se testarmos o esboço, você verá que, sim, ele de fato começa a queimá-lo, mas porque o preenchimento é apenas um alfa de 10, por algum motivo o processamento não o constrói o suficiente para realmente queimá-lo de volta todo o caminho para o fundo. Então, você pode notar que ele realmente deixou um fantasma verde de um círculo, ele realmente não queima completamente para o fundo. Então, um pouco de limitação lá. Então eu quero obter esse efeito, mas eu não quero que esse resíduo seja deixado em segundo plano. Então, nesta seção eu quero manter o vídeo curto então eu vou parar aqui, então vamos passar para o exemplo três que vai usar este conceito de tela. Então eu vou parar o vídeo aqui, vamos passar para o próximo e eu vou entrar nas porcas e parafusos de usar cada tela. Vejo você no próximo vídeo. 11. Unidade 3, Vídeo 2: Está bem. Estamos no exemplo 3 que vai ilustrar esta ideia de HCanvas. Agora, cada tela dentro do processamento é um gráfico P que basicamente significa que é uma imagem. O que eu quero fazer é pintar para essa imagem, não para o palco. Está bem. Então, uma boa analogia seria como o Photoshop. Quando você inicia o Photoshop e começa a criar algum trabalho artístico, normalmente você tem uma camada no arquivo da camada e essa camada é chamada de plano de fundo. E você diz, eu quero uma nova camada, e isso adiciona uma nova camada no topo e então você começa a fazer arte dentro daquela coisa, e isso não tem nada a ver com o fundo. Então, mesmo conceito exato que é, nós temos nosso palco e nós vamos adicionar cada tela acima do palco e nós vamos estar pintando para isso. Você verá em alguns desses arquivos posteriores que tem enormes vantagens. Então, vamos dar uma olhada neste arquivo. No topo aqui, você vê HCanva c1, tela um, e você verá aqui nas linhas, bem mais importante, eu só quero apontar na linha 6. Você vai notar que eu removi AutoClear (false), certo? Se eu voltar para o exemplo 1, por exemplo, você verá I set AutoClear (false). Então, eu removi AutoClear (false) da linha 6 porque esse é o palco e eu não vou estar pintando para o palco. Então, você pode ir em frente e limpar o palco porque a única coisa que eu vou pintar para ele é esta tela. Está bem. Então, você notará que eu removi AutoClear (false) da linha 6. Agora, as linhas 9 e 10 são novas. Ele diz, “c1 = new HCanvas” e aqui é onde colocamos o AutoClear (false). Quero aquela imagem que estamos pintando, não quero limpar isso antes de pintar de novo. Então, agora estou deixando as trilhas na tela. Olhe para a linha 10, você está dizendo, “H.add (c1)”. Então, você tem o seu palco e, em seguida, acima do seu estágio, você está adicionando este HCanvas. Agora, vamos em frente e olhar para a fixação do retângulo. Então, aqui está o nosso retângulo e você vai notar que ele é praticamente o mesmo do exemplo 1, exemplo 2 exceto para a linha 13. linha 13 diz para não adicionar isso ao estágio H, adicionar isso a esta tela que acabamos de criar chamada c1. Então, lembra do exemplo de aninhamento que fizemos no HRotate? Exatamente o mesmo conceito. Então, nós temos nosso palco, nós temos nossa tela e nós estamos realmente pintando o retângulo no HCanvas, certo? Então estamos aninhando. Está bem. Então, novamente, sem h.add (r1), é c1.add (r1). Tudo bem. Novamente, estamos fazendo uma pequena rotação no r1 e no sorteio estamos apenas pintando H.DrawStage. Agora, veja o que acontece. Agora, você deve notar que meu arquivo tem uma coisa faltando, então o zip e eu estou fazendo isso por uma razão. Veja acontecer! O que Josh! Filme de teste. Agora, agora mesmo. Está bem. Execute o esboço e olhe, ele se parece exatamente com o arquivo 1 no sentido de que ele não está desvanecendo em tudo, certo? Não está queimando. Mas novamente, nós temos nosso palco, nós temos nossa tela, e nós temos nosso retângulo que está girando dentro da tela. Agora, tudo que eu tenho que fazer, novamente você vê isso no seu arquivo, bem aqui em cima, eu posso colocar fade e depois passar um número. Neste caso, quero desbotar um quatro. Então, se eu for em frente e executar este esboço agora, você verá que ele está basicamente fazendo o que o exemplo 2 fez, exceto pelo seu perfeito desvanecimento de pixels, que ele realmente não deixa esse fantasma verde para trás neste arquivo. Então, incrível. Está bem. Então, espero que você entenda o que está acontecendo aqui é que nosso palco está segurando nosso HCanvas e nosso HCanvas é o que está segurando nosso retângulo e colocando neste fade quatro, estamos queimando essa coisa. Então, obviamente, o menor número que você pode colocar é um desaparecimento de um e isso iria lentamente, certo. Então, isso iria queimar lentamente. Na verdade, tão lento que não tem chance queimá-lo antes que o loop comece novamente. Agora, deixe-me colocar isso de volta para quatro para que ele imite o seu. Então, eu usei essa analogia do Photoshop e é aqui que HCanvas realmente brilha porque vamos olhar para outro problema que encontraríamos se não estivéssemos usando HCanvas. Está bem. Então, eu vou passar para o exemplo 4. Agora, o exemplo 4 tem HCanvas removido novamente. Eu tirei porque quero colocar outro problema que é, se tivermos três ativos, certo? Então, se nós apenas desviássemos isso muito rapidamente, você veria que isso é um mímico do exemplo 2 exceto no exemplo 2 estamos pintando apenas uma coisa e no exemplo 4 estamos pintando três coisas, certo? Então, eu tenho três ligações para fazer um Hrect. Eu tenho r1, r2 e r3, e novamente eu estou girando-os. Novamente, estou mostrando o truque de criar um preenchimento com um alfa de 10 e depois pintar um retângulo muito grande em cima dele. Agora, a razão pela qual eu estou mostrando isso de novo é porque se eu rodar este arquivo, novamente, você vai notar que ele não queima perfeitamente e nós estamos recebendo aquele fantasma, mas nós estamos recebendo esse fantasma em três cores diferentes agora porque novamente, ele não pode queimar perfeitamente na tela traseira. Então, ótimo. Isso agora mostra essa idéia de, oh meu Deus, e se eu estiver pintando três coisas? Como é que a lona é a amante que eu sempre desejei? Porque como essa analogia do Photoshop, eu posso ter 3 HCanvases, e eu posso pedir a cada um desses três retângulos para pintar em seu próprio HCanvas separado. Se eles estão pintando para seu próprio HCanvas separado, podemos fazer todos os tipos de efeitos diferentes em cada tela, como, “Ei, limpar a verdade automaticamente, não pinte as trilhas.” Ou, “Faça este um desvanecimento de quatro e faça este um desaparecimento de oito.” Então, eu literalmente penso em cada tela como camadas e Photoshop, e eu posso aplicar tratamentos diferentes para essas telas. Então, vamos em frente e fechar este arquivo, e vamos ver a correção no exemplo 5. Então, no exemplo 5, eu corrijo, eu volto para o exemplo três, mas com a estrutura do exemplo quatro. Então, eu quero pintar três coisas. Agora, veja isso. Lá em cima, eu tenho cada tela c1, c2, c3, tela um, tela dois, tela três. Você notará que eu configurei as telas nas linhas nove a 11, onde eu digo: “Ok, c1 é um HCanvas, c2 é um HCanvas, e c3 é um HCanvas, mas eu vou dar a eles configurações diferentes. A tela c1 vai limpar automaticamente verdadeiro, então não vai pintar trilhas. O c2 vai fazer um desvanecimento de oito, e o c_3 vai fazer um desvanecimento de dois. Então, novamente é como configurar três camadas no topo do palco e dar-lhes diferentes propriedades de filtro de animação. Sim. Agora, olhem para as linhas 13 a 15. Esta é a ordem que eles são empilhados. Então, você tem palco, depois c1, depois c2, depois c3. Então, essa é a camada de ordem, porque essa é a ordem que eu colocá-los no código. Então, os estágios primeiro, c1, depois c2, depois c3. Desculpe-me. Agora, cada um dos r1, r2 e r3, eles vão falar com seus c1, c2, c3s. Então, na linha 18, c1, r1, linha 25, c2 para r2, linha 32, c3 para r3. Então, cada retângulo está pintando para sua própria tela separada. Novamente, temos nossas rotações aqui, e no sorteio estamos apenas pedindo para desenhar um palco. Incrível. Vamos executá-lo. Então, eu vou seguir em frente e executar isso, e você vai notar que nós obtemos exatamente o que nós tínhamos previsto, é criar três camadas, três telas pintando nossos retângulos para cada uma dessas telas e tendo um olhar diferente, algo que você não poderia alcançar e processar apenas fazendo isso. Um truque de burnout retângulo dentro do sorteio, porque ele iria aplicá-lo a todos os três. Então, o exemplo cinco realmente começa a, eu acho que pista agora para todas essas grandes coisas que podemos fazer usando HCanvas, que é, “Oh, meu Deus, eu vou pensar em HCanvas como camadas, e talvez em uma camada eu tenho tipo e eu não quero que para deixar trilhas, mas então eu tenho essa outra camada que pode ter alguma animação que está deixando trilhas.” Então, você começa a pensar em cada tela como camadas como no Photoshop e está aplicando efeitos diferentes a cada um desses HCanvases. Então pensei em dar-vos um último ficheiro antes de terminarmos a secção que é o exemplo seis. Exemplo seis vai colocar esses três retângulos um em cima do outro. Então, se você for para o exemplo seis, você vai notar que realmente a única coisa que mudou, e este em particular, é dar uma olhada nos desbotamentos que eu coloquei em um fade dois, um fade quatro, e um fade oito para cada um dos telas. Mas agora, olha o que eu fiz nas linhas 13 a 15, eu inverti a ordem em que eles se apegam. Então, eu disse, “Ei, eu quero o palco, depois eu quero a tela 3, depois a tela 2, e depois a tela 1.” Então, eu mudei a ordem de empilhamento porque isso se relaciona com o desvanecimento. c3 vai queimar muito mais devagar, então eu realmente quero isso no fundo. c2 vai queimar um pouco mais rápido, eu quero isso no meio, e c1 vai realmente queimar o mais rápido com um desvanecimento de oito, e eu realmente quero isso em cima. Então, eu realmente inverti a ordem de empilhamento das camadas. A última coisa que fiz foi na linha 19, na linha 26 e na linha 33, eu tenho todos eles no meio da tela. Então, é dividido por dois, altura dividida por dois. Quando você realmente executar isso, porque eles são três cores diferentes, e porque eles estão em três telas diferentes, e porque eles estão queimando em três taxas diferentes, ele cria isso realmente bonito gradiente. Então, você pode fazer esses truques onde estamos usando HCanvas conceitualmente como criar camadas, e podemos tratar cada uma dessas camadas com efeitos diferentes como, por favor, limpe o plano de fundo, ou não limpe o plano de fundo, vá em frente e adicione um desvanecimento. Incrível. Vamos usar muito HCanvas, porque novamente, quando penso na criação de animação, quero uma camada de coisas em níveis incertos, e HCanvas nos permite fazer isso. Então, novamente, nada está acontecendo no palco, tudo está acontecendo nessas camadas HCanvas. Doce! Isso encerra esta seção. Vamos usar HCanvas uma tonelada no resto das seções. Em seguida, vamos passar para HFollow, que neste ponto, rotação realmente não teve qualquer entrada. Cada tela não tinha nenhuma entrada. Então, HFollow é o próximo comportamento de animação que usa a entrada do mouse. Então, ele vai seguir onde fazemos movimentos do mouse. Então, encerrando cada tela, te vejo em um HFollow. 12. Introdução ao HFollow: Então, nesta seção vamos estar cobrindo H-follow, Okay.h-follow vai estar usando nestes exemplos o mouse como entrada. Então, em algumas das seções posteriores vamos estar aprendendo sobre comportamentos e comportamentos podem ser executados de forma independente, mas neste caso em particular H-follow vai realmente usar o mouse como entrada. Então, à medida que começamos a mover o mouse pela tela ou realmente executar gesto, teremos algo que realmente segue esse movimento de gesto. Agora, H-follow tem um monte de parâmetros diferentes que podemos realmente aplicar a isso. Então, por exemplo, se eu pintar um objeto na tela e então eu digo que eu quero que este objeto siga H, é uma proporção um-para-um, o que significa que em todos os lugares que eu movo meu mouse, esse objeto fica preso a essa posição específica do mouse. Mas, podemos realmente estender esse comportamento introduzindo mais alguns argumentos. Então, eu posso dizer coisas como este H-follow tem uma facilidade ou uma mola para ele, e se eu dissesse que H-follow tem flexibilização, enquanto eu mover meu mouse o objeto faria uma transição lenta para o mouse. Então, enquanto eu me movia, seria meio que lentamente ficar atrás. Então, você teria esse movimento gentil e agradável. Se eu implementar uma mola, você obtém elasticidade ou faixa de borracha. Então, eu poderia começar a mover meu mouse ao redor e o objeto seria realmente elástico em torno desse movimento específico do mouse. Então, com o final desta seção em particular, vamos aprender como mover o mouse, executar gesto, que é uma ótima combinação com colorista de pixels, certo? Então, este último arquivo que vamos trabalhar, nós realmente vamos carregar em uma fotografia e nós podemos realmente mover o mouse muito como um pincel e realmente pegar cor de uma fotografia. Então, Será uma maneira interessante de realmente fazer um retrato de alguém porque você usaria essa informação de retrato dessa fotografia e usando H-follow para executar como um pincel personalizado. 13. Unidade 4, Vídeo 1: Olá. Bem-vindo ao HFollow. Agora, nos primeiros exemplos, usamos animações que não foram conduzidas por nenhuma entrada. Então, com HFollow, vamos cobrir como usar o mouse para realmente conduzir a entrada. Então, vamos executar um gesto e algo vai seguir nosso mouse. Agora, se você baixar o arquivo zip associado a este vídeo, você deve descompactá-lo, abri-lo e ver que há seis arquivos associados ao HFollow. Agora, eu tenho um exemplo aberto agora e você vai notar que, eu tenho alguns comentários adicionados neste arquivo para que você possa ver algumas das funcionalidades do HFollow, alguns dos argumentos que ele suporta, bem como aprender a registrar , cancele o registro, adicione ou remova um comportamento. Então, se você é um programador intermediário para o processamento, eu estou apenas mostrando alguns dos conjuntos de recursos do HFollow. Tudo bem. Então, vamos analisar este primeiro arquivo. Você pode ver aqui no topo, Eu estou criando uma instância de HFollow chamado mf para mouse follow. Eu tenho r1, hRect onde auto clear não está presente aqui então nós sabemos que vai estar limpando o fundo. Temos o nosso retângulo, é um 100 por 100 com um quarto de raio de 40. Não estamos aplicando nenhum traço ao r1. O preenchimento vai ser um tom claro de cinza ECECEC. O local para começar é no centro da tela, com divisão por dois, altura dividida por dois. O ponto de ancoragem vai estar no centro e eu vou simplesmente girar este retângulo 45 graus. Então, girando a 45 graus, deve parecer um diamante. Eu vou em frente e adicionar r1 ao palco e, em seguida, aqui eu especificar o acompanhamento do mouse. Então, eu digo mouse siga, você é um novo HFollow e o alvo é r1. Claro, evite desenhar simplesmente como H.DrawStage. Agora, se eu rodar este esboço, você vai notar que é basicamente uma proporção de 1 para 1. Então, onde quer que o mouse vá, o r1 fica preso a essa posição. Portanto, não há latência. Eu só mexo isso e onde quer que eu vá ele vai. Então, basicamente, HFollow é uma maneira, como um atalho para fazer a posição x e y do mouse. Agora, você pode estar olhando para esses comentários e perceber, oh, ok, há algumas outras características aqui. Então, eu pensei em estourar esses recursos dois exemplos separados. Então, vamos em frente e olhar para o exemplo dois. Agora, a única coisa que é diferente no exemplo dois é aplicar alguma “facilidade” a este seguimento. Então, se você olhar para a linha 21 aqui, temos um mouse seguir é um novo HFollow. O alvo ainda é r1, mas adicionamos uma facilidade de 0,1. Então, não será uma proporção de 1 para 1 de onde o mouse está. Na verdade, vai facilitar a posição. Então, se eu executar este esboço, você deve notar que enquanto você move o mouse, r1 está perseguindo o mouse, mas ele tem alguma flexibilização para ele. Então, não é uma proporção de 1 para 1, mas lentamente anima no lugar. Agora, há outro argumento além da facilidade, então se formos em frente e fecharmos o esboço e olharmos para o exemplo três, a única coisa que é diferente no exemplo três é que adicionamos o atributo de primavera. Então, nós queremos obter alguma elasticidade acontecendo aqui. Então, você verá que eu ainda tenho facilidade em 0,1, mas eu tinha aplicado alguma primavera para este HFollow e que a primavera está fazendo 0,95. Novamente, se rodarmos este esboço aqui, veremos que não é uma proporção de 1 para 1. Ele realmente facilita para o mouse, mas também tem essa elasticidade. Então, é muito divertido se você acabar fazendo os círculos aqui. Você tem esses belos padrões elásticos. Agora, com isso, você pode ver que este poderia ser um bom sistema para fazer pincéis. Eu poderia usar isso como um pincel e alguém poderia executar um gesto e algum tipo de pintura poderia acontecer. Então, vamos em frente e fechar isso e olhar para o exemplo quatro e o exemplo quatro apenas diz, tudo bem, bem, vamos tratar isso como se fosse um pincel. Então, a primeira coisa que eu quero que você perceba é na linha sete, nós dissemos AutoClear (false). Então, como nós realmente movemos gesto, ele vai deixar o caminho porque ele não está limpando o fundo antes de pintar o retângulo novamente. Eu também adicionei um HColorPool e forneceu algumas cores. Então, aqui na linha 10, eu crio o novo HColorPool e, em seguida, eu especificar algumas cores dentro desse pool. Vamos dar uma olhada no r1 porque r1 se ajustou um pouco. Nas três primeiras versões, não estávamos fazendo nada com o derrame. Aqui você pode ver que eu disse, bem, Eu quero fazer o peso do curso também e eu quero fazer o preenchimento um cinza muito escuro; 111111. Então, essa é a mudança aqui e r1 está adicionando um peso de traçado e realmente mudando o preenchimento do EC para o 11. Novamente, a seguir o mouse não foi alterada. Parece que abrandei a flexibilização. Então, a flexibilização é 0,05 e a mola ainda vai ser realmente elástica em que 0,95. Agora, a mudança aqui é on-line 30 Eu disse, ok, como isso é executado, eu quero atualizar o traço do r1 para obter aleatoriamente uma cor fora da matriz de cores das linhas dez. Então, ao contrário de 30, ele vai ser escolher aleatoriamente uma dessas cores. Agora, se eu executar o esboço agora, novamente você deve ver que ele está escolhendo aleatoriamente uma cor de traçado. Mas quando eu comecei a mover meu mouse, eu estou deixando o caminho de onde este mouse elástico segue viajou. Então, novamente, eu posso pensar nisso como um pincel enquanto eu movo a posição do mouse na tela. Então, vamos adicionar a isso. Então, eu pensei, bem, ok isso é bom que nós estamos escolhendo cores aleatórias, mas se você olhar para o exemplo cinco, o exemplo cinco diz, bem, vamos pegar a cor realmente de uma imagem. Então, se você olhar para o exemplo cinco, há realmente uma pasta de dados e dentro dessa pasta de dados, é este JPEG que eu peguei em Sintra Portugal. Vamos usar HPixelColorist para realmente roubar a cor deste JPEG. Então, se você olhar para a linha três aqui, em vez de usar o pool de cores, estamos usando HPixelColorist e, em seguida, nas linhas 10 a 14, eu especifiquei a imagem que HPixelColorist deve usar que é, Ei, vá pegar este sintra.jpeg e você pode ver que eu também estou transmitindo o argumento de que eu só quero aplicar a coloração ao preenchimento. Não para o golpe, não para o preenchimento e o traço, mas apenas para o preenchimento. Tudo bem. Então, vamos olhar para r1 hRect. O único ajuste real que eu fiz aqui foi que eu adicionei uma cor de traço de preto e coloquei em um alfa de 150. Então, o traço não vai ser sólido 255 preto, vai ser um pouco de Alpha para ele. Atualizando o desenho para baixo na linha 35 aqui, você pode ver que estamos dizendo colors.applycolortor_1 e porque a cor é especificada apenas preenchimento, na verdade só vai atualizar os preenchimentos. Então, se eu seguir em frente e executar este esboço, agora eu tenho uma maneira de usar um pincel, mas eu estou realmente amostrando as informações de cor do JPEG fornecido. Então, a posição X e Y do meu mouse está roubando a posição x e y no JPEG e olhando para a cor do pixel nessa posição específica x e y. Então, este é um truque que muitos de nós vimos Eric Netsky usar, onde ele tem esses sistemas que estão pintando e amostrando a cor das fotografias que ele tira. Então, até este ponto, fizemos cinco exames, mas você deve ter notado que não apresentamos nosso bom amigo HCanvas. Então, eu pensei em adicionar um exemplo seis e dentro de exemplos seis, eu tenho oito HCanvas c1 adicionado nas linhas 11 a 12. Estou dizendo, ei, eu quero fazer um HCanvas, a limpeza automática é falsa no HCanvas. Então, eu removi da linha oito moveu-o aqui para que eu não estou limpando automaticamente o HCanvas e eu coloquei naquele adorável fade de quatro e, em seguida, H.addc1 e, em seguida, se você olhar para baixo na linha 25, eu estou dizendo em vez de H.Add eu estou dizendo por favor adicione r1 à tela C1. Tirando isso, todo o resto ainda é o mesmo. Se você seguir em frente e executar o esboço, ele deve parecer exatamente como build 5. Exceto que nós temos aquele belo desvanecimento de pixel perfeito do gesto usando nosso bom amigo HCanvas. Incrível. Então, agora estamos começando a olhar para alguns desses comportamentos. Este é um bom, porque é um gesto. Podemos começar a construir pincéis e não importa se estamos usando um hRect para o pincel ou usando SVG. Então, aqui está uma oportunidade perfeita para tirar algumas das obras de arte que desenhamos na primeira classe e você poderia realmente usar seu SVG como um substituto para este HRCT para que você possa começar a construir esses pincéis personalizados usando HFollow. Agora, na próxima seção, isso é como um avanço perfeito. HRotate apenas correu por conta própria e o mouse HFollow exigiu que você ouvisse o mouse e mova o mouse ao redor. Na próxima seção, vamos falar sobre temporizador então como faço para começar a fazer as coisas com base em um ritmo. Então, cada temporizador me permitiria pintar coisas ou introduzir coisas com base em um ritmo. Claro, se eu tenho algo que é um ritmo constante, eu provavelmente também gostaria de mostrar HRandomTrigger e HRandomTrigger, como o timer diz, eu quero disparar coisas , eu quero introduzir coisas, mas eu não quero fazê-lo em um ritmo muito constante. Quero aleatorizar esse ritmo. Então, é isso que HRandomTrigger é. Então, isso encerra um HFollow. Vamos passar para os temporizadores. Vejo você na próxima seção. 14. Introdução ao HTimer e HRandomTrigger: Então, com o HTimer, basicamente temos um pulso constante de ações. É baseado em um ritmo. Então, se eu definir um intervalo para cada 1.000 milissegundos, isso significaria que eu tenho uma ação sendo acionada a cada segundo. Eu também tenho a capacidade de definir algo como ciclos numérmicos, que é quantas vezes eu quero que este ritmo seja executado. Então, quando esse pulso acontece, eu basicamente tenho um retorno de chamada. Então, vamos trabalhar em um arquivo que usa HTimer para pintar coisas de forma muito constante na tela. Então, enquanto HTimer usa um pulso constante para criar algo, um bom companheiro para isso é HRandomTrigger, e HRandomTrigger é baseado em um ritmo aleatório. Então, há uma porcentagem de chance variável. Então, por exemplo, se eu dissesse que queria um gatilho aleatório, mas escrevi algo como 1/15, isso significaria que o gatilho aleatório tem uma chance de 1 em 15 de ser criado. Então, você ainda está criando um ritmo, mas não é um ritmo constante, é um deslocamento um pouco baseado em uma porcentagem aleatória. Então, você pode obter bop, bop bop bop bop, bop, bop. Então, ainda estamos criando com o tempo, mas não é um ritmo constante como usado anteriormente no HTimer. 15. Unidade 5, Vídeo 1: Está bem. Nesta seção, vamos cobrir temporizadores. HTimer, que como eu mencionei antes, vai disparar algo baseado em um pulso e cada gatilho aleatório que vai acionar aleatoriamente um pulso baseado na chance, probabilidade. Então, neste vídeo, vamos realmente anexar a este vídeo, você deve ver que há realmente um arquivo zip. Se você baixar esse arquivo zip, deve haver nove arquivos nesse zip. Os sete primeiros lidar com HTimer e , em seguida, há dois lá que lidam com HRandomTrigger. Neste vídeo em particular, vamos cobrir os quatro primeiros exemplos no HTimer. Agora, vamos em frente e abrir o exemplo um, que é HTimer um. Neste exemplo em particular, na verdade, nada é pintado na tela. Nós estamos realmente apenas indo para imprimir uma saída para a janela de saída aqui dentro do Sublime Text 2 que vai apenas dizer Olá Mundo e um contador. Então, vamos dar uma olhada no temporizador. Tem alguns argumentos que provavelmente queremos discutir. O primeiro é aparecer no topo. Eu digo que o HTimer é um temporizador. Esqueça o balcão por um momento. Nada muito acontecendo em termos de tamanho, fundo, o que não, mas aqui nas linhas nove a 20, eu realmente especificar o temporizador. Então, eu digo, temporizador é igual a um novo HTimer e, novamente, vamos olhar para alguns dos argumentos do temporizador aqui. O primeiro é NumCycles. Agora, se você realmente não tem essa linha, então o temporizador funciona indefinidamente. Vai correr até que você feche o filme. Neste caso, estou a mostrar-te que só quero que o temporizador dispare 10 vezes. Um, dois, três, quatro, cinco, seis, sete, oito, nove, dez e então ele desliga. Agora, se isso vai funcionar 10 vezes, qual é o intervalo entre cada vez que é demitido? Então, você pode ver aqui na linha 11, nós especificamos um intervalo e é na verdade em milissegundos. Então, neste caso, ele vai disparar a cada 500 milissegundos ou aproximadamente a cada meio segundo. Agora, o que acontece quando o temporizador dispara? Na verdade, essa é a nossa chamada de volta. Então, você verá aqui dentro do callback, novamente, eu só vou imprimir para a janela de saída na parte inferior do Sublime Text 2. Eu só vou dizer olá, mundo e, em seguida, contador, quantas vezes isso realmente disparou para que eu possa testar que ele realmente fecha depois NumCycles chega a 10. Então, para contar, aqui no topo, estou dizendo que contador é igual a um e, em seguida, na linha 15, eu estou dizendo, ok, imprima “Olá, mundo” mais qualquer que seja o valor do contador. Então, depois de ter feito com isso eu só digo, mais, mais contador. mais, mais contador diz adicionar um para o valor do contador. Então, um mais um se torna dois. Dois mais um se torna três. Três mais um torna-se quatro, e assim por diante. Então, vamos em frente e testar este esboço, e novamente, nós não devemos ver nada no palco, mas você deve notar dentro da janela de saída que ele realmente diz olá, mundo 10 vezes, um a 10 e então você vai notar que realmente pára. Então, novamente, HTimer nos permite executar algo baseado em um pulso e usando o argumento de NumCycles, eu posso dizer quando eu realmente quero que ele para desligar. Você vai ver um pouco mais tarde isso seria muito útil com piscinas. Porque se eu disser que quero desenhar 100 coisas, talvez eu queira que este temporizador seja encerrado depois de ter exibido todos os 100 objetos. Ótima. Então, eu vou ir em frente e fechar esse arquivo e eu vou seguir em frente para construir dois. Agora, construir dois, vou começar a fazer algumas coisas, visual na tela. Então, vamos apenas verificar este arquivo e ver o que temos acontecendo aqui. Então, no topo, novamente, temos o nosso HTimer, temos o nosso HRCT, e novamente nada acontece muito com o fundo. Se olharmos para r1, linhas nove a 15, parece que estamos fazendo um retângulo, novamente, esse retângulo é 100 por 100 com Raio de Canto de 10. Vou adicioná-lo ao palco, H.Add localização. Agora, vamos ver a localização aqui. A localização diz: “Ei, quero que escolha um lugar aleatoriamente na tela. Então, eu digo, inteiro aleatório com uma altura aleatória inteira. Isso basicamente significa que ele vai escolher um número entre zero e 640, mas porque envolveu um int na frente dele significa que vai ser um número inteiro então não vai escolher decimais. Então, eu vou pegar 1, 45, 122, etc. Este HRCT não tem derrame. Tem um preenchimento de laranja, FF3300 e novamente, eu rodei 45 graus. Agora, antes de chegarmos ao temporizador, apenas entendemos que temos o nosso palco e ele vai escolher aleatoriamente algum ponto e vai pintar o retângulo. Agora, o que estou fazendo no temporizador é que vou refazer a posição de r1. Então, se você olhar aqui, como no primeiro arquivo, não há NumCycles, que significa que eu quero que isso seja executado infinitamente. Então, se você olhar para a construção dois aqui não há NumCycles, o que significa que este temporizador só vai funcionar até fecharmos o filme. O intervalo é a cada 250 milissegundos, então um quarto de segundo. A chamada de volta diz: “Ei, R1. Quero redefinir a sua localização, largura aleatória, altura aleatória. Então, agora, se testarmos o esboço, que vocês devem ver na tela aqui é que a cada 250 milissegundos, um pulso muito rápido, ele está reerandomizando a localização do r1. Então, novamente, nós não estamos lidando com pool neste ponto, nós apenas temos um ativo e com base em um tempo aqui, 250 milissegundos, nós estamos reomizando a localização deste retângulo. Ótima. Vamos começar a construir três. Agora, construir três, novamente eu vou apresentar algumas coisas novas, mas realmente é apenas uma cópia de duas. A primeira é que vou adicionar uma piscina de cores. Então, aqui no topo você percebe que eu coloquei um cores HColorPool e eu só adicionei algumas cores aqui na linha 10. Agora, a linha 17 é um pouco de uma edição. Em vez de passá-lo uma cor eu digo, hey cores, dê-me uma cor aleatória de cima. Então, linha 17 é aleatoriamente vai escolher uma das cores dentro do nosso HColorPool. Agora, eu adicionei uma outra coisa aqui, é que eu queria realmente aleatorizar o tamanho. Então eu disse, ok, o tamanho deve ser aleatório três mais 25. Então, se você olhar para isso, por exemplo, três vezes 25, isso vai escolher um número aleatório zero, um, dois. Então, zero vezes 25 é zero, um vezes 25 é 25, e dois vezes 25 é 50. Então, sabemos que essa randomização vai nos dar os números zero, 25 e 50. Mas olha, depois que ele escolhe este aleatório, ele realmente adiciona 25 nele. Então, o número que estamos realmente recebendo é um tamanho de 25, um tamanho de 50 e um tamanho de 75. Então, estamos apenas aleatorizando esses três números: 25, 50 e 75. Então, novamente, não há NumCycles, isso vai ser executado infinitamente. O intervalo é agora 50 milissegundos, então vai acontecer muito rapidamente. Novamente, é só falar com o R1. Na linha 28, eu digo sim, quero aleatoriamente a localização. Mas então eu digo, hey, eu também quero voltar a escolher uma nova cor do HColorPool, e vamos escolher um novo tamanho novamente, e novamente, esse tamanho vai ser 25, 50 ou 75. Agora, aqui está a coisa que eu quero que você perceba é que a limpeza automática é realmente definida como falsa. Agora, vamos fingir por um momento que isso não está lá, se eu parar com isso. Se eu realmente testar o esboço aqui, novamente, notar que é r1, estamos apenas movendo esse ativo, mas estamos refazendo sua posição, estamos reandomizando a cor de preenchimento, e estamos refazendo o tamanho. Mas novamente, a razão pela qual eu coloquei naquele auto limpar um falso é porque eu não quero que ele limpe o fundo. Então, se isso correr agora, você vai notar que parece que ele está pintando um número infinito de retângulos, mas na verdade, ele está apenas pintando um e apenas mudando sua localização, mudando sua cor de preenchimento, e mudando seu tamanho. Mas como dizemos auto clear false, ele realmente não limpa a tela. Então, isso eventualmente preencherá todo o estágio. Ótima. Então você provavelmente pode descobrir neste ponto o que eu vou fazer com o exemplo quatro. Então, vamos em frente e fechar isso e vamos atolar para HTimer quatro e com certeza, a primeira coisa que você deveria ter esperado era que nós íamos adicionar HCanvas. Vamos re-andomizar este retângulo mas dentro de uma tela para que possamos realmente desvanecê-lo. Então, olhem para as linhas oito. Novamente, eu tirei o auto clear true do palco e adicionei aos objetos da tela. Então você pode ver aqui c1 é um novo HCanvas, auto clear false, e ele vai fazer um desvanecimento de dois e nós adicionamos nosso c1 HCanvas para H, o palco. Novamente, olhe aqui na linha 17, em vez de fazer H.add r1, fazemos c1.add r1. Então, estamos pintando o retângulo dentro do HCanvas. Fora isso, todo o código permanece inalterado. Vamos em frente e salvar e testar este esboço, e você deve notar que ele está executando a mesma animação em três, mas nosso lindo HCanvas está lentamente queimando os retângulos. Incrível. Então, eu vou terminar este vídeo aqui. Vamos passar para o próximo vídeo. No próximo vídeo, vamos lidar com HTimer cinco, seis e sete. Mas, pelo menos neste momento, você está entendendo que HTimer é uma maneira para nós anexarmos algo, mas baseado em um pulso estável. Quando passarmos para o HTimer 5, vamos começar a falar sobre piscinas como fizemos na primeira classe. Então, vamos terminar aqui e te vejo no próximo vídeo. 16. Unidade 5, Vídeo 2: Ok. Estou super animado com os próximos três arquivos. A razão pela qual eu realmente amo esses próximos três arquivos é que eu sinto que eles tão estreitamente relacionam estrutura-wise com os arquivos que fizemos na primeira classe. Então, há algumas coisas aqui que você será capaz de copiar e colar da primeira classe e realmente obter coisas animadas. Então, vamos olhar para HTimer5. Novamente, HTimer5 realmente começa a usar a estrutura que fizemos na primeira classe. No sentido de que, finalmente, estamos dizendo olá para HDrawablePool. Então, este arquivo muito semelhante aos primeiros com algumas pequenas edições aqui. Agora, HDrawablePool pool pool na parte superior. Isso é ótimo, e eu vou destacar todas essas coisas aqui que são linhas nove a 33. Antes mesmo de percorrermos este código, só quero dizer o que falta. O que está faltando é o que estaria na linha 34, que é ou na verdade, estaria entre as linhas 32 e 33. Seria isso. Solicite tudo. Então, na primeira classe, quando você ligou para o RequestAll, você estava dizendo, “Me dê tudo na piscina. Pinte na tela porque estamos fazendo impressão e eu preciso de tudo agora.” Então, a primeira coisa que você deve notar é que se foi. A razão pela qual isso se foi é porque esta é uma aula de animação e queremos animar nossa arte. Então, ainda vamos usar Pool. Nós ainda podemos usar Pool em conjunto com um layout de grade ou layout de forma ou o que você fez com a primeira classe. Mas se você remover o RequestAll e cortar este temporizador, você realmente poderia animar suas grades. Então, a primeira coisa que você deve notar é que a chamada para RequestAll foi realmente tirada. Agora, vamos em frente e olhar para esta piscina que temos aqui. Na linha nove, eu estou dizendo piscina é novo HdrawablePool e, hey, eu quero pintar uma centena de coisas. Diz Pool.AutoAddToStage para que saibamos que vai pintar no palco. Bem, o que estamos pintando? Bem, estamos pintando nosso bom amigo, Hrect, e tem um quarto de raio de arredondamento de 10. Temos uma chamada para um colorista. Eu não tenho certeza se nós cobrimos isso na primeira classe sendo capaz de fazer o atalho em vez de dizer um HColorPool, HdrawablePool pode ser chamado de um método colorista. Dentro do método colorista, estou criando um novo HColorPool e passando as cores, e especificando que eu só quero que eles coloram os preenchimentos. Agora, você deve se lembrar da primeira classe, você tem este método OnCreate aqui, e este método OnCreate é o que acontece cada hRCT individual para todos os nossos HRECTs que estão sendo criados na tela. Então, eu disse, “Ok, legal. HDraWabled, o que eu quero fazer com este drawable?” O Drawable é o HRect. Por que, eu diria, “Ok, eu quero bater peso para quatro. Eu quero que o golpe seja preto e eu quero que o Alfa seja 75 em vez de 255. Como os primeiros quatro arquivos, o local é largura aleatória, altura aleatória. Estou girando a rotação 45 graus. Novamente, estou fazendo um tamanho aleatório aqui então o tamanho vai ser 50, 100 e 150 porque estamos fazendo aleatoriamente três vezes 50, mais 50, e a âncora no H.CENTER. Então, essas linhas aqui, nove a 33, estão montando a piscina e o que você quer fazer com cada um dos elementos individuais dentro dessa piscina? Mas novamente, RequestAll se foi. Então, o que fazemos aqui? Bem, temos o nosso temporizador. Se você olhar para o nosso temporizador aqui, eu estou dizendo, “Bem, eu quero animar cada um desses 100 objetos em vez de apenas vê-los todos de uma vez.” Então, olhe para a linha 36, NumCycles. NumCycles é Pool.NumActive. NumActive vai contar quantas coisas são pintadas na tela de cada vez, até chegar a cem. Então, Pool.NumActive é uma maneira de descobrirmos se anexamos todos os nossos 100 ativos na tela. Se tivermos todos os 100 ativos na tela, então este NumCycles vai desligar o temporizador. O intervalo é a cada 100 milissegundos e quando este temporizador dispara a cada 100 milissegundos, o que vamos fazer? Esse é o nosso retorno de chamada. Dentro do nosso retorno de chamada, dizemos: “Ei, quero pedir um de seus caras.” Quando você diz pool.request, ele vai para a piscina. Ele diz, “Ei legal, você está pedindo o primeiro, eu posso te dar uma centena em criar”, e ele dispara o OnCreate. Então, este temporizador continua fazendo um pool.request até chegarmos a cem. Assim que chegarmos a cem, o NumCycles vai desligar o temporizador e pool.request não vai disparar a 101ª vez. Só disparará cem vezes. A função de desenho, ele só tem um H.DrawStage. Incrível. Vá em frente e execute este esboço, e o que vai acontecer vai se animar. Este não é o mesmo retângulo, é uma centena de retângulos diferentes. Então é aí que ele varia desde o primeiro, bem, HTimer4, por exemplo. Em HTimer4, estávamos apenas nos movendo em torno de um item. Aqui, o que estamos vendo na tela são 100 itens separados. Então, como eu disse, você pode pegar um pouco desse código e realmente cortar o material do temporizador, colá-lo nos arquivos que fizemos na primeira classe e você poderia realmente ter suas grades animadas porque você não está dizendo mais RequestAll, você está usando um temporizador para animar a arte, um pouco de cada vez. Estelar. Agora, deixe-me dizer-lhe por que isso é estelar, é porque olha para o que acontece quando vamos para HTimer seis. Agora, vamos apenas esfregar algumas das coisas que mudaram. Então, cinco e seis são cópias um do outro com algumas edições. Htimer seis, temos nosso HCanvas, isso é ótimo. Então, nós temos uma tela lá, você pode ver nas linhas 11 e 12, nós adicionamos a tela ao palco, exatamente como eu esperava, AutoClear é falso e Josh fez um fade para cinco. Então, novamente, ele vai queimar essa animação. Desculpe, eu só estou fazendo uma edição muito rápida porque eu percebi que eu pulei algo e essa é a linha 17. linha 17, novamente, é uma nova adição, que está no arquivo anterior do HTimer quatro, dissemos Pool.AutoAddToStage, o que significava que os ativos HRectangle foram adicionados ao palco. Mas como o HTimer seis realmente tem um HCanvas, veja a edição na linha 17, eu digo, “Ei, pool.AutoParent em c1.” Então esse código é alterado porque não queremos colocar os HRectangles no palco, nós realmente queremos colocá-los aninhados dentro do pai de c1. Ok, edição rápida, de volta para o que diabos eu estava dizendo a seguir. Fora isso, não é muito diferente, exceto para a linha 35. Olhe para isso. Portanto, se o OnCreate estiver criando 100 HRectangles exclusivos, linha 35 criará um hRotate exclusivo com cada ativo individual. Então, o que isso significa é que agora existem 100 retângulos na tela, todos eles são animados separadamente, e eles têm seu próprio hRoTate exclusivo. Olhe o que eu fiz aqui, eu só coloquei um pouco aleatório. Eu disse, “Ei, me dê um alcance, de dois negativos a dois positivos.” Então, alguns vão girar no sentido horário e outros vão girar no sentido anti-horário, mas que girar no sentido horário e anti-horário não vai mais do que dois graus positivos ou dois graus negativos. Agora, vamos conseguir alguns zeros? Sim, o que significa que alguns dos bens não giram em tudo. Isso é totalmente possível. Então, teste o esboço e veja o que acontece. HTimer, a cada 100 milissegundos está solicitando um novo HRectAngle fora do HDrawablePool. Ele anexa o HRetangle e, em seguida, anexa um HRotate com esse ativo. Uma coisa que eu esqueci de mencionar é, deixe-me fechar isso aqui, eu realmente mudei a âncora. Eu coloquei aquele negativo 25 para que você tivesse aquela obra de arte. Então, o pivô está acontecendo negativo 25 acima do HRectangle. Então, veja isso. Por exemplo, se eu mudar o intervalo para 1.000, isso seria a cada segundo. Se eu testasse o esboço aqui, você notaria que há um, há dois, três, quatro, cinco, seis, sete, oito, nove. Veja, está acontecendo em um ritmo e vai fazer isso até todos os 100 retângulos sejam pintados fora da piscina. Mas novamente, e isso começa a aludir à seção de combos, que é, oh meu Deus, o temporizador está introduzindo os elementos na tela, mas à medida que eles são introduzidos, estamos criando um hRotate único com cada ativo único. Então, todos eles são animados separadamente e eles estão recebendo seu próprio hRotate exclusivo, o que é lindo. É um arquivo bonito. Agora, é claro, eu vou fazer o que eu fiz em alguns desses outros pequenos cenários de espreitadela, que é olhar para HTimer 7. HTimer sete é uma cópia do HTimer seis, mas eu não pude deixar de colocar em que o código HOScillator e que o código HOScillator novamente, vai mudar a escala. Então, de novo, aqui eu mudei a piscina. Só estou anexando 50 itens desta vez em vez de 100. O arredondamento é 40 neste. Oscilador vai ser escala oscilante. Então, novamente, vamos cobrir oscilador, eu não vou quebrar isso, mas a coisa boa é que ele vai estar oscilando - HTimer vai estar anexando um ativo único, dando a esse único ativo um hRoTate, e um único Hoscillator. Então, não vou desperdiçar mais o seu tempo aqui. Execute isso e agora estamos recebendo os hRotates exclusivos e também estamos recebendo os HOScillators exclusivos em cada um dos 58 retângulos individuais. Acredite ou não, você pode abrir este arquivo em conjunto com um que você fez na primeira classe, e acredite ou não aquelas grades que você fez usando HGridLayout, você pode jogar em um HRotate e um Hoscillator, e suas grades começarão a animar. Então, vamos terminar a coisa HTimer, vamos passar para HRandomTrigger. Mas eu diria que neste ponto, tente parar esse arquivo e voltar para algum trabalho que fizemos na primeira classe, e sim, tirando esse pedido tudo, colocando um temporizador para adicionar cada um de seus ativos um por Um. Tente copiar e colar o hRotate e HOScillator e veja suas grades ganharem vida. Ok, este vídeo está feito, eu vou vê-lo no próximo, que é HRandom gatilho. Vejo-te mais tarde. 17. Unidade 5, Vídeo 3: Ok, este vídeo não deve ser muito longo porque é apenas uma atualização do que já cobrimos no HTimer. Então, novamente, para reiterar, cada temporizador está usando um ritmo consistente para criar coisas. Então, gatilho aleatório só nos ajuda a compensar esse ritmo literal. Então, vamos em frente e olhar para HRandomTrigger um, e novamente, ele deve se sentir muito semelhante ao material que acabamos de criar usando timer. Então, vamos acabar com isso. Aqui no topo eu tenho HRandomTrigger é um temporizador aleatório, eo código talvez um estruturado um pouco diferente no sentido de que, como se eu olhar para deixe-me puxar para cima construir quatro aqui por um segundo. Então, se você olhar para HTimer quatro, nós tivemos este bloco de código bem aqui que criou uma instância do temporizador e , em seguida, forneceu qual era o intervalo e o retorno de chamada. Então, se olharmos para HRandomTrigger, realmente é apenas um retorno de chamada, e o que eu quero que vejamos agora é a linha 14. Então, a linha 14 diz, “Ok, eu quero criar uma instância deste HRandomTrigger, e eu vou fornecer a vocês um número que representa a chance.” Agora, antes de falar sobre o acaso, novamente, linha 14 é como eu escreveria isso porque eu quero digitar não. No entanto, a linha 15 é realmente a mesma que acima. Você pode dizer, tudo bem, eu quero criar um novo HRandomTrigger e você pode então encadear uma chance e, em seguida, apresentar o número da chance dentro de lá. Então, eu gosto de 14 porque obviamente está digitando menos. Agora, vamos olhar para o acaso. Então, o acaso tem de ser descrito desta forma. IF/15, portanto, essencialmente, estou dizendo que há uma em 15 chances de que o gatilho aleatório seja disparado. Então, uma grande analogia é que se você cortar um monte de números, zero a 14, e cortá-los em pedaços de papel separados e colocar todos esses pedaços de papel em um chapéu, e alcançar esse chapéu e agarrar um número, Se fosse zero, então callback dispararia. Se não for zero, então o pedaço de papel volta para o chapéu e você começa e re-escolhe aleatoriamente novamente. Então, como há apenas 15 pedaços de papel, você tem uma chance em 15 de realmente tirar um zero. Se você puxar um zero, então as linhas 25 a 31, que retorno de chamada vai retornar verdadeiro e vai disparar. Agora, se você olhar para a linha 28 aqui, novamente, é muito semelhante ao que fizemos no HTimer, tudo o que eu estou fazendo é reposicionar a localização do nosso retângulo R1h, que é largura aleatória e altura aleatória em algum lugar na tela. Então, vamos falar novamente um pouco sobre o acaso porque você pode notar que nós introduzimos este F. Para gatilho aleatório, quando você está especificando a chance, você tem que passar esse número como um flutuador, então isso é o que acontecendo lá, eu estou realmente colocando esse F atrás do número para que eu estou passando o sufixo de F está dizendo ao compilador que o número que entra é um flutuador. Então, de novo, tenho uma chance em 15 de ser sorteado. Agora, vamos em frente e testar este esboço, e novamente, estamos apenas mudando a localização do r1, mas você pode notar que o movimento é errático. Eu gosto disso porque novamente, HTimer sempre vai nos dar esse ritmo consistente, e eu queria algo que não parecesse, “Oh, há um ritmo aqui, eu quero quebrar esse ritmo.” Então, novamente, ele tem uma chance de 1 em 15 de ser sorteado, então se você não tivesse descoberto, você obviamente poderia passar em um F dividido por 2 e isso teria 50% de chance de ser sorteado. Então, quanto maior você fizer esse número, mais lenta sua chance aleatória terá de realmente atirar. Então, um em cada 15, eu gosto deste padrão não-repetitivo e ele tem uma sensação agradável para ele. Então, em vez de construir uma tonelada de arquivos com isso, se você olhar para HRandomTrigger dois, ele realmente é nosso arquivo HTimer sete. Ele tem HCanvas, tem nosso ColorPool, tem um DrawablePool, mas em vez de usar HTimer, temos HRandomTrigger. Novamente, você pode ver que eu coloquei em um temporizador aleatório aqui, uma chance em 30 de ser criado, e novamente, este é o retorno de chamada para realmente desenhar a partir do DrawablePool. Então, novamente, você vai notar que o “Pedir tudo” não está lá, e bem aqui nas linhas 45 a 51 é o meu temporizador aleatório, então ele tem uma chance em 30 de realmente fazer um pedido de volta pool. Agora, eu provavelmente deveria mencionar que isso obviamente não tem como HTimer sete tem, se eu abrir este arquivo você vai notar que há um ciclo numérico aqui, então nós sabemos que este temporizador realmente vai desligar depois que ele chegar, em Neste caso, 50 objetos. Então, o gatilho aleatório não tem esse argumento, então o que acontece é que esse pool.request, eventualmente chega até 50, e então o gatilho aleatório realmente continua disparando, mas está dizendo, “Ei Pool, posso ter um?” Pool apenas continua negando porque todos os 50 itens foram criados na tela. Então, se eu realmente executar isso de novo, é apenas uma maneira de cambalear aleatoriamente o ritmo dessa animação. Se você realmente rodou HTimer sete ao lado de HRandomTrigger dois, você notaria que o ritmo da animação é realmente escalonado, que no HTimer sete você notaria que há um ritmo consistente para essas coisas oscilando na tela porque eles foram criados em um ritmo. Considerando que, HRandomTrigger dois, porque ele está chamando aleatoriamente as coisas na tela, você vai realmente notar que a estética geral da animação parece mais caótica do que HTimer sete faz. Então, isso encerra esta seção em temporizadores, e claro, este é um segway perfeito para cobrir cada interpolação e mergulhar ainda mais em callback porque queremos agora usar essas duas coisas para começar a mover as coisas na tela e tê-las mover-se para certas posições e assim por diante e assim por diante. Então isso encerra essa seção, veja você em cada interpolação e cada retorno de chamada. Vejo-te mais tarde. 18. Introdução ao HTween e HCallback: Então, depois de cobrir temporizadores, provavelmente faz muito sentido para mover para esta próxima seção que é HTween e HCallback. HTWeen basicamente está movendo um objeto de um local para outro, então do ponto A ao ponto B. Alguns argumentos que HTWeen usa é alvo, quem estamos movendo? Propriedade, que tipo de propriedade estamos interpolando? Não só podemos interpolar de um local para outro local, mas também podemos interpolar de zero Alfa para Alfa total. Poderíamos intercalar a rotação de 0 à rotação de 360 graus. Podemos intercalar escala pequena para escala maior. Então, HTWeen quer saber com que propriedade estamos realmente interpolando. Temos coisas como início e fim; qual é a posição inicial qual é a posição final. Há flexibilização e primavera? Como falamos em HFollow. É um movimento estável ou tem algum tipo de salto ou elasticidade? Agora, vocês verão nestes primeiros exemplos, HTWeen, vamos mover algo do ponto A para o ponto B. Mas talvez queiramos falar sobre HCallback, agora HCallback é algo que nós realmente escrevemos na primeira classe mas não discutimos muito sobre isso. HCallback é uma forma de sabermos se chegamos ao nosso destino. Então, por exemplo, se eu estiver usando HTWeen para mover do ponto A para o ponto B, talvez eu queira saber quando ele chegou ao ponto B, então vamos usar HCallback em conjunto com HTweens para que o objeto se mova de um local para um novo e assim que chegar a esse local, HCallback dirá: “Ei, você chegou ao seu destino.” Agora, por que isso é importante? Porque em um arquivo de mutação que vamos criar, vamos usar HTween e HCallback para basicamente criar um loop. Então, ele vamos animar do ponto A ao ponto B, quando ele chega ao ponto B, HCallback vai nos dizer que ele chegou ao seu destino e então nós vamos tê-lo voltar para A. Então, vamos apenas ir de A para B, B para A, A para B e contínuo. Então HTween, muito emocionante porque agora estamos começando a mover as coisas na tela. Mas, novamente, lembre-se de que a interpolação não é necessariamente a posição. Vamos intercalar todos os tipos de coisas como Alfa, escala e rotação. 19. Unidade 6, Vídeo 1: Uau! Ok, aqui é onde vai ficar a estrela escura pesada. Haverá muito mais exemplos acontecendo agora, e provavelmente vou dividir muitos desses arquivos em muitos vídeos separados. Então, essas últimas seções, HTWeen, HsWarm, HScillator combos, é aqui que ele fica pesado. Cara, eu espero que você goste deste processo porque é aqui que ele começa a produzir realmente alguns resultados realmente bonitos. Estamos em HTween. Agora, HTween está simplesmente se movendo de um estado para outro estado. Eu provavelmente deveria prefácio que anexado a este vídeo em algum lugar é o arquivo zip. Dentro desse arquivo zip, você verá que há 13 exemplos, e o que é bom é que se você olhar para o exemplo 5, 12 e 13, eu anexei um 3D a ele porque nós realmente vamos começar a falar sobre mover as coisas em três dimensões. Então, você vai ver que eu comecei a marcar alguns dos arquivos onde eu estou introduzindo alguns aspectos chave. Neste vídeo, eu quero cobrir exemplo um e exemplo dois, vamos apenas manter esses vídeos o mais doce possível e tentar não torná-los 13 minutos como todos os outros vídeos. HTWeen, ele está se movendo de um estado para outro, e eu estou usando essa linguagem muito especificamente porque não significa necessariamente localização, movendo-se de uma posição para outra posição. No caso desses primeiros arquivos, vamos nos mover de uma posição para outra, mas interpolação pode ser rotação, pode ser escala, pode ser Alpha, etc. Então, vamos quebrar lentamente esses dois primeiros arquivos aqui. Então, no topo, eu tenho, como esperado, o nosso r1, o nosso HRetangle. Agora, vou pular algumas coisas. Vamos para as linhas 12 a 18. Mais uma vez, estamos apenas revisando aqui. Temos um retângulo que é um 100 por 100, arredondamento de 10, estamos adicionando ao palco, a âncora está no centro, a localização tem uma variável de StartX. Falaremos sobre isso em um segundo. A arte não tem nenhum derrame, e tem um preenchimento daquele FF3300 laranja escuro. Agora, vamos voltar ao topo. Como eu adicionei algumas coisas aqui, eu basicamente quero animar o retângulo da posição A para a posição B. Então, vamos fazer isso usando HTWeen. Então, no topo, você vê que eu tenho HttWeen t1, interpolação um. Nas linhas quatro e cinco, eu tenho a posição StartX, que será um eixo x de 160, e eu tenho a posição EndX. Quero animar até 480 pixels na tela, então posição inicial, posição final. Então, agora a linha 15 provavelmente faz um pouco de sentido porque você está dizendo, “Heym eu quero definir a posição inicial deste retângulo”, que é um eixo x de 160, StartX, e um eixo y de, basta me colocar no meio da tela, altura dividida por dois. Antes de falar sobre a interpolação, vamos descer aqui para a função de desenho e assim como nos exemplos de rotação, coloquei um pouco de código de processamento para que eu pudesse ver os dois pontos. Então, você pode ver aqui eu disse, sem preenchimento, o peso do traçado é dois, o traçado é uma cor cercada e eu criei duas elipses, e as elipses são, StartX, altura dividida por dois, EndX, altura dividida por dois. Então, eu tenho dois pequenos pontos que me mostram visualmente onde é a posição inicial e onde é a posição final. Agora, vamos falar sobre a interpolação. Então, eu digo, “Ok, t1, tween um, você precisa saber algumas coisas”, e os dois primeiros são obviamente os mais importantes. Eles são, quem é o alvo e qual é a propriedade? Então, o alvo é r1 que é o nosso HRCT. Estamos dizendo que o HRCT é o ativo que queremos mover e diz: “Ok, qual é a propriedade?” Novamente, se você olhar para o código aqui, eu poderia ter isso em sua própria linha separada, você poderia quebrá-lo dessa maneira. Normalmente, eu coloco esses dois logo atrás um do outro para que eu possa ver quem está recebendo a ação e qual é a propriedade da ação. Neste caso, H.location, então Josh está movendo coisas de uma posição para outra posição, mas essa propriedade pode ser H.alpha, H.scale, H.rotate, constantes, assim por diante. Vamos movê-lo de: “Sim, você não sabe agora vamos movê-lo?” Caramba! Às vezes, minha boca está se movendo mais rápido que meu cérebro, e eu estou trabalhando nisso, resolvendo esse problema. Oi, a localização das propriedades, eu vou movê-lo de uma posição para outra posição. Pode me dar um aleluia. Tudo bem. Vamos dar uma olhada na próxima propriedade aqui, .start. Agora, eu acho que se você olhar para o HTween.pde, início e fim será sempre uma posição x, y ou z. Então, neste caso, o.start é StartX. Então, esse eixo x de 160, e essa posição final vai ser a altura dividida por dois. Nossa posição final vai ser EndX e altura dividida por dois, e novamente, você vai notar aqui na linha 26, Eu só especifiquei facilidade que é 0,05. Agora, quando eu testar este esboço, vamos ver o que acontece. Mais uma vez, isto vai disparar imediatamente. Então, eu vou seguir em frente e executar isso e muito rapidamente, você deve ver boom, ele se moveu do ponto A para o ponto B e então parou. Eu não especifiquei para ele fazer algo diferente, então a ação ocorre imediatamente. Então, novamente, você deve notar que ele se moveu da primeira posição para a segunda posição e aliviou para essa posição. Então, construir dois, a única coisa que eu fiz na compilação dois é apenas mostrado que no exemplo dois, é que você pode adicionar elasticidade exatamente como fizemos em alguns dos arquivos anteriores. Então, neste caso, eu disse que a facilidade é 0,05 e que a mola é elástica, então é 0,95. Então, se você testar este esboço em particular, você deve notar que elásticos em posição. Então, quando você testar isso, ele imediatamente vai começar a ir e elásticos para a posição final. Vamos tentar manter isso curto, eu vou tentar fazer minha boca funcionar em sincronia com meu cérebro, e eu vou te ver no próximo vídeo. 20. Unidade 6, Vídeo 2: Ok. Neste vídeo, vamos abordar exemplos três e quatro. Para este exemplo três, eu realmente quero trabalhar através de toda a estrutura aqui porque agora eu vou usar HTWeen em conjunto com callbacks para mover nosso ativo da posição A para a posição B e, em seguida, quando ele chegou na posição B, eu quero movê-lo de volta para a posição A novamente e, em seguida, iniciar este loop. Então ele vai de A para B, B para A, A para B e assim por diante. Ok, então vamos tirar algum tempo para percorrer este código e quebrar tudo. Então, no topo temos o nosso R1 e temos o nosso T1, certo? Então nós temos nosso retângulo e nós temos nossa interpolação inicial e a interpolação vai estar movendo esse retângulo em torno da tela. Agora eu tenho, na linha 3 aqui, HCallback e aqui é onde eu realmente quero ter certeza de que todos entendam o que está acontecendo aqui. Agora, não vamos esquecer que quando você testar este filme, a interpolação inicia e então ele vai passar de A para B. O que eu quero que aconteça é chamar de volta para iniciar nosso loop. Sabemos que no segundo em que o filme começar, ele já vai começar de A a B. Então olhe para os meus retornos aqui. Eu tenho Tweendone1 e Tweendone2. Agora, apenas conceitualmente, começar o filme, move-se de A para B. Então, o que eu quero que TweendOne1 faça é me dizer que ele chegou em B e eu quero movê-lo de volta para A. Então Tweendone1 vai ser a animação de B para A. Então, obviamente, se ele vai de B para A, eu quero Tweendone2 para me dizer, hey você chegou de volta em A, vamos agora voltar para B. Então Tweendone2 está indo de A para B. Ok. Vamos passar para a próxima coisa aqui. Josh adora PVectores. Adoro Pvetores. PVectores são uma forma de empacotarmos uma posição no espaço. Então, um PVector pode ser bidimensional ou tridimensional. Neste caso, é um ponto bidimensional. Duas dimensões sendo apenas um ponto X e um ponto Y. Mas PVectores também podem ser um xy e um z. Então, que melhor maneira de configurar são nosso ponto A e nosso ponto B do que usar um PVector. Então isso é uma mudança do exemplo um e dois. Então, eu disse, ok deixe-me apenas, antes de pensar sobre isso, eu tenho que lembrar que meu tamanho é 640 por 640. Então, porque eu estou apenas movendo o x, eu tenho que lembrar que o eixo y era altura dividida por 2, mas altura dividida por 2, 640 dividido por 2, é 320. Então, se você olhar aqui, para o meu PVector eu disse, hey seu primeiro ponto é 160 no eixo x e 320 no eixo y, e a posição certa é 480 no eixo x e 320 no eixo y. Então, de novo, eu amo Pvetores. Eles são apenas uma ótima maneira de empacotar pontos no espaço. Então confira, o nosso R1, o nosso HRect. Novamente é um 100 por 100. Tem arredondamento de 10. H. Acrescentamos que vamos adicioná-lo ao palco. Nosso AncoRat é a posição central, mas veja a atualização para 16. Então, em 16 eu posso dizer, hey sua localização inicial, que a primeira posição, é ir até aquele PVector e me dar o x, então pt1.x que obviamente retorna 160. O pt1.y retorna o 320. Então, estou usando, na linha 16, o PVector para pegar o eixo x e o eixo y. Novamente, tem NoStroke e é um preenchimento de laranja escuro. Ok. Agora, eu vou rolar um pouco para baixo aqui. Eu vou saltar todo o caminho para baixo e apenas mostrar que o sorteio é exatamente como era no exemplo um e dois onde ele está fazendo fase de desenho e nós estamos criando e processando esses dois pequenos pontos de elipse para que possamos ver ponto A e ponto B. Respire fundo, trabalhe comigo aqui. Ok. Olhe as linhas 21 a 29. Esta é a interpolação e lembre-se novamente, a interpolação começa instantaneamente. Ele vai se mover do ponto A para o ponto B. Então, se olharmos aqui dizemos, t1 é um novo HTween, novamente o alvo é o nosso r1 HRCT, a propriedade é a localização. Ei, olhe para os argumentos de início e fim aqui. O início é começar em pt1.x, começar em pt.1.y, terminar em pt2.x e terminar em pt2.y. Novamente, nossa facilidade é 0,5 E tem um pouco de primavera, mas eu reduzi um pouco a elasticidade um pouco, então em vez de 0,95 como ele está em um e dois, eu trazê-lo para baixo para um 0,7. Ok. Quando o filme começar esses fogos, olhe. Vá, comece a interpolação da esquerda para a direita. Então, se eu não tivesse nenhum outro código escrito aqui, ele sairia da posição A posição B. ele sairia da posição A posição B. Agora, preciso de um retorno para saber que cheguei à posição B. Se você se lembra que este é Tweendone1, então ele chegou na posição certa. Vamos voltar para a esquerda. Então, dê uma olhada. Eu digo Tweendone1 é um novo retorno de chamada, e o que eu estou dizendo aqui é hey tween um, eu entendo que você chegou à posição B, a segunda posição todo o caminho para a direita. Se chegou à posição B, quero que dispare algo diferente. Ainda é a mesma interpolação, mas eu vou dar-lhe algumas novas informações e a nova informação é um new.start em um new.end. Então agora está dizendo, bem o seu começo. Se eu estiver certo, é a posição certa que você está aqui agora. Ok. Então, o início é pt2.x e pt2.y e a posição final está de volta no início. Voltar para pt1.x e pt1.y. Agora, olhe para este próximo bloco de código aqui. Aqui é onde você cria o link, e o link é que eu quero registrar esta interpolação e eu quero um novo retorno de chamada quando eu voltar para a nova posição. Então ele começa naquele pVector pt2, ele vai terminar no pVector pt1 e quando ele chega de volta ao pt1, de repente nós adicionamos algumas informações aqui. Meu Deus, a programação quer saber quando eu cheguei ao local original. Que novo retorno de chamada para disparar. Então, quando ele voltar para a posição inicial, ele vai disparar o callback Tweendone2. Tudo bem. Então aqui está o link. Então, agora, se olharmos para o código 43 a 53, estamos apenas configurando a animação de A de volta para B novamente. Certo. Então, se você olhar para ele uma vez que ele chegou de volta à posição esquerda, eu quero voltar para a direita agora, modo que eu estou criando um loop que vai e para trás como o globo ocular de um Cylon. Você tem que ser um super nerd para realmente apreciar isso. Acabei de lançar um comentário Cylon nesta discussão. É o amor, é o amor que compartilhamos. Ok. Então, Tweendone2, confira. Acabei de reverter o início e o fim de novo. Eu digo, oh, droga, estamos de volta à esquerda, certo? Então o início é o nosso pt1.x e y, e sim queremos voltar para a posição B que é um pt2.x e y. então aqui está o loop infinito. Eu digo, adivinha, se eu registrar isso e uma vez que você chegar na nova posição final vá em frente e dispare Tweendone1. Então, agora, neste momento, você deve perceber que esses dois estão apenas chamando um ao outro de novo e de novo. Então, quando um é feito ele chama dois, quando dois é feito ele apenas chama um novamente. Então, agora, essas coisas estão funcionando em conjunto. Agora, você pega que um está disparando dois, e dois está disparando um, mas veja a linha 55. Se eu não tivesse isso, se eu comentar isso, o que vai acontecer? Bem, veja isso. Eu vou rodar meu esboço e o filme começa e boom ele vai da posição A para a posição B, porque lembre-se, eu só vou fechar isso aqui por um segundo, lembre-se que quando você testar seu filme t1 começa. Ele começa, ele corre, ele se move da posição A para a posição B. Então, agora, espero, você entende que Tweendone1 e Tweendone2 estão configurados, mas nunca temos as coisas rolando, certo? Então, agora olhe para a linha 55. Na linha 55 aqui e na parte inferior eu só digo, hey depois que eu configurou esses dois cenários eu só quero dizer interween 1 que ele deve registrar e chamar de volta, uma vez callback Tweendone1 e, em seguida, isso começa o loop. Ok. Se eu não tivesse isso, ele só mudou de A para B porque nós nunca pedimos para ele nos dizer quando ele chegou em B. Linha 55 é que, hey me avise quando você chegou em B porque eu quero te dizer para fazer algo. Tudo bem. Então é essa linha 55 que ele inicia, ele se move de A, ele vai para B. Assim que chegar a B nós dizemos para ir em frente e iniciar o TweendOne1, que então dispara dois, que então dispara um, que então dispara dois, que então dispara dois, que então dispara 1 assim por diante e assim por diante. Então. Agora, neste ponto, você pode executar este esboço e agora temos uma animação infinita onde ele vai de A para B. Assim que ele chega em B, volta para A, e assim por diante e assim por diante. Ok. Então agora, espero, você realmente digeriu como estamos usando callback para criar esse gatilho infinito, mas o gatilho só vai disparar, o retorno de chamada só vai disparar quando ele se instalou em seu destino, e neste caso o destino é uma posição x, um local. Ok. Vamos fechar isto. Vamos passar para o exemplo 4. A razão pela qual eu quero seguir no exemplo 4 é porque eu queria fazer um ligeiro ajuste e esse ajuste é no exemplo 3, a única coisa que realmente mudamos foi onde eu estou começando e onde estou terminando. O que aconteceu foi no exemplo 3, eu estou apenas voltando para ele aqui por um segundo, é que especificamos essas facilidade e a mola que é 0,05 e 0,7. Mas você notará que no Tweendone1 e Tweendone2, não especificamos facilidade ou primavera, então porque não falamos com ele, ele apenas continua reciclando o que foi inicialmente definido. Ok. Então, eu só queria mostrar a possibilidade em quatro que isso é o que inicialmente é definido, mas então você pode realmente modificá-lo. Então, vamos verificar Tweendone1 que está se movendo de B de volta para A. O que eu fiz foi mudar a facilidade e a primavera. Eu disse, hey manter esse 0,05 mas você pode me dar essa elasticidade de 0,95. Então, quando ele vai de B para A vai ser muito elástico, mas uma vez que Tweendone2 dispara, confira. Mudei a facilidade e a mola para 0,05 para a facilidade, mas não faça nenhuma primavera. Então vai ser apenas uma animação lenta de volta e então ele vai saltar, e então uma animação lenta de volta, e então ele vai saltar. Então, vamos em frente e executar o esboço, e novamente, você deve notar que ele salta de B para A, então é um movimento lento para trás, e então ele volta para A. Então, você pode modificar a interpolação entre seus diferentes retornos de chamadas. Então, isso é estelar. Isso é ótimo. Ok. Vou encerrar este vídeo em particular e no próximo, vamos apenas digerir o exemplo 5 que está introduzindo usando coordenadas 3D em vez de coordenadas bidimensionais. Vejo você no próximo vídeo. 21. Unidade 6, Vídeo 3: Está bem. Este é o vídeo, por exemplo, cinco 3D. É muito semelhante ao exemplo quatro, mas eu só queria fazer uma pequena introdução ao trabalho com coordenadas 3D. Mais uma vez, este vídeo vai ser apenas este exemplo. Então, de novo, vamos manter isso doce. Verifica isso. Aqui está o que é diferente é, novamente, como eu expliquei anteriormente, um PVector pode ser um ponto 2D ou pode ser um ponto tridimensional. Então, no caso aqui, adicionei uma coordenada z ao nosso PVector. Então, em vez de passar de uma posição para outra posição, da esquerda para a direita, quero mover algo para trás e para a frente. Então, vamos olhar para o PVector. Tanto pt1 quanto pt2 têm as mesmas coordenadas x e y. Então, ele vai ser o meio da tela, 320 para o x, 320 para o y, que é 640 dividido por dois, ou largura dividida por dois, e altura dividida por dois. Então, sabemos que o quadrado vai estar no centro da tela. O que é diferente aqui é a coordenada z, que, novamente, zero é para o plano z, para a posição traseira, estou dizendo, negativo 400, e para a frente é positivo 100. Então, a mudança aqui para o PVector está fazendo x e y ambos 320, e alterando a coordenada z. Então, 400 negativos para a primeira posição e 100 positivos para a posição da frente. Vejamos a linha 16. Seu local inicial é x, y e z. Então, você está falando com esse PVector e obtendo o x, obtendo o y, e obtendo o z. Vamos avançar e rolar para baixo aqui e vamos olhar para a interpolação. Novamente, eu atualizei a posição inicial e final para incluir as coordenadas x, y e z. Agora, outra coisa que eu esqueci completamente, eu tenho um backup, porque isso é muy importante, que é que você precisa dizer ao processamento que você está usando 3D coordenadas, e preciso dizer ao Hype que estou usando coordenadas 3D. Então, olhe para a linha nove aqui. Na linha nove, eu disse que a largura e altura do filme é 640 por 640, e que eu quero usar P3D. Então, eu quero usar o sistema de coordenadas 3D de processamento. Se eu não coloquei isso, vetor p terá um problema com você tentando especificar a coordenada z, porque você não especificou que o renderizador para processamento deve ser um sistema de coordenadas 3D. Então, ele vai lançar alguns erros. Agora, todo o código inicial em Hype por padrão acha que você está fazendo coordenadas bidimensionais. Então, eu preciso dizer a Hype para saber que nós estamos realmente mudando para um sistema de coordenadas 3D também. Então, se você olhar aqui na linha 10, Eu tenho que colocar este argumento dizendo usar 3D verdadeiro. Então, eu estou dizendo ao Hype que, “Ei, quando você começar a correr através de suas classes, mova para os métodos que incluem o eixo z, outras palavras, ele também retornará erros. O hype dirá: “Ei, cara, o que esse negócio z que você está falando?” Então, preciso dizer ao Processing que estou usando um sistema de coordenadas 3D e preciso dizer ao Hype que estou usando um sistema de coordenadas 3D. Muito importante. Não acredito que quase esqueci de falar sobre isso. Tudo bem. Então, além disso, seu TweendOne1 e seu TweEndOne2, a única atualização real aqui é que você está iniciando extremidades estão usando a coordenada z do pVector. Novamente, eu tenho algumas configurações para facilidade na primavera. No meu arquivo, comentei a linha 62 por um segundo. Porque eu só queria mostrar que se você testar este esboço aqui, ele está realmente movendo o eixo z desse retângulo de volta para o espaço e para a frente no espaço. No entanto, quando eu escrevi este exemplo pela primeira vez eu pensei, como você sabe que isso é uma animação z? Como é que alguém está a olhar para isto? Como isso poderia ser escala? Eu não tenho idéia de que isso é realmente z, que poderia ser apenas mudar a escala do retângulo de uma escala menor para uma escala maior. Então, eu adicionei esta linha 62, e, deixe-me apenas descomentar aqui fora. Linha 62 é apenas lidar com a função de câmera do Processing, que eu adicionei o MouseX, para que você pudesse realmente mover o mouse e apenas obter uma representação de que esta coisa está realmente se movendo no espaço tridimensional. Então, eu não vou mentir trabalhar com a câmera é loucura. Levei algum tempo para descobrir todos os argumentos que a câmera suporta. Se você apenas executar seu esboço agora, você deve notar que, sim, ele está realmente movendo isso no espaço tridimensional. Então, se eu realmente mover minha posição do mouse aqui, eu posso realmente mudar o ângulo da câmera, e realmente ver que nosso retângulo está de fato se movendo no espaço tridimensional. Então, ótimo. Acho que vou encerrar o exemplo cinco agora. Vamos passar para o próximo vídeo que vai digerir o exemplo seis e o exemplo sete, e então eventualmente vamos voltar a jogar com 3D porque é muito divertido. Mas, esta é apenas uma introdução muito rápida ao uso de coordenadas 3D com PVector, mas novamente, realmente olhar para as linhas nove e 10. Você tem que dizer ao Processing que você está usando um sistema de coordenadas 3D, você tem que dizer ao Hype que você está usando o sistema de coordenadas 3D, outras palavras que não funciona. Vejo você no próximo vídeo. 22. Unidade 6, Vídeo 4: Como todo mundo está se aguentando? Não vou fazer você se sentir confiante, porque só vai piorar. Só vai piorar, mas de um jeito ótimo. Vai ser doloroso de uma forma muito agradável. Estamos agora no exemplo seis e no exemplo sete. Neste vídeo, eu vou percorrer essas duas coisas. Agora, no exemplo seis, o que eu queria mostrar é empilhamento de comportamento. Eu posso realmente chamar duas interpolações que vão interpolação para propriedades individuais. Desde que as propriedades sejam separadas, elas não lutarão entre si. Então, vamos até o topo aqui e ver o que foi alterado. Então, isso é o que eu estou falando é, nós estamos começando com uma animação simples e nós vamos apenas mutá-lo, torná-lo um pouco mais complexo. Agora, isso não é usar 3D. Na verdade, estamos voltando ao exemplo quatro e adicionando ao exemplo quatro. Agora, o exemplo quatro é que A para B, B para A. Ele só está movendo a posição X, para frente e para trás. Eu quero que ele agora também gire. Então, ele vai se mover da posição A para B, mas também vai estar executando uma rotação. Então, vamos até o topo aqui e ver alguns ajustes. Então, a primeira coisa é, ainda estamos movendo um HRCT, ainda temos nosso r1, mas agora eu tenho uma interpolação um e uma interpolação dois. Então, um t1 e um t2. Sabemos que t1 é a interpolação local, e t2 será a interpolação de rotação. Então, agora preciso de um novo conjunto de retornos de chamada. Então, você notará na linha três, vamos manter nosso TweendOne1 e nosso TweendOne2, mas agora adicionei o retorno de chamada para, RotateOne1 e RotateOne2. Então, sabemos que quando isso começar, ele vai iniciar uma rotação de A para B, girar data, girar, girar data, girar suas datas, girar todas as suas datas. Nunca se case, altere suas datas. Ouviu isso aqui, de Josh Davis. Eu vou ficar bem. Vamos tentar de novo. Gire. Posso dizer que no passado, quando eu lecionava na Escola de Artes Visuais, era como 2003 quando comecei a ensinar. As pessoas traziam seus arquivos em discos Zip. Discos zip. Você tem que ter muito cuidado com isso. Tive mais do que alguns deslizes. Vou deixar você resolver isso. Cada retorno de chamada, RotateOne1 e RotateOne2. Então, RotateOne1 está girando de B de volta para A, assim como TweendOne1, e RotateOne2 é A de volta para B novamente. Agora, eu coloquei o vetor P ali. Então, você vai notar que pt1 e pt2 é 160.320, 480.320, que não foi modificado. Vamos em frente e ver o que temos aqui. Aqui está o nosso R1. Como o código está ficando um pouco mais longo, eu aproveito o método de encadeamento e HYPE. Então, eu posso apenas colocar tudo em uma linha. Então, como eu começo a escrever mais código, e meus programas começam a ficar um pouco mais robustos, eu aproveito o método encadeamento, e apenas tenho tudo em uma linha vez de dividi-lo em várias linhas como eu fiz em arquivos anteriores. Faço a mesma coisa com o nosso T1. Agora, vamos em frente e olhar para este bloco de código aqui, que é 17 a 31. Isso manteve-se inalterado. Isso é configurar a interpolação um, movendo-se de A para B, B para A, os retornos de chamada, tudo. Isso é exatamente como era no exemplo quatro. O que há de novo agora são as interpolações de rotação. Então, o que eu fiz aqui é, eu disse, t2 é um novo HTWeen. Ele também vai ser alvo r1, mas a propriedade é rotação. Então, t1 está lidando com localização, t2 está lidando com rotação. Olhe para o começo. Comece em zero, termine em 180 graus. Então, vire 180 graus. Eu tenho uma facilidade e eu tenho uma mola para essa rotação. Mais uma vez, eu também tenho alguns retornos aqui. Então, quando girar um é feito, ele vai ir de 180 de volta para zero. Quando está de volta a zero, um chama dois. Dois então dizem, “Oh, vamos criar esse loop. Vamos voltar de zero para 180 novamente.” Quando está a 180, um dispara dois. Portanto, não é diferente da configuração rt1. É uma cópia. Olhe para a linha 50. Eu registro t2, e digo, “Ei, eu entendo que você vai disparar de zero a 180, uma vez que você chegar a 180, vá em frente e atire aquele RotateOne1 para que você possa ir um, dois e dois para um e começar esse loop.” Então, quando eu testar o esboço, você deve notar que eu tenho dois adolescentes trabalhando em conjunto. Eles estão fazendo propriedades diferentes. Você pode ter como Htweens quiser, desde que eles não tentem disparar a mesma propriedade. Então, t1 está fazendo localização e t2 está fazendo rotação. Novamente, eu posso empilhar vários Htweens, desde que eles estejam abordando propriedades diferentes. Vamos fechar isso e passar para o exemplo sete. Agora, o exemplo sete é uma cópia do exemplo seis. Mas, você se lembra em Hrotate, eu mostrei que você podia aninhar um quadrado em outro quadrado, e enquanto isso acontecesse, tudo estava bem com o universo. Só vou te mostrar isso mais uma vez. Então, procure no topo aqui. A única coisa diferente no exemplo sete, é que agora tenho três retângulos. Eu tenho um R1, um R2, e um R3. Vamos em frente e olhar para as linhas 14 a 21. Eu digo, “R1, você é 100 por 100, e você é uma laranja escura.” Então, eu digo, “Ei, r2, você tem 50 por 50, você tem um arredondamento de cinco, e eu quero adicionar você, r2, dentro de r1.” Então, agora começamos o ninho. Você vai notar que eu também não especificar um local. Se eu não especificar a localização, ele só se liga a zero, zero. Vá em frente e olhe para R3. R3 tem 25 pixels por 25 pixels. É um quadrado perfeito. Não tem arredondamento nenhum, e r1 é onde estou colocando r3. Então, r3 é colocado dentro de r1. Fora isso, nada mais mudou. Então, se você realmente executar este arquivo, você notará que a animação ainda está indo de A para B, e B para A e ainda está executando a segunda interpolação de usar rotação. Mas, como você pode ver, ele faz isso para todos os três objetos porque tudo está sendo aplicado ao r1, acontece que r2 e r3 estão aninhados dentro de r1. Então, como essas duas formas estão aninhadas dentro do r1, elas também terão as mesmas animações. Então, agora você deve estar pensando, “Oh meu Deus, eu posso trabalhar no Illustrator. Posso começar a desenhar um monte de ativos, recursos visuais. Posso agrupá-los. Posso começar a fazer muitas coisas diferentes, e desde que elas fiquem aninhadas em um ativo ao qual as interpolações se associem, essa obra de arte virá comigo.” Então, legal. Apenas mostrando algumas das possibilidades desses truques que eu uso no HYPE. Isso encerra o exemplo seis e sete. Vamos em frente e fechar isso, e o próximo vídeo vai apenas lidar com o exemplo oito. Vejo você no próximo arquivo. 23. Unidade 6, Vídeo 5: Diversão. Estamos agora em um exemplo oito, e novamente, eu só quero continuar pegando essas idéias, continuar pegando esses conceitos e apenas tornando-os um pouco mais e mais robustos. Então, ótimo. Exemplo oito vai mostrar uma animação para quatro posições diferentes. Então, é uma extensão muito boa de alguns dos outros arquivos que temos feito onde acabou de ir de A-B. E se formos de A para B para C para D e depois de volta para A de novo? Então, novamente, isso vai animar nosso retângulo para quatro posições diferentes na tela, e ele vai configurar um loop. Então, ótimo, estou fazendo quatro pontos agora. Então, no topo do exemplo oito temos PVector um, dois, três e quatro. Você vai notar que eu coloquei alguns comentários aqui que eu primeiro defino o canto superior esquerdo, depois o canto superior direito, depois o canto inferior direito, depois o canto inferior esquerdo. Então, se você está pensando sobre isso em termos de animação um vai para dois, dois vai para três, três vai para quatro, quatro vai voltar para um. Então, isso significaria que eu preciso de quatro callbacks cb1, cb2, cb3 e cb4. Novamente, lembre-se aqui que cb1 é um callback de ir da posição um para a posição dois, cb2 está indo de dois para três, cb3 está indo de três para quatro e cb4 está indo quatro de volta para um, e então novamente nós criar um loop aqui. Então o HRectangle realmente não mudou muito, ele está ficando anexado na primeira coordenada pt1 pt1.x e pt1.y. Agora linha 19, que vai disparar, e ele vai disparar da posição inicial do PVector 1 para PVector 2 posição. Então, quando isso começa inicialmente, ele vai para ir da posição um para a posição dois, então você sabe que depois que isso começa inicialmente ele está realmente pendurado para fora nas duas posições. Agora, eu vou rolar para baixo aqui, olha, eu atualizei o sorteio para incluir antes diferentes posições para o nosso PVector para que possamos ver onde eles estão na tela. Mais uma vez, vamos olhar para a linha 45. linha 45 pressupõe que a interpolação já foi movida do canto superior esquerdo para o canto superior direito. Então, estamos agora na segunda posição, então você vai notar que eu ligo de volta CB2. Então, estou ligando para as linhas 27-31. Não estou ligando de volta cb1 porque cb1 é de um a dois, e isso já ocorreu quando a interpolação começou inicialmente. Então, eu estou dizendo para ligar de volta CB2. Novamente, cb1, cb2, cb3, cb4, estas são apenas todas as cópias umas das outras, a única coisa que mudou foi o PVector para início e fim, e chamando de volta para o retorno de chamada apropriado. Então, ele começa, ele se move da posição um para a posição dois, aqui na linha 45 ele diz, “Oh hey, legal, você já mudou sua sessão na posição dois, vamos em frente e ligar a posição dois.” Então cb2 dispara, ele vai de duas posições para três posições assim que chega que três posições que dispara cb3. Cb3 diz: “Ótimo, vou de três para quatro, vamos disparar o callback quatro.” O callback quatro diz, “Oh ótimo, eu estou indo quatro de volta para um”, e dispara CB1. Cb1 então diz, “Oh, bem em frente eu estou indo de uma posição para duas posições, vamos em frente e disparar cb2", boom, o loop criou. Então, vá em frente e teste o esboço. Novamente, você deve ver que temos uma animação infinita de se mover para quatro posições diferentes na tela. Então, novamente, enquanto você estiver criando sua interpolação, você pode criar todos esses cenários para chamada e, quando esses retornos de chamada forem acionados, você estará apenas movendo para um novo início e fim. Então, eu vou manter este vídeo curto, vamos passar para o exemplo nove. Exemplo nove novamente é uma grande extensão disso é que é, “Ei Josh, e se eu não quiser um loop? E se eu não quiser continuar animando duas, quatro seções diferentes? E se eu quiser que ele vá para um para dois, dois para três, três para quatro, quatro para um, um para o centro, e então pule e depois pare?” Então, o exemplo nove vai ilustrar essa funcionalidade. Então, te vejo no próximo vídeo. 24. Unidade 6, Vídeo 6: Ok, estamos no Exemplo 9 e novamente Exemplo 9 não é muito diferente do Exemplo 8 exceto para isso, não é um loop. Ele vai executar algumas interpolações e assim que chegamos à última interpolação, este programa vai desligar, certo? Então, Exemplo 8, apenas continuou em loop para as quatro coordenadas. Exemplo 9, eu quero ir de um para dois, dois para três, três para quatro, quatro de volta para um. Primeiro, então eu queria ir para o centro e depois que ele chegar ao centro, eu quero que ele escala em sua direção. Depois de ser feito escalando em sua direção, ele pode simplesmente parar de fazer mais interpolação. Então, isso é bom porque pode ser uma intro-animação, mas não precisa fazer loop. Eu só queria executar uma sequência assim que essa sequência for feita, ela pode ser desligada. Então, vamos dar uma olhada no que é um pouco diferente no Exemplo 9. A primeira é a linha dois, temos dois HTweens, temos t1 e t2. T1 é a interpolação que vai lidar com a movimentação de nossos locais de ativos. Então sabemos que t1 está usando a propriedade de locais, então vamos usar isso para se mover na tela. É este HTWeen de t2 que vamos escalar o ativo em sua direção. Então, vai lidar com a propriedade da escala H.Scale, está bem? Agora, vamos em frente e olhar para as linhas quatro a oito, eu adicionei um quinto PVector e que é a capacidade de mover para o centro da tela para que você vai notar que PVector pt5 é 320 por 320, então ele vai animar para o centro da tela. Agora, vamos olhar para a linha 10, é aqui que temos nossos retornos de chamada. Novamente, o Exemplo 8 tinha cb1, cb2, cb3 e cb4, mas agora eu preciso de um retorno de chamada para mover para o centro da tela, que é CBCenter, call back center e eu preciso um callback para então animar em direção a você que é CBScale, certo? Então, temos seis retornos de chamada na linha 10. Tudo bem. Movendo-se para a direita são r1, hRect que realmente não mudou, é exatamente o mesmo que era no Exemplo 8. Olhe para a linha 20, linha 20 não mudou. É o mesmo que era no Exemplo 8 também, e isso é a iniciação da interpolação movendo-se da posição um para a posição dois para que saibamos que quando começamos o filme, é essa linha 20 que vai iniciar do ponto um para Ponto dois. Então, agora vai estar pendurado na coordenada superior direita, certo? Agora, eu vou rolar para baixo aqui e olhar para o fundo, apenas saiba que eu adicionei uma quinta elipse de processamento para mostrar onde está esse ponto central. Agora, temos uma representação visual dos cinco pontos, o quinto agora sendo o centro da tela. Certo, vamos ver os retornos de chamada. Você pode notar que cb1 foi comentado e isso é por uma boa razão. Cb1 foi o que criou esse loop, certo? Então o programa começa, ele se move de um para dois, então cb2 foi de dois para três, então ele passou de três para quatro, então ele passou de quatro para um, e então assim que ele voltou para um, CB1 disparou de volta para a posição dois de novo, certo? Então, ele iniciou esse loop. Então, eu realmente comentei cb1 porque adivinha, nós realmente não o usamos, porque cb1 é o que criou esse loop e nós não queremos um loop. Então, na verdade, cb1 não está sendo usado neste esboço em particular. Tudo bem, então vamos quebrar isso. Nós testamos o filme, quando testamos, linha 20 fogos e ele se move da posição um para a posição dois, certo? Vamos olhar para a linha 59, linha 59 diz: “Quando você realmente atirar e você se mover para a posição dois, você pode por favor me avisar quando você chegou ao destino da posição dois e quando você tiver, por favor dispare o callback cb2 .” Então, o CB2 dispara. Cb2 diz: “Ok, legal, eu estou começando em dois, eu estou indo agora para três.” Quando chega a três, ele dispara cb3, cb3 e diz: “Legal, estou na posição inferior direita, vou me mover para a posição inferior esquerda”, então ele se move para a posição inferior esquerda, então dispara cb4, cb4 então diz: “Impressionante, estou na posição inferior esquerda, quero animar de volta para a primeira posição.” Então vai do PVector 4 para PVector 1, certo? Agora, aqui está a mudança, em oito, cb4 teria disparado cb1 novamente que teria ido de um a dois e então boom você tem o loop. Aqui é onde está a pausa, CB4 agora diz, “Quando você for da posição quatro para a posição um, eu quero que você ligue de volta para o CBCenter,” ok? Então, de repente, ele chegou de volta à posição um e o CBCenter dispara. Então, olhamos para o retorno de chamada para o CBCenter e ele diz, “Ei, eu preciso ir da posição um para o PVector 5, que é o centro da tela.” Agora, são linhas 46 a 50 que vai da posição 1 para a posição 5, desliza para o centro do palco, ok? Agora, assim que ele mudou sua localização do canto superior esquerdo para o centro, ele diz, “Ei, eu quero que você saiba que eu cheguei no local do centro e assim que você chegar ao local do centro, Eu quero que você ligue de volta CBScale,” certo? Estamos prontos para iniciar a escala em sua direção. Agora, vamos olhar para CBScale. CBScale diz, “Ei Tween 1, a interpolação que tem lidado com todos os locais, eu não preciso mais de você, eu não estou movendo nenhuma posição mais e assim, desde que eu não estou movendo nenhuma posição mais, você pode dizer Interpolação 1 para cancelar o registro.” Então você vai notar na linha 54, Tween 1 morre uma vida feliz e conteúdo. Ele animou todos os locais que precisávamos ir. Não precisamos mais dele. Então a linha 54 do retorno de chamada CBScale simplesmente diz ao Tween 1 que terminamos com ele. Não estamos mais movendo posições. Agora é online 55 que configuramos nossa nova interpolação e nossa nova interpolação está se movendo em direção a você no espaço, então você notará que diz: “Ei Tween 2, você é uma interpolação nova era. O alvo é que a nossa única pessoa que temos andado mover-se ao redor, mas a propriedade desta vez é escala. Eu quero que você comece em uma escala de 100 por cento e eu quero que você termine com uma escala de 300 por cento.” Então, ele vai ficar 300 por cento maior ou para você e a facilidade é 0,09 e a mola é 0,9. Então, vá em frente e teste este esboço e veja o que acontece. Ele vai de um para dois, dois para três, três para quatro, quatro para um, um para o ponto central, e então escala em direção a você e você vai notar que ele realmente parou. Então, ele executou nossas interpolações para localização, uma vez que chegou ao centro, ele iniciou a interpolação para escala, e então uma vez que chegou à sua posição final, você notará que não há retorno de chamada. Nunca pedi que me avisasse quando chegasse, é uma escala de 300 por cento. Então a animação pára. Vá em frente e vamos fazer isso mais uma vez. Novamente, você vai notar que ele executa todas as interpolações para localização, chega ao centro, mola em direção a você, e estamos feitos. Certo, isso termina o vídeo do Exemplo 9. O próximo vídeo vai olhar para Exemplo 10 e Exemplo 11 e fazer algumas coisas divertidas com colorista pixel e você vai adorar. Vejo você no próximo vídeo. 25. Unidade 6, Vídeo 7: Está bem. Neste vídeo, vamos trabalhar no exemplo 10 e no exemplo 11. Agora, os exemplos 10 e 11 são, na verdade, cópias do exemplo oito. Eu quero voltar apenas para aquele loop dele correndo uma e outra vez e outra vez. exemplo nove foi ótimo. Ele só mostra como executar um monte de animações e depois parar, mas para 10 e 11 eu quero manter esse loop em andamento. Assim, os exemplos 10 e 11 são cópias do exemplo oito. Agora, vejamos o que mudou no exemplo 10. A primeira coisa é a linha um, temos o nosso bom amigo HPixelColorist, e se eu ir em frente e navegar para a pasta exemplo 10, você vai notar que há uma pasta de dados e dentro dessa pasta de dados é este jpg. Então, eu quero que o HTWeen mova nosso retângulo, mas eu quero que ele experimente a cor deste jpg usando HPixelColorist. Então, vamos olhar para a linha 15, linha 15, AutoClear (false), certo? Então, eu não vou limpar a tela antes de começar a pintar o retângulo novamente, então ele vai deixar um rastro atrás dele. linha 18, está criando uma instância do nosso HPixelColorist, e assim diz, “Ei, vá para a pasta de dados, vá em frente e olhe para color.jpg.” Vamos estar lidando com o preenchimento, vamos mudar o preenchimento do r1 para qualquer cor que esteja acontecendo no color.jpg. Se você olhar para r1, a única coisa que modificou aqui é que eu adicionei rotação 45 graus. Então, em vez de ser um quadrado, ele é girado 45 graus, então é uma espécie de forma de diamante. Agora, nada mudou com o nosso Tween, ele vai se animar para os quatro locais diferentes. Então, o Tween vai ir de um para dois, dois para três, três para quatro, quatro para um, assim que ele voltar para um, ele é acionado de volta para a posição dois novamente e, portanto, o loop começou. Então, isso não mudou do exemplo oito. Agora, vamos em frente e olhar para a nossa função de desenho e a única coisa que eu adicionei aqui como uma atualização é a cor. ApplyColor para r1. Então, se rodarmos este esboço, você notará que ele executa os quatro cantos, mas como ele executa os quatro cantos e como a posição x e y do retângulo está atualizando, ele está amostrando a cor do color.jpg dentro do A pasta de dados, certo? Então, ele está usando seu x e y como um olhar para o x e y do jpg e ele está amostrando a cor a partir daí. Então, assassino, realmente amo isso. Agora, vamos em frente e fechar isso e passar para o Exemplo 11. Sabes que adoro dar-te estas espreitadinhas de adicionar coisas. Confira, nós adicionamos alguns osciladores e eu adiciono dois osciladores aqui. Novamente, estou sendo maravilhosamente vago sobre o oscilador porque não estamos nessa seção ainda, mas novamente, estou molhando seu apetite para o quão incrível cada oscilador é. Eu adiciono um oscilador para rotação, então ele vai oscilar de 180 negativos para 180 positivos. Ele também vai oscilar sua escala de 0,2 para um. Então, de 20 por cento seu tamanho para 100 por cento seu tamanho. Você também vai notar que eu fiz uma pequena atualização aqui para o retângulo, eu escapei de usar âncora no H.center para uma âncora de 50, 50 negativos. Então, novamente aqui está o seu trabalho artístico, ele está centrado no eixo x, mas o eixo y está 50 pixels fora da arte, então o pivô vai ter esse tipo de movimento para ele. Além disso, novamente nada mudou no sorteio, acabei de remover a visualização dos quatro pontos. Então, no sorteio, estamos apenas atualizando a cor e estamos pintando a tela. Então, neste momento, se eu testar este esboço, estou apenas mostrando como o oscilador é incrível. Acredite ou não, ele está se movendo, a Interpolação está se movendo da parte superior esquerda para a parte inferior direita para a parte inferior esquerda para a parte superior esquerda. Ele ainda está se movendo para esses locais usando HTWeen, mas o oscilador está mudando sua rotação e sua escala, modo que começamos a obter algo um pouco mais visualmente interessante. Porque na linha 15 estamos fazendo isso AutoClear (false), estamos simplesmente deixando um caminho. Novamente, como estamos usando HPixelColorist, estamos amostrando a cor de nosso jpg oculto dentro de nossa pasta de dados. Está bem. Vou fechar este vídeo e vamos encerrar esta seção com a realização de um último vídeo que é o exemplo 12 e o exemplo 3d. Eu sinto muito. Exemplo 12 e exemplo 13 que usavam 3D. Então, o mesmo sistema exato, mas na verdade usando alguns aspectos 3D para o esboço. Então, obrigado por ficar comigo. Vamos passar para o último vídeo e continuar chutando traseiros e pegando nomes. Vejo você no próximo vídeo. 26. Unidade 6, Vídeo 8: Tudo bem. Este é o último vídeo desta seção. Estou amando algumas das capacidades 3D do Hype. Estou gostando muito de me mudar para sistemas 3D. Passei muitos, muitos anos em sistemas 2D e estou impressionado por entrar em primitivas 3D e coordenadas 3D. Só estou gostando muito. Se você olhar para o meu Tumblr muito rapidamente, eu mudei para fazer formas 3D. Tem sido bananas, para dizer o mínimo. Então, vejamos o exemplo 12. Exemplo 12, novamente, é algumas coisas 3D. Então vamos ver o que mudou. exemplo 12 e o exemplo 13 são apenas continuações de 10 e 11. Bem, mais especificamente, é uma extensão de 11. Então, 12 realmente como uma cópia de 11 no sentido de que eu ainda mantive esses osciladores lá. Agora, até este ponto, mesmo tendo introduzido o 3D no exemplo cinco, ele ainda estava usando o Interact. Interact é um traçável bidimensional, certo? Não é um desenho tridimensional. Então, vamos em frente e olhar para o que é diferente no exemplo 12. Bem, primeiro temos que abordar as linhas 14 e 15 que é assim que você se move para um ambiente 3D, você precisa informar o processamento alternando o renderizador. Então você notará na linha 14, eu disse que o renderizador deve ser P3D para que você esteja dizendo ao processamento que você está lidando com um sistema 3D. Isso também significa que na linha 15, eu tenho que dizer Hype que eu estou me movendo para 3D também. Você vai notar na linha 15, eu digo que usar 3D é verdade. AutoClear ainda é falso, então ele não vai limpar a tela, ele vai continuar pintando trilhas. Agora, eu mantive o oscilador lá dentro. Na verdade, nada mudou de código, exceto que eu mudei, bem, vamos voltar para a linha três, na verdade. Você vai notar que r1, na verdade, não é mais um HRack. Na verdade, tornou-se um HBox. HBox me permite definir um desenho 3D. Ainda estamos trabalhando no HBox. Há algumas coisas que precisam acontecer, mas você tem acesso ao HBox, bem como ao HSphere. Então, linha três, em vez de HRack, é na verdade um HBox. Vamos em frente e olhar para a linha 20 a 27. Então eu estou dizendo que r1 é na verdade um novo HBox, não um HRack mais. Vamos falar sobre isso por um segundo. É esta linha 22 onde eu estou dizendo que o tamanho é 100. Isso significa que está fazendo uma caixa que tem uma largura de 100, uma altura de 100, e uma profundidade de 100. Então, ele está fazendo um perfeito 100 por 100 por 100 cubo. Tirando isso, não muito diferente. Bem, isso não é inteiramente verdade. Acho que mudei o oscilador aqui. Se você olhar eu estou fazendo um oscilador para rotação e eu estou fazendo um oscilador para o eixo Z. Então, agora vou pegar este cubo e vou movê-lo em sua direção e longe de você. As coisas do Tween ainda são as mesmas. Então, quando eu realmente fiz este esboço, você vai notar agora que ele ainda está executando as posições. Então, ele ainda está executando as quatro coordenadas, mas o desenhável é na verdade um cubo tridimensional agora. Não é um apartamento. Não é um retângulo plano. Na verdade, é um desenho 3D. Você também notará que é um cubo perfeito. Então, eu fiz de novo, é 100 por 100 por 100. Você deve notar que ele está realmente fazendo algum sombreamento. A razão pela qual ele está fazendo algum sombreamento é, bem, talvez antes de eu falar sobre sombreamento, notar que ele ainda está amostrando a cor de color.jpegs. Então, ele ainda está usando HPixel Colorist para provar a cor, mas você pode notar que as cores realmente mudaram um pouco. Isso porque uma vez que você realmente começa a trabalhar com 3D, você pode começar a configurar luzes. Então, vou fechar isto por um segundo. Eu vou me mover todo o caminho até o fundo. Repare que eu realmente montei algumas luzes pontuais. Preparei três luzes. Preparei uma luz laranja, uma luz azulada e uma luz branca. As luzes querem saber basicamente a cor. Então, você vai notar quando você olhar para uma luz, isso é vermelho, isso é verde, isso é azul. Então, você especifica um valor RGV. Em seguida, especifique onde essa luz está no espaço. Então, de acordo com este ponto, como eu disse que o eixo X da luz está em zero, o eixo Y é a altura dividida por dois, e a posição Z é negativa 100. Então essa luz está na verdade no lado esquerdo centrado, mas de volta a 100 negativos. Eu então preparei uma luz cercada. Então preparei uma luz branca. A luz cercada é realmente largura. Então, é todo o caminho no lado direito e altura dividido por dois, então está no centro, mas é apenas um negativo 50 no eixo Z. A luz branca eu tenho largura dividida por dois, isso é no centro. Mas sua posição Y está apenas 100 pixels fora do topo e sua posição Z é 150. Então, a luz branca está acima de tudo, de modo que está lançando uma luz branca nas faces dianteiras do cubo. Então, uma vez que começamos a usar 3D, podemos começar a fazer essas coordenadas de iluminação que é realmente divertido. Você pode alterar os valores RGV sobre isso e lançar luzes diferentes em seu cubo. Você pode começar a manipular a cor lá. Então, não só está recebendo a cor do HPixel Colorist do JPEG, mas também temos essas luzes que estão lançando suas próprias luzes individuais nos cubos, que é apenas, este material é bonito. Estou hipnotizado com essas coisas. Posso começar a ajustar este arquivo. Realmente, a mutação e pesquisa sobre isso para mim é infinita. Eu sempre consigo pensar em diferentes maneiras de ajustar algumas das coisas neste arquivo. Vamos fechar este e passar para o exemplo 13. Exemplo 13 tem apenas uma pequena mudança para ele. Mudei as luzes de ponto para usar basicamente cinza e branco. Eu não uso laranja e verde-azulado como eu fiz nas duas primeiras luzes. Então, você vai ver aqui eu estou apenas fazendo um cinza claro 204, 204, 204. Ainda estou usando aquele branco de 255, 255, 255. Então, novamente, eu mudei a iluminação um pouco para ser um pouco mais brilhante e não para realmente moldar uma cor no HPixel Colorist. A segunda coisa que eu mudei foi, se você olhar para o HBox, no exemplo 12 era um cubo perfeito, então ele tinha uma largura de 100, uma altura de 100, e uma profundidade de 100. Então era um quadrado perfeito. Era um cubo perfeito. Veja o que eu mudei no exemplo 13. Ainda estou criando um HBox, mas veja o que faço na linha 26. Eu disse, “Ei, eu só quero que você saiba que você não é realmente um cubo perfeito. Sua profundidade é de 500 pixels. Sua largura é de apenas 50 pixels e sua altura é de apenas 100 pixels. Então, agora estou fazendo um retângulo alongado em vez de um cubo perfeito. Então, agora, quando eu executar este arquivo, você vai notar que este esboço está usando esse retângulo alongado em vez de usar um cubo perfeito. Então, novamente, eu posso fazer um HBox, mas eu não preciso torná-lo realmente um cubo perfeito. Eu posso começar a ajustar a profundidade, largura e altura, e basicamente fazer qualquer tipo de forma que eu quiser. Você também deve notar que, novamente, a luz do ponto está usando apenas cinza e branco. Então, eu não estou compensando a cor que está sendo despojado de HPixel Colorist. Isso é ótimo. Isso realmente começa a encerrar HTWeen. Vamos passar para Hswarm, que é um sistema de comportamento, mas eu gostaria, digamos, fazer uma pausa e começar a pensar, novamente, em algumas das obras de arte que criamos na primeira classe. Podíamos estar a animar o SVG. Talvez você queira brincar com esses 3 arquivos e ver que isso é como spin art. Isso é como se eu estivesse tropeçando arte ácida. Josh Davis, estou surtando. Você pode. Talvez seja uma boa hora para surtar, certo? Então, faça uma pausa e experimente algumas dessas coisas. Novamente, estamos usando HTWeen apenas para animar essas quatro coordenadas. Oscilator está cuidando dessas outras coisas. Ótima. Isso encerra esta seção. Vamos passar para Hswarm que está lidando com um comportamento como um sistema que vamos entrar e eu acho que você vai realmente gostar. Vejo você na próxima seção. 27. Introdução ao HSwarm: Então, agora estamos começando a entrar nos aspectos mais robustos do uso de comportamentos HYPE. Quando estávamos usando HFollow, estávamos usando a entrada do mouse, estávamos usando gesto para mover as coisas na tela. Quando nos mudamos para HTimer, estávamos animando coisas com base no tempo. Mas eu empacotei alguns comportamentos que fazem coisas muito mais robustas. Então, por exemplo, em HTWeen você tinha que especificar qual era a ação de animação, o ponto A ao ponto B, mas temos muitos outros comportamentos que existem no HYPE que executam animações muito mais selvagens. O primeiro que vamos cobrir é Hswarm. Então, a melhor maneira de pensar sobre HsWarm é um comportamento de inseto. Imagine vaga-lumes voando em torno de seu quintal no verão. Hswarm vai lhe dar esse tipo de sentimento, esse tipo de movimento. Agora HsWarm usa alguns argumentos interessantes. A primeira é que vamos especificar qual é o meu destino. Então, neste primeiro arquivo que provavelmente criaremos, o destino será o centro da tela. Então, já o enxame recebeu instruções de onde quer tentar chegar, neste caso, ao centro da tela. No entanto, estamos usando mais alguns comportamentos como rotação, velocidade, curva é, então quantos graus esse inseto vira enquanto tenta chegar ao destino? E você verá em um par de outras mutações que vamos usar contração, e contração é o que tira esse inseto do curso. Então, nesses primeiros arquivos, se definirmos o destino no centro da tela, e depois de configurarmos todos os parâmetros para rotação e velocidade e outras coisas, você deve notar que o objeto está girando em torno disso destino porque ele não pode chegar até ele, certo? Está tentando enxame até esse destino, mas na verdade nunca chega a esse destino por causa dessas variáveis que colocamos no lugar. Agora, esse comportamento vai ser muito uniforme. Não é até introduzirmos, em outro arquivo, se contorcermos onde realmente começamos a tirar essas coisas do curso. À medida que os tiramos do curso, cada uma dessas pequenas peças de arte que estavam criando na tela dará a percepção de que eles têm um comportamento independente, uma mente independente própria porque eles vão vaguear por toda a tela, mas todos eles ainda estão tentando chegar a esse destino fixo no centro. 28. Unidade 7, Vídeo 1: Está bem. Bem-vindo ao HsWarm. Nesta seção, estaremos cobrindo um comportamento que é um sistema. Então, basicamente, você vai configurar um sistema, registrar um monte de objetos para esse sistema, e este sistema de comportamento, em seguida, controla todos os ativos que são criados. Então, você deve ver no HsWarm nós temos sete arquivos e nós vamos executar através dos três primeiros, exemplo um, exemplo dois e exemplo três. Vamos em frente e começar nossa análise do exemplo um. Então, exemplo um novamente é muito semelhante a algumas coisas que cobrimos no HTimer no sentido de que estamos usando um temporizador em conjunto com um pool. Está bem. Então, vamos apenas digerir esses aspectos deste arquivo. Eu tenho um pool HDrawable, eu tenho um HTimer, podemos ver aqui que temos um pool HDrawable que vai desenhar 40 ativos, eles vão ser adicionados a este estágio, nós vamos estar pintando um retângulo que tem um arredondamento de quatro, eo tamanho é apenas uma largura de 18 e uma altura de seis. Temos um colorista com um pool HColor e algumas cores aleatórias aqui, e sabemos que ele só vai ser aplicado para preenchimento. Está bem. Rolando para baixo aqui, temos um temporizador porque queremos cambalear quando essas coisas forem apresentadas na tela. Então, em vez de fazer uma solicitação tudo, estamos usando um temporizador para gerar nossos retângulos. linha 44 tem um NumCycles, então sabemos que este temporizador em particular só vai ser executado 40 vezes e, em seguida, desligar. Sabemos que ele vai disparar o retorno de chamada a cada 250 milissegundos, e quando essa chamada de volta disparar, ele simplesmente vai pedir ao grupo para solicitar um item. Então, temos pool.request. Agora, isto é um enxame. Então, se você olhar aqui na parte inferior com o sorteio, eu tenho H.DrawStage, e então eu estou fazendo alguma outra sintaxe de processamento para representação. Então, eu só quero mostrar a vocês aqui que eu estou fazendo duas elipses. A primeira elipse, eu vou colocar em direção ao topo e realmente dizer a cor que um cerco, e então eu vou colocar um no centro da tela, e eu vou colorir aquele laranja escuro. A razão pela qual eu escolhi duas cores é porque um ponto vai representar o nascimento dos objetos, e o outro ponto vai representar o ponto que o enxame está tentando enxame ao redor. Está bem. Então, eu tenho duas elipses em duas cores alternativas. Agora, quando olhamos para o OnCreate aqui, e vamos em frente e olhar para o nosso HRetangle que é o nosso Drawable, não estamos aplicando qualquer traço. Estamos adicionando um local e esse local é o primeiro ponto. Então, olhe, largura dividida por dois, então ele vai ser o centro da tela, mas então ele vai ser 100 pixels fora do topo. Se você olhar aqui na linha 60, esse é o mesmo ponto exato, largura dividida por dois, 100 pixels do topo. Então, isso representaria a posição em que os ativos nascem, e a ancoragem é H.CENTER. Então, nós cobrimos tudo que não é HSwarm, para que possamos ver o que está acontecendo aqui. Agora, vamos cobrir o enxame. Enxame é um comportamento, mas o mais importante é um sistema, certo? É um sistema que vai controlar todas as coisas na tela. Então, pelo menos antes de rodarmos esse arquivo, temos um entendimento de que a cada 250 milissegundos, ele vai criar um retângulo na posição que definimos desejável. Está bem. Então, vamos ver o enxame aqui. Mas na linha um, você vê eu disse Hswarm, vamos chamá-lo de enxame, e em seguida, nas linhas 10-15, eu crio uma instância desse HsWarm. Então, eu disse, o enxame é um novo Hswarm. Deixa-me dizer-te umas coisas que precisas de saber. A primeira é, eu quero adicionar um objetivo, e o objetivo é, largura dividida por dois, altura dividida por dois. Então, o objetivo que você está tentando alcançar é o centro da tela. Então, o enxame vai se enxame com sempre esse desejo de tentar chegar ao centro da tela. Agora, precisamos dar uma velocidade ao enxame. Então, neste caso, eu disse tudo bem, o enxame do objeto deve ter uma velocidade de quatro. Agora, você verá que temos Turnease. Então, quantos graus de rotação faz para tentar chegar ao centro da tela? Então, neste caso, eu disse 0.025f. Então, é um carro alegórico. Está bem. Eu também tenho argumentos aqui para contração, e você vai notar que contração está definida como zero. Então, com este arquivo em particular, ele não está aplicando qualquer contração, que vamos abordar no exemplo três. Então, agora, sem contração. Então, as linhas 10-15 configuram esse comportamento de enxame, e o comportamento de enxame é um sistema. Agora, o que eu preciso fazer é registrar os objetos no sistema. Então, vocês vão notar aqui na linha 37, enquanto eu estou criando ativos, como o temporizador está disparando a cada 250 milissegundos e enquanto ele está disparando o OnCreate para cada um desses ativos individuais, linha 37 diz, “Ei enxame, Quero dar-te outro jogador no sistema. Então, eu só digo, swarm.addTarget (d), d sendo nosso HreCT drawable. Então, agora o enxame está registrando ativos para ele, e neste caso ele vai registrar 40 deles. Agora, se eu testar este esboço, começamos a ver o comportamento do enxame. Então, a cada 250 milissegundos, um ativo está sendo criado, eles estão nascendo nessa largura dividido por dois, y100, e isso os coloca em movimento. Está bem. Agora, é para colocá-los em movimento, mas aqui, deixe-me apenas fechar isso e mover para cima aqui e reexecutar isso novamente, assim podemos olhar para o enxame enquanto ele está correndo. O objetivo é esta largura aqui dividida por dois, altura dividida por dois. Então, esses caras estão tentando chegar ao local central. As outras coisas que temos que olhar é, ok, legal. Há uma velocidade associada a esses objetos. Então, agora estamos vendo uma velocidade de quatro, e então temos Turnease. Então, que Turnease é graus que está girando para tentar chegar à largura dividida por dois, altura dividida por dois, esse objetivo. Mas, porque há uma velocidade e porque há uma rotação, você pode ver que eles meio que caem em um círculo perfeito. Porque com base na velocidade e com base no TurneAse, eles realmente nunca chegam ao gol. Novamente, é como, pense em dirigir seu carro, você só pode girar o volante muito, e se você estivesse em um estacionamento e você colocasse uma lata de refrigerante no meio do estacionamento, e você tivesse seu pé em quatro milhas por hora por a velocidade, e você virou o volante, você nunca vai chegar à lata. Você só vai estar basicamente fazendo círculos em torno dessa lata. Então, novamente olhar para essas duas variáveis determina como este sistema vai se comportar. Agora, eu vou executá-lo mais uma vez porque isso vai preparar como vamos para o exemplo dois, que é, assistir a animação do banho. Então, note que eles estão sempre atirando para o lado direito, e todos eles estão caindo neste padrão perfeito. Então, eu queria cambalear um pouco. Então, vamos em frente e fechar isso e passar para o exemplo dois. Agora, no exemplo dois, eu faço apenas um pequeno ajuste que é, eu quero aleatoriamente como essas coisas são jogadas fora de sua posição de banho. Então, se você olhar para o exemplo dois, tudo que eu quero que você faça é rolar para baixo e olhar para o método OnCreate. Você vai notar aqui que eu coloquei algumas coisas extras. Um é, Eu só disse rotação flutuante é igual a aleatório (TWO_PI). Então, eu coloquei nesta variável de rotação, e então eu fiz um pequeno ajuste para o nosso d. HDrawable na linha 35, eu disse, ok, bem, o raio de rotação deve ser qualquer rotação disparada na linha 30. Eu também só quero fazer um movimento rápido de HDrawable d para ser rotação cosseno vezes dez para o x, e rotação seno vezes dez para o y. agora, apenas com essa pequena adição neste exemplo particular, vamos assistir o que acontece. Você vai notar que quando os ativos começam a ser criados, eles meio que disparam como fogos de artifício. Em vez de serem constantemente jogados para a direita, estou distribuindo aleatoriamente como essas coisas são jogadas fora. O problema com esse arquivo agora, é que não há contração, e como não há contração, novamente, não importa como eu jogue essas coisas fora, eles vão cair nessa rotação circular. O que é bom sobre este em particular é este, que você tem alguns que estão indo no sentido horário e você tem outros que estão indo no sentido anti-horário, enquanto no exemplo um, eles estavam sempre indo no sentido horário. Então, pelo menos com a adição deste código no exemplo dois, nós temos alguns ativos indo no sentido horário e alguns indo no sentido anti-horário. Está bem. Vamos em frente e fechar isso e eu vou em frente e seguir em frente para o exemplo três. A única mudança dentro do exemplo três é, e eu diria que o exemplo três é na verdade uma cópia do exemplo um, eu me livrei desse tipo de fogo de artifício de jogar fora comportamento no exemplo três só porque eu quero manter as coisas simplificadas. No exemplo três, tudo o que fiz foi adicionar esta contração. Na verdade, eu mudei a velocidade para cinco, o Turnease agora é 0.05, mas olhe para este contração, contração é 20. Aqui é onde é apenas uma pequena variável que realmente atinge a excitação neste comportamento particular, que é, o que contração vai fazer é tirá-la do curso. Então, se ele está implementando uma certa velocidade e está implementando um certo Turnease, tudo o que o twitch faz é basicamente tirá-lo do curso. Então, novamente, imagine tentar dirigir seu carro para chegar a uma lata de refrigerante sentado no meio da estrada, mas acontece que há outros carros que estão realmente batendo em você, derrubando você do curso. Então, isso é o que é contração. Twitch está se desviando do caminho, apenas batendo-os fora, é claro, um pouco. Agora, e novamente, essa é a única mudança aqui no exemplo três. Veja o que acontece quando fazemos este esboço. Começamos a ter esse comportamento orgânico muito bonito porque agora parece que cada um deles tem uma mente própria. Então, você pode ter visto no vídeo de introdução que eu mencionei, é como um comportamento de inseto e ele realmente assume esse tipo de estética porque, como o enxame está correndo e como todos eles estão usando uma velocidade de cinco, e sim todos eles estão usando Com uma volta de 0,05, cada um recebe aleatoriamente uma batida de contração. Então, assim que isso é implementado, todo este sistema parece assumir todas essas coisas parecem que eles estão agindo de forma independente, mas eles estão realmente obcecados em chegar ao centro da tela. Então, isso encerra exemplos um dois e três. No próximo vídeo, vamos cobrir as adições em exemplos de quatro a sete. Vejo você no próximo vídeo. 29. Unidade 7, Vídeo 2: Ok, este é o vídeo final nesta seção. Vamos trabalhar nos exemplos quatro, cinco, seis e sete. Estas são mutações, apenas para mostrar algumas melhorias que podem ser aplicadas a esses arquivos. Então, vamos em frente e olhar para o exemplo quatro e alguns dos exemplos, alguns dos ajustes que eu fiz é olhar para a linha sete. Eu disse auto claro falso. Então, agora ele vai começar a deixar trilhas na tela. O outro ajuste que fiz é olhar para a linha 11. Nos arquivos anteriores objetivo do anúncio foi a largura dividida por dois, altura dividida por dois. Aqui estou só a dizer H.Mouse. Então, H.mouse vai retornar a posição x e y do mouse como eu atualizar, então é outra dica para o que fizemos em H.Follow, que é usando gesto. Então, agora o objetivo é onde quer que o mouse esteja. Fora isso, o código é exatamente o mesmo com um outro pequeno ajuste aqui que está na linha 31 para o tamanho, eu apenas aleatorizei o tamanho dos H.recs que são criados. Então, para a largura está fazendo aleatório 10, 20 e para a altura está fazendo aleatório dois, seis. Agora, se eu fizer este esboço, você deve notar que se eu colocar meu mouse aqui no centro de novo, há 40 ativos neste traçável, o temporizador a cada 250 milissegundos está disparando, e eles são tudo o que eles são apenas tentando chegar ao meu rato. Então, se eu realmente mover meu mouse aqui para o canto superior direito, o objetivo do enxame foi alterado, então agora eu posso começar a executar o gesto eo enxame está constantemente tentando perseguir a localização do meu mouse. Então, lembre-se que o objetivo nem sempre tem que ser um ponto fixo. Neste caso pode realmente ser um ponto que está se movendo, no caso deste é H.mouse. Tudo bem, então vamos fazer algumas outras melhorias. Isto, obviamente, está usando colorist e um HColorPool então, Eu pensei que talvez eu iria tentar algumas outras coisas que se você olhar para o exemplo cinco, nós cobrimos isso na primeira classe, mas até agora eu realmente não falei sobre isso até agora que é HColorField. Se você se lembrar, HColorField permite criar pontos de gradiente de cor. Então, aqui você pode ver que estou adicionando um ponto de azul e adicionando um ponto de rosa. Então, eu estou usando HColorField para definir pools de cores e também se você lembrar, se esses pools de cores se sobrepõem, eles realmente misturam novas cores onde a sobreposição realmente ocorre. Então, a única mudança neste é a adição de se livrar de, você vai notar que ele se foi agora, o.colorist HColorPool está faltando nesta seção particular. Agora estou usando na linha um aqui HColorField, e novamente nas linhas 11 a 17, eu estou especificando duas cores, um azul e um rosa e dizendo que eles só devem ser aplicados a um preenchimento. Agora, há algumas coisas se você lembrar com cores de pixel que temos que fazer, é que você tem que definir um campo de preenchimento com cor e você pode pensar que campo de cor é como ser uma tonalidade. Novamente, não sei se você se lembra daquela conversa que tivemos na primeira aula. Mas eu quero cores saturadas, então eu realmente vou definir o preenchimento para preto,000000. Agora, como estou usando o H.mouse, e porque estou movendo o mouse e o enxame está seguindo o gesto, preciso atualizar constantemente os ativos que estão dentro do enxame. Então, vamos olhar aqui para baixo para a função de desenho, e você vai notar que eu tenho um pouco for-loop. Agora, um for-loop é algo novamente, que é executado um número definido de vezes. Então, o que eu quero fazer é fazer um loop sobre todos os 40 ativos que estão na tela, e atualizar cada um desses 40 ativos atualizar suas cores. Então, eu digo para HDrawable d dentro da piscina. Então agora eu sei que este for-loop vai correr 40 vezes. Quando faço isso, digo que quero falar com o campo de cores. Então, eu digo cores.ApplyColor e eu estou aplicando-o de volta para d.fill e novamente, o d.fill é um bloco. Agora, se eu rodar este esboço novamente, você vai notar que um enxame é iniciado você deve ser capaz de mover o mouse, vai correr para o mouse e como você se move, você está realmente atualizando a cor de preenchimento com este campo de cor . Então, se eu só me mudei para esta posição certa, eu estou recebendo a saturação total do azul e novamente, você vai notar quando eu começar a me mover para o meio, eu tenho este roxo porque é onde os dois campos de cores estão realmente misturando. Se eu me mudar para cá para a extrema esquerda, então é claro que vou ter o mais brilhante do rosa. Como é um gradiente, novamente à medida que você começa a se afastar, você poderá começar a ver o gradiente à medida que ele se move. Então, se eu entrar nesta posição, provavelmente vou chegar perto desse preto o mais possível. Então, novamente isso está usando HColorField. Então, no exemplo quatro, estávamos usando HColorPool e exemplo cinco, estávamos usando HColorField, então, é claro, se você fizer a transição para o exemplo seis, eu quero fazer PixelColorist. Então, se você olhar para HPixelColorist nós temos nossa cor jpg. Então, vamos em frente e olhar para a linha um. Eu estou dizendo cores HPixelColorist nas linhas 11 a 15, eu estou dizendo hey ir para a pasta de dados e encontrar este color.jpg. Fora isso, o código ainda é absolutamente o mesmo, exceto por aqui embaixo no fundo do sorteio, eu fiz um pouco de um ajuste que eu disse, “Legal, eu preciso fazer um loop sobre todos os ativos no pool e eu preciso atualizar sua cor, colors.ApplyColor” mas observe que eu estou dizendo d.alpha 50 então eu estou realmente mudando a transparência alfa dos HRetangles dentro do sistema de enxame. Então, se eu realmente executar este esboço, você vai notar que ele está amostrando a cor, mas novamente, eu tenho este alfa de 50 para que eu possa começar a fazer com que eles tipo de criar novas cores enquanto eles correm sobre o outro. Se eu ficasse em uma seção, obviamente o enxame construiria o suficiente para que uma área específica ficasse bastante saturada com a cor que está sendo amostrada do jpg. Agora, passando para o último arquivo que é o exemplo sete, você sabia que este estava chegando, está adicionando HCanvas então no topo eu disse HCanvas c1, novamente isso é apenas repetição, tanta repetição na programação. Linhas 12 a 13 criando um HCanvas auto limpar false. Novamente, observe que o falso AutoClear foi removido da linha nove, ele foi adicionado ao HCanvas com um adorável desvanecimento de dois e nossa tela C1 está sendo adicionada ao palco. Então, como eu fiz isso, note que eu precisava fazer um ajuste para a linha 25. Então, em vez de adicioná-lo ao palco, eu digo pool.Autoparent e, em seguida, passá-lo a tela. Então, agora cada um desses 40 HRECTs está sendo desenhado para a tela em vez do palco. Agora, novamente o resto do código não foi modificado. O for-loop para baixo na parte inferior, eu tirei o alfa e, em seguida, apenas disse d.preencher e colado naquela cor de preto. Então, agora, quando eu faço este esboço, isso representa para mim a beleza de todos os elementos trabalhando em conjunto. Então eu tenho um enxame realmente agradável acontecendo, eu tenho que pegar a cor do HPixelColorist daquele jpg sentado no arquivo de dados, mas estamos usando o poder do HCanvas para queimar lentamente a trilha do para que ele não preencha totalmente a tela, ele me permite explorar áreas do esboço e depois fazer com que as trilhas desapareçam no fundo. Ok, então isso termina explorando Hswarm e novamente, Deus, eu odeio continuar dizendo as mesmas coisas uma e outra vez, mas novamente, isso é apenas usando um hRect. Isso pode usar qualquer um dos SVG que você fez. É aí que entra a experimentação. Estou tentando manter o código o mais genérico possível para que você possa começar a : “Bem, e se eu colocar uma imagem no lugar disso?” ou, “E se eu usar SVG com isso?” Você pode começar a misturar e combinar algumas dessas coisas que aprendemos fazendo esses tipos de mutações que eu estou falando. Novamente, isso é coisa que eu faço em uma base diária, é vir acima com essas idéias, tentar escrever o código é genericamente possível que eu possa começar a explorar todas essas mutações diferentes. O que isso parece quando você coloca alguns de seus ativos SVG lá? Eu estou supondo que você vai postar alguns vídeos dentro da seção final do projeto que vai nos mostrar exatamente como ele é. Então, estou animado para ver o que vocês fazem com o sistema em particular. Ok, vamos passar para as duas últimas grandes seções de código, e vamos passar para o Hoscillator em seguida. Aqui está a parte em que quando você clica em Hoscillator você surtou um pouco porque sim, há 23 exemplos na seção Hoscillator. Eu estou namorando oscilador de idade, eu estou apaixonado por Hoscillator e você obviamente vai ver por que enquanto nos movemos através dessa progressão. Então, Hswarm, tem sido fantástico. Vejo você na próxima seção Hoscillator. 30. Introdução ao HOscillator: Neste momento, você chegou à seção, que é o meu favorito absoluto e que é o Hoscillator. Porque o Hoscillator é tão simples, tão bonito, e tão surpreendente. Há tantas mutações que vamos fazer com o Hoscillator. Isso, você não vai dormir, você não vai dormir por um mês. Porque você vai estar pensando em todas essas maneiras diferentes, de combinar o Hoscillator para criar essas animações inesperadas impossíveis. Agora, o Hoscillator é apenas um padrão de onda, e nós temos quatro ondas diferentes com as quais você pode trabalhar. Há uma onda senoidal, que é aquela bela curva. É provavelmente o que mais usaremos. Temos uma onda quadrada, temos uma onda de serra e temos uma onda triangular. Agora, vamos olhar para alguns dos parâmetros do Hoscillator. Novamente, como Enxame, ele quer conhecer um alvo, quem estamos aplicando essa onda. Ele também quer conhecer propriedade, assim como HTWeen fez, na seção anterior. Quais são algumas coisas que podemos realmente oscilar? Poderíamos oscilar novamente, Alpha, oscilar a escala, oscilar a rotação, oscilar a posição. Ele quer saber coisas como alcance. Então, qual é o intervalo de oscilação? Poderia ser, se estivéssemos aplicando-o à rotação, poderia ser, 180 graus positivos a 180 graus negativos. Então teríamos essa coisa, como um pêndulo, indo e voltando. oscilador tem frequência, então qual é a amplitude da onda? Está em uma onda ondulante lenta? Ou é muito errático? Nós também temos uma propriedade de passo atual, e passo atual, é o que nos permite compensar essa onda, através de diferentes coisas que estamos pintando na tela. Então, na primeira classe, aprendemos coisas como GridLayout. Bem, GridLayout e Hoscillator trabalham bem juntos? Porque, nós podemos colocar as coisas na tela, e então fazer a oscilação acontecer em todos esses elementos na grade. Agora, vamos aplicar o HOScillator à animação bidimensional. Onde ele realmente fica bananas, é quando nós realmente aplicar HOScillator a uma animação tridimensional. Podemos oscilar coisas como, o espaço Z, bem como, vamos fazer uma amostra onde estamos realmente usando HBox, que nos permite fazer um cubo tridimensional, e nós podemos realmente oscilar como essa caixa gira em três espaço dimensional. Então, Hoscillator, se não é o seu favorito, não estamos mais namorando. É tão simples assim. Se você não ama essa seção, vou terminar com você. 31. Unidade 8, Vídeo 1: Cada oscilador. Você é meu melhor amigo. Cada oscilador torna tudo bonito. Nem consigo expressar o quanto amo o Hoscillator. É provavelmente a coisa mais surpreendente que eu já experimentei, no sentido de que, você mistura como algumas coisas e é como “O quê?” Eu sou como, “Sim”. É como, “o quê?” É uma loucura. Eu adoro isso. Vinte e três exemplos, cara. Eu enlouqueci. Eu realmente amo essa aula. Então, anexado a este vídeo obviamente é um arquivo zip. Abra isso, você vai ver 23 exemplos. Neste primeiro vídeo, vamos percorrer os seis primeiros. Então, novamente, vá em frente e baixe esse zip, descompacte, você deve estar olhando para ele e aqui está. Agora, vamos em frente e olhar para o exemplo um. Exemplo um não contém um Hoscillator. Na verdade, o que ele contém é o código que fizemos na primeira classe usando nosso belo amigo, HGridLayout. Então, vamos apenas percorrer essa grade que vamos criar e, em seguida, no exemplo dois, começaremos a explorar a oscilação. Agora, antes de entrar no código de propaganda, eu só quero pular todo o caminho até o fundo e, novamente, apenas mostrar algum código de processamento. Então, se você olhar aqui, eu estou criando um traçado de um cinza claro, CCCCCC, e então eu estou criando uma linha, e eu estou criando uma linha do primeiro ponto é zero, altura dividida por dois. Então ele está centrado no eixo y e o outro ponto é largura por altura dividida por dois. Então, estamos basicamente fazendo uma linha horizontal. Novamente, eu quero ver essa linha do horizonte porque uma vez que entramos em oscilação, eu queria ver como a oscilação afeta essa linha de base. Então, vamos em frente e rever isso. No topo temos um HDrawablePool. O pool vai anexar 90 ativos. Parece que estamos anexando um retângulo novamente, mas confira o tamanho, o lado tem apenas seis pixels por seis pixels. O arredondamento das bordas é dois, está ancorado no centro e não há curso. Há um colorista com um HColorPool com algumas cores aleatórias sendo aplicado apenas para preencher. Você vai notar, de novo, eu vou pular algumas coisas. Olhe para baixo, sim, a devolução de RequestAll. Observe que não estamos usando um temporizador para construir essa grade, quero todos os 90 ativos de uma vez. Vamos ver o layout aqui. Então, temos um HGridLayout. Vai começar em um eixo x de nove e altura dividida por dois. Então, ele vai anexar na linha do horizonte central. Como nosso HRCT é de seis pixels por seis pixels, observe que o espaçamento é de sete pixels. Então, bem, deixe-me voltar a isso porque você pode notar que não há zero para o Y. Como há 90 ativos nas colunas, o que significa que estamos usando layout de grade para construir uma linha de ativos e esses ativos são seis pixels por seis pixels, mas como o espaçamento é sete, há uma calha de um pixel entre cada um dos Hretângulos. Uma vez que estamos apenas construindo uma linha, realmente não há razão para colocar qualquer número para o espaçamento y. Então, vamos em frente e testar este esboço e novamente, você deve ver que temos 90 retângulos todos construídos em uma linha, e está perfeitamente centrado na linha do horizonte que definimos para baixo no desenho. Tão grande, então agora, eu tenho essa linha de ativos que eu quero aplicar alguma oscilação. Então, pelo menos com este arquivo, você pode ver como estamos anexando essas coisas na tela antes de aplicar oscilação. Vou em frente e fechar isso e vou avançar para o arquivo dois. Agora, dentro do arquivo dois, vou adicionar um oscilador a cada um desses retângulos. Então, se eu rolar para baixo aqui, você notará que há um RequestAll. RequestAll será acionado ao criar para todos os 90 ativos de uma vez e o que acontece é que ele cria rDrawable d. Ele aplica o layout ao d. Mas então, ele cria um oscilador para cada um dos nossos HRetangles. Então, vamos dar uma olhada em algumas das propriedades que vão para o HOScillator e novamente, esta é a primeira vez que estamos cobrindo isso porque nós desnatamos em alguns dos exemplos anteriores acima. Assassino. A primeira coisa que ele quer saber é quem diabos eu estou oscilando. Então, estamos criando uma nova instância de um HOScillator e estamos passando nosso HDRAWable de d. A segunda coisa que ele quer saber é a propriedade que ele está oscilando. Estamos começando a ver aqui um padrão muito semelhante ao HTwin. HTwin queria saber quem estou geminando e qual é a propriedade. Então, como você viu em alguns desses exemplos anteriores, sim, você pode empilhar o inferno fora de Hoscillators, e desde que eles não lutem contra a mesma propriedade, todos eles trabalharão independentemente. Agora, o que é importante notar aqui é que na linha 33, eu disse que o que eu gostaria de oscilar é a propriedade y. Então, isso deve significar que eu vou mover coisas para cima e para baixo no eixo y. Agora, depois de ter especificado a propriedade, ele quer saber, “Bem, o que eu estou oscilando? Qual é o intervalo de oscilação?” Então, por exemplo, se a propriedade h.alpha, o intervalo pode ser algo de 0 a 255. Então ele oscilaria de não visível, zero, até visível total, 255, e continuaria essa oscilação de zero a 255. Então olhe para o que acontece neste arquivo, eu disse que eu quero que ele oscilar de um intervalo de 10 a 50. Agora, ele precisa saber algumas outras coisas, ele precisa saber, bem, quão rápido deve ser. Então, como o enxame, há uma variável de velocidade, e a outra coisa que ele quer saber é a frequência. Então, vamos explorar a frequência um pouco. Frequência, está em uma onda lenta ou é uma onda muito errática? Então, neste, eu disse que a frequência também tem. Agora, este arquivo é na verdade uma falha e a razão pela qual ele é um fracasso é porque eu estou ilustrando pela primeira vez o que acontece quando você passa uma propriedade de y com um intervalo de 10 a 50. Agora, veja o que acontece quando eu testar o filme. Quando eu testar o esboço, ele começa a oscilar, mas você vai notar que toda a arte acabou de saltar para o topo do palco. Bem, por que isso? Bem, a razão pela qual eu fiz isso é porque foi isso que você disse a ele para fazer. Você disse que queria mover esta linha de arte de um intervalo de 10 no y para 50 no y. Então, mesmo que o layout da grade tenha feito um local inicial de altura dividido por dois, então, no caso do exemplo, um em que o criou Ao longo desta linha do horizonte, ele fez isso por uma fração de milissegundo até que o oscilador começou. Assim que o oscilador começou, ele disse: “Oh, sim, legal. Você quer que eu vá de um eixo y de 10 para um eixo y de 50?” Então, de repente, toda aquela fila saltou para o topo e começou a oscilar entre um y de 10 e um y de 50. Então, você pode imaginar que você pode brincar com isso se você disse que o intervalo era zero e o intervalo máximo sobre isso era 640, então de repente você veria que a oscilação está indo do topo da tela todo o caminho para o parte inferior da tela, porque você está especificando posições absolutas de oscilação que é de zero a 640. Então, no caso do arquivo anterior, o arquivo zip que você tem, ele está fazendo um intervalo de 10 a 50. Então, isso representa um problema onde você diz “Bem, sim. Eu realmente não queria isso, eu queria que ele oscilar fora daquela linha do horizonte.” Bem, em vez de tentar descobrir isso, se você fez da maneira mais difícil, você diria “Ok. Bem, o intervalo é a altura dividida por dois menos 100, e então o intervalo máximo é algo como altura dividida por dois mais 100.” Então, se você executasse este esboço, você notaria como, “Oh, ok. Legal, isso é o que eu queria usar, começar nessa linha do horizonte e então oscilar fora dessa linha do horizonte.” No entanto, este é um longo caminho de fazê-lo e, novamente, eu gosto de tornar as coisas fáceis. Então, eu vou levar isso embora, voltando para o alcance de 10 e um alcance de 50. Agora, isso realmente só se aplica quando você está definindo uma propriedade como x ou y, que você pode fazer o próximo conjunto de truques, que é ir em frente e ir para o exemplo três, e você vai notar que nós já consideramos que você provavelmente quer oscilar fora de uma posição já definida. Então, você vai notar que na linha 34, há valor relativo e, em seguida, você passa, é valor relativo. Então, vamos apenas pensar sobre isso aqui por um segundo, layout está dizendo, “Eu vou anexar a obra de arte, altura dividida por dois.” Então, ele anexa isso na linha do horizonte central. Quando chegar ao oscilador, você está dizendo, “Ei, eu quero oscilar esses drawables, eu quero oscilar o eixo y, mas me faça um favor na mente onde essa obra foi criada inicialmente.” Neste caso, o valor relativo é d.y, que é a altura dividida por dois, é a linha inicial do horizonte no centro da tela. Então, intervalo torna-se um intervalo fora do valor relativo. Então, aqui eu disse: “Cara, onde quer que você tenha isso ligado, que é D.Y, faça menos 100 fora de D.Y, e faça 100 positivos fora de D.Y. Então, novamente você não precisa se preocupar com, “Oh, o que eu tenho para encontrar essa linha do horizonte? Você pode apenas dizer valor relativo, e novamente, isso é especificamente se você estiver trabalhando com o eixo x, o eixo y, o eixo z, valor relativo é provavelmente algo que você usará. Então, ele está usando intervalo baseado fora deste valor base. Então, agora, novamente quando eu executar este esboço aqui, você vai notar que ele está agora cuidando da linha inicial do horizonte, que o layout usado, que novamente é o local inicial, altura dividida por dois aqui na linha 21. Então, o valor relativo está considerando que ele está anexando a obra de arte em altura dividida por dois. Então o alcance está simplesmente oscilando fora desse número base. Conseguiu? Bom. Então, a próxima coisa que você pode notar é, “Josh, isso não é o que eu esperava, eu pensei que era uma onda.” Tecnicamente, é uma onda, mas está aplicando uma onda a todos os ativos exatamente ao mesmo tempo. Então, o que provavelmente queremos fazer é criar um pequeno deslocamento para que eles ainda usem a onda, mas apenas compensar cada um dos HRetangles apenas um pouco para que nós realmente obter esse padrão de onda. Então, vamos em frente e olhar para o exemplo quatro. O que o exemplo quatro faz é introduzir essa ideia do passo atual, então pense nisso como um deslocamento. O que eu estou fazendo é, está dizendo, “Tudo bem, passo atual é o Pool.CurrentIndex.” Assim, o primeiro bloco passa um para a etapa atual, o segundo bloco passa para a etapa atual. Então, uma vez que a etapa atual é obter seu próprio número exclusivo, estamos usando esse número único como um deslocamento na onda, então é realmente esta linha 38 no exemplo quatro, que apenas se torna a magia. Veja o que acontece quando testamos o esboço. Isso é provavelmente o que você esperava, que é, estamos usando essa onda, estamos usando essa oscilação, mas não é até que nós realmente colocar em um deslocamento dos ativos na tela, que nós realmente começamos a obter uma onda padrão aqui. Então, linha 38, passo atual, pool.currentIndex. Agora, ótimo. Vamos começar a fazer alguns ajustes. Então, eu vou ir em frente e fechar o esboço quatro, e eu vou passar para o esboço número cinco. A única coisa que eu mudei no esboço número cinco é que eu mudei a frequência, então você pode notar aqui, a velocidade é um e a freqüência é cinco. Enquanto na anterior, a frequência foi de duas. Então, como a frequência era mais baixa, era uma onda ondulante suave. Agora, se eu mudar a frequência para cinco, isso significaria que esta onda vai ser muito mais perturbadora, e na verdade quanto maior você fizer esse número, mais perturbadora a onda se tornará. Mas reparem que com essa frequência, parece que acelerou o movimento daquela onda. Então, eu quero mostrar a vocês um pequeno truque que é, se eu tenho uma velocidade de um e eu tenho uma freqüência específica, isso me faz começar a pensar sobre essa linha 38, este passo atual. Este passo atual me faz pensar, bem, ele está pisando por um a cada vez, então um é um, dois é dois, três é três, quatro é quatro, e assim por diante. Mas se eu puder incrementar os passos como um número maior, como isso afetaria essa onda? Então, eu vou ir em frente e fechar isso. Vou seguir em frente e olhar para o exemplo seis, e o exemplo seis tem linhas 37 e 38 modificadas. A frequência que eu realmente caiu de volta para dois porque eu realmente gostei do movimento daquela onda. Eu só queria mais ondas no movimento, mas não necessariamente mudando a velocidade da onda ajustada. Então, dê uma olhada. Na linha 38, eu só disse, em vez de fazer um é um, dois é dois, três é três, por que o passo atual não ser pool.currentIndex vezes seis. Então, eu estou realmente multiplicando um número para o índice atual. Então, dessa forma, os passos entre cada um dos ativos não é um único salto cada vez. Então, agora, quando eu executar este esboço, você vai notar que a velocidade e a frequência é realmente o que eu gostei, mas eu mudei os passos no passo atual para que ele realmente apresenta mais ondas no padrão de oscilação. Sim, legal. Ok. Vou fechar este vídeo agora porque, por alguma razão, estou falhando miseravelmente. Estou tentando manter esses curtos. Então, vamos embrulhar este e vamos passar para os próximos quatro arquivos que vai ser exemplo sete seno, exemplo oito quadrado, exemplo nove triângulo e exemplo dez serra. 32. Unidade 8, Vídeo 2: Ok. Este vídeo provavelmente vai ser um inferno muito mais curto porque eu realmente quero mostrar os quatro tipos diferentes de ondas que nós realmente temos dentro do hype. Então, se eu fosse executar rapidamente construir sete, você vai notar que, por padrão, cada oscilador está sempre usando uma onda senoidal ok. Então você vê que você só tem essas curvas realmente bonitas, com uma onda senoidal. Agora, há alguns ajustes que eu fiz neste arquivo que vamos fazer nesses quatro e que é que eu mudo a propriedade. Então, se você olhar aqui, eu estou mudando H.Altura. Então, se você se lembrar quando anexamos a arte nesta grade, cada um dos retângulos H tem 6 pixels x 6 pixels e o que eu estou oscilando nesses arquivos é que eu estou esticando apenas a altura da propriedade, ok. Então, se você olhar para a linha 33 eu estou dizendo propriedade H.Height, e então se você olhar para o intervalo, aqui eu não preciso usar o valor relativo porque eu vou apenas dizer para que números eu quero ir. Então, neste caso eu estou dizendo, “Ei eu quero que o intervalo seja 6, que é o que você foi inicialmente criado à direita, bem aqui na linha 11,” HRCT 6 pixels x 6 pixels, para o retângulo H. Aqui estou eu dizendo, ok eu quero que o intervalo seja 6-200 pixels. Observe que a velocidade é 1 a freqüência é 3, e novamente, I escalonou o passo atual um pouco dizendo Pool.CurrentIndex vezes 3. Então, quando você executa o exemplo sete, você está vendo que bela onda senoidal sendo aplicada para esticar a altura desse retângulo H. Ok. Agora, novamente, existem quatro osciladores disponíveis dentro de um hype, por padrão, onda senoidal. Se você ir em frente e saltar para oito, você pode realmente mudar a forma de onda para um quadrado. Então, aqui eu tenho onda formando um H. quadrado e este é estranho. Isto é realmente uma onda, mas a onda é para baixo ou para cima, certo? Não é uma onda senoidal, não há uma inclinação ou curva para esta onda. Ainda é uma onda, mas realmente você está apenas recebendo a faixa baixa e a faixa superior usando quadrado. Então, você vai notar aqui você pode dizer forma de onda e, em seguida, H.quadrado. Se saltarmos para o exemplo nove, notarão que temos a forma de onda do triângulo H. Ok. Então, novamente não é uma onda senoidal, não são curvas, mas na verdade estamos usando um triângulo para cima e um triângulo para baixo. Então, novamente este é outro tipo de forma de onda que você pode usar dentro do oscilador H, sendo H.triângulo. A última que temos está dentro do exemplo 10, que é uma onda de serra. Então, se você olhar aqui na linha 37, nós temos a forma de onda de H.Saw, e se você seguir em frente e executar este esboço, a onda de serra basicamente se acumula até chegar ao seu alcance máximo e então cai todo o caminho até seu alcance mínimo. Então esta é uma onda de serra. Então, enquanto eu tenho essas amostras para mostrar os diferentes tipos de formas de onda que podem ser usadas dentro do oscilador H, onda senoidal é a mais sexy. Então, na verdade, a partir do resto desses arquivos eu vou estar usando a onda senoidal padrão porque na minha opinião é a mais bonita. Ok. Isso acaba com este vídeo. No próximo vídeo, vamos abordar exemplos 11 a 15. Vejo você no próximo vídeo. 33. Unidade 8, Vídeo 3: Está bem. Neste vídeo, vamos abordar exemplos, 11 a 15. É aqui que a oscilação realmente começa a apresentar algumas das surpresas visualmente. Pelo menos coisas que eu nunca esperava inicialmente, e assim, começou nosso caso de amor ao longo da vida. Vamos seguir em frente e olhar para o exemplo 11 e vamos apenas digerir alguns dos conteúdos que estão acontecendo aqui. Primeiro, é um pouco de uma partida. Eu me livrei do pool de objetos, e HDrawablePool, e layout de grade. Eu só quero usar um for-loop porque eu estou realmente apenas indo para anexar tudo na mesma posição exata. Então, vamos começar a quebrar este código aqui. Primeiro é que eu tenho um for-loop, e este for-loop vai correr 40 vezes, e cada uma das 40 vezes eu vou anexar nosso HRCT de r1. Se olharmos para r1, eu digo : “Ei, você é um HRetangle, seu arredondamento é 20, seu tamanho é escala inicial.” Voltaremos a isso em um segundo. Não vai ter derrame. O preenchimento vai obter uma cor aleatória fora de r HColorPool aparecem na parte superior. A localização vai ser a largura dividida por dois, altura dividida por dois. Então, eu sei que cada um desses 48 Hretangles vai anexar diretamente no centro da tela. A âncora é H.CENTER. Novamente, super importante porque neste primeiro arquivo, vamos começar a trabalhar com rotação para pivô, e você também notará que eu especifico uma rotação de 45 graus. Então, em vez de ser um quadrado, ele vai girar 45 graus e ser uma forma de diamante, e H.add (r1) para o nosso retângulo. Vamos fazer backup e olhar para este negócio de escala inicial que temos em cima. Aqui no topo, você vai notar nas linhas quatro e cinco, eu tenho uma escala inicial de 450 e um deslocamento de escala de 10. Não é até que você desça para a linha 37 que você vê que depois que ele é executado pela primeira vez e anexa o primeiro HRectangle a 450 para o tamanho, StartScale começa a diminuir de tamanho para baixo em 10. Então, se você olhar aqui, ele diz, “StartScale -= scaleOffset.” Então, isso significa que na linha 37, vai de 450 para 440, depois para 430, depois para 420, depois para 410. Então, o StartScale está diminuindo lentamente em tamanho. Agora, você vai notar que eu tenho o Hoscillator comentado, e isso é porque se nós realmente rodarmos este esboço, você vai ver que sim, na verdade, que for-loop anexou 40 coisas, ele aleatoriamente pegou uma cor no pool de cores. Ele anexou o primeiro a 450 pixels para a largura e altura. Então, o próximo é em 440, o próximo foi em 430, e assim por diante. Cada retângulo começou a diminuir dez pixels a cada vez. Então, agora, nós temos essa coisa realmente linda de tronco de árvore cortada em espiral. Ótima. Agora, vamos em frente e colocar o nosso Hoscillator. Então, vamos apenas ir em frente e olhar para o nosso Hoscillator. Eu disse que o alvo obviamente é R1. A propriedade será H.rotação, e o valor relativo será de 45 graus, que é a rotação inicial que definimos na linha 23. Olhe para o alcance. O intervalo é negativo 20 positivo 20. Então, nós tínhamos este quadrado, ele virou 45 graus e agora ele está girando negativo 20, positivo 20 fora do valor relativo inicial de 45 graus. Você também deve notar que nossa velocidade é 0,4, nossa freqüência é oito. Então, esse é um número maior do que os arquivos anteriores, e passo atual é i. Então, eu estou apenas pisando por um cada vez. Você percebe que eu é o nosso número inteiro aqui em cima no for-loop. Então, CurrentStep é zero e, em seguida, um, e, em seguida, dois, e em seguida, três, e então quatro, e assim por diante. Então, vamos em frente e executar o esboço. Agora você verá que a oscilação está girando, está oscilando a rotação desses HRetângulos entre 20 negativos e 20 positivos. Mas novamente, porque o passo atual é i, eles estão um pouco deslocados. Agora, você pode estar perguntando, “Whoa, por que você não fez como eu vezes um número como você fez no anterior?” Bem, se eu fizer isso, se eu disser i vezes três, por exemplo, minha opinião é que a rotação dele é muito perturbadora e você realmente perde, na minha opinião, a lentidão e a beleza de quando você está apenas usando i. se eu disser i vezes três, por exemplo, minha opinião é que a rotação dele é muito perturbadora e você realmente perde, na minha opinião, a lentidão e a beleza de quando você está apenas usando i. errado. Isso é extravagante, mas eu prefiro , para este arquivo em particular, apenas fazer eu. Isso é exatamente o que vamos fazer. Traga isso de volta para i. Cada coisa é apenas pisando por um e novamente, o movimento da oscilação é tão elegante. Tudo bem. Vamos expandir essa ideia. Este é o lugar onde ele realmente fica bizarro, é quando você começa a empilhar osciladores. Mais uma vez, desde que não lutem contra a mesma propriedade, a magia segue-se. Então, vamos em frente e olhar para o exemplo 12, e no exemplo 12, eu acabei de copiar 11 para 12, e então esta é a única modificação que eu fiz, que é eu adicionei um novo HOScillator também visando r1. Mas desta vez, a propriedade é de escala. Eu estou tendo ele escalado entre 50% seu tamanho original para 150 por cento seu tamanho original. Lembre-se de que a escala se baseia no tamanho original da obra artística. Se você se lembrar, o tamanho original começa em 450 e começa a diminuir em dez cada vez. Então, ainda estamos cuidando do tamanho da arte em que ela foi criada, mas estamos dimensionando uma porcentagem com base no tamanho original da obra de arte acima. Ótima. Então, de 50 por cento a 150 por cento, observe que a velocidade ainda é 0,4, a freqüência é oito, CurrentStep ainda é alta. Agora, veja o que acontece quando você testar este esboço. Agora, estamos empilhando dois osciladores que estão trabalhando obviamente juntos. Ele realmente começa a simular esse tipo de sentimento 3D, mas não é. Quero dizer, realmente, isso é apenas uma arte bidimensional. Ainda há 40 deles apenas empilhados em cima do outro, mas oscilação, neste caso particular, realmente começa a enganar meus olhos porque começa a sentir 3D quando na verdade não é. Tudo bem. Vamos passar para outra mutação. Quero continuar mutando este conjunto de base. Então, eu passo para o exemplo 13 e a única coisa que está no exemplo 13 é um novo hoscillator de HY. Então, eu vou mover a posição Y do nosso HRetângulo com um intervalo de oscilação fora do eixo Y. Então, dê uma olhada. Tenho uma propriedade, HY, o valor relativo é, não sei, onde você foi criado originalmente? Bem, onde foi criado originalmente era altura dividida por dois. Então, você pode apenas dizer r1.y, e isso vai buscar o número que foi configurado aqui no local de divisão de altura por dois. Agora, ele está usando isso como um intervalo relativo. Então, ele vai oscilar 50 negativos desse meio, e 50 positivo desse meio. Novamente, a velocidade é 0,4, a frequência é oito, e novamente o passo atual ainda é i. Vá em frente e teste esse esboço e agora temos escala de rotação e Y, novamente, todos oscilando em tandem, e você pode ver apenas começando a fazer essas mutações, cara, o céu é o limite. Começo a pensar bem, quantas maneiras diferentes posso mudar isso para obter resultados diferentes? Para mim, isso faz parte da jornada é tentar descobrir esse ajuste fino para descobrir que tipo de comportamentos de animação eles começam a criar esteticamente. Observe que a velocidade e a frequência são 0,4 e oito para todos esses e eu meio que fiz isso de propósito. Vamos avançar para a construção 14. Construir 14, novamente, apenas introduzir um novo HOScillator, mas desta vez, para o eixo X. Então, acabei de copiar o oscilador Y e renomeá-lo para a propriedade H.X. Claro, o valor relativo vai ser r1.x, que obviamente de cima, recupera largura dividida por dois. Novamente, o centro da tela. Novamente, o intervalo assim como Y é negativo 50 e positivo 50 para a oscilação. A velocidade ainda é 0,4, a frequência ainda é oito, e o passo atual ainda é i. Então, agora, quando eu testo este esboço, novamente agora, eu tenho quatro osciladores todos trabalhando em conjunto. Agora, aqui, você vai notar que porque todos os quatro osciladores estão usando a mesma velocidade, a mesma frequência que realmente cria um padrão. Observe que está indo do canto superior esquerdo para o canto inferior direito. Está fazendo essa animação. Isso porque o oscilador para X e o oscilador para Y têm a mesma velocidade e a mesma frequência. Então, é claro, eles vão cair no ritmo porque eles estão usando os mesmos números. Então, é neste ponto que eu quero falar sobre o exemplo 15, porque o exemplo 15 vai ser sobre interromper esse ritmo. Então, se fecharmos isso e passarmos para o exemplo 15, a única coisa que você precisa ver é como eu mudei algumas das configurações. Então, olhe para a rotação. A rotação está a aumentar agora. Vai de 45 a 45. A velocidade é 0,4, a freqüência é 10, mas o passo ainda é i. Escala está fazendo dois a oito. Então, é diferente do que a rotação fez, e eu adicionei isso i vezes dois para que a escala está acontecendo mais errático na oscilação do que anteriormente. Olhe para a oscilação Y, eu disse, “75 a 75 enquanto o X é 50 a 50.” Mas veja como a velocidade é 0,5 para o X, velocidade é 0,5 para o Y. Mas sob este Y, ele disse que a freqüência é cinco, mas sob o X, eu disse que a freqüência é oito e que o passo atual era i vezes dois. Então, ao interromper todos os números, quando você realmente executa este esboço, ele realmente não cai no ritmo. Você vai ter uma certa estática mas não está caindo no canto superior esquerdo, no canto superior direito. Na verdade, é serpentear assim, e pode vir abaixo. Então, isso vai acontecer interrompendo os números em cada um dos osciladores. Então, agora, cada oscilador realmente está agindo de forma independente. Novamente, é incrível o quanto isso simula algo que parece tridimensional quando não é. Isto é bidimensional e eu estou apenas usando escala para enganar seus olhos para pensar que esta é uma forma 3D. Ok, vamos explorar a próxima série de exemplos. Então, eu vou fechar este vídeo e vamos passar para os exemplos 16 e 17. 34. Unidade 8, Vídeo 4: Está bem. Para este vídeo, vamos estar olhando para os exemplos 16 e 17, e 16 e 17 é quando isso começa a aludir ao tipo de coisas que eu estou constantemente mexendo com para encontrar resultados diferentes. Então, 16 é uma continuação dos arquivos que acabamos de fazer em 11 e 15. Mas passei algum tempo ajustando algumas variáveis. Uma é que estamos anexando 100 coisas na tela. Está bem. Então o comprimento ou a quantidade de coisas que você cria obviamente vai ter um efeito direto para a oscilação. Então, adicione mais e mais coisas ao que fica anexado na tela. Isso obviamente vai mudar o que acontece com a oscilação. Então, neste caso, estou adicionando 100 coisas na tela aqui. A outra coisa que também é importante lembrar é que a âncora vai desempenhar um papel importante na oscilação, especialmente quando se trata de rotação, porque vamos olhar para a linha 19. Eu disse, bem, a âncora é 50. Mas, novamente, é aquele negativo 50, modo que está fora do trabalho artístico. Então, a oscilação agora está acontecendo fora deste ponto de pivô. Então, a rotação agora está indo de 180 negativos para 180 positivos. Tenho uma velocidade de 1, uma frequência de 4. Eu tenho uma oscilação para a escala que vai de 25% seu tamanho original para 100% seu tamanho original com a velocidade de 1 e uma freqüência de 4, e o passo atual é I vezes 3. Então, haverá mais pulsos dentro dessa oscilação em particular. Eu tenho um oscilador para Y que está indo um número muito maior do que antes. Está indo negativo 150 para positivo 150, e para o X, eu também estou fazendo 150 negativos e 150 positivos. Mesmo que ambos usassem uma velocidade de 0,5, você notará que o Y está usando uma freqüência de 2 e o X está usando uma freqüência de 1. Então, apenas mudando as frequências nesses dois, significa, novamente, que eles vão cair fora da repetição. Então, vamos em frente e executar este esboço e ver como os resultados mudaram. Então, eu fiz a escala um pouco mais apertada indo apenas de 25 por cento para 100 por cento. Mas porque eu fiz a oscilação Y e a oscilação X um número muito maior, como 150 negativos e 150 positivos, a amplitude de movimento é muito maior. Novamente, porque mudamos o ponto de ancoragem para ser aquele negativo 50, que afeta diretamente nossa oscilação para rotação que está indo negativo 180 positivo 180. É este tipo de experimentação ou mutação de arquivo que, o que posso mudar a seguir para produzir o que a seguir? Então, eu acabo salvando esses arquivos como tantas iterações tentando descobrir esse tipo de movimentos fantásticos. Novamente, eu adoro como 3D parece, mesmo que seja apenas um truque do olho. Tudo bem. Vamos olhar para o Build 17 porque, como você imagina, eu sempre tenho um loop em torno de coisas que nós fizemos anteriormente. Então, é claro, vou apresentar cada tela. Então, você vai notar que há uma tela H, há nosso C1, há a adição de nossa tela. limpeza automática foi movida para a tela de desenho. Está usando um fade de 2, e estamos adicionando a tela ao palco, linha 25. Novamente, a arte está ficando anexada à nossa tela C1. Então, outra pequena mudança que eu fiz aqui é que eu fiz um pouco de preenchimento, e eu fiz isso ficar cor. Então, está ficando cor aleatória fora desta piscina de cores H. Mas eu estou fazendo uma semente aqui. Então eu fiz I vezes 250 e ele apenas tipo de cria esta faixa interessante. Então, tirando isso, bem, parece que eu estourei o alcance muito mais. Vamos verificar aqui. A rotação ainda é de 180 a 180. A escala ainda é de 25 a 100. Mas ainda assim eu fiz a ampla gama 300,300. Eu fiz o alcance X 300, 300 também. Então, vá em frente e execute este arquivo, e novamente, você deve notar que ele começa a fazer essa bela faixa de cor fazendo uma semente dentro dessa chamada de cor get. Ele faz esse tipo de grupos interessantes. Porque estou usando tela H e um desbotamento, essa coisa queima lentamente. Então, novamente, eu me encontro constantemente fazendo mutações para ver que tipos diferentes de padrões e animações eu recebo. A peça que pode ser anexada a este tipo de coisas é infinita. Eu me encontro constantemente tentando descobrir que tipos de estética eu posso tirar de algo tão simples quanto empilhar osciladores. Tudo bem. Vou fechar este vídeo. No próximo, vamos apenas olhar para o exemplo 18. 35. Unidade 8, Vídeo 5: Tudo bem. Este é o exemplo 18, e eu pensei que o exemplo 18 novamente, eu iria apenas tentar manter realmente curto e doce. São mais algumas mutações inesperadas. Então, até este ponto, nós estávamos usando HRect nesta oscilação. Só queria mostrar o que aconteceria quando começasse a fazer alguma divergência. Então, vamos dar uma olhada no que eu fiz com o exemplo 18. A primeira coisa que você vai notar é que HCanvas ainda está aqui, que é transportado de anteriormente. Você notará que a tela está fazendo um AutoClear (falso), mas você também percebe que eu não quero fazer nenhum desvanecimento, eu quero que ele deixe trilhas para trás e mantê-los indefinidamente. Agora, vamos em frente e olhar para a nossa criação de um d desenhável, na linha 16 a 25. Então, neste caso, vou fazer um HPath. HPath nos permite fazer todos os tipos de coisas diferentes, como triângulos, polígonos e estrelas, e neste caso, eu vou usar HPath para definir uma forma de estrela. Então, se você olhar aqui na linha 16, temos HPath d, d sendo um atalho para drawable. Novamente, estamos especificando uma estrela, é uma estrela de cinco pontas com alguns argumentos de 0,4 e uma rotação de 90 negativos. Novamente, o tamanho das estrelas é 200. No arquivo anterior, estávamos recebendo cores aleatoriamente, mas para preenchimento, desta vez eu vou aleatoriamente obter cores, mas para traço. Então, aqui estou definindo a cor do traçado novamente usando esta semente aleatória, i vezes 250, apenas para obter alguns padrões interessantes. O preenchimento, eu estou realmente indo para fazer preto e eu também definir o fundo para preto neste esboço também. O AncoRat é H.CENTER e novamente sua localização inicial é largura dividir por dois, altura dividir por dois. Adicionando o desenho ao nosso amigo HCanvas aqui, e aqui estão as oscilações. Então, novamente, estou empilhando osciladores como o arquivo anterior. Então, vamos ver o que temos aqui, temos uma oscilação para rotação, indo de 180 negativos para 180 positivos, com uma velocidade de um e uma frequência de 0,5. Então, parece que a rotação diminuiu um pouco com uma frequência de 0,5. Nós temos nossa oscilação de escala, e parece que ele vai estar fazendo uma velocidade de dois e uma freqüência de quatro para 25% seu tamanho original e 100% seu tamanho original. Nós também temos alguns osciladores X e Y aqui e parece que ambos estão indo de 500 negativos para 500 positivos, mas o Y tem uma velocidade de um e uma frequência de 0,7, enquanto que o X tem uma velocidade de dois e uma frequência de 0,5. Então, vamos em frente e executar este esboço para ver o que acontece. Então, é realmente interessante a textura de tecido que isso acaba criando, porque eu estou usando uma estrela como a forma inicial, e porque essa estrela tem um certo padrão para ela. Obviamente, enquanto oscila e eu estou deixando o resíduo dele correndo pela tela, ele realmente começa a criar esses belos e interessantes padrões de tecido. Então, novamente podemos combinar isso com formas SVG, como desenho Illustrator ou, neste caso, usando H.path. Então, mais uma vez eu tenho que manter este vídeo simples. Novamente, eu posso assistir isso por dias porque eu sou exatamente esse tipo de cara. Então, eu vou fechar este exemplo 18, e eu vou passar para um vídeo que apenas funciona com o exemplo 19. 36. Unidade 8, Vídeo 6: Ok. Aqui estamos no exemplo 19. Exemplo 19, chegando seriamente perto do que fizemos na primeira classe que estamos usando pool H-drawable, estamos usando um layout de grade. Ótima. Então, mostre-me como oscilar coisas com base em um layout de grade. Então, vamos apenas quebrar o layout aqui. Temos um HdrawablePool. Parece que na linha 8 estou anexando 49 coisas. Parece que eu tenho um colorista aqui que vai escolher algumas cores aleatórias, e então, claro, eu tenho um layout de grade. Esse layout de grade está recebendo um início x, um início y, um espaçamento, e algumas colunas, e as colunas são sete porque eu vou fazer uma grade de sete por sete de ativos, daí 49 objetos no HDraablePool. Vamos em frente e olhar para o fundo aqui, que é o sorteio, apenas fazendo o H.Drawstage. Sim, estamos fazendo pedido tudo, me dê o layout da grade, por favor, instantaneamente tudo de uma vez. Então, se você rolar até o topo aqui, você pode ver que eu estou usando H-path para randomizar um monte de estrelas. Então, eu fiz algumas coisas como, na linha 27, eu quero aleatorizar alguns aspectos das estrelas. Então, na linha 27 eu disse, bem vamos aleatorizar as arestas, dê-me um número entre cinco e 10, e para uma profundidade aleatória, dê-me um número entre 0,25 e 0,75. Então, eu crio esse caminho H e vocês verão aqui, eu defini a estrela e forneci as bordas aleatórias e a profundidade aleatória. Cada uma dessas estrelas vai ter um tamanho de 64, não vai haver derrame, ele está ancorado no centro, e também vai ter uma rotação aleatória. Então, você notará que a rotação é aleatória de 360 graus. Agora, você pode notar no meu arquivo, eu comentei os osciladores e isso é porque, eu só quero executar este esboço para que possamos ver visualmente o que está sendo desenhado na tela. Ótima. Uma grade de sete por sete de estrelas aleatórias, e novamente neste caso, as estrelas, foi muito mais fácil para mim criá-las como caminhos H, mas não há razão para que estes não pudessem ser ativos SVG que você fez no Illustrator, se você quisesse fazer um um monte de estrelas como esta. Mas como eu queria aleatorizar as estrelas, era muito mais fácil para mim fazê-lo com código do que fazê-lo no Illustrator. Então, Grat. Ali está a nossa rede. Agora, eu quero oscilar essa grade, mas eu quero oscilar essa grade chique. Então, vamos olhar para um pequeno ajuste aqui. Na verdade, adicionei 3D a este arquivo. Então, acredite ou não, o exemplo 19 vai usar algumas oscilações 3D. Então, observe na linha quatro, eu tenho que especificar o processamento que eu quero usar o renderizador P3D. Aviso na linha cinco, Eu adicionei o uso 3D verdadeiro. Novamente, porque eu quero fazer algumas oscilações tridimensionais. Agora, estas estrelas são planas. Certo, e eles estão saindo assim, direto para nós. Ok. Se você rolar para baixo até o que eu fiz para oscilação aqui, novamente no meu arquivo ele é comentado, porque eu quero mostrar estes cada um de cada vez. Todas essas três oscilações lidam com transformações 3D. Então, vamos apenas fazer a parte inferior que provavelmente faz mais sentido, que está oscilando o eixo z. Então, novamente o eixo z virá em nossa direção e longe de nós, e você notará que é um alcance muito pequeno. Só vai negativo 50 e positivo 50. A velocidade é dois, a frequência é um, mas eu escalono o passo atual fazendo o índice atual vezes oito. Agora, com essa oscilação ligada, vou rodar este esboço aqui, e vocês devem ver que estamos oscilando as coordenadas z das estrelas. Então, isso é o que eu estava falando antes, onde eu estava simulando 3D usando escala. Aqui, eu não estou usando escala em tudo, eu estou realmente movendo isso no espaço tridimensional. Mas você nunca saberia isso, porque z parece muito semelhante à escala. Certo. Está vindo em sua direção e longe de você. Então, vamos olhar para algumas dessas outras oscilações que eu tenho aqui. A fim de olhar para eles de forma independente, vou apenas comentar isso de novo. Vamos descomentar este oscilador que é rotação y, e você vai notar que é 45 no negativo, 45 no positivo e velocidade, frequência e correntes e assim por diante. Isso vai nos dar esse movimento. Então, eu vou virar os objetos planos desta forma. Então, veja o que acontece quando testo este esboço. Agora estou aplicando uma oscilação a este pivô. Certo. Então, mesmo que ainda seja um objeto bidimensional plano, eu posso realmente girar esse objeto bidimensional em coordenadas tridimensionais como esta. Ok. Então, eu tenho um bom movimento como este. Novamente, você pode realmente mexer com isso se você fizer 180 negativo para 180 positivo. Isso é muito hilariante. Certo. Porque vai virar a estrela completamente ao redor. Então, você tem esses belos padrões cintilantes, muito divertido. Tudo bem. Vamos colocar isso de volta aos números que era, que é negativo 45 e positivo 45. Eu quero comentar esse oscilador, e eu vou descomentar este oscilador que está usando rotação z. direita. Então, o primeiro foi rotação y, este é rotação z, e eu também disse para negativo 45 positivo, mas uma velocidade diferente, mas uma frequência semelhante à rotação. Então, vamos em frente e olhar para essa oscilação, e perceber que ela está me dando esse pivô, muito semelhante às rotações comuns. Então, você tem y que é desta maneira, você tem x que é desta maneira, e z me dê esse pivô desta maneira. Agora, a magia acontece quando você liga tudo isso. Quando você ligá-los, você vai obter magia negra, rotação y, rotação z, e oscilação no eixo z. Tudo bem. Então, agora eu tenho minha grade, mas agora eu estou empilhando todas essas três oscilações para me dar esse movimento. Então, aqui está um pequeno ajuste agradável, usando oscilação em um espaço 3D que é apenas super bananas. Tudo bem. Vamos fechar este arquivo, e vamos passar para o próximo. Vamos nos concentrar no exemplo 20, fazendo um bom progresso. 37. Unidade 8, Vídeo 7: Este vídeo está lidando com o exemplo 20. E você diz, “Josh Davis, por que você continua falando sobre SVG? Mostre-nos um exemplo que usa SVG.” Então, o exemplo 20 faz exatamente isso - na verdade, eu realmente puxei esse arquivo de uma classe que fizemos na primeira classe anterior - no sentido de que eu tenho um layout de grade e estou aleatorizando alguns ativos SVG. Então, vamos olhar para a compilação 20. A grande mudança aqui, obviamente, é que estou adicionando um monte de formas SVG. Comentei um e seis só para o inferno. Este usa apenas SVG2, SVG3, SVG4 e SVG5. Então, se você olhar para o HDrawablePool, vamos anexar 144 SVGs. Nós temos um layout aqui e dentro do OnCreate, ele está anexando nosso SVG, ele é EnableStyle falso, ele está matando o traço no SVG, ele está aplicando uma rotação aleatória de 90 graus e eu também peço que ele pegue algum cores do nosso HColorPool listadas acima. Agora, veja isso. Aqui, eu tenho dois Hoscillators empilhados, e se eu realmente comentá-los fora e apenas executar este arquivo, vamos apenas ver o que nós temos aqui. Você deve ter se lembrado disso da primeira classe em que estou criando um padrão aleatorizando essas SVGs. Agora você vai notar que na linha 36, eu tenho o tamanho comentado porque se eu realmente colocar o tamanho lá onde eu estou aleatorizando 50, 100, 150, 200 para o tamanho, se eu realmente executar isso, ele vai para nos dar esse tipo de, sim, isso é ótimo, parece incrível. Legal. Agora, eu quero oscilar isso de alguma forma. Mas, só para o inferno, vou comentar essa posição de tamanho para que voltemos essa grade aqui e vamos ver o que acontece quando oscilarmos essa grade. Então, vamos em frente e fazer essa primeira oscilação. É claro, ele está mirando nosso desenhável, ele está aplicando rotação, ele está indo de 180 negativo para 180 positivo. Olhe para a velocidade, 0,05, isso é realmente agradável e lento, e a frequência é cinco, e observe que o índice de passos atual está apenas pisando em incrementos de um. Então, veja o que acontece quando eu testar o esboço aqui, vocês notarão que, novamente, estamos rodando lentamente aquela oscilação de 180 a 180 através da grade. Então, novamente, ele apresenta um padrão inteiramente novo aqui apenas aplicando essa oscilação. Então, isso é divertido. Agora, deixe-me descomentar esta oscilação para escala. Então, veja o que eu fiz pela escala aqui. Eu disse, “Ok, eu quero que você oscilar a escala, mas eu quero que o intervalo vá de 100 por cento para 500 por cento.” Então, isso vai ficar bem grande. Novamente, a velocidade é 0,05, isso é agradável e lento. Mas a frequência é um pouco mais abrupta no sentido de que estamos usando uma frequência de sete e o passo atual é usar o índice atual vezes três. Vamos em frente e executar este arquivo. Novamente, agora estamos obtendo uma oscilação de escala em conjunto com uma oscilação de rotação. Isso é apenas triângulos, é literalmente apenas usando triângulos, SVG que eu fiz dentro do Illustrator, mas, novamente, esse tipo de mistura começa a produzir esses resultados realmente elegantes. Como a escala é baseada no tamanho original das obras de arte, você notará que, novamente, a arte aqui é de 50 por 50, portanto a escala está sendo aplicada apenas a cada um desses ativos que são 50 por 50. É quando você descomenta a configuração de tamanho que as coisas vão ficar um pouco mais aleatórias porque agora você está aleatorizando o tamanho dos ativos nessa grade. Isso é divertido porque você vai ter esses momentos de formas menores, mas então você tem esses grandes e agradáveis formas varrendo porque esse é o elemento de aleatório absoluto nesta peça, essa é a única coisa no sistema que é realmente impressionante no sentido de que se eu fechar isso e executá-lo novamente, eu vou conseguir algo diferente. Se você tem a linha 36 comentou, você vai começar a ver uma espécie de estética onde como implementando essa randomização de tamanho, eu vou obter algo diferente praticamente toda vez. Então, o exemplo 20 apenas mostrando o que acontece quando começamos a oscilar alguns de nossos arquivos SVG. Vou fechar este. No próximo vídeo, vamos trabalhar com o exemplo 21 e o exemplo 22. Vejo você no próximo vídeo. 38. Unidade 8, Vídeo 8: Estes são os exemplos 21 e 22. Espero que você vai desfrutar destes próximos dois porque eu realmente amo agora a adição de experimentar com objetos 3D. Então, é claro, os exemplos 21 e 22 estarão usando nosso amigo HBox. Então, antes de termos experimentado muitas coisas diferentes, como HRect, HShape e SVG e HPath. Então, eu pensei que eu iria tirar o tempo para mostrar usando drawables 3D. Então, vamos em frente e dissecar, construir 21 aqui. Então, no topo, eu disse que o tamanho da caixa é 150 e você verá abaixo quando chamarmos essa variável, esse tamanho da caixa será usado para a largura, para a altura e a profundidade. Então, o tamanho da caixa é 150. Claro, eu tenho que fazer ajustes na linha cinco e seis para usar P3D e usar 3D true. Vamos desenhar 100 itens. Nós vamos usar HBox como o desenhável. Nós temos um layout, é um layout de grade, ele vai começar em negativo 125 no x, negativo 125 no Y, o espaçamento vai ser 100 pixels entre cada caixa, e as colunas são 10. E assim, ele está fazendo a grade de 10 por 10. Se você ir em frente e olhar para o OnCreate, aqui está nós estamos criando nosso HBox e você vai notar que eu apenas fiz um pequeno atalho, eu disse que a profundidade é o tamanho da caixa, a largura é o tamanho da caixa, e a altura é o tamanho da caixa. Eu coloquei desta forma porque se você não quiser usar o tamanho da caixa variável acima, você poderia colocar três números separados aqui para realmente alterar o tamanho do retângulo, se você não quiser usar um cubo perfeito. Não vai haver nenhum derrame nessas caixas. Verifica, eu ajustei a profundidade Z inicial das caixas em 500 negativos. Então, eu estou construindo essa grade grande, mas então eu estou caindo volta no espaço, 500 pixels negativos. Agora, vou pular os osciladores, vou descer até o fundo e notar que estou criando algumas luzes pontuais. Então, eu estou montando algumas luzes na cena e você pode ver que eu tenho três cores aqui; Eu tenho uma laranja, um azul-petróleo e um amarelo. Novamente como uma atualização, uma luz de ponto, os três primeiros argumentos querem saber vermelho, verde, azul e, em seguida, as três últimas posições são eixo X, eixo Y e eixo Z. Então, é aqui que estou colocando essa luz no espaço. Agora, se eu subir para os osciladores e realmente comentar estes e se eu executar este esboço, você deve ver que eu estou construindo uma grade de caixas. Não só é uma grade de caixas, mas também você obtém uma representação das luzes pontuais. Você pode ver que aqui está nossa luz de ponto laranja em menos 300, aqui está nossa luz de ponto azul um azul-petróleo, em negativo 300, e então há um amarelo sentado em cima em negativo, bem na verdade é abaixo, não está em cima, em menos 400, que é amarelo. Agora, neste caso, olhe para os osciladores aqui, para a oscilação tudo o que estou fazendo é oscilar rotação x, rotação y, e rotação z. Essa é a única coisa que eu estou girando aqui. Então, se você pensar nessa caixa, ela deve começar a fazer esse movimento porque eu estou oscilando a caixa em três eixos diferentes. Vá em frente e teste este esboço e é simplesmente lindo. Então, eu estou construindo essa grade de caixas e eu estou usando oscilação de rotação X, Y e Z para criar esse padrão realmente bonito com esses cubos 3D. Mais uma vez você pode ir para as linhas 29, 30 e 31 e realmente mudar a profundidade, a largura, a altura, para qualquer número que você quiser, e você terá alguns resultados bastante surpreendentes. Deixe-me tentar um teste aqui, se eu dissesse que a profundidade das caixas, tamanho da caixa vezes três, vamos ver o que isso faz. Quem sabe? Ok. Com sorte, você é capaz de ver a profundidade da taxa de caixa nesse ponto, sim. Então, você pode começar a ajustar esses números e novamente você vai ver algo diferente aqui nesta animação. Ótima. Então, esse é o exemplo 21, vamos passar para o exemplo 22 e este foi apenas eu tinha esse palpite de que ele iria se comportar de uma certa maneira, mas eu não estava totalmente certo. Eu estava pensando no filme original Tron e o personagem em Tron tinha que eu acho que era chamado bit ou byte ou RAM. Não me lembro, faz tanto tempo que não vi o Tron original, mas tinha uma forma que só dizia “sim” ou “não”. Eu pensei, uau, eu me pergunto se eu poderia pegar esse mesmo sistema e realmente obter esse efeito? Na verdade, você pode. Então, se você avançar para construir 22, aqui está realmente o único ajuste que é, eu disse que o layout deve começar na largura dividida por dois, altura dividida por dois, mas o espaçamento era zero e zero. Então, se você olhar para HDrawablePool, eu estou realmente fazendo 50 caixas todas no mesmo local, que é o centro da tela. Então, eu estou anexando 50 caixas todas em largura divididas por duas, altura dividida por duas e novamente parece que o tamanho da caixa aqui é 500. Eu tenho uma rotação X, uma rotação Y, uma rotação Z e então eu adicionei um quarto oscilador para escala. Então, eu vou estar com todas essas 50 caixas, não só eu vou estar girando todas em cima das outras, eu também vou estar encolhendo e expandindo-as. vez, se você testar este esboço, isso foi como um palpite de que isso ia ser legal, mas eu não tinha idéia até eu realmente experimentá-lo. Então novamente, outra mutação em que eu estou apenas pegando um monte de caixas e empilhando-as todas uma em cima da outra em largura dividida por duas, altura dividida por duas, e novamente, você vê que eu tenho esses padrões realmente bonitos dentro deste sistema. Este vídeo encerra exemplos 21 e 22. Vamos passar para o último nesta seção que é o exemplo 23, que está usando uma forma que eu fiz no ilustrador e apenas um pequeno truque por trás disso. Então, te vejo no próximo vídeo. 39. Unidade 8, Vídeo 9: Nós fizemos isso. Chegamos ao último arquivo no Hoscillator, mas de modo algum vou continuar a namorar cada oscilador porque, novamente, ele poderia apenas continuamente me surpreender. Este é o exemplo 23. Exemplo 23 apenas me fez pensar sobre o que eu tinha feito em 3D para cada caixa foi algumas coisas que eu poderia fazer, que eu poderia tentar. Então, isso ia usar um SVG, e se você realmente ir para a pasta de dados e olhar para o SVG, é isso. É um anel. Então, eu fiz essa obra de arte no Illustrator, eu fiz esse anel, mas o que eu realmente estava interessado é nocautear o centro. Então, é literalmente como um anel e a parte central é realmente transparente, é nocauteada. Eu só pensei, eu me pergunto, baseado no último arquivo, se eu colocar um monte de anéis em cima um do outro e se eu começasse a oscilar esses anéis, eu seria capaz de ver através deste espaço central e ser capaz de ver alguns dos outros anéis abaixo deles? A resposta é que é incrível. Então, vamos olhar para Build 23. A primeira coisa que eu quero salientar é que eu fiz aquele truque como fizemos antes, onde pegamos cada retângulo e tivemos um tamanho inicial e então tivemos uma série de passos que desistiu, eu fiz a mesma coisa aqui com o anel. Então, você vai notar aqui em cima, eu tenho duas variáveis, eu tenho uma flauta de uma escala de anel 600 e um inteiro de anéis passos cinco. Ok, é claro, eu tenho P3D como um renderizador e uso 3D na minha configuração hype. Eu vou anexar 153 anéis, e novamente, aqui eu estou usando HShape e eu estou indo e recebendo que ring.svg, e assim como o último arquivo, o layout é largura dividida por dois, altura dividida por dois, sem espaçamento. Então, ele empilha todos os 150 anéis em cima um do outro. Mas como fiz com o arquivo anterior, confira com o tamanho. Eu disse que o tamanho é RingScale. Então, sabemos que o primeiro anel que é criado vai ser 600 por 600 e novamente é aqui na linha 42 que eu faço escala de anel é igual a escala anel menos passos de anel e assim escala de anel começa a diminuir de tamanho. Agora, eu vou ir em frente e comentar os osciladores e vamos apenas olhar para o que está acontecendo aqui. Eu disse que HShape desenhável aqui, d. Eu vou habilitar o estilo, vai haver nenhum acidente vascular cerebral, e eu estou pegando aleatoriamente um preenchimento do nosso HColorPool, e novamente, eu estou fazendo isso i vezes 250, que é uma semente aleatória. Então, ele vai criar essa faixa interessante. O tamanho é a escala RingScale, a âncora é o centro. Então, isso é meio importante, e o eixo z para este é apenas zero. Então, eu vou ir em frente e testar o esboço aqui e eu deveria ver um monte de anéis declinando tamanho enquanto eles caem. Mas novamente, o que é interessante é que estes não são um monte de círculos, eles são um monte de anéis com o meio nocauteado. Então, se eu começar a oscilar estes, que tipo de resultados eu vou obter? Então, vamos em frente e olhar para alguns desses osciladores. Claro que vou descomentar a parte inferior primeiro porque estou fazendo uma oscilação entre 50% e 100 por cento a velocidade é 0,3, a frequência é cinco. Vamos em frente e ver o que ele faz, e você pode ver que é apenas uma boa oscilação lenta da escala. Agora, eu só tenho que fazer os três desses porque não bater em você com uma tonelada de tijolos? Novamente, rotação x, rotação y, rotação z, e o intervalo é negativo 360 a 360 positivo para estes. Se eu ir em frente e testar isso, novamente, o que é fascinante sobre isso é usando SVG e fazendo um anel por ter o meio nocauteado, eu posso ver através desse knockout do anel e ele começa a criar esses padrões interessantes. Então, você pode imaginar que eu estou realmente ansioso para pegar este exemplo em particular aqui e fornecê-lo com um monte de SVGs diferentes para ver que tipo de padrões visuais diferentes e resultados eu recebo porque isso é realmente divertido. Certo, isso fecha a seção do Hoscillator. Agora vamos passar para o Combos. Combos vai realmente orientá-lo através de um processo. Vai guiar-te com uma ideia que tive, a execução dessa ideia e a ver como a alterei lentamente. Você também verá que - são 20 exemplos, então ele vai ser tão robusto quanto esta seção. Vejo você na próxima seção de Combos. 40. Introdução à combinação de comportamentos: Agora, antes de entrarmos na saída real eu queria fazer uma seção onde eu falo sobre Comportamentos Combinados. Agora, é aqui que você começa a criar super animações. Enquanto um comportamento de animação não lutar pela mesma propriedade, dois comportamentos podem trabalhar juntos para criar um comportamento totalmente novo. Então, por exemplo, eu posso usar a interpolação H para mover algo na tela, eu posso usar o oscilador H para realmente animar a escala desse objeto para cima e para baixo. Então, enquanto a interpolação H está lidando com localização e oscilador H está lidando com escala, esses dois comportamentos podem realmente se encaixar para criar um novo super comportamento. Então eu pensei em pegar a seção para descobrir alguns dos meus combos favoritos de misturar comportamentos juntos novamente, contanto que eles não tentem lutar pela mesma propriedade. Podemos usar muitos desses comportamentos que aprendemos na aula para criar essas novas super animações malucas. 41. Unidade 9, Vídeo 1: Ok, então nós estamos nesta última seção antes de realmente começar a entrar na saída. Este é hardcore. Haverá um monte de vídeos aqui e nós vamos trabalhar atravésde todos esses 20 passos, mas háalgumas vezes em de todos esses 20 passos, mas há que eu vou dar palestras em conferências de design que eu realmente tento mostrar o processo. Esta é a última, esta é realmente começando com uma idéia e deixando essa idéia se desenrolar. Então, ao invés de serem arquivos separados, exemplo 1 até o exemplo 20, esta é uma continuação de uma única ideia. Então, novamente, faça uma xícara de café, coloque alguns chinelos aconchegantes porque nós realmente vamos digerir isso. Agora vamos em frente e começar com o exemplo 1 e tudo isso vai começar com um cubo. As coisas que vamos cobrir dentro deste exemplo em particular, eventualmente eu vou dobrar em Hype, especificamente em HBox. Mas agora eu queria explorar algumas coisas que eu nunca tinha realmente explorado ainda e que estava usando forma de início e vértice. O que eu quero fazer é realmente dissecar os dois primeiros exemplos agora. Vamos ver na linha um. Eu vou estar fazendo uma caixa e essa caixa vai ser uma largura de 100, uma altura de 100, e uma profundidade de 100. E então eu tenho três funções aqui no meu esboço. Eu tenho a nossa configuração, eu tenho o nosso empate, e eu tenho uma função chamada compilação cubo. Agora vamos apenas olhar para a configuração primeiro. O primeiro é muito mínimo. Só estou dizendo que o tamanho é 640 por 640. Ele vai ir em frente e usar o renderizador P3D e em seguida eu vou disparar construtor hypes. O fundo vai ser 20-20-20 e, claro, queremos acordar todas as possibilidades 3D de hype, então precisamos dizer usar 3D verdadeiro. Agora vamos em frente e olhar para o sorteio. No sorteio, eu vou dizer, “Ok, vamos em frente e fazer H.DrawStage e eu quero construir este cubo.” Agora você vai notar nas linhas 12 e 15 eu estou usando a matriz push e matriz pop, que novamente com a matriz push e matriz pop o que quer que esteja entre essas duas matrizes chama. Ele vai fazer algumas coisas e, em seguida, voltar para suas configurações originais. Então, vamos apenas olhar para o que estamos fazendo e é apenas muito simples. A primeira é que eu quero traduzir para o centro do palco então você vai notar que eu digo traduzir largura dividida por dois, altura dividida por dois e o Z eu vou manter em zero. De modo que agora moveu a matriz para o centro da tela. Você verá que eu vou disparar a função do cubo de construção e quando eu disparar o cubo de construção, observe que não passou nenhum argumento. Aqui está a função do cubo de construção e se eu rolar para baixo aqui é a função inteira aqui. Você vai notar que eu estou fazendo uma forma inicial na linha 19 no final de fazer uma forma final. Agora o que estou fazendo é construir um cubo manualmente colocando todos os diferentes vértices para definir cada uma das faces. Então você pode notar aqui que se você olhar para - Eu tenho o rosto da frente para a frente do cubo, eu tenho a parte de trás do cubo, eu tenho a parte inferior do cubo, eu tenho o topo do cubo, eu tenho o lado direito do cubo, e o lado esquerdo do cubo. Então cada uma dessas quatro chamadas de vértice é para cada uma das faces que compõem esse cubo específico que estamos criando. Agora você pode estar dizendo a si mesmo, “Bem, Josh, por que você não está usando HBox? Por que está fazendo assim?” Bem, eu estou fazendo isso desta maneira porque HBox ainda não suporta a capacidade de mapear texturas para este cubo. E essa foi realmente a idéia que provocou tudo isso era que eu queria ser capaz de experimentar com a idéia de mapear texturas para uma caixa e eu nem tinha realmente definido o que diabos era uma textura. E você verá que, à medida que progredirmos aqui, vai assumir uma resposta fascinante. Então vamos olhar para cada vértice aqui. Você vai notar que eu estou chamando o tamanho da caixa para os três primeiros atributos porque se você realmente procurar uma referência de processamento para vértice, se você estava realmente passando em cinco argumentos você está fazendo a coordenada x, a coordenada y, a coordenada z e, em seguida, os dois últimos números aqui são suportes para o- o primeiro é U e o segundo é V e aqueles representam um flutuador. A coordenada horizontal para mapeamento de textura é este quarto argumento e o quinto argumento é a coordenada vertical flutuante para mapeamento de textura. Então, esses dois aqui estão lidando com coordenadas horizontais e verticais para mapeamento de textura e, como ele existe atualmente, HBox não suporta mapeamento de textura. Será no futuro, mas agora novamente estou pensando em uma idéia e quero explorá-la. Então, o que acontece quando rodarmos este esboço em particular? Realmente não há nenhuma animação acontecendo, então isso deve ser interessante. Eu vou em frente e executar o esboço aqui e é 640 por 640 e ele desenha um cubo, mas você nunca saberia que é um cubo porque esse cubo está perfeitamente no centro e novamente a largura, a altura, e a profundidade são todos 100 por 100 para que você possa ver a tridimensionalidade neste cubo particular. Então, eu estava bem. Bem, eu preciso resolver isso. Vou pegar o exemplo 1, e ótimo, vou salvá-lo como exemplo 2. Agora vamos para o exemplo 2 e o que eu queria fazer um exemplo 2 era usar o HOScillator. Toda esta seção é sobre combos. Vamos começar a reunir todas essas coisas diferentes para chegar a algum resultado final. Então, eu pensei bem, eu vou adicionar um oscilador para este cubo, mas eu decidi que eu iria fazê-lo de uma forma que seria único que é o oscilador não está dentro de um loop quatro, não está dentro de uma piscina desenhável. Então, como faço para criar instâncias de oscilador e depois anexá-los a este cubo que eu criei na tela? Então, vejamos o exemplo dois. Eu agora no topo adicionei um oscilador para RX, RY, e RZ que seria rotação X, rotação Y, e rotação Z. E então meu objetivo é pegar esse cubo e fazê-lo girar assim usando o Hoscillator. Agora, vamos em frente e olhar para as linhas 10 a 26. Então, dentro da minha configuração eu disse, hey eu quero configurar esses osciladores então eu digo, “RX é um novo HOScillator.” Vai de 360 negativo para 360 positivo, 0,1 para a velocidade, cinco para a frequência. Agora eu apenas copiei isso duas vezes mais para que eu pudesse configurar meu oscilador Y de rotação, e meu oscilador Z de rotação. Agora uma coisa que você pode notar é wow eu não especifiquei propriedade e eu não especifiquei alvo então este é um oscilador super genérico que está apenas sentado na configuração. E quando h.drawstage dispara, cada oscilador só vai cuspir alguns números de oscilação completamente ausentes de quem eles vão ser aplicados ou a propriedade que eles vão ser definidos. Então estes são apenas osciladores totalmente genéricos. Eles não têm idéia de quem e eles não têm idéia em que propriedade eles vão se instalar. Então, vamos agora olhar para o nosso cubo de construção. Nosso cubo de construção não mudou, então eu só quero que você saiba que todo aquele código lá embaixo, aquela caixa, nada foi alterado neste código. Então a única mudança está aqui dentro do sorteio. O que eu quero fazer é obter os próximos valores brutos do RX, RY e do RZ. Então dentro do sorteio eu digo, hey RX HOScillator me dê seu próximo valor bruto, porque eu entendo que você está oscilando alguns números completamente ausentes de quem ou para que propriedade, mas tudo bem, apenas me dê aqueles cru números. Então eu posso dizer rx.nextdraw, ry.nextdraw e rz.nextdraw. Agora vamos em frente e olhar para a nossa matriz push e matriz pop aqui. A tradução ainda é absolutamente a mesma. Bem, estou traduzindo para o centro da largura da tela dividida por dois, altura dividida por dois. Você pode ver aqui na linha 43 Eu ainda estou usando cubo construído mas agora eu estou usando o processamento girar X, girar Y, e girar Z e porque rotação e processamento quer saber radianos, eu chamo a função radianos e dentro de os radianos função eu estou dizendo hey ir pegar o valor atual de RX, ir obter o valor atual de RY, e ir obter o valor atual de RZ. Agora algo excitante acontece. Vou testar meu esboço e você deve ver que esse cubo está no centro da tela. Não especifiquei nenhum derrame. Eu não especifiquei nenhum preenchimento. Então, ele só faz traçado preto por padrão e preenchimento branco por padrão. Mas agora eu tenho três osciladores que são valores oscilantes sem ser anexado a um alvo ou a uma propriedade. Então, eu estou apenas pegando os números brutos dessas oscilações e apenas aplicando-os para girar X, girar Y, e girar Z. Ótimo. Agora estou a chegar a um sítio interessante. Agora, a razão pela qual eu fiz este exercício é passar para o exemplo 3 e obter uma textura mapeada para este cubo. Então, eu vou ir em frente e fechar este vídeo. No próximo vídeo, vamos pegar olhando para o exemplo 3. 42. Unidade 9, Vídeo 2: Exemplo três. Este vídeo só vai mostrar este exemplo. É o começo de algo bonito. Vamos em frente e olhar para o exemplo três, e você notará que dentro da pasta de dados, existem alguns JPEGs. Então, eu tinha trabalhado algumas obras de arte dentro do Illustrator. Isto é apenas 200 pixels por 200 pixels. Entreguei-os do Illustrator para JPEGs. Então, se você olhar dentro da pasta de dados, você vai notar que há cinco JPEGs que apenas têm algumas linhas de 45 graus sobre eles e textura cinco tem um tabuleiro de xadrez, ok? Então, eu quero olhar para mapear uma textura para este cubo. Então, vamos em frente e olhar para o que é adicionado aqui no exemplo três. Vejamos a linha quatro. Agora, estou lendo a documentação de processamento, e a documentação diz que você pode usar um PiMAGE como uma textura. Então, eu pensei, “Ok, deixe-me ver isso.” Então, no topo nós digitamos PiMAGE, e então eu só fiz “tex” para textura. Na linha 11 eu disse, “Ok, T-E-X, tex é igual a imagem de carga e então vá buscar “tex1.jpg”. A outra coisa que você notará sobre o uso texturas em objetos 3D é que você precisa definir um modo de textura. Neste caso, eu usei o modo de textura normal. Então, na linha 12, eu adiciono modo de textura normal. Agora, nossos osciladores ainda são os mesmos. Nosso sorteio ainda é o mesmo. Então, nada mudou dentro do nosso sorteio aqui. Ainda estamos aplicando oscilação para girar X, girar Y e girar Z. A última adição aqui é definir algumas coisas no cubo. Então, a primeira coisa é que, eu queria definir um peso de acidente vascular cerebral em um acidente vascular cerebral. Então, você vai notar aqui no cubo, em cada um dos vértices que são criados, eu digo que o peso do traçado é quatro e que a cor é preta, zero, zero, zero, zero, zero, zero, zero. Então, dentro da forma inicial e forma final, eu adiciono textura e, em seguida, eu aponto para tex que nós configuramos acima. Agora, é neste ponto que se você realmente salvar e executar este esboço, você vai notar que ele está usando tex1.jpg como uma textura em cada uma das superfícies do vértice e eu simplesmente enlouqueceu. Eu só pensei, “Uau, isso abriu uma idéia de possibilidades e eu quero tentar mudar esse arquivo e ver, o que eu posso fazer com esse sistema? Então, por exemplo, se eu subisse aqui e mudasse isso para tex5, esse seria o padrão de xadrez. Novamente, se eu executar este esboço, você verá que ele está anexando o JPEG quadriculado, e ele está mapeando perfeitamente para a superfície. É incrível. Agora, aqui dentro do BuildCube, certo? Eu poderia tentar algumas coisas. Eu poderia comentar isso e eu poderia apenas dizer, “NoStroke”, e se eu dissesse “NoStroke”, então você não vai conseguir essa linha preta, você está apenas recebendo a textura, mas contra a textura que é bom. Se eu trouxer de volta este derrame e digamos que eu queria aquele laranja escuro, eu poderia dizer FF3300, eu poderia salvar e executar este esboço. vez, eu estaria apenas criando um peso em torno desta caixa em particular, certo? Então, eu estou tentando esses testes para ver que tipos diferentes de coisas eu posso inventar. Agora, eu só vou colocar isso de volta para preto. De volta ao preto. Alguém do ACDC? De volta ao preto. Tudo bem. Então, aqui está com aquele belo golpe grosso de quatro pretos. Eu só pensei que adicionou um bom tipo de sombreamento a isso. Está bem. Então, é claro, eu quero pensar, “Bem, tudo bem. O que faço a seguir com isso? Então, o que eu quero fazer a seguir é fechar este vídeo e, em seguida, o próximo, vamos abordar exemplos quatro e cinco porque eu só quero ver como esse arquivo vai continuar evoluindo. Então, vamos em frente e fechar isso e vamos passar para o exemplo quatro e o exemplo cinco. 43. Unidade 9, Vídeo 3: Está bem. Então, neste vídeo, você vai notar que estamos no exemplo quatro e no exemplo cinco. Você também pode notar que a pasta tem as letras MOV no final dela. Porque a curiosidade tinha que ver se isso era possível. Comecei a pensar bem, o que é uma textura? Uma textura é um JPEG? Uma textura pode ser um filme de tempo rápido? Uma textura pode ser outra coisa que eu faço geralmente dentro do processamento como enxame, como posso usar um comportamento de enxame como uma textura? Comecei a ter perguntas sobre, o que era possível usar como textura? Então, você vai notar que o exemplo quatro e o exemplo cinco lidam com, como faço para definir um filme como uma textura? Agora, vamos olhar para o exemplo quatro e eu vou para dentro da pasta de compilação e eu vou para dentro da pasta de dados, e eu tenho um MP4 lá dentro. Se eu fosse executar este MP4, você veria que é outro pequeno experimento que eu tinha postado no Tumblr. É um vídeo de 30 segundos de uma explosão de confete. Novamente, isso foi algo que foi roteirizado usando processamento e Hype e eu tinhamos renderizado como um filme. Eu me perguntava se eu poderia usar isso como uma textura? Então, eu poderia pegar esse cubo e realmente jogar um filme na superfície do meu cubo. Claro, depois de algumas escavações, eu descobri que sim a resposta era de fato sim que você poderia realmente mapear um filme como uma textura. Então, vamos ver o exemplo quatro e ver o que mudou. Então, você pode notar que na linha três, estou importando processamento.video, e a razão pela qual estou importando processando.video é porque eu quero ser capaz de carregar em um filme, eu quero ser capaz de fazer loop de um filme, eu quero ser capaz de reproduzir um filme. Para fazer isso, eu tenho que importar processamento.video. Agora, na linha quatro, você verá que em vez de usar uma imagem P, eu estou usando um filme. Ok? Então, eu não vou mapear um JPEG. Vou mapear um filme. Então, é claro que o Tex precisa atualizar a linha quatro Movie Tex. Agora, vamos em frente e olhar para as linhas 12 a 14 e você verá que tex agora não está carregando imagem. Carregue imagem, trabalhe aqui Josh, carregue imagens, sim correto. Então, no exemplo quatro, estou dizendo que tex é na verdade um novo filme. Em seguida, especificando o que MP4 você pode usar filme, obviamente eu uso MP4 porque eles são comprimidos e minúsculos que é bom. Então, o filme que estou carregando é que burst.mp4 dentro da minha pasta de dados. Agora, você verá na linha 13 que meu filme tem apenas 30 segundos de duração, então eu só quero que ele em loop continuamente. Então, você vai ver na linha 13, eu estou dizendo tex.loop. Linha 14 TextureMode é realmente ainda Normal. Agora, você começa a rolar para baixo aqui e acredite ou não, este código não mudou. Você ainda pode dizer na linha 57 que a textura é tex, mas você tem que adicionar uma última coisa e que é processamento de cauda para realmente começar a jogar este filme. Então, se você rolar todo o caminho até o fundo, você notará que há uma nova função aqui que diz vazio MovieEvent Movie m, m.read. Então, agora isso vai começar a tocar o nosso filme. Agora, vamos em frente e tex este esboço aqui e você deve notar que nosso cubo está realmente tocando aquele MP4 na superfície de cada um dos vértice está aqui. Então, realmente fascinado por esta idéia de recursão direita. Usando código para gerar um filme e, em seguida, esse filme eu acabo mapeando como uma textura de volta dentro deste código. Então, novamente isso abre tantas possibilidades diferentes de ser capaz de criar alguns objetos tridimensionais dentro do processamento e, em seguida, começar a mapear coisas diferentes como texturas. Então, ótimo e exemplo três, sabemos que podemos carregar qualquer tipo de imagem nesta caixa. Com o exemplo quatro, podemos ver que podemos realmente reproduzir um filme para esta caixa. Agora, vamos em frente e fechar isso e olhar para o exemplo cinco porque eu acabei de fazer um pequeno ajuste para o exemplo cinco. No exemplo cinco, se você olhar para baixo para o cubo de construção aqui, você pode notar que eu me livrei da face traseira, inferior, superior, direita e face esquerda. Isso é porque eu só queria mostrar que ele não tem que ser um objeto tridimensional, pode ser apenas um plano no qual ele toca. Então, você vai notar que eu apenas guardei o vértice para a face da frente e então eu apenas coloquei alguns números aleatórios apenas para fazer uma forma estranha certo. Então, em vez de fazer o tamanho da caixa, você pode ver aqui eu fiz vezes 1,5 vezes três vezes cinco ou vezes dois ou dividir por dois. Acabei de colocar alguns números falsos. Então, que eu poderia testar, bem, e se o filme não for um quadrado? E se for uma forma estranha? certeza o suficiente com o modo de textura normal, você pode ver que ele ainda faz um ótimo trabalho de mapear esse filme como uma textura para estes para este vértice mesmo os vértice que estão sendo criados não são um perfeito quadrado ou um retângulo perfeito. Na verdade, é uma forma estranha. Está bem. Então, eu vou fechar este vídeo agora que é novamente exemplo quatro e cinco. Vamos passar para o exemplo seis porque quero continuar explorando como bem, o que faço a seguir? Qual é a próxima coisa que eu quero tentar com este código? Então, te vejo no próximo vídeo. 44. Unidade 9, Vídeo 4: Estamos no exemplo seis, e eu tenho que recuar um pouco. Eu só pensei, ok, no exemplo três, eu carrego em uma única imagem, e eu carrego essa imagem na configuração. Então, eu só disse Tex e eu carreguei aquela imagem. Então, no sorteio, eu disse, “Ei, use essa imagem em todas as superfícies do cubo.” Então, comecei a pensar, “Bem, e se eu aleatorizar isso?” O Cubo tem seis superfícies. Então, tem quatro lados e tem um topo e um fundo. Então, há seis possíveis superfícies que eu poderia mapear as coisas. No exemplo três, eu estava pegando uma coisa e mapeando para todas as seis superfícies. Então pensei: “Bem, o que aconteceria se eu aleatorizasse as imagens que são mapeadas para cada uma das superfícies?” Agora, a coisa engraçada sobre o processamento é que você tem uma configuração e você tem um empate. Esse sorteio vai correr mais e mais e mais e mais e mais e mais e mais. Eu não poderia, no sorteio, apenas dizer, “Ei, vá pegar uma textura”, porque toda vez que aquela coisa funcionava, ela escolhia aleatoriamente uma nova textura para aquela superfície. Não era isso que eu queria fazer. O que eu queria fazer era apenas escolher seis imagens aleatórias, lembrá-las e depois mapeá-las para os seis lados diferentes, e quando essa coisa se mover, teria a textura pré-escolhida. Então, esta é a parte estranha sobre o processamento é que se você quiser fazer esta randomização, o que você terá que fazer é dentro da configuração, você tem que pré-escolher coisas. Armazene o que você escolhe previamente, modo que, quando o sorteio for executado, ele percorre as coisas que foram pré-escolhidas. Você está comigo? Tudo bem. Então, eu tenho cinco texturas que eu posso pegar. Então, a primeira coisa que eu quero fazer é olhar para carregar em todas essas texturas. Agora primeiro, vamos olhar para a linha número cinco. A linha número cinco será uma lista de todas as texturas disponíveis para escolher. Acaba por haver cinco: um, dois, três, quatro, cinco. Então, na linha cinco eu digo, “Arranje uma lista. Esta vai ser uma lista de texto que é a nossa lista de texturas.” Agora, vou pular para as linhas 13 a 24. Agora, vamos dar uma olhada nisso. Nas linhas 13 a 17, carrego nossas cinco imagens. Então eu digo, “PiMAGE t1, t2, t3, t4, t5. Ei, cara, vá pegar o texto 1. Vá buscar uma mensagem. Vá buscar a mensagem 3. Vá buscar o texto 4. Vá pegar a mensagem 5. Carreguem esses idiotas.” Agora que eu carrego para processar essas cinco imagens, eu quero empurrá-las para o array. Então, vamos olhar para as linhas 19 a 24. Na linha 19 eu digo, Texlist na linha cinco. Eu só quero que você saiba que você é uma nova lista de arrays, e agora vou te empurrar algumas coisas. Então eu digo, “TexliXT. Adicionar t1.” Então, de repente, se eu olhar para a primeira entrada na lista de texto, ele vai ser igual a t1. T1 é tex1.jpeg. Em seguida, adiciono t2 e adiciono t3, adiciono t4, assim por diante e assim por diante. Então, se eu estou escrevendo isso, se eu fosse assim, TexList seria algo parecido com isso onde seria tex1.jpg. Seria tex2.jpg. Então, seria a lista das cinco imagens. Então, TexList agora é todas as cinco imagens disponíveis que acabamos de carregar. É uma lista deles. Ótima. Então, o que eu quero fazer agora? O que eu quero fazer agora é pré-escolher algumas imagens aleatórias. Agora, antes que eu possa fazer isso, vamos olhar para a linha seis. linha seis é uma nova matriz de PIMages. Serão as imagens que eu pré-escolhi antes do tempo. Então, vamos olhar para o nosso cubo. Nosso cubo tem seis superfícies, quatro nas laterais, uma parte superior e uma parte inferior. Então, o que eu quero fazer é escolher aleatoriamente seis imagens. Eu sinto muito. Sim, escolha aleatoriamente seis imagens e mapeie-as para cada seis de nossas superfícies. Então, o que eu preciso fazer agora é pré-escolher aleatoriamente de nossos cinco JPEGs disponíveis. Então, vamos olhar para isso para loop. Este para loop precisa executar um número definido de vezes. O que ele precisa para executar é PickedTex.length. Quantos itens estamos escolhendo? Qual é o comprimento. O comprimento é se olharmos para PickedTex que está bem aqui na linha seis, dissemos aqui que são seis itens, então se eu fosse realmente rastrear isso aqui, ele retornará seis. Então, isso para loop vai ser executado seis vezes. Isso é ótimo porque há seis superfícies. Tudo bem. Então agora, é esta linha aqui que nos permite obter aleatoriamente uma imagem e adicioná-la a esta nova matriz. Então, ele diz, “Ok, esta é a sexta vez. Quero ir em frente e pré-escolher a primeira imagem que você vai usar.” Então, PickedTex vai escolher o subitem zero. Diz: “Está bem, deixa-me ir à minha lista de texto e deixa-me arranjar um número.” Que número você quer? Agora, a melhor maneira de olhar para isso é que este seria escolher o número um. Isto seria escolher o número dois. Isto seria escolher o número três. Este seria o número quatro. Este seria o número cinco. Então, imagine por um momento que temos um chapéu. Levamos cinco pedaços de papel. Nós escrevemos um, dois, três, quatro, cinco sobre eles, e pegamos os pedaços de papel e os colocamos no chapéu. Então, eu distribuo o chapéu para você e digo, “Ouça, há seis superfícies neste cubo. Por favor, escolha um número.” Você pega no chapéu e pega um pedaço de papel, e você o tira e vai T3. T3 é tex3.jpg. Então, para a primeira superfície que realmente seria a face frontal, eu vou escolher tex3. Agora, coloque o pedaço de papel de volta no chapéu. Eu sacudo o chapéu e digo: “Ok, continue.” Você está basicamente escolhendo um número fora do chapéu seis vezes. Então, isso é o que este bloco de código faz aqui. Diz que quero escolher aleatoriamente uma destas cinco imagens para todas as seis superfícies. Então, vamos tentar algo aqui. Este vídeo vai ser longo. Só estou a dizer. Josh, por que nos machucou? Confira isso. Vou imprimir um e vamos imprimir o PickedTex. Então eu vou imprimir a matriz PickedTex. Agora, eu vou em frente e executar isso. Claro, você vai ver a animação é executada aqui. Vou passar para o lado. Só quero olhar para isto aqui. Olha para isto. Ele escolheu um pimage aqui. Parece que o objeto foi atribuído 2f2a5869. Escolheu 5126db0. Essa é uma diferente. Então ele escolheu um diferente para esse serviço. Pegou 512 de novo. Parece que escolheu 2f2. Este escolheu 7cb. Eu gostaria que ele cuspisse os números, mas não cospe. O ponto é que selecionamos aleatoriamente os pedaços de papel fora do chapéu. Então, o bom é que este quatro loop prepicia quais das cinco imagens vamos mapear para cada uma das seis superfícies diferentes. Agora, TextureMode (normal) que não mudou. Nosso Hoscillator que não mudou. Nossa matriz pop PushMatrix que não mudou. Mas agora, veja como BuildCube mudou. Agora, se você olhar para o exemplo três, por exemplo, tivemos um BeginShape e um EndShape. Entre esse BeginShape e esse EndShape, chamamos todos esses vértices diferentes para todas as faces diferentes. Mas quando você faz isso e então você chama textura, ele vai usar textura que uma imagem para todas as seis superfícies. Então, é apenas mapear uma imagem para todas as seis superfícies. Eu não queria que isso acontecesse. O que eu queria que acontecesse aqui era mapear uma textura diferente para cada superfície. Então, o que eu tenho que fazer é realmente fazer um BeginShape e EndShape para cada uma das faces individuais do nosso cubo. Se eu fizer um BeginShape e EndShape para cada face individual do nosso cubo, posso chamar uma textura independente para esse rosto. Caramba, cara. É como desenhar um exemplo seis e meu cérebro já dói. Confie em mim, dói para mim também. Então, estamos nisto juntos. Mas novamente, observe que a atualização é que agora estou fazendo um BeginShape, EndShape, uma textura independente para cada um dos rostos. Então, se PickedTeX é uma matriz de cada uma das seis imagens diferentes que escolhemos do chapéu, eu poderia dizer, “Ei, eu quero ir para este array. Você pode me dizer qual imagem você escolheu na seleção zero?” Me dá uma imagem. Eu poderia dizer, “Ei, para o backface, você pode ir para o array e me dizer que imagem ele escolheu para um, o que ele escolheu para dois, o que ele escolheu para três, o que ele escolheu para quatro, e o que ele escolheu para o que fez isso escolhido por cinco.” Porque lembre-se, programar a maior parte do tempo começa em zero. Então, são seis texturas diferentes, zero, um, dois, três, quatro, cinco, seis. Eu sinto muito. Zero, um, dois, três, quatro, cinco, que seriam seis itens na matriz. Agora, por favor, não me machuque. Vamos em frente e executar este esboço. Novamente, quando eu olho para isso eu digo, “Uau, ok, isso é legal porque agora eu estou construindo este cubo, mas agora cada superfície está recebendo aleatoriamente sua própria imagem fora da pasta de dados.” Então, eu estou legal, eu posso ver meu tabuleiro de xadrez. Parece que escolheu aquela linha muito grossa de 45 graus, na verdade, um monte de vezes. Agora, se eu fechar isso e realmente executar esse esboço novamente, eu teria algo diferente. Algumas linhas grossas, algumas linhas médias, algumas linhas finas e nessa eu não consegui nenhum tabuleiro de xadrez. Então, novamente, porque eu aleatoriamente pré-escolhendo as imagens dentro da configuração, eu posso executar isso uma e outra e outra vez e eu vou obter um mapeamento único diferente cada vez. Eu só pensei, “Uau, isso está parecendo muito divertido.” Agora, eu sei que este arquivo doeu, mas agora está começando a ficar excitante porque o que acontece agora quando começamos a adicionar um monte desses cubos, e essa foi minha próxima idéia, que é eu não quero um cubo, Quero desenhar um monte deles. Então, vamos em frente e fechar este arquivo de vídeo e vamos passar para o próximo que vai cobrir exemplos sete e oito onde eu explorar essa idéia de desenhar vários cubos. 45. Unidade 9, Vídeo 5: Oi. Estamos no exemplo sete e estou feliz que você não tenha levado uma bola de beisebol volta para sua tela porque o último arquivo realmente deu a alguns de vocês uma dor de cabeça. Então, obrigado por se juntar a mim no próximo vídeo. Então, eu quero desenhar um monte de cubos, certo? Vejamos o problema que precisamos corrigir, que é, eu tenho essa tela e nos arquivos anteriores, o cubo estava sendo desenhado no centro exato. Eu queria desenhar um monte de cubos, mas como eu iria aleatorizar suas posições? Não só queria aleatorizar suas posições, mas queria aleatorizá-las fora desse ponto central. Então, seria ótimo se eu pudesse dizer, “Ei, eu quero fazer 10 caixas e eu quero aleatorizar a posição dessas 10 caixas, mas eu quero aleatorizá-las fora desse ponto central.” Então, há um problema, é que eu quero desenhar 10 caixas, mas eu preciso escolher aleatoriamente um lugar para eles. Ok. Então, vamos olhar para as linhas oito e nove. Agora, sempre que você está fazendo alguma randomização ou alguns cenários pré-escolhidos, você tem que salvá-los antes do tempo. Você tem que configurá-los, você tem que escolher aleatoriamente o material e configurar porque o desenho vai acessar esses atributos pré-escolhidos e apenas continuar usando-os uma e outra vez. Você não pode aleatoriamente no sorteio. Se você aleatoriamente no sorteio, de repente seus cubos estarão se movendo em todos os lugares na tela e eu não quero que eles movam para todos os lugares na tela. Oh, você escolhe sqween! Que horas são? Tenho certeza que são 04:00 da manhã. Bom, estou bem, obrigado. Você não pode escolher aleatoriamente no sorteio porque de repente todas essas coisas estariam se movendo por todo o lado. Eu preciso escolher aleatoriamente suas posições na configuração uma vez e depois fazê-los ficar lá. Então, este sempre foi o grande enigma para mim com o processamento, é que o sorteio é apenas executado em fresco cada vez e então você não pode escolher coisas aleatoriamente no sorteio porque as coisas podem se mover. Então, eu tenho que pré-escolher minha randomização. Então, olhe para a linha oito. Eu sei que eu quero pintar 10 cubos agora, não apenas um, eu quero pintar 10. Nesses dez, quero escolher aleatoriamente um local. Então, você vai notar que a linha nove é um belo amigo p-vector, certo? Um vetor p é um belo sistema de coordenadas e porque é 3D, vou escolher um x, y e z para o meu vetor p. Agora, linha nove eu digo “Ok, eu preciso escolher aleatoriamente um local inicialmente e depois salvá-lo.” Quantas entradas existem nesta matriz? Cubos Num, 10. Então, você vai desenhar dez cubos, eu preciso que você escolha aleatoriamente dez locais. Então, você vai notar local escolhido é igual novo vetor p e, em seguida, o número de vezes que eu preciso escolher algo, que neste caso é 10. Incrível. Então, linhas 29-32, é onde eu pré-escolho minhas texturas. Agora são linhas 34-41 onde estou aleatorizando minhas posições. Agora, vamos dar uma olhada nisso. Este for-loop vai correr quantas vezes? Dez, porque queremos pintar 10 cubos. Ok. Na linha 36, montei um vetor p temporário. Então, eu digo, PT for Point é um novo vetor p e eu digo, “Ei PT-X deve ser igual à largura dividida por dois.” Então, vá para o centro da tela, além de escolher um número aleatório, negativo 200 para positivo 200. Então, ele vai para o meio da tela e vai aleatoriamente ir negativo 200 para 200 positivos fora dele aleatoriamente em algum lugar dentro desse intervalo, e isso é apenas para a largura. P t.y vai fazer exatamente a mesma coisa, exceto que ele vai altura dividida por dois mais aleatório negativo 200 a positivo 200, então agora ele está escolhendo um intervalo de altura dividido por dois. Agora, eu também quero fazer isso no z. Então, eu digo que o número de pontos z deve ser negativo 100 para 100 positivo, certo? Então, estou escolhendo um intervalo entre aqui. Então eu digo, “Ei, array, vá em frente e pegue esse vetor p que eu acabei de configurar aleatoriamente.” Ok, então agora eu tenho uma matriz de 10 vetores p e se eu fosse olhar para cada vetor p individual, ele teria um x único, y e z, mas que x, y e z é baseado nesta randomização de largura dividida por dois, altura dividida por dois. Ótimo. Então, agora eu pré-escolhi um monte de 10 locais aleatórios fora do centro da tela. Agora, vamos em frente e olhar para a nossa função de desenho porque nossa função de desenho atualizado em vez de ter apenas uma matriz push, matriz pop build cubo, apenas um. Olha, está aninhado dentro de um for-loop. Então, agora, este for-loop vai correr quantas vezes? Dez vezes. Então, agora eu sei que eu estou disparando cubo de construção. Dez vezes, está bem? Agora, eu vou dizer, ótimo vamos traduzir para aquela localização X aleatória, aquela localização Y aleatória, e aquela localização Z aleatória para um dos cubos. Então, ele se move para onde quer que o local aleatório esteja e você também notará que ele coloca na rotação X, o girar Y, a oscilação Z girar e ele constrói o cubo. Agora, o loop for, em seguida, é executado pela segunda vez e anexa o segundo cubo em um local aleatório assim por diante e assim por diante. A função buildcube não foi alterada, é exatamente a mesma que antes. Então, se rodarmos agora este esboço deve construir 10 cubos para nós. Você vai notar que essencialmente são 10 cópias do mesmo cubo. Porque você vai notar que todos eles têm as mesmas superfícies. Não estou aleatorizando cada um dos cubos individuais. Obviamente, eu poderia, mas a razão pela qual eu não fiz isso é porque eu gosto que as coisas sejam familiares. Se eu estiver fazendo alguma aleatoriedade ou se eu tiver alguma coisa aleatória acontecendo no meu arquivo, eu quero algumas coisas que sejam consistentes. Então, de repente você pode olhar para isso e dizer, “Oh, é basicamente um cubo e os padrões que foram mapeados para ele copiados 10 vezes.” Então, há uma familiaridade nisso porque ele está reciclando os mesmos padrões em todas essas 10 superfícies. Agora, é claro, se eu fechasse este documento e o executasse novamente, teríamos mais 10 posições únicas. Então, eu estava tipo, tudo bem, isso é divertido. O problema, porém, eu diria que eu quero modificar sobre isso é desfazer que traduzem no eixo Z de negativo 100 para um positivo 100, mas ainda assim os blocos são grandes. Talvez eu gostaria de fazer uma variação nas caixas. Então, isso vai nos deixar passar para o próximo exemplo, que é o exemplo oito. Você vai notar no exemplo oito que eu disse, oh, cara, eu tenho que escolher aleatoriamente uma escala agora. Então, deixe-me definir as instruções para escolher aleatoriamente uma escala. Então, as linhas de três a quatro vão aleatoriamente escolher uma textura, linha seis é escolher aleatoriamente um local. Agora preciso começar a adicionar algumas informações para escolher aleatoriamente um tamanho de escala. Então, eu disse tudo bem, deixe-me escolher uma escala mínima e uma escala máxima. Então, você pode ver que eu criei dois carros alegóricos aqui. A escala mínima é uma caixa, 40 por 40 e a escala máxima sendo uma caixa 100 por 100. Então eu disse: “Ok, deixe-me criar uma matriz de escalas escolhidas aleatoriamente.” Então, eu disse, “Ok, vai ser um flutuador, vai ser um tamanho de caixa e ele também, vai ser como o local onde eu estou escolhendo aleatoriamente 10 tamanhos.” Então, o tamanho da caixa é igual a novo flutuador e eu passo o número associado a cubos entorpecidos que, claro, é 10. Então, dentro deste loop completo agora, está a edição. Que é oh, aqui é onde eu estou escolhendo aleatoriamente o local, eu provavelmente quero escolher aleatoriamente uma escala agora. Então, eu digo, “Ok tamanho da caixa, estou pronto para começar a escolher uma balança para você.” Então, você vai notar que eu tenho aleatório aqui e aleatório é organizar para escala mínima para escala máxima. Então, agora eu sei que cada tamanho de caixa vai ter algum tamanho entre 40, mas não menor que 40, e um 100, mas não maior que 100. Então, agora estou escolhendo aleatoriamente 10 tamanhos aleatórios para usar na minha caixa. Os osciladores permanecem inalterados. Meu loop completo se ajusta um pouco. Porque, agora o que eu preciso fazer é quando eu realmente construir cubo, eu preciso ser capaz de acessar qual tamanho aleatório realmente foi escolhido. Então, vamos verificar isso. Você pode ver que 82 online, eu digo, “Ei, construir cubo. Vou dar-te a variável I.” Então, eu é igual a zero, depois um, depois dois, depois três, depois quatro, depois cinco, depois seis, depois sete, depois oito, e depois nove. Então, eu sei que estou passando de zero a nove para a função buildcube. Agora, se você descer para a linha 87, você verá que eu estou aceitando eu em BuildCube. Então, BuildCube é executado e BuildCube diz: “Ei, eu entendo que você está me dando um número, me diga qual é esse número.” Esse número é apenas atribuído ao inteiro I, apenas reciclado o mesmo nome exato da variável. Agora, a razão pela qual eu faço isso é porque eu digo bem, quando você constrói este cubo você precisa ir para a lista de matriz BoxSize e acessar o primeiro tamanho zero. Vamos fingir que escolheu 62. Então, agora a caixa está dizendo, “Ok, palavra legal 62 para cada um dos rostos.” Em seguida, este loop quatro é executado uma segunda vez, em seguida, passa BuildCube e sub item um. Um é passado para BuildCube, ele vai até o array BoxSize e diz: “Ei, o que ele escolheu agora para o BoxSize.” Então, agora estou aleatorizando o tamanho das caixas. Então, se eu ir em frente e salvar e testar este esboço, você vai notar que agora eu sou capaz de jogar em um monte de BoxSize exclusivos. Então, eu ainda estou aleatorizando o Z, mas agora estou aleatorizando os tamanhos dentro desse Z. Então, agora eu posso obter algumas caixas menores e eu posso obter algumas caixas maiores e eu estava muito feliz com isso. Estamos chegando a algum lugar. Novamente, estamos apenas mutando lentamente essa ideia e vamos ver onde decidimos evoluir isso a seguir. Então, vamos em frente e terminar este vídeo. Na próxima seção, vamos estar cobrindo exemplos nove a 11. 46. Unidade 9, Vídeo 6: Então, neste vídeo, vamos abordar exemplos 9, 10 e 11. Mais uma vez, isso era parte da minha cara, eu me pergunto. Então eu comecei a pensar no exemplo nove, eu pensei, “Ok, eu mapeei JPEGs, eu mapeei arquivos de filmes.” Você notará que na pasta zip, exemplo 9, 10 e 11, tem um PNG anexado a ela. Eu só pensei, “Eu me pergunto se eu posso usar um PNG porque um PNG suporta transparência e eu me pergunto se isso afeta o mapeamento para este conjunto de cubos.” Então, se você entrar em exemplo, 9.PNG e você olhar para a pasta de dados, existem quatro PNGs que eu saí aqui. Onde quer que fosse branco eu realmente fiz transparente. Então, quando eu saí isso do Illustrator, a única coisa que realmente tem qualquer coloração é o preto, o branco é realmente transparente. Então eu pensei, “Ok, no exemplo nove, o que acontece quando eu faço essa modificação aqui nas linhas 18 a 21 e realmente troquei o ativo de um JPEG para um PNG?” Eu pensei, “O que aconteceria se eu tivesse um cubo e eu tivesse transparência, eu seria capaz de ver através da transparência para as formas nas outras faces do cubo?” Então, com isso dito, vamos em frente e testar este esboço aqui e vamos ver o que acontece. Então estamos construindo agora, eu acho que eu fiz um pequeno ajuste aqui na linha 6. Eu disse que o número de cubos era na verdade 20 em vez de 10. Se você olhar, sim, você pode realmente ver através da transparência do PNG e ver algumas das texturas que são através da transparência. Agora, não é 100% perfeito, se você realmente olhar você verá algumas falhas onde alguns dos PNGs realmente desaparecem. Mas apesar de tudo, eu era como, “Oh, uau. Isso funciona bem.” Então, de lá eu pensei, “Bem, tudo bem, vamos apenas olhar para tentar algo.” Vou rolar até o fundo aqui e aqui está a função BuildCube. Eu pensei, “Bem, ok, eu estou construindo essas seis superfícies diferentes para fazer este cubo.” Então eu pensei, “O que aconteceria se, enquanto eu estava construindo o cubo, eu na verdade, para cada um dos seis lados, eu criasse duas faces. Então haveria dois rostos para a frente, dois rostos para trás, dois rostos para o topo, dois rostos para o fundo, e assim por diante. Agora, vamos em frente e olhar para o exemplo 10, porque eu pensei que talvez eu possa usar essa transparência PNG em minha vantagem, que é se você olhar para o exemplo 10, o que eu fiz foi que eu introduzi um HColorPool. Linha duas cores HColorPool, assim como tudo o resto, assim como eu escolhi um local, e assim como um tamanho de caixa, eu vou pré-escolher seis cores para a superfície do cubo. Na linha 21 você pode ver aqui eu tenho o HColorPool e algumas cores aleatórias nele. Agora, aqui está o loop quatro onde eu estou escolhendo aleatoriamente as texturas dos PNGs. Além de escolher um PNG para um rosto, eu pensei : “Se eu estiver usando dois rostos para uma superfície, o que eu vou fazer é, eu vou escolher uma cor para uma das superfícies, e então eu vou escolher um PNG que vai ficar em cima dessa cor.” Então, linha 36, estou escolhendo uma textura e na linha 39, estou pré-escolhendo uma cor aleatória. Agora, como o código está ficando longo, se você realmente olhar aqui para baixo para o BuildCube, eu encurtei tudo para uma linha apenas para que ele simplesmente não era uma quantidade tremenda de código. Agora, aqui é onde eu estou selecionando duas superfícies para cada rosto. Então, em tipo 98 eu digo, vamos fingir que estamos fazendo a frente agora, o que estamos fazendo. Na linha 98 eu digo, “Ei, vamos selecionar a cor que nós pré-escolhemos e vamos fingir que é laranja.” Então ele escolhe laranja e anexa a essa forma de início, essa forma final, e esses vértices. Está tudo na linha 99. Em seguida, na linha 100 eu digo, “Ok, legal. Matar o preenchimento”, e na linha 101 eu digo, “Legal, vamos fazer a próxima superfície a mesma informação exata, mas agora está sentado acima daquela que tem a cor.” Então eu pensei, “Isso vai ser ótimo”, porque é como conceitualmente, é um cubo dentro de um cubo, mas o cubo interno está escolhendo cores aleatoriamente, o cubo externo está esfolando a superfície com aqueles PNGs transparentes e porque esses PNGs transparentes são transparentes, você será capaz de ver através do cubo externo para o cubo interno que realmente tem a seleção de cores aleatórias porque eu estou apenas brincando. Agora, se você executar este esboço, isso é exatamente o que acontece é que você tem um cubo dentro um cubo porque cada rosto é dois começar em formas. A primeira, escolhemos aleatoriamente uma cor, a segunda é colocar o PNG em cima dela. Então, você está realmente olhando através da transparência para a cor na caixa interna. Agora, aqui parece que ele acabou de pegar um monte de cinza e uma laranja. Se eu realmente executar este esboço novamente vamos ver se eu posso obter uma mistura melhor. Então agora, parece que eu tenho alguns cinza, eu tenho um azul azul-petróleo, e parece que eu também tenho uma superfície laranja. Então eu pensei que isso era como se a próxima evolução lógica fosse “Uau, talvez eu possa usar PNGs para usar a transparência a meu favor para olhar para outro cubo no interior que está recebendo um preenchimento sólido.” Agora, se você está pensando como meu cérebro louco, você pode descobrir o que vamos fazer na construção 11. No exemplo 11, eu pensei, “Sim, eu tenho que usar HPixelColorist.” Então você vai notar dentro da pasta de dados há este color.JPeg e se olharmos para o código do exemplo 11, eu tirei HColorPool e eu adicionei HPixelColorist. Novamente, na linha 14 isso permanece inalterado no exemplo 11, ainda estamos escolhendo uma cor. Na linha 21, atualizamos de usar HColorPool para HPixelColorist. Então vamos ver o que temos que fazer aqui que está bem aqui no loop quatro, já que está pré-escolhendo o local, pré-escolhendo a escala, eu também estou dizendo, “Ei, você pode me fazer um favor e pré-escolher a cor, mas o cor que eu quero que você obtenha é acessar o HPixelColorist, obter a cor, e eu vou dar-lhe esta coordenada X e esta coordenada Y que é pt.x e pt.y.” Agora, se você se lembra que pt.x e pt.y é nossa seleção aleatória de localização. Então eu estou dizendo, “Escolha um local aleatório qualquer que seja o local. Veja também as coordenadas X e Y no JPEG, encontre o pixel nessa posição específica e puxe isso para o cubo.” Então, se você descer para a função BuildCube, o código não foi alterado. Ainda é o mesmo do exemplo 10, mas agora, quando eu testo esse esboço, novamente, ainda estamos fazendo esse cubo dentro de um conceito de cubo, exceto que ele está roubando a cor do nosso color.JPG. Então, novamente, que ótima maneira de usar o PNG para nossa vantagem. Deixa-me só ver isto mais uma vez e ver se conseguimos escalas aleatórias diferentes. Isso ia ficar um pouco menor em torno de caixas lá. Mas, novamente, é amostrar a cor do HPixelColorist. Certo, vamos terminar este vídeo. Em seguida, vamos apenas gastar tempo no exemplo 12. 47. Unidade 9, Vídeo 7: Ótimo. Estamos agora no exemplo 12 e o que vamos fazer por exemplo 12. Então, eu comecei a pensar, eu pensei, eu não sei se eu necessariamente gosto da oscilação de cada cubo individual. Eu pensei que eu me pergunto o que aconteceria se eu pegasse a oscilação e usasse em todo o conjunto de cubos. Então, em vez de cada cubo individual me dando oscilação RotaTex, RotaTey e RotaTez. E se eu usar essa oscilação para mover todo o conjunto de cubos? Então, vamos em frente e olhar para a linha seis nossos NumCubes é 20 então vamos gerar aleatoriamente 20 cubos neste cluster. Você pode apenas querer verificar que na linha é 39 a 41, minha randomização é maior. Agora é negativo 300 fora do centro e positivo 300 fora do centro para o eixo x. 300 negativos, 300 positivos para o eixo y, e também 300 negativos, 300 positivos para o eixo z. Ok. Agora, os nossos osciladores permanecem inalterados. Eles ainda são os mesmos aqui. Ok, mas o que eu fiz foi editar o push e PopMatrix. Agora, vamos ver o que mudou aqui. Na verdade, eu vou voltar para construir 11 para que você possa ver como nós inicialmente tivemos a configuração PushMatrix, PopMatrix. Ia traduzir para o local aleatório. Ele ia então fazer girar x, girar y, girar z para cada cubo individual, construir o cubo e, em seguida, colocar as configurações de volta para fora. Ok. Então, 12 assume um papel um pouco diferente no sentido de que, na verdade eu preciso mostrar uma outra coisa que, é se você olhar para pt.x, pt.y, e pt.z no build 11, lembre-se que este local aleatório tinha que encontrar o centro de a tela primeiro e, em seguida, aleatorizada fora do centro da tela. Então, observe que o pt.x foi dividido por dois mais um intervalo aleatório, altura dividida por dois mais um intervalo aleatório, e novamente o z foi apenas 100 negativo, positivo 100. Em 12 esperançosamente, você notou que a largura dividida por dois desapareceu e a altura dividida por dois desapareceu. Ok. Agora, a razão para isso é o local escolhido. Eu só queria escolher um número aleatório baseado em um min e um max, e novamente o min eo max aqui é apenas 300 negativo, positivo 300. Então, ok, vamos olhar para este PushMatrix e PopMatrix. Ok. A linha 75 diz: “Ei, vamos para a posição central”, então se traduz em largura dividida por duas altura dividida por duas. Então, vá para o centro e então ele diz ok, “Vamos fazer RotaTex, Rotatey e RotaTez não no loop for”, ele está fazendo isso fora do loop for e porque ele está fazendo isso fora do loop for, ele vai executar que a tradução de RotaTex, RotaTey, RotaTez para todo o ambiente. Ok. Então, ele traduz RotaTex, RotaTez, então ele chega ao loop for que é executado, neste caso, 20 vezes. O loop for é executado 20 vezes, ele anexa os cubos e diz, “Sim, mas esses cubos precisam se mover aleatoriamente no x, aleatoriamente no y e aleatoriamente no z.” Ok. Então, nós temos um novo impulso aninhado e poMatrix que está lidando com o cubo individual e esse cubo individual diz, “Ok. Eu posso ir negativo 300, positivo 300, negativo 300, positivo 300, negativo 300, positivo 300, positivo 300, assim por diante, e assim por diante. Ok. Então ele constrói o cubo. Então, movendo o RotaTex, Y e Z para fora do loop for e colocando-o em um primeiro push inicial e PopMatrix, em seguida, dentro executando o loop for e fazendo seu outro push individual e PopMatrix para cada cubo individual, que agora significa que estamos usando as Oscilações H para mover todos os 20 cubos de uma só vez. Tudo bem. Então, tudo o resto abaixo permanece inalterado. Você pode notar que apenas a compilação 10 e a compilação 11 estão usando os PNGs transparentes realmente voltaram para os JPEGs neste arquivo. Então, eu não estou usando os PNGs transparentes, e eu não estou fazendo a caixa dentro de uma coisa caixa. Isso foi apenas nos arquivos 10 e 11. Então, eu tirei isso aqui na construção 12. Na construção 12, estou apenas construindo minha caixa e anexando texturas aleatórias a cada uma das superfícies. Tudo bem. Então, vamos em frente e executar este esboço em particular e o que você deve ver é que eu estou usando a oscilação agora, eu não estou girando cada cubo individual, eu estou girando toda a massa agora. Eu só pensei, “Uau, ok, isso é bem incrível.” Gostei muito disso. Então, eu vou em frente e eu vou manter este vídeo curto. No próximo vídeo eu vou passar para os exemplos 13 e 14 porque outra idéia me bate que poderia avançar a maneira que isso parece esteticamente. Então, a coisa que eu quero que você perceba agora é que estamos girando toda a seleção de 20 cubos, mas note que todos os cubos não são girados. Então, eles estão basicamente voltados para a mesma direção. Então, eu pensei, eu preciso aleatorizar isso. Então, vamos fechar este vídeo e passar para os exemplos 13 e 14. 48. Unidade 9, Vídeo 8: Estamos nos exemplos 13 e 14 agora. Então, agora, eu estou no exemplo 13 e eu novamente, apenas pensei que eu precisava abordar esta questão da rotação, o fato de que todos os 20 dos cubos compartilhavam a mesma não-rotação. Então, como você imagina, se eu quiser girar os cubos aleatoriamente, pelo menos fixo, e então girar todo o cluster, eu tenho uma pré-escolha rotações aleatórias. Então, vamos em frente e olhar aqui na linha 13. Eu escolho aleatoriamente uma textura. Eu escolho aleatoriamente um local. Eu escolho aleatoriamente um tamanho baseado em um minuto e um máximo. Se você vai girar algo aleatoriamente, você precisa pré-escolher uma rotação aleatória escolhida. Então, eu crio um PVector aqui chamado PickedRotation, e ele também é NumCubes, que significa que ele vai ter 20 rotações pré-escolhidas. Tudo bem. Então, vamos olhar para as linhas 49 a 51. O que eu quero pré-selecionar é uma rotação X, Y e Z para cada cubo. Então, eu não estou fazendo apenas uma rotação. Estou fazendo rotação de todos os três planos: uma rotação X, uma rotação Y, e uma rotação Z. Então, na linha 50, eu digo, “Ok. Bem, eu quero um PVector. Eu vou chamar este PVector pr para rotação escolhida”, e eu vou dizer, “Ok. Para o X, faça inteiro aleatório 360", que vai me dar um número entre zero e 360, “e para o Y, me dê um 360 aleatório, e para o Z, me dê um 360 aleatório.” Depois de escolher aleatoriamente essas três rotações, pegue esse PVector e salve-o na nossa lista de rotações escolhidas. Então, agora nas linhas 49 a 51, escolhemos aleatoriamente uma rotação para o cubo. Agora, você entra no sorteio aqui, e aqui está o nosso empurrão e a nossa matriz pop. Agora, novamente, linhas 81 a 84, que está lidando com todo o agrupamento, e você verá que é a adição das linhas 90 a 92, onde eu digo, “Ok, agora você está escolhendo cubos individuais, Traduza X aleatório, Y aleatório , Z. Além disso, gire para o seu X aleatório, gire Y e gire Z.” Então, agora cada cubo está escolhendo seu, eu estou atribuindo o que eu pré-escolhi para rotação para a rotação X, girar Y, e girar Z. Stellar, nada mais é diferente. cubo de compilação ainda é o mesmo. Agora, veja como apenas implementar essa rotação aleatória pré-selecionada, veja como ele muda o cluster. Então, eu vou em frente e executar este esboço. Você vai notar agora que o arranjo dos blocos é muito mais interessante porque agora, eles não são todos a mesma não-rotação. Agora, eles são todos rotações diferentes, mas então eu estou movendo todos eles como um aglomerado e apenas esteticamente, eu pensei, “Uau! Isso é visualmente muito mais interessante. Deixe-me apenas executar o esboço novamente para ver que tipo de configuração aleatória eu recebo.” Novamente, agora estou criando esse lindo conjunto de cubos, mas o fato de eles girarem aleatoriamente significa que alguns vão bater em alguns dos outros, e eu pensei: “Uau! Isso parece muito bom.” Novamente, estou usando oscilação para mover o cluster como um todo. Então, eu estava sentado com esse cara por um tempo, e então eu comecei a pensar o que aconteceria se eu adicionasse rotação de volta aos cubos individuais. Então, isso me fez pensar, “Bem, tudo bem. Eu poderia ter oscilador oscilando todo o aglomerado. Mas então, e se os cubos individuais estivessem se ligando enquanto o oscilador movia o conjunto como um todo?” Mas eu não tinha certeza se eu queria passar e criar um novo conjunto de osciladores. Então, eu pensei, “Deixe-me salvar isso para um Build 14 e tentar algo.” Então, vamos em frente e passar para o Build 14. Build 14 é quase idêntico ao Build 13, mas eu implementei um pequeno truque dentro deste esboço, e esse truque está dentro da função de desenho. Isto foi tudo o que fiz, foi esta pequena edição aqui. Eu disse: “O que aconteceria se apenas dentro do X girasse e girasse Y, se eu subtraísse o FrameCount do filme?” Agora, FrameCount está sempre contando um, dois, três, quatro, cinco, seis. No segundo em que você começa o filme, FrameCount está sempre em execução. Eu pensei, “Bem, e se eu girar X menos o FrameCount, e se eu girar Y mais o FrameCount?” Então, eu não estou criando um novo conjunto de oscilações. Só estou ajustando essa rotação X e Y menos ou mais qualquer que seja o FrameCount do filme. Mais uma vez, eu não tinha certeza do que isso iria fazer até eu rodar o esboço. Assim que fiz o esboço, fiquei muito feliz. Agora, você poderia criar um conjunto totalmente novo de osciladores, se você quisesse. Poderíamos aplicar um conjunto secundário de oscilação para cada cubo individual e, em seguida, a oscilação principal fazendo o cluster principal. Mas eu pensei, visualmente, isso menos FrameCount e mais FrameCount abordou o problema sem escrever um monte de novo código. Então, eu pensei, “Uau! Isto é muito bonito.” Novamente, eu posso correr isso uma e outra e outra vez, e nós ficamos diferentes. Lá vamos nós. Então, agora eu escolhi alguns cubos menores. Então, você tem a oscilação principal que está girando lentamente essa coisa ao redor, e o FrameCount girando cada uma das caixas individuais. Agora, uma coisa que você deveria estar pensando agora é, “Oh meu Deus! Talvez eu seja novo no processamento, e muito desse código agora acabou de ficar muito, muito rápido.” Independentemente disso, posso ir até o topo, e percebo que estou mapeando JPEGs para este ambiente. Então, eu posso saltar para o Photoshop ou Illustrator, criar alguns novos ativos, e eu posso realmente mapeá-los para esse ambiente e ver que tipo de padrões eu recebo. Então, você pode trocar minha arte por algo diferente. Então, eu estou olhando para isso, e eu estou pensando que isso é ótimo. Tive uma experiência muito boa com este sistema. Produz algo interessante. Mas no fundo da minha mente, eu ainda estava me perguntando o que define uma textura, e esta seção é chamada de combos. Eu pensei como eu poderia pegar essa coisa incrível aqui e combiná-la com outra coisa que nós já cobrimos nesta aula. Então, a primeira coisa que me veio à mente foi, o que aconteceria se eu fizesse um comportamento de enxame e mapeasse o comportamento do enxame para a superfície de cada cubo? Isso seria mesmo possível? Então, o que vamos fazer agora é, escrevi uma pequena nota aqui, que é fazer uma pausa. Então, vamos fazer uma pausa. Estamos até o exemplo 14, mas eu quero parar esse código que fizemos, e eu quero fazer um pequeno arquivo lateral e ilustrar o que estamos fazendo neste arquivo lateral, e então pegar esse arquivo lateral e mesclá-lo no que vemos agora. Então, como eu posso trabalhar em um enxame que eventualmente eu vou mapear para a superfície desta animação cubo? Coisas excitantes. Vamos terminar este vídeo, e te vejo no próximo. Uma pequena pausa. Passando para o exemplo 50. 49. Unidade 9, Vídeo 9: Está bem. Estamos a fazer uma pausa. Este arquivo é uma pausa, um pouco de uma pausa, porque eu estou me perguntando na minha mente, posso usar HCanvas para uma textura? HCanvas poderia ser mapeado para a superfície do cubo? Tenho o mapeamento do JPEG, o mapeamento do PNG, o mapeamento do QuickTime Movies. Por que não pude mapear um HCanvas para esse cubo? Acho que podemos fazer isso. Então, eu pensei, bem, ok, vamos dar uma pausa aqui, vamos ver o arquivo 15. Arquivo 15, exemplo 15, você vai notar que ele diz Enxame e isso é porque eu quero fazer um comportamento Enxame. Agora, se eu olhar para o exemplo 15 e eu olhar para a pasta de dados, eu tenho nosso bom amigo color.jpg aqui. Então, eu pensei que tudo bem, eu vou usar esta informação de cor para o meu Enxame. Vamos verificar isso. Eu tenho um HCanvas, HPixelColorist, eu tenho HsWarm, eu tenho HDrawablePool e eu tenho um HTimer. Então, vamos combinar todas essas coisas em um HCanvas porque no fundo da minha mente, eu estou pensando que eu vou usar um HCanvas na superfície do cubo. Observe o tamanho do meu filme, é 1280 por 640. Agora, eu fiz isso de propósito para que quando rodarmos este arquivo, ele me permita demonstrar o que está acontecendo visualmente. Agora, 1280 é 640 vezes dois. Na linha 12, eu crio uma instância de HPixelColorist e eu digo ir buscar o nosso color.jpg. Só quero que saibas que vamos aplicá-lo ao FillOnly. Agora, olhe para as linhas 14 a 16, estou criando um HCanvas, mas observe a mudança. A mudança aqui é, que se você não especificar qualquer argumento dentro de HCanvas então ele apenas adota a largura e a altura. Eu quero fazer um HCanvas que é apenas 640 por 640, então na linha 14, eu digo que c1 é um novo HCanvas, 640 pixels a 640 pixels, AutoClear é falso e o fade é um, então vamos ter essa gravação lenta. Então ignore a linha 15, finja que nem vê. Linha 16, H.add (c1). Na linha 18, eu estou adicionando a imagem de color.jpg, e eu estou colocando sua localização em um eixo x de 640 e agora eu estou falando através do código, mas quando executá-lo, você vai ser como, “Oh, ok, eu entendo o que ele está fazendo.” Estou criando um HDrawablePool e vamos desenhar 20 deles. Nós vamos criar este material em nosso c1 Canvas, então estamos pintando nossos HRetângulos em c1. Temos um OnCreate, observe que não há RequestAll e não há RequestAll porque estamos usando um temporizador para anexar cada um dos itens ao nosso Swarm a cada 250 milissegundos. Agora, em nosso OnCreate, eu coloquei aquelas coisas que tínhamos feito em um arquivo anterior de Swarm que era como fogos de artifício, eles atiraram em posições diferentes. Quero usar isso neste. Então, eu faço rotação flutuante = random (TWO_PI), o tamanho do Drawable aqui é 100 pixels por dois pixels, não há traçado. A localização é 320 no X e 320 no Y. Então novamente, se todo o nosso filme é 1280 por 64 então eu só estou fazendo o ponto Enxame no lado esquerdo da tela, 320 por 320. Eu vou em frente e colocar essas coisas que eu coloquei no Enxame anterior onde eu estou fazendo os radianos de rotação para rotação e o movimento, Cosseno tempos de rotação 10 e Sine tempos de rotação 10 e o Anchorat está em H.center. Eu também estou fazendo as colors.ApplyColor de um HPixelColorist que está pegando cor fora de color.jpg. Malvado. Agora, estou criando um HsWarm e adicionando D a esse HsWarm e estou dizendo, “Ei, aqui estão as propriedades que eu quero que você tenha.” O objetivo que você está tentando alcançar é 320 por 320, que também é o ponto de parto, sua velocidade é 15, seu TurneAse é 0,02, e seu contração é cinco. Agora, aqui na parte inferior eu tenho um pequeno loop de quatro e eu estou dizendo para percorrer todos os ativos no pool e atualizar sua cor a partir de cores HPixel. Então, à medida que o Enxame começa a se mover, ele está atualizando a cor à medida que ele se move através deste color.jpeg. Então, vamos testar este esboço e ver o que estou tentando ilustrar aqui. Legal. Então, a razão pela qual eu fiz este arquivo dessa maneira é que no lado direito, você pode ver apenas o color.jpg e eu estou dizendo, “Olha, eu estou carregando neste color.jpg e estou usando suas informações de cores para atualizar o Enxame que você vê à esquerda. Agora, o Enxame que você vê à esquerda, você vai notar que é na verdade um HCanvas. Então, há um HCanvas que tem 640 pixels por 640 pixels ali mesmo no lado esquerdo. O Swarm está correndo e atualizando a cor mas o que estamos vendo à esquerda é um HCanvas. Então agora, eu quero saber depois desta maravilhosa pequena pausa que fizemos, posso usar este HCanvas que vemos aqui no lado esquerdo, posso usar este HCanvas para todas as seis superfícies do cubo? Vou enlouquecer se funcionar. Então, vamos fechar este exemplo, vamos passar para o próximo vídeo onde vamos falar sobre o Exemplo 16 e o Exemplo 17. 50. Unidade 9, Vídeo 10: Está prestes a cair agora, exemplo 16 e exemplo 17. Aqui é onde eu estou tomando o exemplo 15 e vendo se eu posso mesclá-lo com o exemplo 14. Então, o exemplo 16 é uma mesclagem desses dois arquivos. Vai haver um monte de código aqui, mas espero que você tenha visto isso começar fácil e progressivamente se tornar mais complexo. Espero que, mesmo que seja um monte de código, você tenha entendido os passos que nos levaram a este ponto. Então, vejamos o exemplo 16. Eu fiz algumas coisas neste arquivo, há algumas pistas visuais e vai fazer sentido quando o executarmos. Por cima, eu apenas copiar e colar todas as coisas que tínhamos acabado de fazer no exemplo anterior 15. O Canvas, o PixelColorist, o Enxame, o Pool Drawable e o Temporizador. Se você olhar para a configuração, eu copiei e colei todas as coisas do exemplo 15, que é adicionar o HPixelColorist, adicionando o Canvas-One. Veja aqui, só diz novo HCanvas. Tome um aviso, linha 19, este arquivo está de volta para 640 por 640. Então, estamos de volta em nosso tamanho de tela menor, não estamos mais em 1280. Estamos de volta às 640 por 640. Linha 25, mantive o mesmo. Eu só disse, vamos fazer um HCanvas e essa tela é 640 por 640. Auto clear é falso, o fade é um. Ignore a linha 26, você não vê. Estou adicionando tela ao hype. O modo de textura é normal. Em seguida, adicionei todo o código para a piscina no temporizador. Então, o pool ainda é o mesmo que era no exemplo 15. Estamos a desenhar 20 activos, está a usar um HRetangle, está a fazer aquela rotação de fogos de artifício radianos. Estamos adicionando um HsWarm assim como fizemos no exemplo 15 e o Timer ainda vai disparar essas coisas 250 milissegundos. Agora, o resto do código são todas as nossas coisas pré-escolhidas. Então, se você olhar para este quatro loop, que é de antes, que é do exemplo 14. Onde estou pré-escolhendo uma localização aleatória, pré-escolhendo uma escala aleatória, pré-escolhendo uma rotação aleatória para x, y e z. Nossos osciladores permaneceram inalterados do exemplo dois. Agora, vamos olhar para o sorteio. O sorteio, Eu adicionei que pequeno loop quatro para percorrer o pool e reget a cor de cada PixelColorist em que color.jpeg. Esta matriz push e pop ainda é a mesma. Isso permanece inalterado do exemplo 14. O que é diferente é a função BuildCube e olhar para a ciência que eu fiz aqui. Eu disse para a textura, em vez de tex, T-E-X, em vez de ir para uma matriz de imagens, eu apenas disse, “Vá para a tela e pegue os gráficos dela.” Fiz isso por todos os rostos. Então, você notará que a textura é c1.graphics para todas as seis superfícies do cubo. Agora eu vou rodar o filme e você vai notar algumas maravilhas, mas ele está lá por uma razão e eu vou explicar. Quando eu executo, eu deixei o HCanvas de C1 no fundo lá. Então, você pode vê-lo em execução, mas então você também pode ver que ele está realmente mapeando o comportamento do enxame para todas as seis superfícies do cubo. Então, eu tenho o comportamento do enxame sentado no fundo, você pode vê-lo se movendo e você pode ver que ele está realmente atualizando nas superfícies. Então, isso é apenas uma dica visual. Um momento sagrado, esta maldita coisa funcionou. Então, eu vou ir em frente e fechar isso e eu vou corrigi-lo no exemplo 17. Então, se você for para o exemplo 17, a única coisa que é diferente é esta linha 26 aqui, onde eu crio o HCanvas 640 por 640. Eu adiciono o HCanvas na linha 27, mas na linha 26 eu digo, “Você pode mover a tela como eixo X como 10 mil negativos. Tipo, basicamente, tire isso de mim. Eu não quero ver isso. Eu preciso dele, está lá, estou pintando para ele, vou usá-lo como uma textura, mas movê-lo para fora da tela para que eu não veja.” Então, há nossa linha 26, que é mover a exposição C1 Canvas negativo 10.000 pixels. Então, agora, quando você realmente executa seu esboço aqui, tudo que você está vendo são os cubos e o comportamento do enxame sendo mapeados para todas as seis superfícies desse cubo. Pode me dar um aleluia. Posso ter um amém. Então agora, eu sou como, “Oh meu Deus! O céu é o limite agora.” Agora, se você pensar sobre isso, qualquer coisa que aprendemos nesta classe, interpolação, rotação, o comportamento do enxame, desde que estejamos pintando para um HCanvas, podemos realmente mapear esse HCanvas como uma textura neste superfície. Agora, você deve ter notado que a única coisa que estamos vendo agora são esses cubos transparentes e se você quisesse você poderia vir aqui para a função BuildCube então você vai notar, olhe para a linha 146. Comentei esta linha 146, mas vamos ver isto. Se eu comentar a linha 147 que não é nenhum traço, nenhum preenchimento e eu realmente colocar a linha 146 de volta, que é um peso de traçado de um e uma cor de traço de cinza, você pode realmente executar este esboço agora. Na verdade, aqui vamos fazer isso um pouco maior. Vamos fazer disto um peso de quatro. Eu não sei se o traço dessa cor cinza vai ser um n, isso funciona bem. Então, você pode ver que as caixas, você pode ver sua rotação e você tem este padrão realmente interessante do enxame correndo através da superfície desse cubo que é bonito. Agora, vou colocar isso de volta ao jeito que tínhamos. Então, vou comentar a linha 146. Vou colocar 147 de volta. Novamente, é incrível. Na verdade, estou usando todo esse ambiente para ocultar o conjunto de cubos. Eu não estou realmente interessado em talvez ver os cubos, mas eu estou mais interessado na abstração do comportamento do enxame sendo mapeado para os cubos e lá é onde a magia está. Agora, eu vou terminar este arquivo e literalmente temos três vídeos sobrando. Haverá um por exemplo 18, um por exemplo 19 e um por exemplo 20. O propósito para estes próximos arquivos era novamente eu apenas dizendo, “Eu me pergunto.” O que eu me pergunto foi, vou te dar uma dica, é vir aqui e olhar para a linha 20. linha 20 é o palco e você notará que o fundo é apenas 20-20-20. Não foi até eu tentar dizer: “O que aconteceria se eu não limpasse o palco automaticamente?” Se eu não limpasse o palco automaticamente, deixaria trilhas, não é? Então, salvei este ficheiro, fiz este esboço, e consegui isto. Então, eu pensei que nós precisávamos fazer alguns arquivos novos. Vamos em frente e terminar este vídeo e vamos passar para o exemplo18. 51. Unidade 9, Vídeo 11: Exemplo 18. Estamos chegando aos últimos vídeos aqui, e o garoto faz esse processo, essa experimentação de e se, e eu me pergunto o que aconteceria se eu fizesse x, y e z. É preciso uma reviravolta estranha, e como mencionei em o último vídeo, tudo que eu tinha que fazer, foi adicionar o AutoClear (falso) ao palco principal, que é, “Ei você tem esses cubos se movendo. Por que não os pintamos e vemos o que acontece?” Ok. Então, eu adicionei que AutoClear (false). A outra coisa que eu mudei foi, é que eu mudei HDrawablePool para ser apenas um ativo. Então, agora, há apenas um comportamento de enxame que está sendo mapeado para cada uma das seis faces porque eu pensei que 20 era demais. Especialmente desde que você obteria essas rotações do lado de fora, ele iria criar este anel, e novamente ele tornou os cubos muito visíveis. Eu gosto dessa idéia de usar esse cluster 3D totalmente louco, mas escondê-lo de uma forma que se as pessoas vissem os arquivos, eles talvez nem reconheceriam que eu estava usando cubos 3D para fazer isso em primeiro lugar. Então, a fim de discar isso para baixo, eu mudo HDrawablePool para ser um. Neste arquivo 18, essas são as únicas alterações, como eu adiciono esse AutoClear (false) e eu solto o pool para um. Então, vamos em frente e executar este esboço e agora, soltando o enxame para um ativo, o conjunto de cubos quase desapareceu. Certo. Você vê, você tem este sistema de pintura, mas é difícil realmente identificar como isso é pintura. Certo. Isso não é incrível? Você já pensou que quando começamos isso, no exemplo um usando esses cubos tridimensionais, que chegaríamos a um exemplo 18 onde eu escondo o sistema que está gerando esses padrões? Você saberia? Sabias que isto foi gerado por um monte de cubos tridimensionais? Oh, cara, isso foi muito bonito. Então, eu estou pensando sobre isso e eu acho que isso precisava de alguns ajustes. Uma é, eu senti que talvez deva haver alguns momentos de calma. Talvez o enxame esteja correndo rápido demais. Talvez eu precise mudar a velocidade ou a rotação é, que tenhamos esses momentos, e então talvez ele simplesmente não consiga resolver rápido o suficiente, e então há uma pausa, e então ele volta, e então você vê deslizar. A outra coisa que é interessante neste arquivo em particular, é que não estamos usando nenhuma luz. Não estamos usando nenhuma luz pontual. Então, estamos recebendo a cor em 100% de saturação, e adicionando uma luz pontual significaria que se eu tivesse essa caixa que tinha seis superfícies, e ela virou ligeiramente dessa maneira, e se eu tivesse uma luz pontual aqui, e adicionando uma luz pontual significaria que se eu tivesse essa caixa que tinha seis superfícies, e ela virou ligeiramente dessa maneira, e se eu tivesse uma luz pontual aqui, significaria que o comportamento do enxame levaria a luz nesta superfície, mas começaria a escurecer nesta superfície. Então, eu pensei que usando luzes pontuais neste ambiente, eu poderia realmente começar a controlar o sombreamento deste ambiente. Porque agora é muito plano, muito psicodélico, mas eu quero adicionar um pouco mais de alcance tonal, e eu acho isso lindo, eu acho, eu juro por Deus, isso é o que eu faço. Eu apareço com idéias loucas, loucas, e eu codifico essas coisas e eu fico aqui sentado tipo, é incrível. Isso é o que eu faço. Isso é o que eu faço. Só fico sentado tentando me surpreender. Hilariante. Ok. Vamos fechar isso, parece ótimo também, mas sumiu. Vamos fechar esse arquivo e passar para o exemplo 19 no próximo vídeo. 52. Unidade 9, Vídeo 12: Estamos no exemplo 19, e eu vou implementar algumas dessas sugestões que mencionei no vídeo anterior. Então, se eu alternar de volta para o exemplo 18, vamos ver algumas coisas aqui. O número de cubos é 20, a escala mínima e a escala máxima são 40 e 120. Se olharmos para o enxame, a velocidade é 15, a facilidade de rotação é 0,02 e a contração é cinco. Vamos fazer alguns ajustes. Se você passar para o exemplo 19, eu movo cubos num para baixo para 13. Pensei que 20 era demais. Preciso desses momentos de espaço. Então, eu movo o número de cubos para 13. Eu também aumento a escala máxima, então você notará que a escala mínima é agora 50 e a escala máxima é agora 150. Eu também mudei o tamanho da tela, 900 por 900. Eu queria uma área de visualização maior para pintar em vez de 640 por 640. No entanto, isso não afeta a tela H. A tela H pode ficar em 640 por 640. Então, não importa o que mudemos a largura e a altura da tela principal, já que, desde que o enxame e a tela H ainda grudem naquele 640, tudo vai funcionar muito bem. Tudo bem. No enxame, facilidade de virar foi discada. Então, em vez de 0,02, agora é 0,01, então é apenas um pouco mais lento, ok? Então eu pensei, bem, a outra coisa que eu provavelmente quero atualizar é o X aleatório e o Y aleatório. No exemplo 18, é negativo 300, positivo 300 para X e Y. Em 19, eu estou fazendo 400 no negativo e 400 no positivo. Então, agora cada um dos cubos pode se mover um pouco mais, certo? Isso faz sentido porque nossa tela agora é 900 por 900, então, ao abri-los, só significa que o cluster vai ser um pouco mais espaçado. Cada piscina ainda é uma, então ainda temos uma acontecendo dentro de nosso enxame. A próxima atualização é uma luz pontual. Então, observe que ao adicionar uma luz pontual, agora você está recebendo algum sombreamento nos objetos tridimensionais. Ok? Então, novamente olhe para esta luz de ponto, é uma luz branca 255, 255, 255. A posição da luz está no centro exato, largura dividida por dois, altura dividida por dois, e eu puxei um pouco para o eixo Z de 100. Agora, se um cubo fosse assim, isso significaria que a luz está brilhando perfeitamente nesta superfície. Então, você veria a cor que está sendo amostrada de cada colorista de pixel em toda a sua glória do arco-íris. No entanto, se o cubo estivesse nesta posição, a luz estaria atingindo essa superfície e haveria algum sombreamento abaixo de cada um dos lados dessas superfícies. Então, você não estaria recebendo a cor de cada colorista de pixel em sua saturação 100 por cento brilhante. Na verdade, começaria a escurecer. Agora, imagine que ele está movendo todo o aglomerado, então ele vai até piorar, certo? Então, à medida que todo o cluster começa a girar, algumas coisas vão vir para a frente e algumas coisas vão estar todo o caminho para trás aqui, e eles provavelmente vão até o preto. Ok? Isto vai funcionar a nosso favor porque vai parecer uma corrida, certo? Então, algo vai se mover para a frente, ele vai pintar um grande pedaço de cor, e então como a coisa gira em torno e algumas dessas sombras mais escuras sobre os cubos é realmente vai ser preto no enxame, ele realmente começará a apagar. Vai parecer que está apagando. Vamos fazer o esboço e ver exatamente do que estou falando. Então, agora nós realmente começamos a obter algum alcance tonal, e olhe para isso, você vê agora o enxame está realmente apresentando um pouco de preto, porque essa luz de ponto não está atingindo aquela superfície diretamente da frente. Porque mudamos a facilidade de giro para 0,01, olha para isto, temos um momento de calma e estamos apenas à espera. Estamos à espera que o enxame se resolva de volta para uma posição para pintar algo. Isso pode acontecer rapidamente, e isso pode levar algum tempo. Porque temos uma contração de cinco, tecnicamente isso está derrubando, claro, então não vemos nada. Agora, ele vem à vista. Então, ele faz um belo furto e depois desaparece, certo? Então, o enxame se depara com ele e depois se move. Novamente, estamos recebendo esse alcance tonal porque estamos usando luz pontual. Espero que esteja surtando agora. Você não previu isso. Whoa, linda. Você não tem... a maioria das pessoas... Shh, é o nosso segredo. É o nosso segredo não contar a ninguém a magia por trás desta treta do Mágico de Oz. Tudo bem? Porque eu mudei esse enxame dessa forma, eu tenho esses momentos de calma e eu sou realmente capaz de olhar para isso e esperar pelo próximo furto e e ver quais formas ele vai criar. Mas aqui está a coisa interessante, porque você está mapeando o mesmo enxame para todas as seis superfícies, há a familiaridade. Certo? Então, mesmo que você tenha 13 cubos e esses 13 cubos estejam se movendo, eles estão mapeando o mesmo comportamento como uma textura. Então, quando ele desliza verde, ele desliza verde em todos os 13 cubos. Se ele furtar rosa, está passando rosa em todos os 13. Então, de repente você começa a notar, oh, espere um minuto, ele está fazendo algo em diferentes locais na tela, mas todos eles explodem da mesma cor ao mesmo tempo. Há algo sobre a animação que parece familiar em todos eles, certo? Então, eu acho que para mim é o que eu estou constantemente tentando fazer quando eu estou fazendo essas coisas, que é, como eu posso programar surpresa, certo? Quero ser surpreendido. Quero fazer uma coisa. Isso está demorando demais, certo? Eu desisti dessa. Eu vou fechá-lo e eu quero executá-lo novamente, porque eu quero ser surpreendido novamente. Eu quero usar aleatoriedade para gerar a surpresa, mas eu quero sentir que há alguma familiaridade para que não pareça totalmente aleatório, tipo, sei que definitivamente há algo em jogo aqui. Novamente, você pode executar isso um número infinito de vezes e você vai ter um número infinito de composições. Agora, pode ser que o enxame está demorando muito. Tudo bem? Então, é claro, essas pausas são muito longas. Então, se eu fechar isso, eu poderia vir aqui para enxame e digamos que eu coloquei facilidade de volta para 0.02. Isso significaria que faz um trabalho melhor ao voltar a ser vista, certo? Então, olha para isto, temos alguns redemoinhos bonitos, oh, veja que já está muito ocupado. Veja, é afinação fina, ok, legal. Não há, não, está apoiando de novo. Veja, eu quero alguns momentos para viver com isso antes que ele pinte novamente, o que significa, eu vou ter que descobrir o número de ouro para essa facilidade de virar, que isso me dê esse movimento, mas isso me dá tempo suficiente para apreciá-lo antes que pinte novamente. Não sei o que é esse número dourado. Pode ser 0.015, está bem? Então, vamos tentar fazer mais do que apenas um, talvez 0,015. Novamente, eu gosto daquele preto que se depara e começa a apagar um pouco. Mas espero que estejas surpreendido por estarmos a usar cubos para fazer isto. Ok, esta é uma boa. Eu vou manter isso assim. Vamos fechar este vídeo e vamos passar para o último, que é o exemplo 20. 53. Unidade 9, Vídeo 13: Tudo bem. Aqui está o último arquivo nesta seção. Algumas coisas para pensar, se você olhar para o exemplo 20 e você olhar na pasta de dados, eu mudei color.jpeg. Esta é uma fotografia tirada pelos meus amigos Cosy e Dan que fazem muito mergulho, e esta é de um tiro debaixo d'água e é de algas. O que eu fiz foi abrir essa imagem de algas dentro do Photoshop, apliquei um borrão gaussiano para que eu não quisesse desfocar a imagem um pouco. Então, eu falei com um borrão gaussiano de uns 10 ou algo assim. Eu então apliquei um pouco de ruído nele, você pode ver que na verdade é talvez um pouco pixelado. Então usei a ferramenta de nitidez, para afiar esse barulho. Então você começa este tipo de granulado desfocado fora fóton, e eu pensei que granulação iria pegar talvez realmente bom e h colorista pixel. Então note, que nesta nota 20 há uma nova imagem da qual estamos amostrando cores. Ok. O que mudou neste arquivo além de um novo jpeg? Bem, eu modifiquei Turnease um pouco, então eu estou fazendo 0.017 novamente tentando encontrar esse tipo de número dourado. Além disso, eu acho que praticamente tudo permaneceu o mesmo, exceto que eu mudei as luzes pontuais. Assim, no exemplo 19, a luz pontual estava diretamente no centro. Agora, eu adicionei duas luzes, ambas são brancas, mas elas estão brilhando pelos lados. Então, se você olhar para as linhas 112 e 113, 255, 255, 255, 255 para que as luzes sejam brancas. Mas o primeiro é zero na altura do eixo X dividido por dois no eixo Z de 100 de modo que a luz está brilhando no lado esquerdo. Em seguida, a linha 113 sua exposição é largura altura dividida por dois. Então, eu tenho duas luzes brancas agora brilhando em cada lado do palco. Agora, lembra que eu disse antes que eu só precisava abrandar as coisas um pouco? Bem, há um pequeno truque. O que eu fiz aqui na linha 22 é que eu abrandei a taxa de quadros do processamento. Acredito que, por padrão, a taxa de quadros é 60. Então, aqui estou reduzindo a taxa de quadros de processamento para uma taxa de quadros de 30. Então, cortei o ritmo de tudo se movendo ao meio. Tudo bem? Além disso, acho que tudo o resto permanece igual. Vamos testar o esboço e ver o que conseguimos. Então, você pode ver que ele abrandou um pouco. Está levando um pouco mais de tempo para desenhar essas curvas e novamente é amostragem do novo JPEG então estamos recebendo algumas boas cores de chocolate e hortelã, temos um pouco de uma pausa aqui e então boom ele vem com o mel dourado. Chocolate com menta e mel, esse é o nome desta peça. Então eu posso assistir isso por dias, e você vai ter algo diferente, certo? Porque há tantos eventos aleatórios acontecendo que vai se desenrolar para você dinamicamente assim como está se desenrolando para mim agora. Então, isso realmente termina esta seção que está tentando chegar a uma idéia e realmente explorar o processo dessa idéia, mas realmente é sobre combos, é sobre combinações, é sobre pegar todas essas coisas que aprendemos e tentando fazê-los trabalhar juntos para criar essa super surpresa. Eu não tinha idéia no final disso, eu não tinha idéia por que nós embarcamos nesta jornada que eu ia chegar a este tipo de pequena estrutura de pintura. Mal sabia eu que ia trabalhar todo esse ambiente 3D para tentar escondê-lo de você. Eu não sei se eu teria descoberto isso, se eu não estivesse disposto a seguir o caminho e é disso que se trata, é andar no caminho tentar coisas o que acontece se você mudar esse número? O que acontece se você mudar esse número? E se tentares mapear isto para aquilo? E se tentarmos mudar para um SVG em vez de cada retângulo? E se estiver movendo um triângulo agora? Ainda não fiz isso, talvez seja o que você faz, talvez você pegue um de seus desenhos que você fez na primeira classe e você está mapeando isso para o comportamento Enxame em vez de na linha 33 usando cada retângulo. É que sempre questionando se, e se, e se, que eu aconteceu com esses acidentes felizes porque isso é o que estes são, estes são acidentes explorativos felizes. Ok. Vamos ver tudo o que temos para nós. Cobrimos o HRotate, cobrimos o HCanvas, cobrimos o HFollow, cobrimos HTTimeers, HTWeen, HsWarm, HOScillator e, em seguida, executamos um processo de combinação. Nós temos uma última seção, e é assim que eu tiro isso, então como eu pego essa coisa que eu estou fazendo? Oh, olhe para isso, oh aqui vem a hortelã, aqui vem a menta em cima do meu chocolate e mel. É uma hortelã fresca. Como é que vamos tirar isto? Quero postar isso no Vimeo, droga. Ou quero fazer um Gif animado. Então, a próxima seção, vai lidar com a saída. Como renderizamos isto a uma sequência de imagens? Aprendemos muitas maneiras fantásticas de, oh meu Deus, isso é bonito, isso é bom também. Sinto muito que este vídeo pode ser de seis horas, eu literalmente poderia assistir isso por seis horas. Então, vamos passar para a próxima seção que é saída, mas não só eu quero que você tente coisas com algumas das coisas que fizemos na classe anterior, mas eu constantemente quero que você sempre esteja se perguntando e se, porque e se significa que você vai pegar alguns desses arquivos e fazer suas próprias mutações, e isso é o que vai acontecer na seção do projeto desta classe. Isso é o que se? E aqui está o que eu fiz e que se e aqui está o que eu fiz, e eu coloquei nesta imagem com este tipo de informação de cor e olhar como ele mudou. Há sempre aquela experimentação que vai revelar o inesperado. Tudo bem. Passando para a saída. Vejo você na próxima seção. 54. Introdução ao produto finalizado: E você está agora na seção final de produção, e para mim isso é encerrar tudo o que aprendemos nesta classe e transformá-lo em algo que podemos usar no mundo. Então, o que vai acontecer é que nós estamos realmente indo para renderizar essas animações para a sequência de imagens.. Certo. Então, vamos aprender sobre como escrever o código para criar uma pasta e realmente começar a produzir cada quadro desta animação, que estamos fazendo generativamente para uma sequência de imagem, e esta seção também me permite mostrar algumas ferramentas externas que eu realmente uso com o único propósito de criar saída. Então, vamos usar um pequeno programa de script da Apple para apontar para essa sequência de imagens e realmente construir um filme de tempo rápido. Ótimo! Uma vez que temos em quicktime filme que outros aplicativos eu uso para movê-lo para MP4? Porque nosso arquivo de filme vai ser um pouco grande. Então, eu realmente quero mover meus arquivos de um formato de filme para MP4, e eu vou usar um programa totalmente separado para criar isso. Como posso usar outras ferramentas para refletir ou criar um caleidoscópio da animação que acabamos de criar? Outra coisa que eu sou super louco é a reflexão. Como podemos obter essa saída em gif, no formato gif animado? Então a saída vai basicamente olhar para todos esses comportamentos que passamos todo esse tempo maravilhoso criando juntos e colocando-o em um formato que podemos publicar online e novamente para mim foi o Tumblr. Eu tenho criado essas animações de 30 segundos que foram produzidas para o tumblr. Então, como pegamos essas animações generativas e as colocamos em um formato que podemos publicar no tumblr ou podemos usar em um videoclipe? Assim como fiz com a Gram Fantasma. Então eu vou mostrar a vocês como eu criei algumas dessas animações de grama-fantasma que foram usadas no vídeo da música. Então, saída amarga doce, mas bem-vinda até o fim. 55. Unidade 10, Vídeo 1: Desculpe. É isto. Onde diabos estamos? Estamos na saída, e é isso. Esta é a magia que você estava esperando. Se você baixar o zip que está associado a este arquivo, o que eu fiz foi, é que eu entrei em combos e eu tomei o exemplo 14 que eu pensei que era um belo esboço para nós renderizar. Temos animação, agora quero tirá-la. Então, agora eu tenho o exemplo 14 aberto, e o que eu quero fazer, é toda vez que a função de desenho é executada, eu quero basicamente pintar a tela, e então capturar essa imagem. Ok. Então, se você olhar para o exemplo 14 dentro de combos, você vai ver que na linha 99 é a linha que eu estou interessado. Agora, deixe-me apenas comentar isso, e deixe-me executá-lo para que você possa ver como o exemplo 14 se parece. É esse cara que é bonito. Ok. Então, eu quero enviar isso para uma sequência de imagens. Agora, no caso do meu projeto Tumblr, uma das restrições é que será uma animação de 30 segundos. Então, se eu estou compilando uma animação de 30 segundos em 30 quadros por segundo, então eu saberia que eu quero 900 imagens, e então vamos olhar para esta linha. Na verdade, são duas ações aqui, e aqui está a primeira, que é eu quero salvar o quadro, e assim, dentro do quadro salvo, eu fiz algo único que é, eu estou dizendo ir até um diretório, criar uma pasta chamada frames, e agora começar a salvar uma sequência de tiffs, e esses sinais de libra serão substituídos por contagem de quadros. Então, de repente, o primeiro arquivo será 000000001, e depois dois, e depois três. Então vai salvar uma sequência de tiffs. Agora, enquanto isso está acontecendo, eu tenho um pouco condicional aqui que diz, se a contagem de quadros atingiu 900, então eu sei que eu tenho 900 tiffs que eu posso compilar em um filme a 30 frames por segundo seria 30 segundos de animação. Se atingir uma contagem de quadros de 900, ele realmente vai sair do programa. Então, todo o esboço vai entrar em colapso. Tudo bem. Então, deixe-me fazer isso aqui, que é, eu vou trazer esta pequena pasta. Deixe-me posicionar isto à esquerda, e deixe-me posicionar isto aqui em cima. Então, aqui está o exemplo 14, e dentro de lá está o meu build.pde. Ok. Então, agora eu tenho este código aqui sem comentários. Então, vamos em frente e rodar isto e o esboço. Olhe. Ele acabou de criar uma pasta de quadros, e se você realmente fosse abrir essa pasta de quadros, você veria isso crescer agora 253 itens, 300 itens. Então, como esta animação está sendo executada, ela está capturando a animação para um tiff, e eventualmente, isso vai construir até 900 imagens. A contagem de quadros vai chegar a 900, e vai desligar esta animação, assim como assim. Então, ele realmente saiu deste esboço, e você pode ver agora eu tenho 900 imagens dentro desta pasta chamada frames. Então, se eu fosse destacar o primeiro tiff, lá está. Eu posso realmente clicar na seta para baixo, e você vê que eu estou me movendo através da sequência das imagens, e ele tem de fato renderizado cada um desses tiffs para fora. Agora, você pode renderizar qualquer tipo de imagem; jpeg, png. Eu gosto de tiffs, porque as tiffs são descompactadas. São arquivos crocantes e crocantes. Certo. Então, eu não tenho que me preocupar. Se eu for a um JPEG, preocupo-me em talvez obter alguma compressão jpeg. Então, eu costumo gostar de exibir minhas imagens como tiffs, então, quando estou construindo um filme, a clareza dos ativos que estão sendo capturados é o melhor possível. Então, tiff é o que eu uso. Aqui você pode ver dentro do localizador que cada um desses tiffs é de 1,2 megs. Então, dependendo da duração do vídeo, você vai começar a comer espaço no disco rígido na verdade muito rápido. Ok. Então, agora nós adicionamos o último pedaço de código para saída. No próximo vídeo, eu só vou mostrar a vocês um pequeno truque que eu uso para compilar isso em um filme do QuickTime, e depois publicá-lo em um mp4. Ok. Vejo você no próximo vídeo. 56. Unidade 10, Vídeo 2: Eu pensei que eu iria tomar este último vídeo aqui apenas para compartilhar um par de truques que eu uso ao preparar algumas sequências. No último vídeo, nós renderizamos 900 dicas. Aqui estão todas essas dicas e, novamente, é uma animação agora. Usuários de PC, Sinto muito, provavelmente não vai ser muita ajuda em um PC, porque obviamente eu uso um Mac nas duas recomendações. Este é um software Mac. Não tenho certeza se existem versões para PC ou não. A primeira é que vais procurar esta palavra no Google, Sequimago. Claro. Novamente, você vai procurar no Google isso. Isto é para Macintosh e este é apenas um grande pequeno programa que eu gosto de usar para pegar essas dicas e realmente compilá-los em filmes QuickTime. Então, eu já baixei. Este é um script da Apple. Eu já baixei este script da Apple e ele está realmente sentado na minha pasta de aplicativos e acontece que eu o arrastei para a minha barra de tarefas, na minha barra de localizadores aqui. Porque eu estou sempre construindo filmes para que você possa ver aqui Applications Sequimago. Veja como funciona. Então, o que eu faço é ir para uma pasta, neste caso, eu tenho 900 imagens e eu vou apenas fazer selecionar tudo. Então, tudo o que eu vou fazer é, quando eu tiver todas essas 900 imagens selecionadas, eu realmente vou arrastá-las para este pequeno script da Apple. Uma vez que eu solte, ele vai abrir esta caixa de diálogo e ele diz, ok, por favor, nomeie este filme que você deseja criar. Então, vamos chamar isso de renderizado. Então eu vou ir em frente e clique em Salvar e, em seguida, você começa uma nova janela que diz, ouvir você precisa selecionar o tempo para esta sequência de imagem. Você pode fazer quadros por segundo ou segundos por quadro. Agora, eu sei que eu quero fazer 30 quadros por segundo porque é por isso que eu renderizei 900 imagens. Então, eu clico neste botão do meio aqui, quadros por segundo. Ele diz, por favor insira um quadro desejado por segundo. Eu só vou ir em frente e entrar 30. Eu vou seguir em frente e clicar em Enter e , em seguida, os criadores deste script da Apple queriam saber como, “Ei, você quer que nós classifiquemos as imagens por nomes de arquivos antes de processá-las?” Vou dizer não, porque já é uma sequência de imagens. Fiz isso por você, então não preciso que faça isso por mim. Então, vou em frente e clicar em não. Quando você clicar em não, você notará que seu cursor mudou para este pequeno ícone aqui. Aqui está o arquivo rendered.MOV que está sendo gravado no momento e você notará aqui dentro do meu dock, o script da Apple está de fato em execução. Agora, esse processo de renderização será realmente determinado pela quantidade de RAM que você tem e tudo mais. Notei que quando faço uma sequência de imagens de 900 quadros como esta, leva alguns segundos. Isso pode levar de 30 a 40 segundos para renderizar este filme, mas isso é porque esta máquina em particular, está feita. Então, levou cerca de 30 segundos. Esta máquina em particular tem 32 gigs de RAM. Meu laptop só tem cerca de 8 gigs de RAM e às vezes um filme renderizado pode levar de 15 a 30 minutos. Já vi alguns demorarem até duas horas, três horas. Então, ele realmente varia em quanto tempo leva para construir esses filmes do QuickTime. Vou fechar isso. Então, isso é o que este script da Apple faz é realmente virar, e eu não sabia quanto tempo levava, então eu realmente fiz um pré-renderizado da Betty Crocker, mas claramente nós não precisamos dele. Novamente, eu posso ir em frente e clicar neste arquivo MOV e com certeza é QuickTime player. Você pode ir em frente e tocá-lo. Está rodando 30 quadros por segundo. Parece exatamente como o nosso esboço, exceto que este é renderizado vídeo. Isto obviamente não vai ser aleatório. É apenas uma reprodução de um momento aleatório. Agora, este é um arquivo MOV e se eu realmente selecionar este arquivo MOV e clicar em informações sobre ele, você pode ver que este filme é bastante grande. Mesmo que seja 30 aqui duração, você pode ver que são apenas 30 quadros por segundo, este filme renderizado é 98,7 megs. Parece um pouco grande para mim. Então, eu realmente quero renderizar isso em um MP4. Então, esta é a segunda peça de software que eu realmente gosto de usar que apenas me ajuda a rasgar filmes para outros formatos e esse é esse cara aqui, iSkysoft Video Converter que eu tenho aqui. Se eu for em frente e lançar isso, ele diz que eu posso arrastar qualquer filme para esta área e enviá-lo para qualquer outro formato. Novamente, você pode explorar todos esses formatos diferentes que isso pode renderizar também. Se eu pegar esse filme do QuickTime, eu posso deixá-lo lá. Eu já tenho MP4 selecionado e olhar para isso. Diz que o material de origem é 640 por 640, 30 quadros por segundo. São 98,7 megs. Só quero que saiba que ainda será 640 por 640. Ainda vai ser 30 segundos, mas vai ser 7,6 megs. Então, eu vou em frente e clique em converter. Leva uns gritantes dois segundos. Agora está terminado. Diz-lhe: “Parabéns! Você renderizou um MP4.” Vá em frente e clique em OK. Eu posso fazer informações sobre este MP4 e com certeza o suficiente, não é 7.6 megs. É 25.2. Você mente, software. Você mente. Mas não é 98 e estou muito feliz com isso. Então, agora, se eu deixar isso de lado aqui, você vai notar que aqui estão os dois arquivos lado a lado. MP4 novamente, parece muito semelhante ao QuickTime então Josh está feliz e acaba sendo o MP4 que eu acabo compartilhando no Tumblr quando eu estou pronto para publicar isso ou Vimeo ou em qualquer serviço de vídeo que você usa. Há outra coisa que eu realmente gosto sobre este iSkysoft Video Converter. Há outra razão pela qual eu gosto dele e isso é porque ele tem essa função de espelhamento. Eu realmente gosto de reflexão. Você poderia fazer algum espelhamento caleidoscópico e eu tenho certeza que o aplicativo de edição de vídeo de sua escolha, se seu Aftereffects ou Premiere ou o que quer que seja que outras pessoas usam, mas novamente isso é apenas agradável e fácil. Se você olhar aqui, se eu pegar este vídeo que eu arrastei, você vai notar que bem aqui à direita há um lápis e se eu clicar neste lápis, ele me dá algumas opções de edição como eu posso cortar, ajustar, adicionar alguns efeitos, marca d'água, legenda, assim por diante e assim por diante. Então, eu realmente quero ir para efeito e se eu clicar em efeito, você vai notar aqui é espelho e tudo o que ele faz é apenas pegar seu arquivo de vídeo e espelhá-lo. Isso é bom, mas eu não sei se é exatamente assim que eu teria feito isso. Legal. Você pode realmente clicar em Ajustar. Se você clicar em Ajustar, perceberá que tem a capacidade de girar 90 graus. Então, eu poderia realmente mudar a rotação para chegar a algo que talvez eu goste ou eu tenho a opção de trocar verticalmente e trocar horizontalmente para que eu possa realmente clicar nessas ferramentas aqui para ver se eu tenho um reflexo que eu acho que é o mais ideal. Quando acabares, deixa-me ver se consigo inverter isto. Isso é muito bom. Vou clicar feito. Vou em frente e clicar em converter. Você vai notar que leva alguns segundos para esta coisa para renderizar mas ele está realmente renderizando um novo MP4 então o primeiro foi um MP4, o segundo é dois MP4 e então agora eu posso realmente sair desta aplicação nesta coisa aqui para o lado. Eu tenho um MP4 que é a renderização original da minha peça e a segunda mostra a refletida. Eu só gosto de usar essa ferramenta porque ela me permite muito rapidamente tentar usar possibilidades de reflexão. Se você olhar para algumas das peças que estão no Tumblr, eu usei isso e abusei disso. Eu usei mais do que em uma ocasião. Estes são dois programas que eu uso para ajudar a construir meus filmes QuickTime e renderizá-los para MP4 e, em seguida, tentar algumas possibilidades como reflexão. Ok. Chegamos ao último filme e isso tem sido fantástico. Espero que este seja apenas o começo de sua jornada. Como sempre, como o primeiro, vou estar constantemente olhando para os projetos que vocês enviam. Espero que você vai tentar adicionar algumas coisas que você fez da classe anterior. Felizmente, alguns desses arquivos têm inspirado você a tentar novas mutações e por favor postar o máximo que você pode dentro da seção do projeto, porque ele me inspira tanto quanto inspira alguns dos outros alunos fazendo essa aula. Assim como o primeiro, você nunca sabe, eu poderia ficar totalmente descarrilado por algo que você postar e eu posso fazer uma nova seção como eu fiz no primeiro e oferecer algumas novas mutações e orientá-lo através deles. Mas isso só vai acontecer quando você me inspirar. Então, por favor, faça isso acontecer. Congratulo-me por dizer que, de facto, vai haver uma terceira classe. Os maravilhosos peeps sobre SkillShare estão extremamente interessados em uma terceira classe que vai ser hardware. No hardware, eu vou começar a cobrir algumas coisas como usar o Salto Motion para que você possa realmente pintar com os dedos. Provavelmente iremos seguir as etapas de como usar um Microsoft Connect. Também vamos fazer algumas coisas com Webcam, usando diferenciação de quadros para fazer algumas visualizações maravilhosas com Webcam. Provavelmente vamos começar a fazer algumas coisas com áudio também. Se você tem me seguido no Twitter, eu tenho feito algumas coisas realmente divertidas com detecção mínima. Então, eu estou esperando que essa terceira classe vai apenas encapsular coisas que usam coisas externas como entrada, seja som, microfone, Webcam, Connect, Leap Motion. Então, haverá uma terceira classe quando eu encontrar outro conjunto de momentos para compilar uma classe usando hardware. Então, Twitter, estou nisso. E-mail, adorei. Por favor, envie-me alguns comentários e eu realmente espero que você tenha gostado desta aula e vamos festejar em breve. Cuide-se. 57. Processando 3 + biblioteca/atualização HYPE: Para gravar um pequeno vídeo rápido de uma atualização. Quando eu fiz esses cursos pela primeira vez há quatro anos, Processamento 2 era a coisa. Em conjunto com o uso do Processing 2, HYPE e como eu descrevi HYPE em todas essas classes também era um arquivo.pde. Então, nessas três classes, você tinha um Hype.PDE. Hype.pde continha toda a biblioteca HYPE, e isso também significava que você poderia usar coisas como Processing.js no momento. Mas agora muito mudou, é quatro anos depois, Processing.js realmente não é uma coisa muito mais, mas p5.Js é o novo novo. Claro, temos o Processamento 3. Bem, desde que eu estava fazendo mais em uma base de aplicativo e realmente não usar o navegador mais. Na verdade, atualizamos o HYPE para uma biblioteca de processamento adequada. Então, o que eu fiz é, eu passei por todas essas classes que eu tinha feito anteriormente quatro anos atrás usando Hype.Pde e Processing 2 e atualizá-los de modo que eles estavam usando Processing 3 e HYPE Biblioteca de processamento. Então, eu só queria mostrar-lhe muito rápido se você ir para GitHub.com/HYPE você vai ver que há processamento HYPE bem aqui. Este é o repo mestre. No entanto, eu só quero mostrar que se você clicar em Ramos, e dentro de Branches, há preparação lib. preparação da Lib é sempre a mais atual, é onde estamos empurrando mais coisas, a maioria das mudanças, fazendo ajustes. É sempre o trabalho em andamento antes de ser empurrado para dominar. Então, porque queremos o novo novo, o novo segredo novo novo, vamos em frente Eu vou lib staging e você só vai clicar neste botão verde que diz “Clone ou Download” e então você vai dizer “Download zip”. Agora, o que isso está fazendo é baixar toda a biblioteca HYPE, incluindo o código-fonte e tudo mais. Mas queremos usá-lo dentro do Processamento. Então, você notará que, se você for para o arquivo Documentos, Processamento, há uma pasta chamada Bibliotecas. No caso deste exemplo em particular, minha pasta está vazia. Então, eu vou descompactar o zip que eu acabei de baixar e eu deveria obter este guia. O que isso tem é que tem referência, exemplos e recursos. Realmente, a única coisa que você precisa olhar é a pasta Distribuição. A distribuição significa que esta é a compilação atual que você pode enviar dentro da pasta de bibliotecas de Processamento de Documentos. Então, vá para Distribuição e você notará que há HYPE.jar e HYPE.zip. Vamos em frente e zip HYPE.zip, e ele irá criar esta pasta chamada HYPE e você está apenas indo para arrastar essa pasta para sua pasta de bibliotecas de processamento. Então, dentro deste HYPE você deve ter exemplo, biblioteca, referência e fonte. Se você olhar para exemplos como, “Oh meu Deus, há uma tonelada de exemplos aqui.” Agora, se formos iniciar Processing the IDE, você notaria que, se você viesse , provavelmente vai me dizer para atualizar. Não, sim, não. Vamos para a biblioteca de importação de esboços. Olha, você não deveria ver HYPE lá. Então, agora, HYPE é uma biblioteca de processamento adequada. Então, a questão é, isso significa que posso usar isso em um navegador? - Não. Você não pode usar isso em um navegador. Se você quiser que ele produza suas coisas para JavaScript, eu não sugiro usar esse ambiente ou vá em frente e veja o projeto p5.Js que está acontecendo, que é Processando para o navegador em JavaScript. Mas, se você quiser atualizar todos esses arquivos de classe que eu fiz nos últimos dois anos, eu mudei para o sistema agora onde você vai usar Processing 3, e então você está usando HYPE a biblioteca Processing. Então, legal. Então, nós temos isso dentro de Processing e apenas para o inferno, se eu fosse para mover isso de lado e aqui estão algumas das aulas de Skillshare e Gumroad que eu tenho trabalhado. Você vai notar, se eu for para Programming Graphics 001, Eu agora incluí neste zip todas as atualizações para este código para usar Processing 3 e usar HYPE a biblioteca. Então, se você for para, digamos, Drawing Visual Assets e você fosse procurar dentro da pasta, você notará que Hype.pde agora é removido completamente de todos os projetos. Se você clicar em build.pde, você vai notar no topo aqui que nós temos uma nova estrutura, que é agora que ele tem uma biblioteca de Processamento adequada, você tem que importar HYPE como uma biblioteca externa. Então, na parte superior, você pode ver que eu disse importação hype.Asterix que significa carregado em. Se você quiser usar outras coisas, então, se você está apenas importando HYPE, você obtém os bare bones necessários para usar o HYPE com o Processamento 3. Se você quiser coisas extras como, “Ei, eu estou usando um pool de cores ou eu estou usando um layout de grade.” Então você também tem que importar manualmente a classe que lida com o que quer que seja que você está tentando usar. A melhor coisa a fazer é entrar em exemplos e dizer, “Ei, eu quero usar um oscilador.” Então, se você olhar osciladores você vai notar, “Oh, eu tenho que importar oscilador.” Isso significa que isso mantém a biblioteca HYPE muito fina, enquanto antes com Hype.Pde você importará tudo mesmo se estiver usando tudo. Então, isso é magra, isso é meio, é muito mais eficiente como uma biblioteca de processamento adequada, você importa as classes com as quais deseja conversar. Então, novamente, olhar para a pasta exemplos, ele irá mostrar-lhe como estruturar as coisas. Além disso, se você olhar para este arquivo zip, você verá que todos os arquivos estão lá exatamente como eles estavam antes, mas todos eles foram atualizados para suportar esta nova estrutura. Eu vou fazer isso para todas as classes e eu obviamente vou usar esta estrutura para todas as novas classes daqui para frente. Espero que isso ajude. Conversar em breve. 58. Mais cursos criativos na Skillshare: