Programação criativa com JavaScript: do básico às obras-primas

1. Introdução ao curso: Olá. Meu nome é Renzi Blah Sou artista conceitual, designer gráfico, artista visual e muitas outras coisas. Tenho dois anos de experiência na área de design gráfico e arte. Eu trabalhei com muitas marcas e com muitos clientes. Como humano, tenho uma apreciação inerente das formas, padrões e ritmos Eu crio imagens com código porque estou interessado na estrutura por trás das coisas que queremos, experimente esteticamente satisfatoriamente com código criativo e nunca Sempre há algo para explorar nova técnica para aprender ou uma nova imagem para criar. Eu mesclo meu interesse em animação gráfica e visual com programador para que eu possa desenvolver, desenhar e animar qualquer Eu usei muitas linguagens de programação , mas minha favorita atual é JavaScript. É fácil de pegar, é flexível, adequado para pequenos projetos rápidos e grandes. Nessas ferramentas de premiação, aprenderemos os fundamentos da programação criando recursos visuais com JavaScript. Para o projeto final, você produz uma série de composição visual com um código que pode ser implementado em um navegador da web. Para começar, mostrarei como configurar um editor de texto e como executar código em um navegador. Em seguida, ensinarei alguns conceitos básicos de JavaScript, como matriz de funções variáveis e loops, sempre usando exemplos e desenhando recursos visuais ao longo do caminho Começaremos com uma configuração simples e, em seguida, passaremos para o ambiente de esboço com um código chamado Canvas sketch Depois disso, saímos do visual usando rotação e arcos e , em seguida, passamos para um esboço animado com agentes móveis e linha Também mostrarei como exportar sua arte como imagem e vídeo Na próxima etapa, veremos sair de grades, usar ruído e criar nosso próprio painel de controle com um controle deslizante para ajustar os valores em tempo e criar nosso próprio painel de controle com um controle deslizante para ajustar os valores Em seguida, mostrarei como trabalhar com texto de forma criativa e como ler valores de cores a partir do pixel de uma imagem. Na segunda parte do nosso curso, que é a mais avançada, vamos trabalhar com a primeira composição. Começaremos com um retângulo simples e construiremos um padrão geométrico Aprenderemos sobre paleta de cores, modos de mesclagem e máscaras de recorte Em seguida, passamos para as curvas. Começaremos com uma única curva quadrática seguida por um ponto contínuo a vários pontos No processo, também abordaremos interação do cursor e o mapeamento de cores e, no esboço, produziremos uma visualização de áudio Vou te ensinar como reproduzir arquivos de som com seus dados e usar a frequência para conduzir a animação. E para a última composição que tocamos com as partículas, vamos definir sua velocidade e aceleração, fazê-las reagir ao curso Também aprenderemos como definir suas cores com base em imagens. Por fim, encerraremos com algumas dicas e truques extras. Ao final deste curso, você terá várias técnicas para continuar e desenvolver sua própria composição. Para tirar o máximo proveito dessas listas, é melhor se você estiver familiarizado com JavaScript ou linguagem de programação similar Escreva código e construa sua própria estrutura para criar algo bonito. Bem-vindo à aula e espero que você goste. 2. Quem me influencia: Nesta escuta, vou falar sobre algumas das pessoas que me inspiraram. Quando comecei com a codificação criativa, não foi só uma pessoa que me fez querer fazer isso Havia uma comunidade de pessoas fazendo um ótimo trabalho com a carne, que mais tarde se tornou o Adobe Flesh. Mas um nome que se destaca desse período é Yugo Nakamur Ele é um designer japonês que costumava ter um site chamado yugop.com, que infelizmente não está mais ativo Esse experimento de codificação era mínimo e muito interessante Não muitos deles, apenas alguns, mas foram muito influentes para muitas pessoas naquela época Ele dirige o estúdio de design no Japão e continua fazendo um trabalho incrível. Alguns anos depois, quando a web começou a migrar do flash para Havia dois sites que me inspiraram a começar a fazer codificação criativa usando o Canvas Um deles foi o sketch dot gs de Justin Wende, que era uma estrutura mínima para esboçar, por Tinha uma galeria com alguns pequenos experimentos com os quais era muito divertido brincar. O outro foi Play Pit, de Aji Moriahi, que estava experimentando um CD, mas que também O site era apenas uma coleção de ideias aleatórias. Eles nem tinham nomes, apenas números. Gosto da ideia de criar um espaço para hospedar experimentos aleatórios. Não é preciso esperar que um projeto comece a codificar uma ideia Só poderia ser publicado como um experimento rápido. Fora da web, também fiquei muito impressionado com o trabalho de alguns artistas digitais Um deles foi Memo at ten, que não só tem uma ideia muito interessante, mas também mantém um nível de execução muito alto Seu trabalho é muito completo, muito bem apresentado, às vezes mostrando um pouco do processo por trás da criação da obra de arte Sou um grande fã de um projeto de 2012 chamado Forms. Há um vídeo em que podemos ver imagens de Atlet em movimento e como elas foram usadas como entrada para a arte abstrata que eles estavam criando Outra arte digital que eu gosto muito é Rogi Atida. Ele tem um estilo característico e é muito consistente com sua estética. Seu trabalho é ao mesmo tempo mínimo e complexo. Ele está nos mostrando que podemos criar algo bonito com código sem precisar depender de motores pesados ou técnicas de iluminação realistas. E, mais recentemente, na era do Instagram, há muitas pessoas boas fazendo um ótimo trabalho por aí. Um que eu tenho que destacar é Matt Drier, que parece ter um conjunto infinito de ideias para esboçar com código Ele publica constantemente novos materiais e é consistente com a aparência de seu trabalho. Como veremos mais adiante neste curso, ele também é o autor de uma ferramenta popular para código criativo usando o Canvas. E, finalmente, um artista que não está realmente no Instagram, mas que é muito ativo no Twitter, é Anders Hoff, também conhecido como n Novamente, minimalista e bonito, mas não necessariamente simples. Ele está criando sistemas e explorando o comportamento com matemática e geometria para criar sua arte Espero que você tenha achado o trabalho desse artista inspirador, porque agora é a nossa vez É hora de começarmos a programar. 3. Comece a confusão: Tudo o que precisamos para começar é um navegador da web e um editor de texto. Usaremos o editor de texto para escrever um código e o navegador para executá-lo. Você provavelmente já está assistindo isso em um navegador da web. Então, metade do trabalho já está feito. Sinta-se à vontade para usar qualquer navegador com o qual você se sinta confortável. Vou usar o Google Chrome, mas seria ótimo usar o Firefox, Edge ou Safari O conteúdo que vamos ver deve funcionar bem em todos os principais navegadores. Quanto ao editor de texto, existem muitas boas opções disponíveis. Vou mencionar dois dos mais populares, o código do Visual Studio e o texto sublime Ambos estão disponíveis para Windows e Mac, e ambos são muito bons. Vou usar texto sublime porque é leve e eu gosto muito dele Mas aqui, é o mesmo que com um navegador. Se você já tem um editor favorito, não tem problema. Sinta-se à vontade para usar o que você preferir para o curso. Caso você ainda não tenha um favorito ou queira seguir exatamente o que vê na minha tela , eu recomendaria um texto sublime. Agora, segredos aqui. Basta clicar no grande botão Download, seguir as etapas na tela e o editor estará pronto e funcionando em alguns segundos. Agora, com o navegador pronto e editor pronto, podemos começar. Na próxima escuta, faremos uma introdução ao JavaScript. 4. Introdução ao Java: Para aproveitar ao máximo este curso, presumo que você já esteja familiarizado com o JavaScript. Nosso foco será abandonar os recursos visuais com código. Se tivéssemos que começar a abordar o idioma do zero, precisaríamos de todo o curso só para isso. Portanto, se este é seu primeiro contato com o programador, eu recomendaria primeiro conhecer um pouco do básico. Se você aprende rápido ou conhece outras linguagens de programação, ou se deseja apenas refrescar sua memória sobre JavaScript, isso é Se você já está familiarizado com o JavaScript, fique à vontade para pular para o outro vídeo Então, aqui eu tenho o Google Chrome e um texto sublime por enquanto. Não quero que você se preocupe com a configuração ou cópia de nada do que estou prestes a digitar. Não vamos desistir de nada ainda. Estamos apenas dando uma olhada no idioma. Começaremos com uma variável. Em Javascript, as variáveis são declaradas com um let e uma constante com custo. As variáveis podem ser alteradas após a declaração, mas é bastante comum ouvir a palavra variável se referindo a qualquer uma delas. Mesmo que constante, não se pode confiar em variar. Agora funciona. Também é comum declará-las usando constantes Por exemplo, multiplique const igual a A e B dentro dos tamanhos dos pais Em seguida, uma seta plana e, em seguida, com Carl BrGusrTurn A vezes B. Isso é o mesmo que escrever uma função, multiplique A e B, retorne A vezes B. Se você conhece outras linguagens de programação, a segunda Mas de qualquer forma, os dois são iguais. Ambos são válidos. Vamos usar a primeira forma ao longo do curso e depois chamar a função. Vamos multiplicar os parênteses e depois os parâmetros que queremos passar Por exemplo, oito e quatro, isso resultaria em 32. Se quisermos ver a saída, já que você está trabalhando com o navegador, podemos registrá-la no console. Então, aqui estou armazenando o resultado em uma variável e desconectando-o com o log de pontos do console. Para abrir o console, pressione o botão Control Shift no Windows ou Command Option I no Mac. E aí está. Passando para a matriz e os objetos. As matrizes são declaradas com colchetes e o objeto com colchetes. Um exemplo de matriz pode ser cores em que cada valor é uma string. Por exemplo, azul, amarelo, vermelho e verde. Um exemplo de objeto pode ser um polígono com uma propriedade como visão e raio Para acessar um item na matriz, novamente, usamos colchetes, por exemplo, colchete zero de cores nos dá o primeiro item da matriz, que neste caso é azul Para acessar uma propriedade de um objeto, usamos o mesmo nome do objeto, ponto e, em seguida, o nome da propriedade. Por exemplo, rádio de pontos poligonais, que produz 120. Podemos percorrer matrizes usando um clássico de quatro loops , composto por três partes Primeiro, o índice da iteração. Tradicionalmente, a letra I e depois o comprimento do laço, como em. Olá, plupon, embora eu seja menor que o comprimento do ponto colorido e, finalmente, o que fazer com o I em cada iteração Novamente, tradicionalmente, incrementado em um com I plus plus Aqui, podemos ver no console o valor de I e o valor da matriz em I. Outra forma de iteração por meio de uma matriz é a largura de cada As cores pontuam para cada uma. Desta vez, é uma função e o primeiro parâmetro é o valor do item. De cada iteração, aqui também podemos acessar o item de log de pontos do console E se precisarmos do índice da iteração, ele será passado como o segundo parâmetro Para condicionais, caso contrário, a sintaxe é bem direta Se algo for verdadeiro, console dot log dot lcsole dot log dot Quando estamos declarando uma variável, podemos usar outro tipo mais compacto de condicionais com um operador ternário Digamos que temos uma variável chamada noite e queremos definir a cor de fundo com base no fato de ser noite ou não. A cor de fundo é igual a esta noite. Ponto de interrogação, preto, dois pontos brancos. Isso é equivalente a escrever se noite for igual a verdade. A cor de fundo é igual a preto. Caso contrário, a cor do fundo é igual a branco. Um último tópico que quero abordar em nossa recapitulação é como usar uma função síncrona com uma sincronização e um peso Em JavaScript, o código é interrompido de forma sincronizada por padrão, o que significa que se você declarar uma variável com um valor na linha 93, você sabe que ela ainda não existe na linha 92 e tem um valor Às vezes, precisamos executar código que não é resolvido instantaneamente. Chamar algo em uma linha não significa que obteremos o resultado antes que a próxima linha seja interrompida Um exemplo disso é quando queremos carregar uma imagem. Vamos criar uma função chamada carregar imagem. Ele usa o URL como parâmetro. Em seguida, criamos uma nova imagem armazenada em uma variável chamada EMG. Ted, a fonte de EMG do RL, nós falecemos. E, finalmente, retornamos a imagem. Agora podemos usar nossa função, por exemplo, com uma variável chamada my Image, que é igual a carregar imagem e, em seguida, a URL que queremos passar. Vou usar uma imagem genérica do Lorem PixM e pegar essa URL aqui, que deve me dar uma imagem aleatória com uma largura de 200 pixels, e depois tentarmos sair da imagem Isso não nos dará erro, mas a largura será zero porque a imagem não termina carregar antes de tentarmos lê-la a partir dela Carregar uma imagem é uma tarefa não sincronizada. Para gerenciar uma situação como essa, podemos usar um conceito de Javascript chamado promise. Vou fazer uma cópia do que escrevemos aqui. Então, vamos elogiar esse bloqueio. Agora, modificamos a cópia para usar um pecado e esperar. Primeiro, preciso digitar uma coisa na frente da função e depois dentro dela. O que eu quero fazer é retornar uma nova promessa com os dois parâmetros, resolver e rejeitar. No carregamento da imagem, queremos resolver a promessa e retornar MG. E em caso de erro, queremos rejeitar a promessa. Em seguida, vou mover essa parte aqui dentro de outra função de sincronização chamada start Em seguida, defina minha imagem para a imagem de carga de peso. E então basta ligar para start para ver o resultado. E aqui está a maneira correta. Então, aqui estamos dizendo ao navegador que espere até que os problemas sejam resolvidos e só então execute a próxima linha. Esta última parte pode ter sido um pouco mais complicada do que o resto que abordamos em nossa recapitulação Se você entendeu tudo até esta parte, está pronto para prosseguir com o curso. Não é obrigatório entender o cenário e esperar agora, mas é bom saber que ele existe para o caso de nos depararmos com ele mais tarde Certo. Esta é toda a nossa recapitulação Era apenas um amplificador curto e fofo. Claro, há mais no Javascript do que isso. Portanto, se alguma coisa não estiver clara, verifique a documentação. Em seguida, começaremos a configurar nosso ambiente. 5. Aprenda variáveis e funções: Codificar é dar instruções a uma máquina. Nós dois temos que falar uma língua comum e a máquina. No nosso caso, falaremos Javascript e a máquina usará o navegador como intérprete Os navegadores são ferramentas muito poderosas. Sua função principal é renderizar páginas STML, o que não é uma tarefa fácil Há muita coisa que pode ser feita apenas com o SDML. JavaScript e CSS, se você não estiver familiarizado com esses termos, posso simplificar: SDML lida com os dados, CSS lida com a formatação e JavaScript cuida do comportamento Nosso objetivo neste curso é escrever JavaScript, mas também quero mostrar como começar algo do zero, a partir de um arquivo vazio. Então, precisamos ver um pouco de DML primeiro. Quando abrimos nosso editor, vemos um arquivo vazio. E a primeira coisa que eu quero fazer é salvá-lo. Eu já fui em frente e criei uma pasta para armazenar todos os arquivos desse curso. E eu vou salvar isso como hello dot HTML. Um documento HTML é feito de blocos, que podem conter outros blocos. E esses blocos são definitivamente marcados por tags. Vamos escrever nossa primeira tag. Entre colchetes angulares, inserimos HTML. Essa é a etiqueta de abertura, e também precisamos da etiqueta de fechamento, que começa com um colchete angular e uma barra para frente Você deve ter notado que, assim eu digitei a barra, o editor já completou automaticamente a tag Essas tags estão dizendo que temos um documento CML aqui. E, no mínimo, precisamos de pelo menos mais uma tag, que é definir o corpo da página Então, vamos também escrever o corpo e, novamente, abri-lo e fechá-lo. E então, dentro do corpo, podemos escrever uma mensagem. Olá, palavra. Agora salvamos o arquivo. Clique duas vezes nele no Explorer ou no Finder. E abra-o no navegador, e aí está nossa primeira página SEML muito básica Agora, e se quiséssemos que a mensagem fosse exibida como cabeçalho? Só precisaríamos envolvê-lo com etiquetas H one, abri-lo e fechá-lo. E eu vou voltar ao navegador, atualizar a página, e nossa mensagem agora está estilizada como um O que o navegador está fazendo é pressionar o arquivo SGML e renderizar seus elementos Podemos ver o SGML por trás desta página ou de fato. Qualquer página que você vê no navegador com o inspetor de elementos, na maioria dos navegadores, o atalho é Control Shift I ou Command Shift I. Ou também podemos clicar com o botão direito do mouse em qualquer lugar da página e ir para inspecionar E aí está nosso elemento H um novamente, mas não estamos realmente interessados nos elementos do cabeçalho. Vamos usar o SGML apenas para nos dar um espaço no qual possamos desenhar, e há um elemento só para isso É chamado Canvas. Abra, feche. E desta vez vamos entrar na tag de abertura para adicionar algumas propriedades. Com igual a 600 no interior, códigos duplos e altura também igual a E agora, se salvarmos e atualizarmos, não veremos nada. E isso porque a tela ainda é transparente, não há nada nela. Mas usando o elemento e o Spector, podemos vê-lo ainda lá É uma caixa de 600 pixels por 600 pixels onde podemos desenhar usando código. E para escrever algum código, precisamos de outra tag , chamada script. É aqui que escrevemos JavaScript para ser interrompido pelo navegador, e esse será nosso espaço É aqui que começamos a aprender sobre codificação, e o primeiro tópico sobre o qual quero falar é variável Uma variável é uma referência a um valor. Vou te dar um exemplo imediatamente, seja X igual Aqui, X é uma variável e cinco é um valor. Em JavaScript, declaramos variável usando a palavra let. Digamos que eu precise usar esse valor em vários lugares no meu código. Não preciso digitar cinco em todos os lugares. Acabei de me referir a X. E então, se mais tarde o valor mudar para quatro, por exemplo, o resto do código usará o valor atualizado Vamos dar uma olhada em outro exemplo. Seja aqui igual a 2024. E se quiséssemos armazenar também no próximo ano, eu poderia dizer que o próximo ano seja igual a 2025. Mas aqui, em vez do tipo 2025, basta dizer que o próximo ano é igual ao ano mais um. Se tivéssemos que alterar o valor do ano, próximo ano já teria o valor correto. Você deve ter notado que eu uso o ponto e vírgula após o valor, ou seja, indique o final da linha Eles não são obrigatórios. Os navegadores não gerarão erros se você não os usar, mas há alguns cenários que fica complicado sem ponto e vírgula Então, eu prefiro ser explícito sobre onde minhas linhas terminam. Esse é o estilo que vou seguir neste curso. Ainda variáveis, elas não servem apenas para armazenar números. Eles também podem armazenar outros tipos de dados, como texto, poderíamos dizer: Deixe o jantar igual ao macarrão. Aqui eu escrevi pasta dentro de um único código, que é como diferenciamos texto normal de variável e outras palavras especiais em JavaScript. Também podemos usar códigos duplos que também funcionam. Na programação, o texto geralmente é chamado string porque é uma sequência de caracteres. Vamos escrever outra string. Deixe a frase ser hoje à noite, o jantar será. E então nossa variável. A frase seria lida hoje à noite, o jantar será macarrão. Mas se mudarmos o valor da nossa variável , a frase seria lida hoje à noite, o jantar será salada. As variáveis estão em toda parte e são essenciais para a programação. Acho que não preciso dar muitos outros exemplos. O conceito é bem fácil de entender. Vamos usá-los o tempo todo, mas as variáveis por si só não fazem muita coisa. Antes de podermos fazer qualquer coisa, também precisamos falar sobre funções. Função é um bloco de código que executa uma tarefa. Isso pode ser considerado como ações. Quando chamamos uma função, estamos executando um pedaço de código. Vamos dar uma olhada em um exemplo. Função: faça algo, abra e feche os parênteses. Abra e feche os colchetes encaracolados. Podemos dizer que isso é uma função não apenas porque tem a palavra função à sua frente, mas principalmente por causa dos parênteses de abertura e fechamento Isso aqui significa ação. Nesse caso, estamos declarando uma função e entre os colchetes é onde escrevemos o que a função fará E essa função específica ainda não está fazendo nada. Então, vamos chamar um que realmente faz alguma coisa. Vamos usar uma ferramenta de navegador que é a melhor amiga do programador chamada ConSot e podemos encontrá-la aqui ao lado do Podemos usar a mensagem Logout do nosso código e, para fazer isso, precisamos chamar aconsole dot lug Digitamos a mensagem que queremos registrar, por exemplo, olá. E aí está nossa mensagem. Agora vamos mudar de fazer algo para dizer algo, e então podemos colocar o log do console dentro da nossa função. Sim, não há problema em colocar uma função dentro de outra função. Não queremos que ele diga olá toda vez. Queremos que ele registre tudo o que passamos para a função. E para isso, precisamos de um parâmetro. Vamos chamá-lo de param. Está entre os parênteses aqui e aqui. Agora podemos chamar say something e passar nossa mensagem como parâmetro. Olá. Ou podemos usar a frase que criamos antes como uma variável. Em vez de trocar janelas o tempo todo, talvez possamos colocar os navegadores em uma metade da tela e o editor na outra metade da Vamos ver outro exemplo com parâmetros. Vamos criar uma função chamada ED, que usa dois parâmetros A e B. E depois os somamos A mais B. E então podemos chamar a função e armazenar o resultado em uma variável. Deixe o resultado B somar cinco e sete. Em seguida, faça o login no console para que possamos ver o resultado. Bem, não há nada lá, e isso é porque a função está apenas adicionando os números, mas não os está retornando. Se quisermos que uma função execute uma tarefa e também retorne um valor, precisamos adicionar a palavra return. Agora vemos o resultado. Há também uma maneira diferente de escrever uma função em JavaScript, que na verdade veremos com mais frequência do que com a função de palavras, ou seja, com uma função de seta. Vamos criar um chamado multiplicar. Começamos declarando uma variável, então vamos multiplicar e definir o valor dois, abrir e fechar parênteses, e então precisamos de uma seta grossa, que seja igual e maior do que Lembre-se, eu disse que variáveis são referência a valores. Aqui está a mesma coisa. Estamos usando uma variável, referenciando uma função. Essa é apenas outra forma de escrever a mesma coisa que escrevemos aqui. Podemos colocar nossos parâmetros A e B dentro dos parênteses, e essa função retornará A vezes B. Para verificar se está funcionando, nem precisamos armazenar o resultado em Podemos simplesmente registrar a chamada diretamente. Registro do console, multiplique cinco e sete. E esse é o nosso resultado. Agora que sabemos sobre variável e função, podemos começar a nos afogar com o código Precisamos de uma variável para referenciar nosso elemento Canvas aqui. Então, vamos criar um. Deixe o Canvas ser igual a documento, ponto, seletor de consulta e entre parênteses dentro Canvas, há algumas coisas acontecendo aqui. Então, deixe-me explicar isso. Estamos definidos no valor de variável chamada Canvas para uma expressão. Ele começa com um documento, que é um objeto JavaScript referido a esse documento HML Os pontos indicam que queremos algo que faça parte do objeto. Nesse caso, uma função chamada seletor de consultas, e o que ela faz é selecionar um elemento do documento Precisamos dar a ele o nome do elemento que queremos selecionar, e o nome é uma string. É por isso que estamos passando o Canvas dentro de um único código. Esse nome aqui precisa coincidir com esse aqui em cima. O nome da variável não precisa ser Canvas. Pode ser qualquer outra coisa. Mas acho que também faz sentido chamá-lo de Canvas. Ok, agora temos uma referência ao nosso Canvas, mas também precisamos de uma referência ao contexto do Canvas. O contexto seja igual ao Canvas dot Get Context. Essa linha é muito parecida com a anterior, pelo menos na estrutura. Pegamos um objeto de tela, chamamos uma função que faz parte dele, chamamos o contexto G e passamos um parâmetro como uma string. O contexto é onde realmente fazemos o desenho e pode ser dois D ou três D. Por enquanto, estamos interessados no contexto de dois D. Agora podemos finalmente desenhar alguma coisa. Vamos digitar context dot field wret Field rect é uma função que ocupa quatro X, largura e altura. Vou usar 100, cem, 404 centenas. Sempre precisamos verificar as letras maiúsculas e minúsculas Caso contrário, gerará um erro. Além disso, a sintaxe, continue verificando todo o seu script. Proteja e atualize. E aí está nossa primeira forma desenhada com código. Deixe-me explicar o que esses números significam. Essas coordenadas R em um espaço de dois D. Nosso Canvas é um plano de 600 por 600 pixels, e o 00 está aqui no topo do canto esquerdo. O valor que estamos usando em nosso campo rect para X e Y é 100 e 100 Então, começamos do zero, movemos 100 pixels para a direita, 100 pixels para baixo, e é aqui que começamos a desenhar a forma. Em seguida, vamos 400 pixels para a direita e 400 pixels para baixo. Agora vamos mudar a cor do nosso retângulo. A cor padrão do campo é preta. Se você quiser algo diferente, precisamos mudar o estilo do campo. Então, antes do campo ser destruído, digitamos o estilo de preenchimento de pontos de contexto e, desta vez, não é uma função, é uma propriedade E a propriedade é como uma variável que faz parte de um objeto. É armazenar um valor nesse caso. Estamos configurando para azul. Proteja e atualize, e aí está nosso retângulo azul. E aqui usamos a função mais rápida possível para desenhar algo em nossa tela Os pés são meio que um atalho. Na verdade, está fazendo três coisas ao mesmo tempo. Está criando uma nova forma, desenhando um retângulo e preenchendo-o com alguma cor Se quiséssemos fazer algo diferente, como apenas o contorno do retângulo, por exemplo, precisaríamos escrever algumas instruções mais explícitas Primeiro, precisaremos dizer ao contexto que estamos iniciando uma nova forma ou um novo caminho. Caminho inicial do ponto de contexto. Então, precisamos dizer ao contexto que queremos desenhar um retângulo sem preenchê-lo Entre em contato com o ponto t e podemos usar o mesmo parâmetro que usamos antes de 100.000, 400 , 400, e então podemos decidir preenchê-lo com uma cor ou desenhar apenas o contorno, que é o que vou fazer com o traçado de pontos do contexto Se atualizarmos agora, prestes a ver um contorno preto ao redor do retângulo azul Vamos facilitar a visualização aumentando a largura da linha A largura da linha de pontos do contexto é igual a quatro. Também podemos ocultar o retângulo azul comentando a linha com field Só precisamos digitar dois para barras de palavras no início da linha Em texto sublime, há um atalho para ele, que é controlado por barra de palavra ou comando por barra ou comando por Você pode ver a linha ficar cinza, o que significa que foi comentada, e é ignorada pelo navegador ao executar o código Agora, vamos desenhar uma forma diferente. Vamos desenhar um círculo. Começamos novamente com o caminho inicial do ponto de contexto, e o método para desenhar o círculo é chamado ponto de contexto ARC RC E como sabemos onde os métodos ou propriedades estão disponíveis para o Canvas ou o contexto do Canvas? Precisamos consultar a documentação. Existem algumas documentações de referência on-line e, para o Canvas, costumo usar essa para três escolas. Deixe-me ver tudo como uma única lista. Aqui está um acidente de campo, por exemplo, e aqui está a largura da linha A palavra método aqui pode ser lida como uma função. Há uma diferença sutil entre os dois, mas não precisamos nos preocupar com isso Então, ao usar o método, você pode pensar em uma função. O meio em que estamos interessados agora é o Rc, então vamos dar uma olhada mais Aqui embaixo, vemos que são necessários seis perímetros, e o último é opcional, então vamos nos concentrar nos cinco primeiros Raio X, Y, ângulo inicial e ângulo final. Quero circular bem no meio da nossa tela, que tem 600 por 600. Então, X e Y serão 303 centenas. raio pode ser 100 e os ângulos inicial e final seriam de zero a 360, mas os ângulos estão em brilho e não em Então, precisamos de zero a Pi vezes dois. Em JavaScript, o número PI é usado com tanta frequência que já está armazenado como constante, e podemos acessá-lo com o ponto matemático PI. E então só precisamos multiplicá-lo por dois. Agora, para finalmente desenhar o círculo, podemos usar preenchimento ou traçado, e eu vou usar traçado novamente. Então, isso é muito bom. Estamos aprendendo e desenhando. E agora vamos continuar fazendo isso. Na próxima lição, ensinarei sobre matrizes e loops 6. Aprenda matrizes e loops: Antes de podermos esboçar um pouco mais, vamos dar uma olhada em outros dois conceitos de programação. Começaremos com matrizes. A lista de matrizes é: vou te dar um exemplo imediatamente. Deixe o seu ser igual a Aqui temos uma lista de valores e podemos reconhecê-la como uma matriz porque eles estão entre colchetes e os valores são separados por cos a Aqui temos uma lista de valores e podemos reconhecê-la como uma matriz porque eles estão entre colchetes e os valores são separados por cos. E é o mesmo para todos os tipos de um valor. Podemos criar uma matriz de strings. Deixe o menu ser igual a iniciar ou maio. Sobremesa e bebidas. Agora, e se quiséssemos examinar cada item dessa lista? Quando precisamos de loops. Loops são trechos de código que são executados repetidamente por um número limitado de Existem alguns tipos diferentes de loops em JavaScript. Eu vou te mostrar o clássico for loop. Para parênteses abertos e fechados, abra e feche o suporte frio Dentro do colchete Clear é onde escreveremos o código que queremos executar várias vezes E dentro dos parênteses, escreveremos uma expressão para controlar o loop, que é feito de Na primeira parte, declaramos que uma variável é o índice do loop Tradicionalmente, usamos a letra I e começamos em Zo, então seja I igual a E aqui precisamos de um ponto e vírgula para indicar o final da primeira A segunda parte é a duração do loop ou quantas vezes queríamos rodar. E queríamos correr enquanto eu tivesse menos de quatro anos. E a terceira parte é o que queremos fazer com I em cada iteração do loop E queremos incrementá-lo em um, então I mais é igual Incrementar em um é muito comum na programação. Portanto, há uma maneira mais curta de escrever a mesma coisa, que é I plus plus. Com isso, estamos dizendo que estamos começando com zero e depois executando algo, depois mudando para um e depois executando algo novamente. E depois para dois e para três. E quando chegamos a quatro, saímos do loop e continuamos com o resto do código. Esse loop será executado por quatro iterações, que é o mesmo que o número de itens que temos em nossa matriz de menu Podemos acessar os itens da matriz digitando menu. Colchetes. Aqui, I está alterando seu valor 0-1 e depois dois e depois três Podemos bloquear esse acompanhamento toda vez que o loop é executado. E aí está nosso cardápio com itens listados um por um. E isso poderia ser um pouco mais dinâmico. Digamos que adicionássemos um item ao nosso menu, acompanhamentos, por exemplo. E então, se executarmos isso, não o veríamos no console porque nosso loop está sendo executado quatro vezes e nossa lista agora tem cinco itens. Podemos substituir o número quatro aqui pelo tamanho ou comprimento da nossa matriz. Comprimento mínimo. Agora, não importa o tamanho da matriz, sempre examinaremos todos os itens. E os loops não servem apenas para ler valores de uma matriz, também podemos usá-los para escrever duas matrizes Vamos remover esses valores aqui e deixá-los como uma matriz vazia. E então podemos escrever outro loop desta vez subindo para dez. Aqui, queremos inserir valores na matriz de anos 2024 mais R. Depois que o ciclo terminar, podemos registrar o valor dos anos e ver o que está nele Vemos que preenchemos a matriz com um valor 2024-2033. Também podemos usar loops para desenhar, então vamos fazer isso. Vamos secretar outro loop rodando cinco vezes e, dentro dele, escreveremos algo semelhante ao que escrevemos anteriormente Caminho inicial do ponto de contexto. pontos de contexto X e Y podem permanecer em 100, mas a largura e a altura agora serão 60 e , em seguida, o traçado de pontos de contexto Quando executamos isso, vemos outro quadrado aqui em cima, mas vamos comentar as outras formas para deixar isso um pouco mais claro Deveríamos estar vendo cinco quadrados, mas estamos vendo apenas um, e isso é porque os estamos desenhando um em cima do outro Precisamos mudar alguma coisa toda vez que o loop é executado. Poderíamos dizer, por exemplo, que X é 100 mais 60, que é o widget vezes I. Agora vemos todos os cinco ou, se quisermos um espaço entre os quadrados, poderíamos dizer 80 vezes I. Mas então digamos que queremos manter essa lacuna, mas altere a largura para Precisaríamos alterar esse valor em dois lugares, e isso parece um bom candidato para variável. Vamos declará-los aqui. Deixe a largura igual a 60. Deixe a altura ser igual a 60. Seja X igual a 100. Seja Y igual a 100. E então nós os usamos no parâmetro. Também podemos criar uma variável para lacuna que seja igual a 20 e, em seguida, atualizar X para mais de 100 Madeira mais lacuna, vezes R. Se estivermos nisso, nada muda. Mas agora, se mudássemos as madeiras da matriz, a lacuna permaneceria consistente O que temos agora é uma linha de cinco quadrados. E se quiséssemos mais linhas? Precisaríamos de outro loop dentro do nosso loop, ou em outras palavras, um loop aninhado Também precisamos de outra letra para o índice do segundo loop. E, tradicionalmente, é a letra G. Então, precisamos mover nosso código dentro do segundo loop no texto legendado dentro de selecionar as linhas e pressionar control shift para cima ou para baixo para movê-las. Agora podemos atualizar y da mesma forma que fizemos com X. 100 mais altura mais espaço vezes G. E nos livramos dos retângulos Qualquer coisa que escrevermos dentro desse loop será executada 25 vezes. Então, se desenharmos outra forma, ela também aparecerá 25 vezes. Vamos fazer isso. Caminho inicial do contexto, ponto reto do contexto, e podemos tornar o retângulo um pouco menor agora X mais oito Y mais oito largura -16 e altura -16. E então contextualize Dot stroke. Agora, e se não quisermos que esse quadrado menor apareça dentro de todos os quadrados grandes É hora de outro conceito de programação. As condicionais em JavaScript são muito parecidas com muito Se alguma condição faz alguma coisa ou faz alguma coisa, nem sempre precisamos de outra. Se outra coisa significa não fazer nada, então podemos ignorá-lo. Vamos usar a condicional em nosso loop. Quero desenhar o pequeno quadrado somente se eu for maior que zero e menor que quatro. Observe o operador atual aqui, que significa um fim lógico. Isso vai pular o pequeno quadrado na primeira e na última coluna Poderíamos escrever Ls aqui e desenhar em formas diferentes, talvez. Mas, em vez disso, vamos ver algo um pouco mais interessante. Lembre-se de quando precisamos usar PI, e eu disse, ele é usado com tanta frequência que temos uma constante para ele. Bem, números aleatórios são usados com ainda mais frequência e temos uma função para obtê-los. Ponto matemático aleatório. Essa função retorna um número aleatório de 0 a 1, e são nossos amigos O resultado é diferente a cada vez, e isso é muito interessante para nós que estamos criando imagens com código. Ele introduz um elemento de chance. Permite que o computador faça um pouco do trabalho criativo, um pouco de design generativo, poderíamos usar um número aleatório dentro de nossa condicional Então, em vez disso, poderíamos dizer que queremos desenhar o pequeno retângulo Quando a aleatoriedade de pontos matemáticos for maior que 0,5, essa condicional será verdadeira em média 50% das vezes Sempre aleatoriamente. Então, toda vez que atualizamos a página, obtemos pequenos quadrados em lugares diferentes Falamos muito até aqui, mas antes de prosseguirmos com nosso hello HTML, quero falar um pouco mais sobre alguns dos conceitos que vimos anteriormente. Eu mencionei que em JavaScript, declaramos a variável usando a palavra let Há também outra maneira de declará-los, que é a palavra const Os custos são constantes. Então, nós o usamos para um valor que não mudará. Um exemplo pode ser variável para gravidade e outro para velocidade A gravidade não muda, então devemos declará-la com custo, e é provável que a velocidade mude Então, declararíamos isso usando chumbo. A regra geral é sempre usar const, a menos que saibamos que o valor vai mudar Podemos aplicar isso ao nosso loop aqui em cima. altura e a lacuna arborizadas não mudam, então podem ser constantes Na verdade, eles nem precisam ser declarados dentro do loop. Seria suficiente que eles fossem declarados apenas uma vez fora do loop, e o mesmo vale para X e Y. Mas sabemos que o valor deles vai mudar, então, para eles, precisamos usar let E como eles não têm um valor inicial, ambos podem ser declarados na mesma linha. Agora, a saída visual não muda, mas nosso código está um pouco mais organizado. Não vou falar sobre todos os tipos diferentes de loops em JavaScript, mas quero mostrar pelo menos mais um, que é para cada loop Lembre-se de nossa variedade de menus. Podemos examinar seus itens digitando um ponto mínimo para cada um e, em seguida, abrimos parênteses porque E o primeiro parâmetro é o item que está sendo iterado. E então precisamos da flecha gorda e dos suportes encaracolados fechados abertos Dentro dos colchetes, podemos registrar o item exatamente como estávamos fazendo antes E aqui está nossa lista de itens mais uma vez. Vimos muitos conceitos de programação nesta lição. Voltaremos ao código em breve e usaremos esses conceitos repetidamente . Caso alguns deles ainda não estejam totalmente claros, não se preocupe, você pode escolhê-los ao longo do caminho. A melhor maneira de aprender é por exemplo, e vamos ver muitos deles enquanto desenhamos Agora você está familiarizado com mais conceitos de programação. Na próxima lição, examinaremos um ambiente para esboçar 7. Aprenda a fazer esboços de ambiente: Nas aulas anteriores, eu queria mostrar uma conexão direta entre as palavras que estamos digitando no editor de texto e o que acontece quando elas são interrompidas pelo navegador Isso é o que sempre acontece. O navegador está sempre pressionando um pouco de HTML e interrompendo algum código Mas não precisamos começar do zero todas as vezes. Ao longo dos anos, a comunidade desenvolveu todo um ecossistema de ferramentas para escrever coisas para o navegador, e podemos tirar proveito disso. Então, agora vamos adicionar algumas camadas entre nosso código e o navegador. A complexidade vai aumentar um pouco, mas não há nada a temer. Muito pelo contrário, vai ficar mais emocionante de agora em diante. Precisaremos instalar mais algumas coisas. A primeira coisa que precisamos é de um terminal. Você não precisará instalar nada. Você só precisa ir ao Finder e digitar terminal. Se você estiver no Windows, precisará baixar alguma coisa. E, novamente, existem algumas opções disponíveis e estão todas bem. Git para Windows ou Commander, ou no meu caso, usarei o CMDar Mas você também pode usar UC, então escolha o que quiser Clique no botão de download e instale-o. Ao abri-lo, você verá uma janela como esta. O esquema de cores pode ser diferente dependendo da plataforma em que você está ou da opção escolhida Mas, em essência, é tudo a mesma coisa. Em seguida, também precisamos parar os pontos do nodo. Então acesse nodgs.org e baixe a versão mais recente recomendada Após a conclusão da instalação , podemos verificar se tudo correu bem. Ao abrir nosso terminal e digitar o nó V, você deve ver o número da versão aqui. Caso você veja algo como comando não encontrado, talvez seja necessário fechar o terminal e abri-lo novamente. O Node agora está instável e vem com algo em que estamos muito interessados, chamado PM Vamos verificar se está aqui digitando PMV. O MPM é um gerenciador de pacotes para JavaScript. Ele nos permite instalar pacotes e bibliotecas recrutados pela comunidade Isso faz parte do ecossistema do qual eu estava falando. Vamos estilizar uma biblioteca, que é ótima para codificação criativa com o Canvas, chamada Canvas Sketch Canvas sketch foi criado por Matt Dier, que é artista e programador criativo E eu definitivamente recomendaria conferir o trabalho dele. Mas, por enquanto, vamos continuar com a paralisação do Canvas sketch. Precisamos copiar essa linha e passá-la em nosso terminal. Esboço de tela no estilo PM, Cli G. Esta é uma biblioteca paralisada com PM e o G significa que a estamos instalando globalmente Assim, podemos executá-lo de qualquer lugar, não apenas da nossa pasta atual, a CLI aqui significa interface de linha de comando, que significa que podemos digitar alguns comandos para o Canvas sketch em nosso terminal Quando a instalação estiver concluída, precisamos ir para a pasta que criamos para este curso. Suponho que alguns de vocês possam não estar muito familiarizados com os comandos do terminal, então vamos dar uma olhada rápida em alguns deles. Claro. Se você quiser limpar a tela, use CD para alterar o diretório. No meu caso, quero mudar para documentos Java Visual. Caso precise voltar para uma pasta principal, você pode digitar CD dot forward slash Quando começarmos a digitar o nome de um arquivo existente ou diretamente, podemos pressionar tab O preenchimento automático e também temos o LS para listar arquivos e pastas no diretório atual. Esta é minha pasta, claro, e espero que você tenha conseguido encontrar a sua também. Precisamos criar outra pasta dentro dela, e o comando é MKDIR ou make directory e, em seguida, o nome do novo diretório Vamos chamá-lo de nossos esboços. E então esboços em CD para entrar em nossa nova pasta. E aqui vamos usar o Canvas sketch para criar um novo arquivo para nós Então, primeiro, digitamos Canvas sketch, depois o nome do nosso arquivo, que vai esboçar dzero one E então, é novo dizer que queremos que ele seja criado. Se você quiser mais detalhes sobre esses comandos, dê uma olhada no Canvas sketch. Leia-me no Github. Agora voltamos para nossa pasta, podemos ver que há alguns arquivos novos. Pacote dot GSO e pacote dot log dot dot JSON. Existem arquivos de dados que acompanham os pacotes que iniciamos com o MPM. O que queremos é abrir o sketch 01 dot gs em nosso Editor. Podemos ver um pouco de código padronizado já escrito Deixe-me explicar o que está aqui. Na parte superior, vemos uma linha com uma exigência. Isso é importante para a biblioteca de esboços do Canvas e para armazenar uma referência a ela como um esboço do Canvas Então, temos um objeto chamado configuração com uma propriedade chamada dimensões. Esses valores estão em pixels. Isso significa que ele criará um elemento Canvas, que tem 2048 por 2048 pixels Então temos uma função chamada sketch, que está retornando outra função sem nome Essa função anônima é chamada de entrega B em si e fornece algumas propriedades úteis sobre nossa tela, como contexto, largura e altura Dentro dessa função, estamos vendo algo familiar. Temos estilo preenchido com contexto e quebra de campo de contexto. Basicamente, isso é desenhar um grande retângulo branco como plano de fundo para nossa tela E a última linha está finalmente chamando a entrega e passando nossa função de esboço e nossa configuração como parâmetros Se voltarmos ao nosso terminal, podemos ver esta linha de informações que diz, servidor em execução e, em seguida, endereço HTTP. Isso nos diz que o esboço do Canvas cumprimentou o servidor HTTP local e podemos abri-lo em nosso navegador Então, agora, em vez de clicar duas vezes no arquivo HTML para abri-lo, vamos visitar a página da web Mas esta página da web não está no terminal, está apenas em nossa máquina. Copie e cole na barra de endereço. E aqui está nosso esboço. É um grande quadrado branco. Vamos dividir a tela novamente, metade para o editor e metade para o navegador. Agora, se mudarmos o estilo do campo para azul, podemos ver que não precisamos mais atualizar a página. O cache do Canvas está fazendo isso automaticamente. Se observar as alterações no arquivo GS e atualizar a página sempre que a salvarmos, poderemos continuar de onde paramos em nosso hellos Podemos copiar nosso loop aninhado e colá-lo aqui. Só precisamos ajustar algumas coisas. Podemos ver que a largura e a altura já são usadas como parâmetros, então precisamos escolher nomes diferentes para nossa variável. Vamos substituí-lo por W e altura por H. Agora, revertemos o preenchimento do estilo para branco e lá está nossa grade para retângulos novamente. Eles são bem pequenos porque nossa tela agora é muito maior do que era antes. Então, vamos mudar a dimensão de volta para 600 por 600. Agora, isso parece muito familiar. Uma das características mais legais do Canvas sketch para mim é que podemos ver tudo o que desenhamos Ao pressionar o Controle S ou o comando S, gera um PNG a partir do Canvas e, por padrão, salve-o nas pastas de downloads. Podemos alterar a pasta de saída e usar a que criamos para este curso. Vamos voltar ao nosso terminal e pressionar Control C ou Command C para interromper a tarefa atual e recuperar o prompt Agora pressione a seta para cima para voltar ao último tipo de comando. E aqui, em vez de Dadu, queremos a saída do traço e a configuramos para a saída da barra dianteira Agora, nosso esboço está sendo executado novamente e, se pressionarmos Control S ou Command S, o arquivo vai para nossa pasta, saída 01, e aí está Outra grande vantagem do Canvas sketch é que ele facilita o uso de outras dimensões Digamos que queremos imprimir nosso esboço no formato A four, podemos substituir nossas dimensões por string Um quatro, e como estamos imprimindo, também precisamos de uma maior densidade de pixels. Portanto, podemos usar 300 pixels por polegada. Podemos mudar a orientação do papel e usar a paisagem. Todas essas configurações estão disponíveis na documentação do Canvas sketch Você provavelmente notará que nosso esboço quase desapareceu quando alteramos as densidades de pixels E isso é porque estamos usando números codificados aqui. Podemos tornar nosso esboço mais dinâmico tornando esses números em relação ao tamanho da tela Precisaremos defini-los como porcentagem. Então, queremos preparar isso para o Instagram. Precisamos mudar nossa dimensão para 1080 por 1080. Nossa largura, que agora é W, usa como 60, que é 10% de 600, então podemos configurá-la para o tempo de largura 0,10 E agora é sempre 10% de qualquer que seja a largura da tela. E podemos fazer o mesmo para a altura, 10% GAAP foi 20, que é cerca de 3%, então seria vezes 0,03 E para X e Y, poderíamos criar uma variável para substituir esse número 100 aqui embaixo. Então, x para X inicial e Y para Y. Cem dividido por 600 é cerca de 17%, e então precisamos substituí-los dentro do loop Isso compensa os valores aqui embaixo, pois o menor quadrado também pode vir de uma variável Então, vamos criar um cancelado. Costumava ser 16, o que representa cerca de 2% do vento. Na verdade, não estamos procurando valores exatos. E agora precisamos substituir esses números divididos por dois e depois desativados e desativados. Também precisamos alterar a linha com ela, que costumava ser quatro, mas podemos torná-la um pouco mais grossa e configurá-la para 1% da largura Agora podemos pressionar Control ou command para salvar algumas variações e dar uma olhada em nosso primeiro esboço em nossa pasta de saída Se algum dos conceitos que vimos até agora ainda não estiver claro, não se preocupe. Veremos muitos outros exemplos neste curso. 8. Aprenda sobre o Transform: Nesta lista, vamos começar um novo esboço, e o resultado final ficará assim Para conseguir isso, precisamos aprender sobre a transformação do Canvas e o estado do contexto. Vamos cavar. Vá começar um novo esboço. Então o terminal ainda está aberto na pasta do projeto, vamos digitar Canvas sketch sketch 02, Isso criará um novo arquivo chamado sketchs dot gs. Você também pode criá-lo com um novo. Você não precisa colocar o dash Open. E abrir é apenas uma nova guia no navegador. Podemos abrir o esboço 02 em nosso editor, e ele se parece exatamente com o esboço 01 quando o criamos Vamos alterar as dimensões novamente para 1080 por 1080 e também dividir a tela E começaremos desenhando algo familiar, um quadrado preto. Então, primeiro defina o estilo de preenchimento para preto. Em seguida, o ponto de contexto inicia o caminho. Context dot rect, e vamos passar X, Y, W e quais são as variáveis que vamos criar em segundos e, em seguida, preenchimento de pontos de contexto E agora precisamos que o custo X seja igual a zero, custo Y seja igual a zero e o custo W seja o mais largo e possa ser 30% do maior da Portanto, largura vezes 0,0 e custo , que é 30% da altura da nossa tela Salve isso e teremos nosso quadrado preto. Agora, se você quiser movê-lo, há duas maneiras de fazer isso. Primeiro, já sabemos que só precisamos alterar o valor de X e Y aqui. A outra forma é transformar o contexto em si. Nesse caso, com context dot translate, ele traduz o contexto por X e Y. Agora eu desenho o retângulo O resultado é o mesmo, mas há uma diferença fundamental. Eu posso fazer uma metáfora com papel e caneta. Uma está movendo a caneta enquanto o papel permanece imóvel, e a outra está movendo o papel enquanto a caneta permanece parada. Se todas as transformações que queremos fazer são apenas tradução, não há grande diferença cada um desses métodos que usamos Mas se quisermos aplicar mais transformações como rotação ou escala , isso faz a diferença. Você pode ver isso bem claro se tentarmos alternar o contexto Deixe-me voltar a usar X e Y no Direct e comentar essa chamada de tradução Agora, queremos chamar a rotação do ponto de contexto e passar por um ângulo pequeno, como 0,3 É verdade que giramos o quadrado, mas também o movemos um pouco Podemos ver que o ponto de ancoragem da rotação estava fora do quadrado Na verdade, estava aqui no canto superior esquerdo da tela porque é aqui que está a origem. Isso era equivalente a girar o papel e depois mover a caneta Agora, se movermos o papel em vez disso ou se traduzirmos o contexto antes de girá-lo e depois desenharmos o quadrado de zero, zero Podemos ver que a rotação aconteceria do canto superior esquerdo do quadrado, não da tela. Então, agora o ponto de origem estaria aqui em cima. E é aí que vemos a vantagem de usar transformações de contexto Nosso quadrado parece um pouco estranho, como este girado do canto superior esquerdo Parece que foi rosa para uma parede. Ficaria melhor se fosse girado do centro, X e Y já estão no centro da tela Então, precisamos começar a desenhar o quadrado menos metade de sua largura e menos metade de sua altura E, claro, não há diferença entre dividir por dois ou multiplicar Então, para manter a consistência com nossa variável aqui em cima, vamos multiplicar isso por 0,5 Uma coisa a ter em mente sobre essa transformação é que elas são cumulativas Estamos mudando o estado do contexto quando movemos e giramos o papel, ele permanece lá Se desenhássemos outra forma, ela começaria de onde saímos. Vou te mostrar um exemplo rápido. Primeiro, vou traduzir o contexto por 10400 e depois desenhar um círculo. R Se nossa intenção fosse girar o círculo junto com o quadrado, isso teria sido perfeito Mas se quiséssemos apenas o círculo em X 100 e Y 400, teríamos que voltar atrás e reverter toda a nossa transformação anterior, que rapidamente se tornaria inevitável. Em vez disso, o que podemos fazer é redefinir o estado do contexto. Funciona assim. Primeiro, salvamos o estado atual, depois fazemos nossas transformações e depois restauramos o estado em que salvamos antes Então, primeiro, salve os pontos do contexto e depois a restauração dos pontos do contexto. E agora vemos nosso círculo com origem em 10400. Na verdade, não precisamos do círculo foi apenas um exemplo rápido. De agora em diante, vamos usar muito isso. Quase todas as transformações que vemos ocorrerão em blocos como esse, começando com um cofre e terminando com uma restauração. Agora, você está familiarizado com as traduções. Na próxima lição, continuaremos aprendendo sobre transformação, rotação e um pouco de trogonometria 9. Aprenda sobre ângulos: Nesta escuta, vamos nos concentrar nas rotações. Vamos ver como converter ângulos de graus em radiância e usar um pouco de triognometria para distribuir formas ao redor para distribuir formas ao Gente, não se preocupem com o esquema de cores porque estou usando uma versão antiga de texto sublime É a mesma coisa, só que de uma cor diferente. Agora vamos voltar nossa atenção para nosso ângulo de rotação aqui. Este 03 está em radiante, não em graus. Os radianos podem ser confusos para algumas pessoas. Podemos aprender como usá-los e nos acostumar a calcular coisas com brilho Mas geralmente é mais conveniente trabalhar com diplomas e, na verdade, é muito fácil converter entre eles. Digamos que quiséssemos girar nosso quadrado 45 graus para obter o equivalente em brilho Só precisamos dividi-lo por 180 e multiplicá-lo pelo ponto matemático pi Essa fórmula é muito útil e talvez a queiramos novamente. Podemos convertê-lo em uma função para que não precisemos escrever a mesma coisa várias vezes. Vou chamá-lo de Dog to Rad. Ele tomará como parâmetro o ângulo em graus. Em seguida, retorne um grau dividido por 180 e multiplicado por Pi Então, agora podemos usar apenas o ângulo em graus. Com isso pronto, podemos tornar nosso esboço um pouco mais interessante Primeiro, vamos tornar nossa forma menor, como um retângulo muito estreito E o que eu quero fazer é distribuir essa forma ao redor do círculo, como as horas em um relógio. Precisamos de uma variável para o número de cópias da forma. Vou chamá-lo de num e configurá-lo para 12. Então, precisamos de quatro loops rodando 12 vezes e colocando nosso código de desenho dentro dele. Agora precisamos alterar o ângulo de rotação com base no índice do loop. Se imaginarmos uma pizza e a cortarmos em 12 fatias, qual é o ângulo de cada fatia A pizza é um círculo, então 360 graus divididos pelo número de fatias. Com um pouco de matemática rápida, podemos dizer que isso vai ser 30 graus. Mas lembre-se de que queremos esses ingredientes, então precisamos usar nossa função para convertê-los. Esse é o tamanho da fatia e, para o ângulo real, precisa de outra variável O ângulo de custo será dividido vezes I. Isso será zero e depois 30 graus e depois 60 graus e assim por diante E então precisamos usar isso em nosso contexto, rotação de pontos. E temos uma pequena forma de estrela. Agora, para colocar esse traço ao redor do círculo como um relógio, precisamos de um pouco de trigonometria trigonometria trata da relação entre os lados e os ângulos dos triângulos está além do escopo Ensinar trigonometria está além do escopo desta lista Mas podemos refrescar nossa memória rapidamente. Aqui está uma animação para ajudar. Aqui vemos que o ângulo está aumentando com o tempo e o cosseno do ângulo está subindo e descendo em um intervalo fixo O mesmo vale para o seno dos ângulos, e podemos ver que há um deslocamento entre o seno e o cosseno, ambos Então, primeiro de tudo, precisamos uma nova variável para o raio do nosso círculo, que será com vezes 0,3 E então, como teremos X e Y diferentes para cada forma, podemos renomear nossos X e Y existentes para C X e C Y para serem o centro do nosso círculo E então declaramos X e Y novamente desta vez com a esquerda porque vamos modificar seu valor dentro do loop, e é aí que usamos o seno e o cosseno Vamos colocar X no centro do círculo. Veremos X mais o raio do círculo multiplicado pelo seno do Então, matematize o ponto seno e o ângulo entre parênteses. Em seguida, uma expressão similar para Y com C Y mais raio multiplicado pelo cosseno do ângulo Isso é quase o que queremos. Só precisamos que o traço gire ao contrário. Portanto, precisamos que o contexto gire para o ângulo negativo. E aqui está nosso relógio. E podemos alterar o número das fatias para o que quisermos. Vou manter 12 por enquanto. Uma coisa que você deve ter notado é que estamos adicionando CX e C Y a X e Y. Também podemos dividir isso em duas chamadas para traduzir Nesse caso, o resultado final não muda. Eu só estou mostrando isso para você como uma alternativa. Então você pode ver que há um pouco de flexibilidade aqui. 10. Aprenda sobre funções de utilidade: Algumas funções que estamos usando para esse esboço também podem ser úteis para outros esboços Por exemplo, talvez queiramos usar a função para converter graus em radiância novamente. Nesta escuta, mostrarei como paralisar e usar uma biblioteca de funções utilitárias Outra coisa que podemos fazer para tornar nosso esboço mais interessante é brincar com o último tipo de transformação de contexto, que é uma escala A escala usa dois parâmetros, X e Y, e o valor padrão é um. Então, se você não quiser mudar nada, basta passar um. Poderíamos mudar a escala X ou a escala Y. Ou poderíamos usar algum valor aleatório novamente Aqui, com um valor aleatório, às vezes alguns traços são muito finos. E isso é porque o aleatório começa em zero, então isso vai de 0 a 3 Seria bom se eles passassem de, digamos, um para três ou se pudéssemos passar por uma faixa de aleatoriedade. Diga um valor mínimo e um valor máximo. Para fazer isso de 1 a 3, teríamos que multiplicar aleatoriamente por três menos um e depois adicionar um Novamente, essa é outra fórmula útil que talvez queiramos usar novamente e podemos criar uma função quatro Vou chamá-lo de rancho aleatório, e ele usará dois parâmetros, menos e MX, e retornará um ponto matemático aleatoriamente vezes, máximo menos mínimo E então podemos substituir essa expressão pelas ramificações aleatórias um e três, que são muito mais intuitivas e fáceis de ler. Antes de continuarmos com nosso esboço, quero mencionar que funções úteis como essa não são úteis apenas para Na verdade, é muito comum nos depararmos com cenários em que fizemos coisas assim Uma coisa que poderíamos fazer é criar uma biblioteca mínima de funções utilitárias como essa e usá-las em esboços, mas não somos os primeiros a ter essa ideia e bibliotecas como essa já existem Na verdade, a biblioteca em que estamos usando o Canvas a sketch tem uma biblioteca irmã chamada Canvas Sketch Ut e tem uma coleção dessa função útil Vamos dar uma olhada em um aleatório. Este é um invólucro que contém várias funções aleatórias utilitárias, incluindo uma chamada ranch, que faz exatamente o mesmo que a função de ramificação aleatória que acabamos Além disso, se você voltar à página anterior e clicar em Matemática, também encontraremos Decor vermelha e outras, é claro, que podem ser úteis mais tarde. Então, em vez de escrever nossas próprias funções, podemos importá-las do Canvas Sketch UTO Primeiro, precisamos instalá-lo. Então, vamos voltar ao nosso terminal e pressionar Control C ou Command C para interromper o processo atual. Em seguida, digite NPM stall Canvas sketch UTL Quando terminar, podemos pressionar a seta para cima para voltar ao nosso comando anterior e podemos nos livrar do traço u e d abertos porque já saímos desse esboço e ele já está aberto em nosso navegador e Então, só queremos executá-lo novamente. Agora, de volta ao código e, na parte superior do arquivo, queremos importar matemática e aleatoriamente. Portanto, matemática C é igual a require Canvas sketch Uth math e a mesma para aleatória Custo aleatório, corte aleatório. E então podemos substituir nosso baralho vermelho pelo baralho matemático por vermelho e nosso galho aleatório por rancho de pontos aleatórios Nada deve mudar em nossa produção. E podemos até mesmo excluir as funções que criamos anteriormente ou simplesmente deixá-las lá, caso você queira consultá-las posteriormente. Então aí está. Agora temos uma biblioteca de funções utilitárias prontas para uso em esboços futuros Na próxima escuta, passaremos a usar arcos e versus aleatórios para criar mais visuais A 11. Aprenda a criar arcos: Conclua a aparência do nosso esboço. Vamos adicionar mais algumas formas para torná-lo mais interessante. Vamos usar novamente a função de arco que vimos antes. Desta vez, não para desenhar um círculo completo, mas para desenhar um arco real. Vamos dar uma olhada. Vamos precisar de outro conjunto de transformação diferente dos que estamos usando aqui. Portanto, precisamos de outro bloco de salvamento de pontos de contexto e restauração de contexto. Aqui, queremos traduzir para o centro do círculo. Então veja X e veja Y. E também rotacionado pelo ângulo negativo E então começamos a desenhar uma nova forma. ponto de contexto inicia o caminho. Ponto de contexto. Traçado de pontos de contexto para os arcos X e Y, podemos começar em zero, zero, mas no raio podemos usar nossa variável de raio ângulo inicial pode ser zero e o ângulo final pode ser fatiado Eu disse que não desenhamos um círculo completo, mas acabamos com um. A diferença é que desta vez somos sorteados, é fatia por fatia Podemos ver que, se tornarmos a fatia um pouco menor, digamos, vamos multiplicar o ângulo final por 0,6, por Também podemos alinhar o arco com o traçado usando um ângulo inicial negativo e um ângulo final positivo Vamos usar -0,3 e 0,3 positivo. Também pode tornar os arcos um pouco mais grossos alterando a linha de contexto com, vou defini-la como 20 Agora, com isso estabelecido, tudo se resume a ajustar os valores para obter uma saída visual interessante Eu gostaria de jogar primeiro com a escala dos golpes. Podemos alterar o intervalo da escala X para 0,1 e dois. E também mexa com a escala Y e defina o intervalo para 0,2 e 0,5 Também varie a espessura dos arcos, então defina a linha com ela para variar de 5 a 20 Também quero compensar um pouco o traçado para que eles não fiquem tão bem alinhados Como o contexto já está rotacionado, posso fazer isso alterando a posição Y do reto Então, em vez de apenas menos metade da altura, poderíamos dizer chave de pontos aleatória, de zero a menos metade A mesma ideia também funcionaria para os arcos, mas só precisamos definir o intervalo para a variável de raio Chave de pontos aleatória de algo menor que o raio original, como 0,7, para algo maior que o raio original Ou podemos escrever isso de uma forma um pouco mais curta com tempos de raio, intervalo aleatório de 0,7 a 1,3, o que provavelmente é mais fácil de ler Podemos fazer algo semelhante e também adicionar alguma aleatoriedade para os ângulos inicial e final A fatia vezes o intervalo de pontos aleatórios de zero e -0,5. E então corte o galho aleatório de zero e 0,5. Acho que podemos tornar esse efeito muito mais exagerado. Podemos usar alguns números maiores. Então, em vez de 0,5, vamos usar apenas cinco. E em vez de começar do zero, sempre podemos desenhar pelo menos uma fatia Ou até mesmo empurre ainda mais o amargo ou faça com que um dos lados seja maior que o outro, como menos oito para o ângulo inicial E, novamente, poderíamos aumentar o número de fatias para tornar isso um pouco mais complexo. E aí está. Esse é o nosso esboço. Eu acho que ficou bom. Espero que você concorde. Obviamente, podemos atualizar a página para ver algumas variações e também podemos salvar a saída como imagem, assim como fizemos com o esboço Primeiro, precisamos voltar ao nosso terminal, pressionar Control C, Command C, seta para cima e abrir a saída, saída 02. E agora, de volta ao navegador, pressione Control S ou comando para salvar algumas variações. Obviamente, os números que eu estava usando aqui não são números finais. Eu estava apenas experimentando os valores. Eu encorajaria você a jogar com os números, experimentar valores diferentes, talvez até mesmo tentar linhas em formas diferentes. E na próxima lição, vamos começar um novo esboço. 12. Aprenda sobre objetos e classes: Talvez você se lembre, nas lições anteriores, que usei a palavra objeto em alguns tipos. É hora de examinarmos isso mais de perto. Primeiro, precisamos criar um novo esboço, ir até o terminal e inserir Canvas sketch, sketch 03 dot gs e Em seguida, abra o esboço 0.3 no editor e altere a dimensão para 1080 por 1080 Agora vamos falar sobre objetos. Não examinamos os objetos em detalhes até agora, mas os usamos esse tempo todo. O contexto é um bom exemplo de objeto. Ele tem propriedades como estilo de campo Context dot e métodos como Context dot feel rect, outro exemplo de um objeto muito mais simples do que Context é nossa configuração É um objeto com uma única propriedade chamada dimensões. Podemos dizer como um objeto porque ele começa e termina com os colchetes E dentro dela, encontramos um par de chave e valor. Lembre-se de que, para matrizes com colchetes, os valores são separados por vírgulas Seus objetos são semelhantes. Quando sempre temos um nome de propriedade ou uma chave, então Colin and a Vallow, vamos escrever um Ponto constante igual a chamar os colchetes, X 800 e Y 400. Este é um objeto simples com duas propriedades X e Y. Se você desenhasse isso como um pequeno ponto na tela, poderíamos fazer contexto dot start Path, depois contextualizar ponto arco, ponto X, ponto Y, raio dez, zero MPI Em seguida, defina o estilo do campo como preto e chame-o de preenchimento. Como somos nós que estamos abandonando esse objeto, não precisamos parar aqui Podemos dar a ele quantas propriedades quisermos. Por que não atribuir a ele também uma propriedade de raio? Agora, isso está se tornando um pequeno objeto útil. Se quiséssemos desenhar mais pontos na tela, poderíamos usar mais cópias dela, e isso nos leva a outro conceito de programação chamado classes. As aulas são receitas para criar objetos. Sempre que precisarmos de várias instâncias de um objeto com as mesmas propriedades, podemos usar classes para criá-las. Na verdade, mesmo quando não precisamos de várias instâncias, as classes ainda são úteis para organizar o código em entidades distintas. Vamos escrever uma classe para nosso pequeno objeto pontual. Podemos ir até o final da nossa aula de preenchimento e digitação. Abra e feche os colchetes encaracolados. Por convenção, o nome da classe geralmente começa com uma letra maiúscula Agora, um método muito importante de uma classe é o construtor Isso é o que vamos construir com um novo objeto quando o criarmos. E podemos passar parâmetros para o construtor. No nosso caso, quatro pontos, queremos X e Y e raio Agora precisamos definir a propriedade X, Y e raio. E para isso, precisamos de outra palavra especial chamada assim. A palavra isso significa que estamos nos referindo ao escopo dessa classe. Como sempre, faz mais sentido com um exemplo. Então, deixe-me digitar algo aqui. Esse ponto X é igual a X. Aqui estamos dizendo que o ponto da classe contém uma propriedade chamada X e estamos definindo seu valor para um parâmetro que vamos passar para o construtor Esse ponto X é apenas um valor, pode ser zero. Pode ser uma pizza, mas estamos configurando-a para o parâmetro X onde passamos. Caso isso ainda não esteja claro, fará sentido em um minuto quando criarmos um objeto usando nosso ponto de classe. Por enquanto, basta fazer o mesmo as outras duas propriedades que estamos passando. Agora, vamos criar um novo ponto. Em vez disso, vamos digitar um novo 0.800, 410. Os valores são os mesmos e os resultados são os mesmos. Mas desta vez criamos um ponto usando uma classe. Agora estamos prontos para criar mais pontos. Vamos renomear isso para o ponto A. E então criar um ponto B com X 300 e Y 700. E então duplique essas linhas e também desenhe o ponto B. Espero que esteja claro agora com este exemplo Estamos criando dois objetos que são extensores da classe de pontos e ambos têm a mesma propriedade e a mesma estrutura Com isso em mente, podemos começar a criar nosso esboço. Primeiro, quero mudar algumas coisas. Quero separar o ponto do ponto em que estamos desenhados na tela. Acho que esse ponto pode ser outra entidade com mais do que apenas uma posição e um raio Então, vou criar outra classe para ela e vou chamá-la de Agente. Sua primeira propriedade será uma posição ou apenas uma pausa, e a pose pode ser um novo ponto Eu acho que o ponto deveria ter apenas X em Y. Ele não precisa de raio lá Poderíamos trazer o raio para o agente e deixar o ponto apenas como dados de posição e , em seguida, usar o agente para qualquer coisa que quisermos desenhar Já podemos dar ao raio um valor de dez e, para as posições X e Y, podemos passá-los em parâmetros. Agora podemos renomear nossos pontos e chamá-los de agente A e agente B. E remover o terceiro perímetro porque não precisamos mais passar pelo raio Então, para nos afogarmos, podemos trazer esse código para nossa classe. Vamos copiar isso e criar um novo método em nossa classe de agente chamado draw. Podemos colá-la aqui e depois mudar X para esse ponto por ponto X, e conectar para esse ponto pos ponto y. E o raio para esse raio de ponto Também precisamos passar como parâmetro referências ao contexto. Depois, para desenhar os agentes, podemos excluir o que tínhamos antes e chamar o agente A dot draw e o agente B dot draw. Até agora, o visual não mudou, mas estamos configurando nosso código para poder fazer muito mais Vamos tirar mais cópias desses agentes. Podemos criar uma matriz vazia chamada agentes. Em seguida, crie um loop para preencher a matriz com, digamos, 40 agentes Agentes que enviam novos agentes X e Y. Precisamos criar X e Y, então conste X e CY, e eu quero que sejam valores aleatórios Então, precisamos da nossa função de ramificação aleatória novamente. Vamos importá-lo do Canvas sketch. Você também. Então X será um valor aleatório entre zero e largura, e Y entre zero e altura. E agora, para desenhar o agente, só precisamos de mais algumas linhas. Podemos examinar cada item em nossa matriz com o ponto do agente para H. O primeiro parâmetro é o próprio agente. E podemos chamá-la de linha de pontos envelhecida e passá-la com contexto. Ainda não estamos vendo nada, então deve haver um erro em algum lugar. Vamos dar uma olhada no console. Control Shift I ou comando shift I. Há um erro aqui que diz que a erva daninha não está definida e também diz que está acontecendo na linha 12. E isso porque Wt só é definido aqui. Ainda não temos a variável wit fora dessa função, mas essa é outra coisa boa do esboço compactado Essas propriedades iniciais também estão disponíveis na função de esboço Então, podemos simplesmente copiar esse parâmetro e colá-lo aqui. E agora vemos todos os nossos 40 agentes. Agora temos nossos 40 agentes na tela. Na próxima lição, mostrarei como animá-los. 13. Crie uma animação: Nesta lista, continuaremos desenvolvendo nossos agentes e começaremos a animá-los pela tela Antes de apresentarmos um pouco de comportamento aos nossos agentes, sugira algumas coisas. Primeiro, quero dar a eles um raio variável, um Vallow 4-12 aleatório E aqui, em vez de desenhar o arco na pausa X e na pausa Y, quero usar o que aprendemos na lição anterior e traduzir o contexto Então, context dot save, context dot translate, pause X e pause Y. então altere isso E não se esqueça de chamar Context dot restore no final. Também acho que os agentes ficariam mais bonitos com um traço preto e preenchidos com um branco Assim, podemos remover o estilo de preenchimento preto e manter o valor de branco que configuramos aqui. O traçado padrão já é preto, então só precisamos chamar fill e depois stroke. A última coisa aqui é tornar o traçado um pouco mais espesso com a linha de pontos de contexto e defini-lo como quatro Agora queremos fazer com que nossos agentes se movam. Podemos dar a eles uma nova propriedade chamada velocidade ou VL. Essa propriedade também precisa de um valor X e Y, portanto, pode ser outro ponto. Nesse caso, a palavra ponto não deve mais ser educada. Não há problema em chamar a posição de um ponto. Mas dizer que a velocidade é um ponto é um pouco estranho. Precisamos considerar outro nome para nossa classe. Acho que um bom nome para isso seria vetor. Isso é um pouco de refatoração. Precisamos mudar o nome em alguns lugares, e isso é bastante comum na programação. Não é um problema reavaliar seu código à medida que você progride e mudar as coisas que você escreveu anteriormente Agora podemos dar à nossa velocidade alguns valores aleatórios de X e Y. Ambos podem ser organizados de menos um para um. E então, para usar a velocidade, é bem simples. Só precisamos adicionar a velocidade à posição, e podemos fazer isso em um novo método chamado update Esse ponto x mais é igual a esse ponto l ponto X. E, novamente, o mesmo para Y. Agora, dentro do nosso Loop, pouco antes Agent Draw, chamamos de agent dot update Bem, mas nada está mudando. Isso porque desenhamos apenas um número primo em nosso esboço. Se você quiser animar, precisamos especificar isso na configuração Animate Agora, essa função aqui está ficando fria toda vez que o navegador está pronto para repintar a tela Devemos acontecer a 60 quadros por segundo. Essa propriedade animada é muito útil, como muitas outras coisas no Canvas Mas também quero mostrar como obter algo assim sem o Canvas sketch. Vou escrevê-lo como um exemplo rápido e podemos até mesmo excluí-lo depois. É só para você saber que ela existe. Vamos criar uma função fictícia e também chamá-la de animate. Dentro dele, vamos apenas registrar algo no console. Diga visual. E então precisamos chamar uma função de janela do navegador chamada quadro de animação de solicitação, que o navegador aciona sempre que estiver pronto para pintar outro Como parâmetro, passamos a função que queremos que seja chamada iver frame Nesse caso, será nossa função animate. Depois, basta ligar para o Animate uma vez e ver o que acontece Vemos o visual da mensagem sendo registrado várias vezes. Então, aqui o animate faz alguma coisa e, em seguida, solicita o próximo quadro, que então aciona o animate novamente. E isso cria um loop animado. Internamente, é isso que o Canvas sketch está fazendo quando passamos pela animação E a função que isso causa é essa aqui. Podemos excluir isso agora e voltar para nossos agentes. Ou se você quiser deixar aqui para uma referência, basta comentar na chamada para animar. Você deve ter notado que nossos agentes tendem a desaparecer da tela se deixarmos o esboço rodando por um tempo Isso porque eles não sabem nada sobre os limites da nossa tela. Poderíamos dizer a eles que se recuperem quando atingirem os limites Então, vamos criar um novo método para nosso agente chamado bounce. E precisamos passar com largura e altura. Em seguida, escrevemos uma condicional se esse ponto de pose X for menor ou igual a zero, ou se essas duas barras verticais significarem lógica ou algo assim, ou se esse ponto de pose de ponto x for maior ou igual O que queremos fazer é inverter a velocidade. Então, diabos, ponto x vezes é igual a menos um e, em seguida, exatamente o mesmo para Y Em nosso loop, logo após Update and brow, chamamos o agente toot Bounce Width Agora podemos ver que eles não funcionam mais de qualquer maneira e permanecem dentro do nosso esboço. Ok, agora temos agentes de mudança. Em seguida, vamos conectá-los com linhas. 14. Conecte agentes com linhas: Ah, nesta lista, vamos conectar nossos agentes às linhas e, para fazer isso, precisamos de um pouco mais disso Vamos revisitar uma fórmula familiar para encontrar a distância entre eles. O PitágorTom. Vamos precisar do Nistd for loop. Você deve se lembrar de ter escrito um em nosso primeiro esboço. Isso significa um para um loop dentro do outro. Para I igual a zero, I menor que o agent dot Link e, dentro do primeiro loop, queremos armazenar o agente como uma variável. Agente igual aos agentes, colchetes I. Em seguida, o segundo loop usando G como índice E também queremos armazenar o agente aqui como uma variável. Vamos chamá-lo de “ outro é igual a dois agentes”, G. Então, para cada agente, examinamos todos os outros Agora, para desenhar a linha, precisamos usar dois métodos. Mova dois e linha dois. Primeiro, começamos com um novo caminho, o caminho inicial do Contactt. Em seguida, movemos nossa caneta para o início da linha com o ponto de contexto e movemos dois. E vai envelhecer ponto a ponto e envelhecer ponto a ponto y. Então precisamos contextualizar ponto a linha dois e passar o final da linha, que será um ponto por ponto X. Outra pausa de ponto ou Y. E então entre em contato com Dot Stroke . E então entre em contato com No momento, temos 40 agentes. Então isso significa 40 vezes 40, o que é 1.600 iterações em cada quadro. Isso é bom. O computador pode fazer isso, mas é um desperdício porque estamos verificando cada par de agentes em termos de inteligência Por exemplo, quando I é zero, ultrapassamos G zero, um, dois, três, etc Quando eu sou um, continuamos novamente acima de zero, um, dois, três, então é importante. Apenas o par 01. Somos atraídos por uma linha em cima da outra, uma 0-1 e outra 1-0 E também estamos comparando zero contra zero e um contra um, o que é desnecessário. Podemos melhorar isso com cada mudança simples. Para um G em vez de começar em zero, ele poderia começar em I mais um. Então, agora, quando I for zero, G será um. Quando chegarmos a 38, G será 39, e esse segundo loop só será executado uma vez, porque todos os outros pares de agentes já teriam sido verificados no ponto. Com essa mudança simples, o número de iterações em seu quadro passou de 1.600 para 780 Isso é uma boa melhoria de desempenho. Agora é hora de melhorar o visual. Isso é um pouco intenso demais para o meu gosto. Quero traçar a linha entre os agentes, que estão próximos um do outro, não entre todos eles. Para isso, precisamos de um pouco de matemática. Teorema de Pitágoras, o nome é complicado, mas sua fórmula é muito simples mas Digamos que temos dois pontos no plano D, primeiro encontramos a distância entre eles no eixo X. Vamos chamá-lo de DX. Em seguida, encontramos a distância no eixo Y e a chamamos de DY. Isso nos dá um triângulo retângulo. E o que queremos encontrar é o potenus. pragors nos dizem que essa será a raiz quadrada de alguns dos quadrados dos lados Vamos usar isso em nosso esboço. Podemos adicioná-lo como um método da nossa classe vetorial. Chame isso de obter distância, e passamos em outro vetor. Vou chamá-lo de dx será esse X menos V ponto x dy será esse ponto Y menos V ponto Y. A distância real, que é o que queremos retornar, será MT ponto raiz quadrada, dx vezes dx mais dy vezes Agora, de volta ao nosso loop aninhado, podemos sair de um novo disco frio variável obter a distância entre a pose do ponto envelhecido e a pose do outro ponto Agora que temos a distância, podemos dizer que só queremos desenhar a linha se dist for menor que alguns números Digamos 200, ou podemos fazer o oposto e dizer que, se dist for maior que 200, preocupe com o resto do código dentro do loop Apenas continue. As instruções de continuar dizem: vá para a próxima iteração do loop Então, tudo depois de continuar é ignorado. Isso já parece muito melhor, mas ainda há mais uma coisa que eu quero fazer com isso, que é mudar a linha com ele, baseá-lo na distância. Quero que as linhas sejam grossas quando os agentes estão fechados e fiquem cada vez mais finas medida que se separam Para isso, podemos usar outra função útil do Utils chamada Isso espera uma chave de entrada e uma chave de saída e mapeia o valor entre as Então, mais uma vez, vamos importar o módulo matemático do esboço do Canvas para E então podemos definir a linha com ela com base na distância. De um intervalo de 0 a 200, quando a distância é zero, queremos que a linha seja 12 Quando for 200, queremos que seja um. E lá vamos nós. Eu já mostrei como exportar esboços como imagem, mas desta vez nosso esboço está se movendo, então precisamos exportá-lo como um vídeo E é exatamente isso que vou te ensinar na próxima lição. 15. Aprenda sobre a saída de vídeo: Nosso esboço está concluído e podemos clicar em Controles para salvar alguns quadros Mas como está se movendo, também seria bom exportá-lo como vídeo. Vamos dar uma olhada em como fazer isso com o Canvas sketch. A documentação nos diz que podemos exportar sequências de quadros ou usar o streaming FF NPH, que gera as sequências já codificadas como um Isso é o que queremos fazer. Então, primeiro, precisamos ter certeza de que temos o FF NPH e mantê-lo , e podemos copiar essa linha aqui e colá-la em nosso terminal Mais uma vez, pressione Control C para interromper o processo atual e colar o comando aqui. Global é o mesmo que G que vimos antes. Ele instala os pacotes globalmente, não apenas na pasta atual Quando terminar, seta para cima, mova a nova e a pasta aberta e, em seguida, definimos nossa pasta de saída com saída de traço igual à saída 03 E para streaming, precisamos adicionar o Dash Dash Stream. Agora, nosso esboço está sendo executado novamente e podemos pressionar Control Shift S ou Command Shift S. Isso é para começar a exportar os quadros Depois, aguarde alguns segundos e pressione o mesmo comando novamente. Controle a tecla Shift S para pará-la. Vamos dar uma olhada na pasta de saída e aí está nossa bela animação. Nossa coleção de esboços está crescendo e se tornando mais interessante Vamos criar um novo esboço na próxima lição. 16. Aprenda a criar uma grade: Nesta lista, vamos criar uma grade, mas de uma forma diferente da que fizemos antes Mais flexível e mais eficiente. O resultado final ficará assim. Vamos dar uma olhada. Primeiro, precisamos criar um novo esboço. No terminal, inserimos o Canvas sketch. Pegue 04 novos. Em seguida, divida a tela novamente. Espero esboçar 04 no editor e alterar a dimensão para 1080 por 1080 Podemos começar declarando algumas variáveis para descrever nossa nota Queremos quatro colunas e três linhas. O número total de células será chamado de linhas de vezes. Também pode ser armazenado em uma variável com largura da grade, que será 80% da largura da tela E o mesmo vale para a altura da grade, também 80% da altura da tela. Com isso, também podemos encontrar a largura e a altura de cada célula da grade Sell W é igual à largura da grade dividida pelo número de uma coluna. E a célula H é a altura da grade dividida pelo número de linhas. Também podemos encontrar a emergência ao redor da grade, que é a diferença entre o tamanho da grade e o tamanho da tela. Então Marge é igual a Wodith menos a grade W. E como há duas emerginas em uma à esquerda e outra à direita, queremos metade desse W. E como há duas emerginas em uma à esquerda e outra à direita, queremos metade desse valor. O mesmo vale para Marg Y t menos a grade H multiplicada Com isso estabelecido, agora precisamos examinar cada célula da grade para que possamos fazer algo com elas. E para isso, precisamos dos quatro loops. Em vez de usar dois para loops, como fizemos antes, um por coluna e outro para linhas, vamos usar apenas um e calcular coluna e linha com alguns cálculos matemáticos simples Eu sou igual a zero I menor que num sllsi mais mais. Para calcular a coluna, precisamos do operador restante Chamadas equivalem a I, chamadas restantes. Isso retorna o restante da divisão de I por chamadas. Vamos usar o console para testar alguns valores. Começa do zero e as chamadas são quatro. Então 44 é igual a zero, quatro é igual a um, depois E quando chegamos a quatro, o restante volta a zero. Em seguida, cinco de volta para um. Portanto, enquanto o valor de I está aumentando nas etapas de um, o valor do núcleo é modulado de 0 Então, será zero, um, dois, três, 01, dois, três, que é exatamente o que precisamos para encontrar as células da grade no eixo X. Agora, para encontrar a linha, a lógica é um pouco diferente. Pode ser tentador fazer algo semelhante e usar o operador restante novamente Desta vez, usando o número de linhas, mas elas apareceriam aqui Porque enquanto o I está aumentando, estamos nos movendo da esquerda para a direita. Então, para encontrar o final da linha, precisamos verificar os números das colunas. Podemos fazer isso com o fluxo de pontos matemáticos. Eu o divido por cols. Novamente, vamos usar o console para testar. 0/4 é zero, 1/4 é 0,25 e, em seguida, se reduzirmos o valor, ou seja, se o arredondarmos para o número inteiro mais próximo, isso o número inteiro mais próximo, Dois também dão 03. E então chegamos a quatro, isso nos dá um e cinco também é um. Isso nos diz que a cada quatro etapas, o valor da linha é aumentado em um, que é o que precisamos para encontrar as células de notas no eixo Y. A próxima etapa é encontrar os valores X e Y de cada célula usando linha e CO. X será chamada multiplicada pela célula , W e Y será multiplicado pela célula. Vamos desenhar uma linha dentro de cada célula, e eu quero que elas sejam um pouco menores que a Então, vou criar alguma outra variável para largura e altura. W será 80% da célula W e H 80% da célula agora que estamos prontos para desenhar. Comece com o salvamento do contexto e a restauração do contexto. Em seguida, traduzimos o contexto por X e Y. Em seguida, o contexto começa, o caminho e o ponto do contexto se movem dois, e queremos menos metade da largura da linha E então a linha de contexto dois, metade da largura da linha. E, finalmente, o contexto influencia. Podemos ver algo agora, mas ainda não parece certo. Precisamos levar em consideração nossas fusões ao traduzirmos os contextos Poderíamos adicionar março X e mar Y a X e Y. Ou poderíamos adicionar outro carvão para traduzir Isso é um pouco melhor , mas ainda não está certo. O problema é que estamos desenhando as linhas do centro de cada célula da grade, mas estamos apenas traduzindo a origem para o canto superior esquerdo de cada célula Portanto, também precisamos de outra tradução para o centro da célula. Tradução de pontos de contexto, célula W vezes 0,5 e célula H vezes 0,5. Agora, esse visual está certo. Aqui, estamos usando três chamadas para traduzi-lo, apenas para que eu possa mostrar o que cada etapa está fazendo. Mas se preferir, você também pode adicionar esses volumes diretamente a X e Y e chamar translate uma vez Vou deixar isso para você por enquanto. Agora que podemos ver nossa grade, vamos mudar a linha com ela para quatro e aumentar o número de linhas e colunas para dez Então, desta vez, usamos o método Smarter para criar uma grade, mas essa é apenas uma grade plana Na próxima lição, adicionaremos um pouco de aleatoriedade a ela 17. Manipulação de formas com ruído: Para tornar nosso esboço mais interessante, vamos adicionar alguma aleatoriedade a ele. Mas desta vez vamos usar números aleatórios diferentes, vamos usar ruído. A função Generate é uma ferramenta essencial no cinto de utilidades de um codo criativo Em essência, isso nos permite controlar a aleatoriedade. O algoritmo de ruído clássico foi saudado por Ken Perlin em 1983 e é conhecido como ruído Perlin Vou postar um link para a página com uma boa explicação de como funciona se você quiser saber mais sobre o algoritmo. O que vamos usar em nosso esboço é uma variação diferente chamada Simplex noise e publicá-la em 2001 Aqui vemos uma apresentação visual de um ruído, mais especificamente um ruído de três D em um plano de dois D. Os valores de cinza são números que variam 0 a 1, onde zero é preto e um é branco Podemos ver que as garrafas não são completamente aleatórias o tempo todo, como a estática da TV. Em vez disso, eles parecem fluir bem um para o outro. Neste exemplo, vemos Pa diferentes níveis de zoom do mesmo ruído. Eles estão todos se movendo na mesma velocidade, mas suas escalas são diferentes ou suas frequências são diferentes de muito granulares a muito suaves Agora que temos uma ideia do que é ruído, vamos usá-lo em nosso esboço Como você deve ter adivinhado com base no que vimos até agora, já existem bibliotecas de ruído que podemos transmitir em nosso código E, mais uma vez, o Canvas sketch já torna isso bastante conveniente para nós Se voltarmos para a página aleatória do Canvas sketch, diremos que podemos ver se você funcionará como ruído usando ruído simplex Uma dimensão, duas dimensões, três e quatro. Então, vamos voltar ao nosso código e verificar isso conforme o custo aleatório exige Esboço em tela, você cortará aleatoriamente. Então, podemos gerar um número aleatório e chamá-lo de N igual ao ruído de ponto aleatório dois D e depois passar X e Y. Podemos usar N para definir o ângulo de rotação das linhas em nossa grade Então, precisamos de outra variável chamada ângulo e, em seguida, defina-a como n vezes o ponto matemático PI. Ruído para D, retorne um número entre menos um e um. Então, quando multiplicamos pelo ponto matemático PI, obtemos o equivalente a 180 graus negativos a 180 graus positivos Para ver isso em ação, precisamos apenas girar nosso contexto por ângulo As rotações são um pouco caóticas, porque os valores de X e Y são muito grandes. A frequência é muito alta. Poderíamos multiplicar X e Y por um número minúsculo como 0,001 Por conveniência, também temos esse terceiro parâmetro opcional aqui chamado frequência, que faz exatamente o mesmo. Então as coisas ficam um pouco menos caóticas, outra coisa que poderíamos fazer é alterar a amplitude para um número pequeno, como Mas isso também mudaria N para estar na faixa de -0,2 e 0,2 em vez de menos um e um Eu quero mantê-lo como menos um para um ou não. Então, vou multiplicar o ângulo por 0,2 em vez disso. E com isso, vemos que as linhas começam a fluir bem Também poderíamos usar o mesmo ruído para alterar a escala das linhas. Vamos criar uma nova variável chamada escala. Novamente, aqui queremos multiplicar e por algum número como 30 O intervalo está entre menos um e um, mas não queremos uma escala negativa Então, aqui precisamos mapeá-lo para um intervalo de 0-1. Existem algumas maneiras diferentes de fazer isso. Uma simples é somar um e dividi-lo por dois. Então, aqui o intervalo seria de 0 a 2. E depois de dividir por dois, seria 0-1. Podemos testar isso rapidamente definindo a linha com ela para escalar. Outra forma que é praticamente a mesma é multiplicar N por 0,5 e adicionar 0,5 Não há diferença aqui. Ainda remapeia e menos um e um para zero e A outra maneira de fazer isso é, obviamente, com a função utilitária que vimos na lição anterior chamada alcance do mapa. Vamos importá-lo aqui do Canvas SketchuTlash. E então mapeie o intervalo, baseando-o em N de menos um e um a um e 30 Em essência, todas essas fórmulas estão fazendo a mesma coisa. O alcance do mapa talvez seja um pouco mais conveniente e também nos permita definir uma escala mínima. Agora vamos de 1 a 30, enquanto antes vamos de 0 a 30. A última coisa que quero fazer aqui é animar os nulos. Já sabemos como animar o esboço. Só precisamos adicionar animação à nossa configuração. Então, se verificarmos a documentação do esboço do Canvas, veremos que uma das propriedades que ela passa para a função de renderização é o número do quadro que está sendo renderizado Então, só precisamos declarar uma moldura aqui. E então podemos usá-lo em nossa função Nuss, T com X mais quadro Agora, isso está se movendo , mas muito lentamente. Podemos torná-lo mais rápido multiplicando o quadro por um número maior, como dez, por exemplo Esse esboço está ficando um pouco mais complexo. Agora, há uma regra para mais variação, e é isso que vamos explorar na próxima lição. 18. Crie slides de interface gráfica: Guarde a melhor parte do processo para o final. Vamos criar um painel de controle com um controle deslizante para ajustar os valores em nosso A biblioteca que vamos usar é chamada de tweak pane e foi desenvolvida por Hiroki Precisamos voltar ao terminal, recuperar a pegadinha e digitar PM I tweak PMI é a versão curta do PM e do SAL que usamos até agora Ambos os comandos são exatamente iguais. Depois de terminar a instalação, seta para cima e execute nosso comando Canvas sketch novamente. Sem D dash new e D dash open. Já que estamos aqui, podemos muito bem abrir uma saída igual às saídas 04. Assim, podemos exportar alguns PNGs posteriormente. Agora precisamos transmitir dor de ajuste. A dor do ajuste de custo é igual à dor de ajuste necessária. Depois de nossa função de esboço, criaremos uma nova função chamada quit pain Aqui podemos armazenar a dor como uma variável e configurá-la para o novo TwickPain dot pain pain Abra e feche parênteses. Então, para verificar se tudo está funcionando bem, precisamos chamar de esboço o quick pain, pouco antes da tela Se você ainda não vê a barra cinza, verifique toda a sintaxe do seu código e verifique também as letras Agora, vemos a barra cinza do Garth aqui no topo, o que significa que a tinta está lá, mas ainda está vazia Então, agora podemos adicionar componentes de interface de usuário a ele. A primeira será uma pasta, que também podemos armazenar como uma variável. Para isso, precisamos de um método de dor chamado Ed folder. Podemos passar um objeto com alguns parâmetros, e uma das opções é o título. Então, a pasta Pine Dot Ed e, em seguida, a grade de título , agora dentro desta pasta, quero adicionar alguns controles deslizantes Podemos fazer isso com um método chamado na entrada. E, como podemos ver aqui no exemplo, precisamos passar um objeto e o nome da propriedade do objeto. Então, primeiro, precisamos criar um objeto para armazenar nossos parâmetros. Vou criá-lo aqui. Fora da função do painel , para que fique visível para nossa função de esboço. Vou chamá-lo de perms, como no exemplo, mas em minúsculas É um objeto. Então , colchetes e, em seguida, as duas primeiras propriedades serão chamadas e linhas, ambas com um Vallo Em seguida, podemos voltar ao CretPN e digitar a entrada dot d da pasta Chamadas de parâmetros e, em seguida, um objeto determinando o intervalo. Vou definir no mínimo dois e no máximo 50 e uma etapa de um e, em seguida, exatamente a mesma para as linhas. Salve isso e teremos alguns controles deslizantes de 2 a 50. A última etapa é fazer com que nosso esboço use esses valores. Só precisamos atualizar nossas chamadas e linhas, variáveis para usar chamadas de pontos perimetrais e linhas de pontos de parâmetros. Agora, podemos modificar nossa grade em tempo real. E se podemos fazer isso com colunas e linhas, por que parar aqui e também adicionar mais controle deslizante para escala, mínima e escala máxima Então, primeiro, o parâmetro, defina o padrão para um e 30, como temos no momento. E então adicione a entrada, escala mínima e desta vez 1-100 E não precisamos especificar essa etapa porque a fração está de acordo com a escala. Copie isso para obter a escala máxima e substitua o valor em nossa função MA Branch. Também podemos manipular os valores de ruído, como frequência e amplitude Vamos criar outra pasta para isso. Ruído do título e, em seguida, adicione a entrada. Média esquisita -0,01, máx 0,01. Duplique a linha do mapa, máximo um e mínimo zero Crie as propriedades dentro dos perímetros. Portanto, o valor padrão de frequência para 0,001 e amplitude para 0,2 Em seguida, substitua-os dentro da função de renderização. Veja o que eles estão fazendo. É mais fácil entender se temos muitas linhas e cones. Isso parece interessante, mas está bem claro que algo está se movendo da direita para a esquerda. Isso porque estamos incrementando o valor de X em nossa função noise two D. Poderíamos substituir isso pela função noise three D e usar a moldura como a terceira dimensão. Vamos tentar isso. Comente isso com o ruído três D e passe o tempo de quadro dez como o terceiro parâmetro. E agora temos um movimento que é um pouco mais orgânico sem uma direção clara. Outra coisa que podemos fazer é definir o número do quadro manualmente para que possamos colocar a animação em um determinado quadro. Para isso, precisamos de dois componentes de interface do usuário. Uma é uma tabela para animar ou não, e a outra como um controle deslizante para definir o número do quadro Em terceiro lugar, primeiro os parâmetros, Animate definido como verdadeiro e o quadro definido como zero Em seguida, a entrada será apenas animada, sem nenhuma opção extra Twig Pain já entendeu que esse é um parâmetro verdadeiro ou falso E outra entrada para um quadro com zero mínimo e máximo 999 Onde usamos o frame? Aqui em cima, vou mostrar como escrever uma expressão condicional em uma única linha Vamos criar uma variável chamada F. Quero que o valor de F seja quadro quando parâmetro animado for verdadeiro ou seja quadro de pontos de parâmetros quando animado for Podemos fazer isso em uma única linha. Esse F é igual ao ponto perimetral animado. Quadro de ponto de interrogação, Collins, quadro de pontos permanentes. Essa é a condicional. Esse é o valor quando a condicional é verdadeira e esse é o s. Ou quando a condicional é Esse tipo de expressão é chamado de operador ternário. Agora, em vez de quadro, usamos F. Vamos tentar isso Até agora, nada mudou. Mas se ativarmos a animação, as notas começarão a usar o valor de um quadro definido pelo A última coisa que quero mostrar aqui é que, como estamos desenhando linhas, também podemos alterar a lacuna entre linhas. Há três valores possíveis: platina, redonda e quadrada. Para selecioná-los em nosso painel, precisamos de outro tipo de componente que é a lista de strings. Primeiro, criamos o parâmetro, chamamos de lacuna de linha e o definimos com o valor padrão, o que é ruim. Em seguida, adicione outra entrada e eu a adicionarei ao topo da pasta da grade. E como terceiro parâmetro, precisamos passar a opção como o painel de ajustes Exemplo, redondo e quadrado. Então, logo após a linha com ele. Definir lacuna de linha de pontos de contexto é igual a lacuna de linha de pontos do parâmetro. Agora temos um menu suspenso e podemos ver como fica com uma lacuna redonda ou quadrada. Espero que você concorde que é muito útil ter esse painel de controle aqui em vez de digitar valores e atualizar nosso esboço. Podemos simplesmente jogar com esse controle deslizante e fazer testes rapidamente Você pode tentar adicionar mais componentes para outros valores que estamos usando, como a velocidade de sua animação ou talvez o comprimento de cada traçado ou outra tabela que alterne entre formas diferentes Digamos que se você quisesse desenhar círculos em vez de linhas, você poderia ter uma tabela para alternar entre eles. Isso é para você explorar. Com um painel como esse, você está criando sua própria ferramenta para ter mais controle sobre seu esboço Um recurso adicional, você encontrará mais informações sobre isso com dor e outro componente. Sinta-se à vontade para usar mais deles e levar o esboço na direção que quiser 19. Aprenda a criar texto: Nesta lição, vamos criar um esboço como esse e, para isso, precisamos aprender sobre texto, como desenhar um texto, como medi-lo e como definir as propriedades de uma fonte Comece um novo esboço, vá até o terminal e digite telas, esboço, seção 05, seção 05, metade da tela para o navegador e metade para o editor de e metade para o Dimensão 1080 por 1080. Nosso objetivo é desenhar uma letra grande no meio do nosso esboço. Para isso, precisaremos de um novo método que ainda não usamos, chamado texto de campo e também de algumas propriedades de texto como essa, que definem a fonte do contexto. Vamos começar definindo o estilo do campo como preto. E então podemos definir a fonte de pontos de contexto igual a 400 pixels Em seguida, podemos usar o texto do campo, que usa três parâmetros. Cadeia de caracteres e coordenadas X e Y. Então, texto do campo de pontos de contexto, em maiúsculas, zero, zero Ainda não estamos vendo nada, e isso se deve a uma propriedade de texto de dados chamada linha de base de texto O valor padrão é alfabético, que significa que o texto está sendo desenhado na parte inferior Para que possamos vê-lo com essas coordenadas, precisamos mudar a linha de base do texto para o topo Ou, se quisermos isso no meio do esboço, precisamos mudá-lo para o meio e depois traduzir o contexto para o centro do esboço Nós já sabemos como fazer isso. Salvamento de pontos de contexto, restauração de pontos de contexto. E o contexto traduz largura vezes 0,5 e altura vezes 0,5. Agora, a letra parece estar centralizada verticalmente, mas não Portanto, precisamos alterar outra propriedade de texto chamada alinhamento de texto O valor que buscamos é o centro. Agora, o glifo parece estar centralizado. Vamos torná-lo maior. Vamos alterar o tamanho da fonte para 1.200 pixels Podemos ver que não está bem no centro. Na verdade, está um pouco errado . O problema é que as fontes são estruturas complexas. Definir a linha de base para o meio não garante que o corpo do glifo seja centralizado, como quando lidamos com a forma primitiva Para fazer isso corretamente, precisamos de mais informações sobre a fonte. Existe um método para isso chamado texto de medida, e a referência da bússola nas três escolas W nos diz que ela retorna a largura do texto Mas esse método realmente faz mais do que isso. Podemos ver que na página equivalente no NDM, aqui está escrito que o texto medido retornou um objeto chamado text Matrix, e a matriz de texto tem uma propriedade chamada largura, mas também tem várias outras Vemos que todas as outras propriedades, exceto Wd, têm esse texto de ícone de laboratório, o que significa que ainda são consideradas uma característica experimental desse objeto. Mas agora vamos rolar um pouco mais para baixo e verificar a compatibilidade do navegador. Mesmo com seu status experimental, maioria deles já é bem suportada pelos navegadores modernos. No início do curso, mencionei que você poderia escolher qualquer navegador que quisesse. E embora isso ainda seja verdade, se você escolher um navegador moderno, poderá ter uma vantagem aqui. Em um navegador antigo, você poderia obter uma boa aproximação, mas teria que julgar a olho nu ao compensar a tradução Em um navegador moderno, podemos ser muito mais precisos usando essas propriedades de matriz. Então, vamos fazer isso. Primeiro, queremos armazenar nossa carta em uma variável, que vou chamar de texto. Então, queremos medir o texto, que também vou armazenar em uma variável chamada matriz. Texto de medição de pontos de contexto, vamos dar uma olhada nos dados dentro da matriz com o console dot log dot Matrix. Os que nos interessam são quatro primeiros que descrevem a caixa delimitadora real Recebemos caixas desenhadas desde nosso primeiro esboço e sabemos que sua origem está no canto superior esquerdo Então, vou comentar o alinhamento do texto no centro e deixar o valor padrão, que é à esquerda, e também reverter a linha de base para o topo E também podemos comentar, traduzir por enquanto. Então, queremos nossas variáveis XY, W e H usuais , mas desta vez para matriz. Vou prefixá-los com X que será o ponto da matriz Caixa delimitadora real à esquerda vezes menos um. Meu sotaque real da caixa delimitadora vezes menos um. E W caixa delimitadora real à esquerda mais a caixa delimitadora real E, finalmente, MH, na verdade acento da caixa delimitadora mais a descida real da caixa delimitadora Vamos ver o que sai disso. Podemos desenhar rapidamente a caixa delimitadora com um contorno, ponto inicial de contexto Path, ponto de contexto g xMyNWH e traçado de ponto de contexto Agora, essa é a verdadeira caixa delimitadora ao redor do penhasco. Também podemos testar com outros penhascos. Para alinhar isso no centro do nosso esboço, podemos fazer algo semelhante ao que fizemos em nosso esboço de notas Custo X é igual a dois, fizemos menos NW vezes 0,5 menos x, e CY altura menos H vezes 0,5 menos Y. E então traduzimos o contexto para X e Y. E então temos então traduzimos o contexto para X e Y. E então fizemos menos NW vezes 0,5 menos x, e CY altura menos H vezes 0,5 menos Y. E então traduzimos o contexto para X e Y. E então temos. Eu centralizei adequadamente o glifo. , faremos mais com isso, Obviamente, faremos mais com isso, mas antes de prosseguirmos, talvez queiramos escolher uma fonte diferente ou talvez alterar o tamanho da fonte. Então, vamos arrumar um pouco aqui. Vamos mover a variável de texto para fora dessa função para o topo do arquivo e também declará-la com um let, caso queiramos alterá-la posteriormente e declarar mais duas O tamanho da fonte é igual a 1.200 e a família da fonte é igual a serf. A propriedade da fonte é uma única string, então precisamos constituir esses valores Vou te mostrar duas maneiras de fazer isso. Uma vez que já vimos em nossa primeira aula, precisamos apenas somar essas sequências de caracteres com os sinais de mais Tamanho da fonte mais espaço Px mais família de fontes. E a outra forma é com os literais do modelo, que nos permitem colocar variáveis ou expressões dentro das strings Vamos duplicar essa linha e retirá-la. Os literais de modelo não são definidos por códigos, mas por Bectis Então, Bectics, para a primeira variável, cifrão, colchetes, depois PX e, em seguida, alinha o cifrão e os colchetes. O primeiro é o tamanho da fonte e o segundo a família de fontes. O resultado é o mesmo. Mas a prática é usar modelos literais, mas agora você sabe que existem duas maneiras diferentes de fazer isso Sinta-se à vontade para alterar a fonte se não gostar da que viu no seu esboço E você também pode criar uma variável para o estilo ou a espessura da fonte. Vou usar a fonte Sara padrão por enquanto. Passe algum tempo escolhendo a fonte com a qual deseja trabalhar. E quando você estiver pronto, nos encontraremos na próxima lição. 20. Aprenda sobre o assíncrono: Agora desenhamos uma única letra em nosso esboço. Não seria ótimo atualizar isso e pressionarmos uma tecla em nosso teclado? É isso que vamos trabalhar nesta lição. Precisamos ouvir os eventos que estão acontecendo na janela do nosso navegador e aquela em que estamos interessados chamada Key. Também podemos usar a tecla Down, que é a tecla real pressionada, mas eu prefiro usar um aplicativo de teclas, que é acionado quando a tecla é liberada Precisamos de uma linha como essa. Documente o ouvinte de eventos de pontos, Key, e o segundo parâmetro é a função a ser chamada quando o evento acontece Vamos criar um chamado Key upp. Const em Key up. Ele obtém um objeto de evento como parâmetro. E, por enquanto, podemos simplesmente registrar esse objeto. Uma das propriedades do objeto de evento é uma string com uma tecla que está sendo pressionada. Poderíamos definir nossa variável de texto para essa chave. Então isso foi bem fácil. Mas nosso esboço não está mudando. Precisamos pedir que ele seja atualizado e renderizado novamente quando a variável de texto for alterada. Uma solução rápida aqui seria adicionar animate true à nossa configuração, como vimos antes Mas isso significaria atualizar o esboço em cada quadro quando, na verdade só precisamos fazer isso quando a tecla é Para fazer isso corretamente, vou ter que fazer um desvio e passar alguns minutos explicando outro conceito de programação, uma função sincronizada Até agora, todo o código que escrevemos se baseia em uma regra implícita, de que tudo funciona de forma que tudo funciona Assim que escrevemos uma linha de código, podemos assumir que o que escrevemos é verdadeiro e estabelecido no momento em que chegamos à próxima linha. Por exemplo, se dissermos que X é igual a cinco, na próxima linha, podemos ter certeza de que X mais um seria apenas seis. Digamos que quiséssemos que X me carregasse alguma imagem, que é uma função que não existe, é só um exemplo. Então, na linha a seguir, queremos tentar ler com a largura da imagem. Isso nos causaria um erro porque a imagem precisa de algum tempo para carregar. Quando o navegador estiver executando esse código, ele não vai parar nessa linha. Aguarde o carregamento da imagem e continue com o resto do código. Ele vai executar tudo de forma sincronizada. Ao carregar algumas imagens, é tarefa dos sincronizadores. Para gerenciar essa combinação de tarefas de sincronizadores N sincronizadores, temos um conceito em JavaScript chamado promise, que é O navegador diz: Ok, eu vou executar isso, mas vai demorar um pouco. Então, em vez do resultado, aceite a promessa de que eu lhe darei o resultado quando terminar. E, por enquanto, deixe-me continuar com o resto do código. Em seguida, poderemos obter a largura da imagem que estamos tentando carregar aqui. Só precisaremos escrever isso de uma forma um pouco diferente, carregar uma imagem para mim fazer algo com o ponto X com ela. Obviamente, isso não é um código real. Mas vamos prosseguir e realmente implementar essa função de carregamento de algumas imagens para que possamos ter um exemplo funcional. Podemos obter uma imagem aleatória do PiXM de extremidade inferior. Não nos importamos com a imagem , desde que tenha alguma. Em seguida, armazene essa variável chamada URL. E então me carregue alguma imagem. Tomando um real como perímetro, ele retornará uma nova promessa Na documentação, vemos que é necessária uma função com dois parâmetros resolver e rejeitar. Em seguida, uma flecha gorda e um suporte encaracolado. Dentro da promessa, vamos criar uma nova imagem e definir sua propriedade de origem, a fonte do RL, que estamos transmitindo Assim que a imagem tem uma fonte, o navegador já começa a carregá-la. Então, queremos definir outras propriedades antes da fonte. Eu quero mg dot load, que é uma função que o navegador chama quando a imagem termina de carregar, e isso resolveria nossa promessa e passaria o próprio objeto MG. E pronto, quero rejeitar nossa promessa. Então, poderíamos ter outra função chamada start, que seria o ponto de entrada do nosso código. Ignore o resto do nosso esboço por enquanto. Vamos voltar a isso em um minuto. Mas, por enquanto, finja que esse é todo o código que temos aqui Apenas essas duas funções dentro de start podem dizer carregue-me alguma imagem e, em seguida, nesta função desta promessa. E o primeiro parâmetro é o que estamos passando dentro de resolve. Então, EMG, flecha gorda, e então podemos registrar a imagem com ela e o ponto EMG com E primeiro, para ver a ordem em que esse código será executado, vamos também dar uma olhada em outra coisa logo após esse código, algo como essa linha. Depois, só precisamos executar o start e dar uma olhada no console. Portanto, o navegador executou essa linha primeiro, mesmo que ela apareça após o log anterior. E isso porque load Misumimage é uma promessa que só será cumprida algum Então, aqui temos uma função de sincronizadores e uma função Nsycronizer Mas e se quiséssemos que o navegador esperasse pela tarefa de sincronização N Podemos fazer isso com algo chamado esperar. Quando estamos executando algo dentro de uma função de sincronizadores, podemos dizer ao navegador que espere Ou, em outras palavras, podemos executar sincronização dessa tarefa de forma sincronizada Isso é confuso? Vejamos um exemplo. Vamos criar uma cópia da nossa função inicial. Comente um deles e deixe aqui apenas para referência. Em seguida, queremos converter o início em função assíncrona digitando uma sincronização na frente dela Agora, dentro dela, podemos alterar essa expressão para B ENG igual ao peso. Carregue-me alguma imagem e, em seguida, carregue a imagem com ela e registre esta linha. Vamos salvar isso e verificar o console novamente. Agora, a ordem dos registros está invertida ou, na verdade, é a mesma que temos no código Mesmo se estivermos carregando uma imagem, que é uma tarefa que não sabemos quanto tempo pode levar, o navegador agora está esperando por ela. Por que eu entrei em tudo isso? Porque o Canvas sketch é uma função sincronizada. Ele retorna uma promessa com algo chamado gerenciador de esboços Sempre que pressionamos uma tecla no teclado, queremos poder dizer ao gerente de esboços que renderize o esboço novamente Então, vamos voltar ao nosso esboço. Finalmente, podemos comentar todo esse bloco de código com estrela de barra frontal e, em seguida, no final, estrela e barra frontal, e deixar esses blocos aqui para referência Agora vamos encerrar. Nossa chamada para o Canvas é um esboço com função de sincronização chamada estrela assim como fizemos em nosso exemplo Com isso pronto, podemos então armazenar o escasso e uma variável para aguardar o esboço inverso Na verdade, queremos que essa variável seja visível fora do escopo dessa função. Então, vamos declarar isso aqui. E precisamos lembrar de chamar Star para correr imediatamente. Agora, dentro do Key App, depois de definir o valor do texto, podemos chamar o gerenciador dot render. E podemos ver que está funcionando, mas eu quero usar letras maiúsculas, então vou adicionar as duas E com isso, estamos de volta aos trilhos. Esse foi o fim do desvio. Parecia um pouco longo, mas era um conceito importante a ser abordado. Depois de se familiarizar com o peso do erro, você não precisa realmente escrever muito código para usá-lo. No final, tudo o que precisávamos fazer era agrupar uma função de canto em torno do código para criar um esboço em tela As promessas são mais do que as que abordei aqui. Como, por exemplo, o que acontece quando uma promessa é rejeitada e como capturar uma mensagem de erro. Vou postar um link com mais detalhes caso você queira ler mais sobre eles. Foi uma pequena jornada, mas agora terminamos com ela. Você aprende o conceito poderoso que definitivamente será útil ao usar JavaScript. Na próxima lição, voltaremos ao nosso esboço. 21. Criando um bitmap: Agora vamos analisar a leitura dos valores de cores dos pixels em nossa tela. Agora temos uma letra grande bem no centro do nosso esboço, e o efeito que buscamos é desenhar outras formas no formato dessa letra Podemos começar a pensar sobre isso que estamos vendo agora apenas como dados de posição e dados de cor. Isso nem precisa estar em nosso esboço. Tudo o que precisamos saber é onde temos pixels brancos e onde temos pixels pretos. Podemos pensar em nosso Canvas como um mapa de big data ou um mapa de bits. O Canvas é um bitmap. Há uma grade de pixels quando definimos a dimensão. Estamos dizendo que queremos tantos pixels dessa maneira e tantos pixels daquela maneira. Se chegarmos muito perto do pixel em nossa tela, veremos que é feito de nossos canais, RGB e A. Cada um desses números é de 0 a 255, que é a informação de cor de E a cor não é a única coisa importante aqui. Também é importante saber onde está o pixel. É a posição XN Y ou sua coluna e linha na grade. Já sabemos uma coisa ou duas sobre grades, então isso será útil aqui Em primeiro lugar, você precisa criar uma tela separada para nossa carta, uma menor que usaremos apenas para ler dados. Podemos criá-lo na parte superior do nosso arquivo. O tipo de custo Canvas é igual ao elemento dot quit do documento, Canvas, e então também precisamos do contexto. Portanto, o contexto do tipo C é igual ao tipo Canvas dot Get context. Depois, dentro da função SCAT, mas antes das funções de renderização porque só precisamos fazer isso uma vez Vamos definir as propriedades da grade do tipo Canvas e, para isso, precisamos de largura e altura. Assim, podemos copiar essas propriedades aqui e disponibilizá-las aqui. Sabemos que um pixel é sempre um quadrado, então podemos armazenar sua dimensão em uma única variável. Célula de custo, não precisamos separar valores de largura e altura e, em seguida, podemos simplesmente escolher um tamanho para nosso pixel. Digamos que serão 20. E então, para definir o número de colunas, precisamos fazer o inverso do que fizemos em nossa grade anterior E diga matemática, ponto, piso, largura dividida pela célula. Isso significa que para cada 20 pixels em nossa tela principal, teremos um pixel em nossa tela de texto. A largura do nosso esboço é 1080/20. Isso nos dá 54. Então, precisamos fazer o mesmo com as linhas. Piso matemático, altura dividida por célula, células entorpecidas serão as mesmas que fizemos da última vez, chamadas vezes cordas E com isso, podemos definir a dimensão do tipo Canvas. tipo Canvas com ele será o número de colunas e alturas. Será o número de colunas e a altura será o número de linhas. Em vez de nos basearmos no contexto, vamos nos basear no contexto de tipos. Então, basta selecionar todas as ocorrências de contexto e substituir pelo tipo contexto Podemos nos livrar dessas linhas que são comentadas e depois substituí-las por brasas e alturas por linhas Então, só para ver o que temos aqui, podemos desenhar o tipo Canvas em nosso esboço com o ponto de contexto, desenhar a imagem, digitar Canvas e, em seguida, X e Y zero e zero Ainda não estamos vendo nada, então vamos tentar entender o que está acontecendo. Uma maneira fácil de verificar se está tudo bem com tipo Canvas é definir a cor de fundo para preto. E a cor do texto para branco. Agora vemos um pequeno quadrado preto lá no topo. Mas onde está nossa grande letra A? O problema é que o tamanho da fonte agora é muito grande. Precisamos atualizá-lo com base no tamanho da nossa nova tela. Poderíamos simplesmente configurá-lo para ser igual à largura ou ao número de colunas, e aí está nossa tela de texto. Agora, o que queremos fazer é ler os dados de pixels dele. Para isso, precisamos de um método chamado get image data. Como parâmetros, espera-se X largura e altura da área da qual estamos lendo os dados. Podemos armazenar isso como uma variável chamada type data e definir dois tipos de contexto Get Image data, zero, zero, chamadas e linhas. Vamos ver quais tipos de dados internos usam no console. Dados do tipo log de pontos do console. É um objeto do tipo: dados de imagem têm largura, altura e dados, e os dados são uma grande matriz com mais de 12.000 itens Isso é um item para cada canal de cada pixel. Então, GBA, que tem quatro canais vezes a largura, que é 54 vezes a altura, que também é 54, já sabemos nossa largura e altura, então podemos definir nossa variável de dados de tipo para ser apenas a propriedade de dados desse objeto Agora, queremos ler esses valores de pixels e sabemos como ler dados de uma matriz. Precisamos de um loop de quatro para I igual a zero, I menor que NML, I mais mais O Canvas é um mapa de bits e um bitmap é uma grade. Já sabemos como encontrar colunas e linhas em uma grade. Então, vamos fazer isso mais uma vez. Constall é igual a duas chamadas restantes . Constru é igual ao piso de pontos matemáticos, eu divido Agora, eu quero usar X e Y, mas já os usamos como nomes de variáveis aqui. Então, vou renomeá-los para TX e TY. Agora, os nomes X e Y estão disponíveis novamente. O custo X é igual à célula de tempo frio. O custo Y é igual à célula de tempo bruto. Agora vamos desenhar um pequeno quadrado para cada uma dessas células. Salvamento de pontos de contexto, restauração de pontos de contexto. ponto de contexto traduz X e Y, e o ponto de contexto parece certo, zero , zero e L Tudo fica preto porque somos 54 vezes 54. Quadrados pretos em nosso esboço. O que queremos é alterar as cores desses quadrados com base nos dados da fita Queremos ler esses valores do GBA. Vamos criar uma nova variável chamada R e configurá-la para dados em fita. E entre os colchetes, queremos que o índice seja o primeiro canal do pixel em que estamos Sabemos que o índice de pixels é o índice do nosso loop. Então, a letra I, sabemos que RGBA tem quatro canais, então I vezes quatro, e sabemos que o vermelho é o primeiro canal, então mais zero, não precisamos adicionar zero a nada Estou apenas digitando aqui para explicar que estamos lendo o primeiro canal Agora, encontrar os outros canais, é muito fácil. Basta duplicar essa linha. Altere o nome da variável para G e o índice do canal para um. Depois B e dois, depois A e três. Na verdade, não precisamos do canal Alpha, mas podemos declará-lo aqui Agora, só precisamos alterar o estilo do campo de pontos de contexto e usar o modelo literal desta vez para compor uma única string Bectic RGB abre e fecha parênteses, depois colchetes senoidais do dólar, colchetes senoidal do dólar R, G e colchetes senoidais do dólar, B, e O Bectic RGB abre e fecha parênteses, depois colchetes senoidais do dólar, colchetes senoidal do dólar R, G e colchetes senoidais do dólar, B, e aí está. Versão pixelizada do nosso grande tipo. Isso é diferente de simplesmente desenhar algo pequeno e depois aumentar a escala para vê-lo pixelizado, porque agora podemos desenhar qualquer forma que quisermos para Por exemplo, vamos ver como isso fica com círculos em vez de quadrados. Caminho inicial do ponto de contexto, arco do ponto de contato 00 célula, zero ponto matemático pi vezes dois e preenchimento do ponto de contato, isso não está certo. Os rádios precisam ser metade da célula. Agora, está quase certo. Podemos ver um pouco do emergir aqui à direita e na parte inferior da grade. E isso porque o círculo é desenhado a partir do centro da célula, mas estamos apenas traduzindo para o canto superior esquerdo de cada célula Então, precisamos adicionar outra tradução para ver vezes 0,5 e ver vezes 0,5. Agora, esse alinhamento está correto. Estamos chegando lá. A verdadeira reviravolta vem em seguida 22. Aprenda sobre os glifos: Como nesta lista, vamos terminar nosso esboço Em vez de desenhar quadrados ou círculos, vamos desenhar outros glifos para cada pixel da nossa tela de texto Então, isso vai ser um pouco meta. Vamos desenhar pequenos glifos para formar um grande glifo. Em vez de arco, queremos contextos, campo de pontos, texto, texto 00. Essa pequena letra preta não é o que queremos. Então, vamos definir o plano de fundo como preto. Antes do loop, defina o estilo do campo de pontos de contexto para preto e desenhe um retângulo grande, preencha toda a tela Se você ainda quiser ver o pequeno tipo Canvas na parte superior, basta movê-lo após o preenchimento. Agora, talvez pudéssemos ter glifos maiores aqui. Vamos alterar o tamanho da fonte para o dobro do tamanho da célula. Fonte de pontos de contexto. Sinal de dólar. Venda a segunda vez. PX e família de fontes. Eu não quero desenhar o mesmo glifo o tempo todo. Eu quero um glifo diferente com base no brilho do pixel Por exemplo, poderíamos desenhar um ponto para cinza escuro, um traço para cinza médio Então, vamos criar uma nova variável chamada glyph e configurá-la para uma função que vamos criar em seguida chamada get E aqui, em vez de textos, vamos usar o Glyph Precisamos passar o brilho do pixel para obter o Glip e não precisamos de todos os nossos canais, já que você está desenhando uma letra branca e dois tipos de Canvas Qualquer um dos canais de cores que faremos. Eu só vou usar o canal vermelho. E, de fato, podemos usar o branco para desenhar esses glifos agora. Não queremos mais o cinza escuro. Você pode simplesmente definir o estilo do campo de pontos de contexto como branco. Agora vamos escrever a função get glyph. Depois de obter o glifo como parâmetro, obtemos o valor que vou chamar de V, e sabemos que V será um número de 0 a 255 porque esse é o intervalo do Dependendo do brilho do pixel, quero retornar glifos diferentes Então, direi que se V for menor que 50, retorne uma string vazia I V seja menor que 100, retorne um ponto. Nesse caso, não precisamos usar ou ver porque, assim que uma condição é atendida, já retornamos um valor e nem mesmo verificamos as outras condicionais. Então, pegamos um valor de 0 a 49. E isso nós pegamos 50-99. Duplique isso Se V for menor que 150, retorne um traço. E se V for menor que 200, retorne um sinal de mais. E se nenhuma dessas condições acima for atendida, significa que o pixel é muito brilhante, então podemos retornar nossa variável de texto original Podemos ver os pontos e os traços aqui, mas isso é um pouco estranho Acho que temos que ajustar a origem e o alinhamento novamente. Somos desenhados do centro da célula, mas você deve se lembrar que o texto é desenhado na parte inferior e alinhado à esquerda Preciso alinhá-lo no centro novamente. Desta vez, não precisamos de muita precisão se isso for suficiente para usar uma linha média baseada em texto. Alinhamento de pontos de texto Isso está começando a parecer interessante, mas o mesmo glifo repetido o tempo todo é um pouco O valor padrão aqui pode ser um glifo aleatório. Podemos fazer isso em duas etapas. Primeiro, escrevemos uma string com os glifos que trabalhamos. Glifos de custo, sinal de igualdade de sublinhado, espaço e barra frontal Em seguida, convertemos isso em uma matriz usando um método de uma string chamada split. Isso é útil quando queremos cuspir algum texto toda vez que encontramos um espaço ou uma vírgula Por exemplo, no nosso caso, queremos cuspir cada caractere Portanto, nosso delmeter será uma string vazia e, em seguida, escolherá aleatoriamente dessa matriz Podemos usar nosso amigo aleatoriamente do Canvas sketch, ETL novamente. Ele tem uma função chamada pick, que representa um elemento aleatório de uma matriz Então, vamos importar um aleatório mais uma vez do esboço do Canvas, etLH Em seguida, retorne o pico de pontos aleatório e passe os glifos da matriz Ok, glifos aleatórios, mas também podemos torná-los mais aleatórios usando tamanhos de fonte diferentes Eu quero dar aos glifos uma chance de dez por cento de serem muito maiores Duplique essa linha aqui e adicione a condicional na frente Se o ponto matemático aleatório for menor que 0,1, defina o tamanho da fonte para seis vezes o tamanho da célula. Podemos parar de desenhar a tela de texto pequeno aqui em cima e talvez também tornar essa fonte um pouco maior. Então, parece mais um esboço, digamos, chamadas vezes 1,2 e depois experimente com tudo Experimente diferentes glifos. Você pode até mesmo retornar algumas palavras aqui. Cabe a você experimentar outras variações a partir de agora. Até aqui, terminamos nossa primeira parte das aulas. Agora vamos descobrir coisas mais avançadas. 23. Desenhando retângulo: Vamos começar agora nossa seção avançada do curso. Vamos aprender nesta seção muitas técnicas diferentes, mais avançadas. No final desta lista, você terá algo parecido com isso Se você estiver acompanhando o curso usando um editor on-line, você pode acessar o modelo que criamos juntos na lição anterior e fazer uma cópia dele para esse novo esboço E garfo esse em vez disso. Se você estiver acompanhando o curso com uma configuração off-line, acesse o terminal e encontre a pasta na qual deseja salvar seus esboços meus são esboços de barra de documentos Java Visual Splash Quando você estiver na pasta certa, digite Canvas sketch, sketch skew, du Aqui estamos executando o comando Canvas sketch e passando um arquivo JavaScript chamado sketch skew, que ainda não existe Então, usamos os novos parâmetros para contar um esboço ao Canvas. Queremos que esse arquivo seja criado. E também podemos usar o Dd Open apenas por conveniência. É aberta uma nova guia e o navegador com um esboço recém-criado Agora, se abrirmos os QGs do sketch no editor e dividirmos a janela dessa forma, teremos uma visão muito semelhante tanto para a configuração online quanto para a offline A primeira coisa que gosto de fazer aqui é alterar a dimensão do esboço de 1080 por 1080 Gosto de trabalhar com essa dimensão. É conveniente postar no Instagram e acabei de adquirir o hábito de fazer isso. Em seguida, vamos desenhar um retângulo no meio da tela Vamos criar quatro variáveis para o retângulo, X, Y, W e H. Observe que eu as estou criando dentro da função de esboço, mas fora da função de renderização porque elas só precisam ser declaradas Nem sempre que o esboço é renderizado. Então, dentro da função de renderização, podemos definir seus valores. Vou usar os parâmetros de largura e altura que são passados aqui e definir X como metade da largura da tela e definir Y como metade da altura. Então W até 60% da largura e H dois 10% da altura. Agora, para desenhar o retângulo, primeiro definimos uma cor de campo ou uma cor de traçado Eu quero desenhar apenas um esboço. Então, vou definir uma cor de traçado usando uma propriedade de um contexto chamada estilo de traçado. Portanto, contextualize o estilo de traçado de pontos igual ao azul. E então, para realmente desenhar o retângulo, precisamos de uma função chamada stroKrpt São necessários quatro parâmetros: XY, largura e altura, exatamente o que temos aqui. Portanto, o traçado de pontos do contexto reaja X, Y, W e depois salve o fogo Isso desenha um retângulo começando do meio da tela e indo até algum lugar fora da tela Isso não é exatamente o que eu tinha em mente, então preciso fazer alguns ajustes. Quero desenhar o retângulo do centro, não do canto superior esquerdo Então, eu quero substituir esse X e Y aqui por menos metade da largura e menos metade da altura Ok, agora o ponto de ancoragem está no centro do retângulo, mas não estamos mais usando nossos X e Y. Poderíamos adicioná-los diretamente à função stroke wrect, mas há uma maneira mais simples de fazer isso usando uma transformação de fazer isso usando uma transformação Podemos traduzir todo o contexto para X e Y e depois começar a nos afogar a partir daqui Eu continuo trocando de guia aqui para mostrar a referência da API, mas não vou fazer isso toda vez que vemos algo novo O melhor é continuar usando a API. E se você precisar de mais detalhes sobre qualquer um desses métodos, recomendo que mantenha esta página aberta e dê uma olhada nas coisas em seu próprio ritmo. Agora, de volta para traduzir no contexto. Usamos Context dot translate X e Y. Sempre que transformamos o contexto, é uma boa prática restaurá-lo ao estado anterior para que não estraguemos nenhum comando desenhado que possa vir após a Para fazer isso, primeiro chamamos Context Dot save para salvar o estado atual. E então, quando terminamos, chamamos de restauração de pontos de contexto. Como eu disse, essa é uma boa prática. Devemos nos acostumar a fazer transformações em blocos como esse. Isso foi fácil. Agora vamos desenhar o mesmo retângulo, mas de uma maneira diferente Vamos abrir o método de destruição de traços e desenhar a forma ponto por ponto Começamos com Context dot start path e, em seguida, movemos para o canto superior esquerdo do retângulo com um movimento dois menos a metade da largura e menos a metade Imagine que estamos movendo uma caneta virtual para essa posição e, em seguida, desenhamos uma linha a partir daí para o próximo canto do retângulo como uma metade positiva da largura e ainda a metade negativa da Ainda não terminamos, mas se você quiser ver como isso se parece, podemos chamar Context Dot stroke. Agora, de volta ao afogamento. Precisamos de uma linha de onde deixamos a caneta virtual até metade de W e metade e outra até menos metade de W e metade para fechar o retângulo, podemos chamar de contexto ponto de fechamento de caminho e temos nosso retângulo A diferença é que desta vez estamos desenhando ponto por ponto, que significa que podemos mover esse ponto para qualquer lugar que quisermos. Vamos ajustar nosso código um pouco mais. Talvez seja mais fácil pensar na coordenada do retângulo a partir de sua posição superior esquerda e em toda sua largura e altura, em vez de todas essas meias-dimensões aqui Podemos usar outro contexto para traduzir para menos metade de W e menos metade de H e, em seguida, desenhar de zero, zero a zero, depois H e para zero H. A saída visual não mudou, mas o código parece mais nativo Esse era apenas um retângulo que é mais comum na próxima lição 24. Desenhando um retângulo inclinado: Nosso objetivo é desenhar um retângulo scud. Precisamos mover o canto de acordo com um ângulo e, para isso, precisamos de um pouco de trigonometria Vamos esconder nosso retângulo por um momento e comentar esse trecho de código Para explicar a próxima parte, quero desenhar apenas uma única linha, começando com o caminho inicial do contexto, depois o movimento do contexto para o início da linha em 00 e, em seguida, a linha até, digamos, 200 e zero. Vamos colocar 00 de volta no meio da tela e comentá-la no segundo contexto que traduzimos. Eu quero que você imagine essa linha dentro do círculo. O centro do círculo está em 00. E o raio do círculo é 200. Se o círculo for um relógio, a linha será apontada às 3:00. O que precisaríamos fazer para levar essa linha às 4:00? Onde estaria o final nas posições X e Y? Já temos o raio do círculo. O que precisamos é de um ângulo, e podemos assumir que 3:00 está a zero graus, quatro estaria às 35 às 66 horas estaria a 90 graus e assim por diante Então, vamos escolher 30 graus para as 4:00. Para encontrar a querciina, coordenar X e Y com o raio e o ângulo, a fórmula é a seguinte X é o cosseno do ângulo vezes o raio, então o ponto matemático, o ângulo do cosseno vezes o raio e Y é o seno do ângulo, o Podemos declarar uma variável para essas palavras, basta digitar. Vamos fazer isso aqui em cima junto com as outras variáveis. E então defina o raio para 200 e o ângulo para 30. Agora 30 é o valor em graus, mas o cosseno de pontos matemáticos espera um valor em brilho Então, precisamos converter isso primeiro. Poderíamos escrever uma função para converter entre graus e radiância, mas essa é uma operação muito comum, e há uma biblioteca que podemos usar para isso A que vou sugerir aqui é uma biblioteca complementar para Canvas sketch chamada Canvas Sketch UTL Ele tem várias funções utilitárias para matemática, cores aleatórias e geometria Já sabemos como fazer isso na primeira seção da aula. Estamos apenas revisitando isso. Agora, vamos usar alguns ao longo do curso, por enquanto, aquele em que estamos interessados, de grau a vermelho, que faz parte do objeto matemático Esboço em tela TL math. Agora podemos converter nosso ângulo brilho usando Matt dec para vermelho Agora só precisamos usar os valores X e Y que calculamos aqui. E aqui está nossa linha agora apontando para 4:00. O valor real de X e Y são números de 0 a 200. Não faria muito sentido tentar encontrar essa coordenada sem usar ângulos É mais fácil pensar nessas linhas horizontais como zero graus e nessa diagonal como 45 graus. Isso é como 90 graus e assim por diante. Agora que sabemos disso, vamos voltar ao nosso retângulo em vez de usar essas variáveis X e Y. Vamos manter isso organizado e criar novas variáveis chamadas Rx e E, na verdade, não precisamos raio porque vamos usar W, que é a largura do retângulo ângulo pode ficar como está, e então x será o cosseno do ângulo vezes W e RY seno do ângulo vezes W. Essa linha pode ir e podemos movê-la e então x será o cosseno do ângulo vezes W e RY seno do ângulo vezes W. Essa linha acima do código Nós comentamos anteriormente. Essa tradução de contexto agora se torna R x vezes -0,5 e, entre parênteses, RY mais O segundo movimento pode ficar em 00. E a primeira linha agora vai para RX e RY, a segunda para RX e RY plus e a terceira pode ficar em zero e H. Agora, salvamos isso e há um retângulo de quatro scud Também podemos experimentá-lo com outros ângulos. A última coisa a fazer aqui é converter o que acabamos de fazer em uma função. Vou criar um na parte inferior do arquivo logo após a função de esboço e chamá-lo de drawSkdrt Para o parâmetro, podemos passá-los um por um ou passar um único como um objeto com várias propriedades. Eu vou continuar com isso. Portanto, colchetes e propriedades serão contexto, W H e graus O contexto é onde somos desenhados. W e H são a largura e a altura do retângulo e diminuem o ângulo de sco e expressam em graus, não em brilho Podemos dar a eles valores padrão como 600 para a largura, 200 para a altura e -45 para o ângulo Agora podemos simplesmente mover todo esse pedaço de código dentro da função esperando essa linha com o estilo de traçado que pode ficar aqui Como esse bloco agora está fora do escopo da função de esboço, as variáveis precisam ser declaradas novamente. Podemos usar const desta vez porque eles não mudam dentro da função E como você está traduzindo o contexto, lembre-se de que eu disse que é uma boa prática sempre restaurar o estado do contexto depois de transformá-lo Portanto, precisamos envolver esse bloco com o cofre Context Dot e o restaurador de pontos de contexto Vamos ver se isso está funcionando e chamar Drous Code rect, passando o contexto como parâmetro e deixando os outros com seu valor padrão E então chamando o traçado Context Dot. Aí está de novo. Nesta escuta, aprendemos como importar e instalar uma biblioteca externa, como encontrar coordenadas cartesianas com base em um ângulo e raio e como desenhar um retângulo Na próxima lista, vamos desenhar um hub. 25. Aprenda a criar distribuição: Agora que temos uma função para desenhar um retângulo de esquadrão, vamos desenhar vários deles. Essa parte é fácil. Tudo o que precisamos é de um loop. Podemos armazenar o número de formas que queremos em uma variável. Chame-o de NAM e defina-o para 20. Em seguida, enrolamos um laço de quatro voltas ao redor do carvão para desenhar um retângulo. Pois se I é igual a zero, I é menor que um I mais O resultado são 20 retângulos desenhados um em cima do outro. Podemos espalhá-los pela tela usando uma posição aleatória. E para isso, podemos usar outro módulo do Canvas Sketch ut Já o estilizamos, então só precisamos importá-lo, então só precisamos importá-lo, hospedar aleatoriamente é igual a exigir o Canvas sketch Utl Na documentação, novamente, vemos várias funções úteis assim como fizemos com o módulo matemático O que nos interessa é o intervalo de pontos aleatório. Passamos um valor mínimo e um valor máximo e recuperamos um número aleatório entre eles. Podemos usar isso para alterar o X e o Y para cada retângulo. X pode ser qualquer número entre zero e ponderado. E por quê? Um número entre zero e altura? Por que não fazer o mesmo com a dimensão do retângulo? W pode ser 200-600 e H 40-200. O ângulo é o mesmo para todos eles, então podemos armazená-lo em uma variável aqui em cima e agora passar esses valores como parâmetro. Isso está se tornando mais interessante, mas há um problema com essa abordagem. Ter essas chamadas aleatórias aqui dentro da função de renderização significa que toda vez que o esboço é renderizado, os retângulos ficam diferentes. Isso é realmente uma coisa boa. Queremos esse elemento de aleatoriedade, mas também queremos ter controle sobre ele Digamos que pressionamos Control S ou Command S para salvar esse quadro antes de fazer isso, vamos escolher um retângulo que possamos reconhecer posteriormente. Eu diria que esse. Agora estou pressionando o Control S e vou baixar a pasta e verificar o quadro de saída Podemos ver que nosso retângulo de referência não está aqui. A imagem saiu diferente do que estávamos vendo na tela, e isso porque a função de renderização foi chamada durante a captura do quadro e acabou usando números aleatórios completamente diferentes O mesmo aconteceria se animássemos o esboço adicionando animated true ao cenário Agora, a função de renderização é executada em todos os quadros que criam essa bagunça de desconexão que estamos vendo Há duas maneiras de resolver esse problema Vamos começar com uma delas e abordaremos a outra mais tarde. Podemos armazenar as propriedades do retângulo fora da função de renderização Vamos criar uma nova matriz chamada rects e vamos preenchê-la com objetos que representarão os dados do nosso retângulo X, Y, W e H são apenas dados. Podemos copiar o início do nosso loop onde definimos o valor dessas variáveis e trazê-lo até aqui. Em seguida, vamos inserir na matriz reg, um novo objeto que contém essas propriedades Então rex dot push, que está dentro dos colchetes Curl, X, Y, W e H. Ainda não terminamos. Mas se executarmos isso, obteremos um erro no console que diz que a largura não está definida. Temos acesso às mesmas propriedades da função de renderização aqui dentro da função de esboço Só precisamos declará-los. Então, copie esse parâmetro e cole-o aqui. Agora, precisamos usar nossa matriz Rex. Em vez disso, não precisamos mais disso para o loop aqui, pois temos uma matriz de objetos que podemos usar para cada loop, que é uma função da matriz, então rex dot para cada um. E o primeiro parâmetro é o item sobre o qual estamos iterando, podemos chamá-lo de rect Agora, poderíamos substituir esses valores pelo reto X ou pelo ponto reto Y, etc. Existe uma forma inter pela qual não precisaremos mudar nada do que tínhamos antes Isso é destruir o objeto direto. Fazemos isso com colchetes const open coll, todas as propriedades que queremos destruir e, em seguida, fechar colchetes é igual a rect. O resto pode ficar como está, e nosso esboço está funcionando novamente. A diferença agora é que as chamadas aleatórias acontecem somente uma vez dentro da função sketch Portanto, todas as propriedades dos retângulos permanecem as mesmas para cada chamada da função de renderização Podemos testar isso definindo animate como verdadeiro. Seu esboço agora está animado, mas nada se move porque as posições e os tamanhos permanecem os mesmos em cada quadro É isso que queremos porque agora mesmo que a composição seja aleatória, se encontrarmos uma que gostemos, podemos salvá-la com Control ou Command S, e a saída será a mesma Como estamos vendo na tela aqui. Agora sabemos como usar valores aleatórios para alterar a composição quando atualizamos a página e também sabemos onde usá-los no código Na próxima escuta, adicionaremos algumas cores. 26. Aprenda sobre como adicionar cores: Já estamos randomizando posições e tamanhos, e também podemos ter cores aleatórias Vamos ver como fazer isso de forma estruturada. Podemos começar adicionando propriedades de cor ao objeto destruído Estou declarando duas novas variáveis chamadas fill and stroke. Por enquanto, podemos definir o campo como azul e o traçado como preto. Em seguida, estruturamos essas propriedades e definimos o estilo de traçado Context Dot para traçar e duplicar a linha, alterá-lo para o estilo de preenchimento e configurá-lo para preenchimento Depois da chamada para contextualizar Dot stroke, chamamos Context dot fill. E agora temos vários retângulos azuis. Estamos randomizando posições e tamanhos. Então, por que não randomizamos as cores também? A propriedade do estilo do campo, exceto cor nomeada, como a que estamos usando agora. Mas isso também pode estar em forma hexadecimal. Também pode ser uma correção RB, como RGB 002 55 ou o prefixo RGBA em que o último valor é a opacidade 0-1 Esses números são mais fáceis de randomizar do que hexadecimais ou nomes. Então, vamos nos ater a esse formulário. Primeiro, precisamos mudar a string de códigos únicos para beptis para que possamos usar variáveis dentro dela Agora podemos dizer que queremos que um canal azul do GBA seja um número aleatório de 0 a O próximo passo natural é também randomizar os canais vermelho e verde Então, vamos fazer isso. copiar a mesma expressão e colá-la duas vezes, garantindo que mantenhamos o coma entre elas. Agora, as cores são um tópico subjetivo. Você pode gostar do resultado, mas, na minha opinião, isso não parece ótimo. Não acho que a pura aleatoriedade funcione quando se trata de cores Há 16 milhões de valores possíveis aqui, e isso é muita escolha. É melhor reduzir essas opções para apenas algumas cores que gostamos e que achamos que funcionam bem juntas Existem alguns blocos de cores famosos que podemos usar, como riso e colors Que é uma lista de cores populares para impressoras gráficas Rizo A lista que vemos aqui também está disponível no JSofma, o que é perfeito para Está empacotado como uma biblioteca chamada Rizo Colors, e podemos instalá-lo com o MPM Assim como fizemos com outras bibliotecas, mais uma vez, se você for editor online, vá até o campo de dependência e insira as cores do Rizo Se você estiver usando o terminal, pressione Control C para interromper o processo e inserir PMI Rizo Em seguida, seta para cima para executar nosso esboço novamente. Agora podemos importar cores de refrigerantes a partir de cores de refrigerantes e, para escolher cores aleatórias dessa lista, podemos usar outra função do modelo aleatório chamada Ele escolhe um valor aleatório de uma determinada matriz. Portanto, o preenchimento é igual ao ponto aleatório P, portanto, cores e os mesmos quatro traços O valor de retorno é um objeto, portanto, se quisermos usá-lo como estilo de campo ou estilo de traçado, precisamos especificar isso. Queremos a propriedade hexadecimal. Agora isso parece melhor? Na minha opinião, ainda não. Ainda temos muitas opções, muitas cores conflitantes Precisamos de um subconjunto ainda menor de cores. Acho que ficaríamos bem com apenas três. Então, vou criar outra matriz chamada cores destruídas e preenchê-la com três cores riso aleatórias Então, em vez de definir o estilo do campo para escolher aleatoriamente de todo o conjunto de cores do riso, vou defini-lo como bicado a partir de cores destruídas Ok, agora eu acho que isso está começando a ficar bem. Podemos tornar o traçado muito mais espesso para que possamos vê-lo corretamente com uma linha de pontos de contexto Igual a dez, também podemos alterar a cor de fundo. Vamos criar uma nova variável chamada BAG color e configurá-la novamente para um ponto aleatório p, recolorir o ponto x. E aqui, em vez de um estilo de campo branco, usamos a cor BG Bem, isso não é ótimo. Talvez fique melhor se abrirmos a opção para a cor de fundo e escolhermos todo o conjunto de cores do resultado. Isso é melhor. Agora vamos desenhar algumas sombras Podemos usar uma propriedade do contexto para D chamada cor da sombra. Antes de chamar preenchimento e traçado, definimos a cor da sombra do ponto de contexto e, por enquanto, vou defini-la como preta. Em seguida, a sombra de pontos de contexto do conjunto X, que vou definir como menos dez, e a sombra de pontos de contexto do conjunto Y, que será 20 Desde então, temos sombras duplas, e isso porque elas estão sendo desenhadas tanto para preenchimento quanto para traçado Então, vamos reverter a cor da sombra para nula após o preenchimento e antes Esse é um efeito interessante. Talvez possamos tornar as sombras um pouco mais suaves com uma opacidade menor e usar LGB A 0,0, 0,0 e LGB Está tudo bem. Mas em vez de ter o mesmo tipo de cinza para todas as sombras, eu quero que elas sejam uma versão um pouco mais escura da cor do campo Em outras palavras, quero pegar a cor do campo e reduzir seu brilho ou luminosidade. A melhor maneira de fazer isso é converter a cor de LGB em outro espaço de cores chamado HSL, que é t para saturação Aqueles que usam o Photoshop ou outro software de edição de imagens provavelmente já estão familiarizados com ele A operação de conversão entre RGB e HSL não é das Mas, felizmente para nós, existe um modelo Oma sketch rooter, que podemos usar O método que queremos agora é offset HSL. Lembre-se de que a ferramenta de esboço COVA já está disponível, então só precisamos transmitir cores com uma cor por Kc igual à cor de barra da ferramenta de esboço CVA. Agora podemos declarar uma nova variável chamada Shadow Color. E defina-o para HSL com deslocamento de pontos de cor. O primeiro parâmetro é a cor de entrada que vai cair. A segunda é o quanto queremos compensar a propriedade U, que será zero, depois a saturação do conjunto, que também é E, finalmente, a propriedade luminosa , que é o que queremos Queremos uma versão mais escura do preenchimento. Então, isso vai ser -20. Agora, para usar a cor da sombra, precisamos converter o valor novamente uma intensidade de estilo com um estilo de ponto colorido, e a entrada pode ser qualquer propriedade do objeto colorido resultante. Vou usar o ponto de cor de sombra RGBA. Começamos perdendo o valor Alpha no processo, mas podemos recuperá-lo facilmente editando o último elemento da matriz RGBA e configurando-o de volta para 0,5 Deixo que você decida se prefere sombras como essa ou a versão simples de 50% preta Meu objetivo aqui foi mostrar como manipular o valor da cor com a cor UTL É mais um para o nosso cinto de utilidades. Um efeito interessante que eu coloquei em jogo com o esboço foi desenhar outro contorno, um mais fino em cima da Portanto, defina a linha de contexto com 22, estilo de traçado como preto e chame o traçado novamente. Já que você está falando sobre cores, há um conceito a menos que eu quero apresentar aqui, que é o modo planejado. Na API Canvas, elas são chamadas de operação composta global O valor padrão é uma fonte acima, o que significa que o próximo comando desenhado ou a fonte será sobre o que já está lá no destino. Em outras palavras, o que for retirado primeiro está na parte inferior e o que for retirado depois vai para o topo. Algumas das operações possíveis, novamente, podem ser familiares para aqueles que usam software de edição de imagem como sobreposição, por exemplo Vamos usá-lo em nosso esboço. Em qualquer lugar antes de chamarmos fill, definimos a operação de composição global de pontos de contexto como sobreposição O esboço da cena parece ter desaparecido. Portanto, antes de desenhá-la, precisamos redefinir a operação composta de volta à fonte Parece bom, mas acho que ficaria melhor se tivéssemos alguns retângulos misturados com sobreposição e outros apenas com sobreposição e outros apenas com Assim, podemos criar uma nova propriedade para nosso destruído chamada blend e atribuir ela um valor que depende um número aleatório maior que 0,5 Se for, ele retorna sobreposição ou então retorna a fonte Nós o adicionamos ao objeto com estruturas dentro da função de renderização e aqui usamos blend em vez de overlay Vamos aumentar o número de retângulos para 40, torná-los maiores com W entre 600 e largura E agora talvez ainda haja muitas cores. Então, vou excluir uma dessas linhas de cores vermelhas e manter apenas duas. Ok, eu gosto mais disso. Espero que você goste também. Caso contrário, sinta-se à vontade para experimentar os valores, talvez alterar a cor das sombras, alterar o modo de mesclagem, apenas para brincar com um esboço e, na próxima lição, finalizaremos as coisas com uma máscara de recorte 27. Criando máscara de recorte: Gosto do padrão criado por esses retângulos, mas acho que falta algo e essa é uma oportunidade de examinar mais alguns tópicos Uma ideia que tive ao experimentar esse esboço foi enquadrar esse retângulo dentro Podemos começar desenhando um triângulo. Na parte inferior da função de renderização, depois de desenhar todos os retângulos, iniciamos um novo bloco de código com um salvamento de pontos de contexto e uma restauração de pontos de contexto Vamos mover a caneta para o centro da tela com um contexto traduzido W vezes 0,5 e altura vezes 0,5. Em seguida, começamos a desenhar uma forma com o ponto de contexto, iniciar o caminho, mover para cima. Para X zero e Y -300, desenhe uma linha para X 300 e Y 200 e outra linha para -300 e Y para Em seguida, feche o caminho, defina a linha com ela como dez, defina o estilo do traçado como preto e, finalmente, chame o traçado para desenhar a forma. E esse é o nosso grande triângulo. Agora, vamos mover todo esse bloco de código antes do loop em que desenhamos os retângulos E aqui vamos chamar context dot clip. Tudo o que é desenhado após um clipe aparecer dentro do triângulo. Em outras palavras, o triângulo está agindo como uma máscara de recorte A máscara de recorte faz parte do estado do contexto. Então, quando restauramos o estado, a máscara desaparece. Mas, nesse caso, também traduzimos o contexto para o centro da tela. Portanto, os retângulos estão todos deslocados e não vemos muitos deles Como queremos a máscara e não podemos restaurar o contexto, a única opção é traduzi-la de volta. Com o contexto, traduza largura vezes -0,5 e altura vezes 0,5 Ok, agora estamos chegando aqui, mas nosso triângulo não é muito simétrico Quero mostrar outro método de desenhá-lo, que podemos usar para desenhar qualquer polígono regular com qualquer número de lados Vamos declarar uma nova função chamada draw polygon. E o parâmetro será um objeto com o contexto de propriedades, raio com um valor padrão de 100 e lados com um valor padrão de três Agora, se imaginarmos um triângulo que se encaixa perfeitamente dentro do círculo, podemos dizer que ele divide o círculo em três fatias iguais O ângulo de cada uma dessas fatias é a circunferência total dividida pelo número de lados Depois de conhecermos o ângulo e o tamanho da fatia, podemos encontrar as bordas do polígono Vamos começar com uma variável chamada slice. Que é o ponto matemático Pi vezes dois dividido pelos lados. Em seguida, iniciamos uma nova forma com um ponto de contexto, o caminho inicial e, em seguida, o ponto de contexto move dois X zero e Y menos o raio Então, precisamos de quatro voltas começando em um e iterando ao longo do número de lados Aqui, precisamos de um ângulo baseado em I para que possamos declarar uma nova variável para ele Vou chamá-lo de Theta e configurá-lo para I time slice. Em seguida, podemos desenhar as linhas da nossa forma com um ponto de contexto, a linha dois. X será o cosseno do raio de Heta e o seno y do raio de Heta Se você se lembra do ponteiro do relógio que vimos na primeira lição, o princípio aqui é o mesmo Então, fora do circuito, fechamos o caminho. Agora podemos substituir nossa seiva de bacalhau extraída aqui por essa nova função Então, desenhe um polígono e nós o passamos no contexto. Raio, digamos, 400 e tamanho três. Bem, algo não está certo, e isso é porque eu decidi começar a desenhar a forma de cima e essa não é a posição de zero grau. Como você deve se lembrar, o grau zero é às 3:00, mas eu quero usar o 12:00 no O que precisamos fazer é subtrair 90 graus de Heta ou menos o ponto matemático pi vezes 0,5. Isso é melhor. Vamos tentar passar em cinco lados. Ou seis. Qualquer número maior que três funcionaria aqui. Agora, eu não gosto disso. O traçado do polígono aparece atrás do retângulo, então preciso separar o clipe e a máscara do contorno do polígono , o que significa que preciso chamar draw polygon duas vezes, uma com o clipe de pontos de contexto e outra com o traçado de pontos de contexto, clipe de pontos de contexto e outra com o traçado de pontos de contexto pois ambos os polígonos terão pois Já aprendemos que a melhor forma de lidar com esse cenário é armazenar as propriedades em um objeto. Então, vamos declarar um novo objeto aqui no topo chamado máscara As propriedades serão o raio, que eu quero definir para 40% do casamento e depois os lados, que serão três E já que você está criando um objeto, por que não armazenar também as propriedades X e Y? Então X casado vezes 0,5 e Y altura vezes 0,5. Agora, antes de desenharmos o triângulo, podemos traduzir para mascarar o ponto X e mascarar o ponto Y e, em seguida, desenhar o polígono passando pelo raio do ponto da máscara e pelo tamanho do ponto da máscara E então só precisamos da chamada para contextualizar o clipe de pontos. Essa outra linha está aqui que podemos cortar e vamos movê-la para a parte inferior da função. Pouco antes de fazermos isso dentro do loop retangular, também podemos usar o objeto de máscara para essa segunda tradução Desta vez, para menos mascarar o ponto x e menos mascarar o ponto. Agora, no final da função, após o loop, é onde estamos desenhando o contorno do polígono Para uma boa prática, começamos com o salvamento de pontos de contexto e a restauração de pontos de contexto e , em seguida, traduzimos o contexto novamente para corresponder ao ponto g e ao ponto y. Cole as linhas que copiamos acima e aqui também podemos copiar a chamada para desenhar o polígono E aí está nosso esboço. Agora, aparecendo na frente dos retângulos, o triângulo não está realmente centralizado verticalmente, e existem algumas maneiras de Mas acho que podemos nos safar com um truque rápido e simplesmente alterar a propriedade Y da máscara para alto vezes 0,58 Talvez a cor do contorno também possa vir das cores retas e ter o dobro da espessura da linha 20, e poderíamos até usar outro modo de mesclagem Desta vez, vou continuar com a operação global de compostos. Pássaro colorido. Com esse modo de mesclagem, acho que seria melhor se os contornos estivessem dentro do triângulo para que pudéssemos alterar o raio para mascarar o raio dos pontos Menos a linha de pontos do contexto W. Ok, isso cria algumas variações interessantes Este é o nosso esboço, mas há mais um tópico que quero abordar antes de fecharmos este, que é a semente aleatória 28. Faça uma semente aleatória: Você deve se lembrar de nossa aula sobre distribuição, que eu disse que havia duas maneiras de ter algum controle sobre valores aleatórios. A primeira era criá-los uma vez e armazená-los. Agora vamos dar uma olhada no segundo, que é definido em uma semente aleatória. O conceito aqui é que, depois definir uma semente para sua função aleatória, todas as chamadas subsequentes para random sempre retornarão a mesma sequência de valores. Existe um método chamado set SED parênteses. O modelo aleatório do Canvas sketch UTL vamos usá-lo aqui na primeira linha da função de esboço Vou definir minha semente para 555, depois o console registrar um valor aleatório três vezes seguidas e abrir o console, e o número que estou vendo aqui deve ser o mesmo número que você está vendo na sua máquina, independentemente de você estar no PC ou no MC usando a configuração offline ou a configuração online Na verdade, se você esboçar tiver o mesmo número de chamadas aleatórias que o meu, e na mesma ordem, deverá ser vista exatamente a mesma saída visual E a semente não precisa ser um número. Pode ser força. Vamos tentar com um parafuso. Mesmo quando atualizamos a página, o resultado ainda é o mesmo Portanto, se você conhece a semente, pode reproduzir o mesmo esboço constantemente toda vez que executar Se você ainda quiser obter variações aleatórias, ao atualizar a página, você pode fazer com que a semente em si seja um valor aleatório Vamos secretar uma variável chamada SID e configurá-la para datar um ponto agora Essa é a hora atual em milissegundos. Portanto, esse número sempre será diferente. Uma alternativa é usar outro método do Canvas sketch Uto chamado Get random set Se você encontrou o resultado que você gosta, pode registrar o valor do assento e anotá-lo em algum lugar. Ou, se você estiver usando a configuração off-line, poderá alterar o nome do arquivo salvo ao pressionar Control S. Vá até a configuração e use o nome seed. Clique no navegador, pressione Control S ou Command S para salvar o esboço e você poderá copiar a semente do nome do arquivo Cole-o aqui para recriar exatamente o mesmo slide de esboço. É isso para o nosso primeiro esboço. O resultado ainda é bem simples, mas espero que você concorde que ele nos permitiu abordar muitos tópicos que podem ser úteis no futuro quando você estiver criando algo que parece completamente diferente. E a seguir, escute, vamos começar um novo esboço. 29. Crie uma curva qudrática: O esboço anterior foi divertido. Aprendemos muito com isso, mas agora vamos fazer algo diferente e aprender uma nova técnica. Como desenhar curvas dinâmicas. Antes de tudo, precisamos começar um novo esboço. Se você estiver usando stack builds ou for chamado de Sandbox, basta bifurcar o modelo padrão como você E se você estiver executando coisas a partir do terminal, pressione Control C para interromper o processo atual e inserir as curvas de traço do Canvas sketch, a introdução e, em seguida, o novo traço introdução e, em Em seguida, abra o arquivo JavaScript no editor e altere a dimensão 1080 por 1080, assim como fizemos em nosso primeiro Antes de começarmos a trabalhar nos visuais que queremos criar, quero usar essa introdução para falar sobre curvas Podemos começar desenhando uma linha reta. Nós inserimos o ponto de partida do contexto Path. Em seguida, o ponto de contexto move dois. Ainda não vou usar nenhuma transformação de contexto. Vamos manter a coordenada a partir de 00 no canto superior esquerdo Então, o ponto de contexto move dois, X 200 e Y 540 Em seguida, contextualize a linha de pontos dois, 880 e ainda Y 540. E, finalmente, contextualize o traço. Então, aqui começamos uma nova forma, movemos uma caneta virtual até esse ponto e, em seguida, dissemos à API Capace que queríamos pintar o pixel daqui até aqui em uma linha reta A função que calcula quais pixels precisam ser pintados está oculta para nós. É parte da implementação da API no navegador. Portanto, a linha dois é um método de conveniência. Para desenhar curvas, temos dois desses métodos: curva mais ocupada do que curva não Com a curva de Bezier, temos dois pontos de controle, e com a curva quádrica, temos Vamos desenhar uma curva quádrica a partir do mesmo ponto em que começamos antes, 200 e 540 Vamos digitar a curva quádrica de pontos de contexto dois. Os dois primeiros argumentos são X e Y do ponto de controle, e os dois últimos são X e Y do ponto de entrada ou do ponto final Podemos manter o endpoint onde estava em 800 8.540. Agora, digamos que queremos controlar um ponto por aqui, que eu diria que está em torno de X 400 e Y 300. Agora temos uma linha que está se misturando em direção a essa área. Podemos imaginar um ponto por aqui. Na verdade, devemos desenhar esses pontos para que possamos vê-los. E poderíamos dar a eles cores diferentes para sabermos quais são pontos de controle e quais são pontos de ancoragem Para manter o código organizado, podemos tratar o ponto como uma entidade separada e criar uma classe para ele Na parte inferior do arquivo, inserimos a classe point e, no construtor, passamos um objeto com três propriedades, X, Y e control, cujo padrão é falls Em seguida, armazenamos esses valores em propriedades numéricas com esse ponto X igual a X, esse ponto Y igual a Y. E esse controle de ponto é igual a controle Sabemos que queremos desenhar os pontos, então já podemos sair de um método chamado draw, que precisará de um único parâmetro, o contexto em que somos atraídos. Como de costume, começamos com o salvamento de pontos de contexto e a restauração de pontos de contexto. Então traduzimos o contexto para esse ponto X e esse ponto y, o ponto pode ser desenhado como um círculo, então o ponto do contexto começa o caminho e depois o arco do ponto do contexto e já estamos em X e já estamos em X e Y porque o contexto não é traduzido, então isso é zero, zero. raio pode ser dez, o ângulo inicial zero e o ângulo final Pi vezes dois, depois o preenchimento de pontos de contexto E podemos usar o controle de propriedade para decidir sobre o estilo do campo. Portanto, o estilo do campo é igual a esse controle de pontos. Se for verdade, use vermelho ou então use preto. Vamos ver o que isso faz em um minuto. Primeiro, precisamos usar nossa classe de pontos. Então, aqui na função de esboço, vamos cortar uma matriz chamada pontos e já preenchida com Novo ponto X 200 Y 540, próximo ponto X 400, Y 300. E desta vez o controle é verdadeiro. E o último ponto X 880 e Y 540. Agora podemos trocar esses valores codificados pelos pontos em nossa matriz Primeiro, ponha o colchete zero X, depois 0,0 Y. Aqui pontos, um X, pontos, um Y, e o mesmo com pontos, colchetes Para finalmente desenhar todos os pontos, podemos usar o ponto para cada um e podemos chamar a variável de ponto. Então, dentro da função, chamamos point dot draw e passamos no contexto. Agora podemos ver claramente o que o ponto de controle está fazendo. Sinta-se à vontade para experimentar coordenadas diferentes para ver como esse efeito ocorre Esse não é o resultado visual que buscamos. Estamos apenas trabalhando em uma nova técnica. Vamos ver nosso visual em breve. Mas quero aproveitar esta oportunidade para falar sobre outra coisa que faça sentido aqui, mesmo que não a usemos em nosso esboço final Estou falando sobre interação com o cursor, isso é o que virá na próxima lição. 30. Crie uma interação com o cursor: Vamos ver como usar o cursor para interagir com o elemento em nosso esboço. clique do mouse é um evento que o computador não sabe quando você pressionará botão do mouse ou o trackpad, mas pode reagir quando isso Existem dezenas de tipos de eventos, e o navegador conhece todos eles, mas não está passando essas informações para o Sketch, a menos que perguntemos também. Portanto, antes de podermos reagir a qualquer tipo de evento, precisamos adicionar um ouvinte de eventos Essa função informa ao navegador nosso código deseja ouvir um evento e deseja que uma função específica seja código quando isso acontecer. Um ouvinte de eventos pode ser adicionado a toda a janela do navegador ou a um elemento específico Por exemplo, se tivéssemos um botão, poderíamos usar o botão dot Ed Event Listener Esse não é o nosso caso. Temos apenas um único elemento na página, que é o elemento Canvas. Então esse será o alvo do nosso ouvinte. O evento em que estamos interessados se chama Mouse Down, e a função que chamaremos estará em Mouse Down, que vamos declará-la daqui a pouco Observe que não podemos simplesmente adicionar um ouvinte a esse círculo ou a esse círculo Essas não são entidades independentes que diz respeito ao navegador . O navegador conhece apenas um elemento na página, que é o mapa de pixels. O que desenhamos nesse mapa depende de nós. Então, se quisermos que cada ponto reaja à interação do cursor, precisamos escrever um pouco mais de código. Vamos começar declarando a função on mouse down que mencionamos no ouvinte Ele recebe um parâmetro que é o objeto do evento. Estamos chamando isso apenas de E. O que eu quero fazer sempre que o mouse estiver pressionado poder arrastar esse ponto. E quando o mouse é solto, eu quero parar de arrastar Para isso, precisamos de mais dois ouvintes, que podemos declarar aqui Isso pode ser adicionado a todas as janelas do navegador porque, neste momento, já sabemos que o mouse foi pressionado enquanto estava sobre a tela. Então, window dot d even listener on Mouse Move, que é a função que estamos criando um bit e Window doted Event o mouse para cima e para cima, vamos declarar essa função ao mover o mouse, que também recebe um evento de mouse, e com o mouse para cima, que não precisa de nenhum parâmetro A funcionalidade principal acontecerá internamente com o mouse pressionado e movido o mouse. Mas já podemos implementar no Mouse up porque a única coisa que precisamos aqui é remover o ouvinte adicioná-lo com o mouse para baixo Agora, esse padrão aqui de adicionar esse ouvinte com o mouse para baixo e removê-lo com o mouse para cima não é estritamente necessário Você poderia simplesmente adicionar todos os três ouvintes na função de esboço e as coisas funcionariam bem Gosto da maneira como fizemos isso aqui porque mesmo que o cursor esteja se movendo o tempo todo, o esboço está intrigando o ouvinte do Bowe A menos que o mouse esteja abaixado, é uma pequena otimização, mas se puder ser útil, estou aproveitando esta oportunidade aqui para falar sobre isso. Agora, finalmente, percebendo o movimento do mouse, precisamos descobrir onde está o cursor. O objeto do evento vai nos dizer isso. Vamos registrar o console E do conjunto x e o ponto e do conjunto Y. Em seguida, mude para o navegador, abra o console e clique e arraste o mouse. Esses valores estão em pixels e já estão compensados pela posição do nosso elemento Canvas na página Se você subir aqui perto do canto superior esquerdo do nosso esboço, veremos um número próximo de zero, zero, e se formos para o canto inferior direito, veremos um número próximo a 1080 por 1080, mas ainda não precisamos fazer alguns ajustes Dependendo do tamanho da resolução da tela, você pode realmente ver 1080 por 1080 ao virar Não sei porque minha resolução não é alta o suficiente. Por padrão, o esboço do Canvas recita a tela para que possamos ver toda Mesmo que você tenha criado um esboço de 4.000 pixels, ainda vemos o esboço inteiro dentro Essa escala é o que precisamos levar em consideração quando tentamos descobrir onde o cursor está usando o conjunto X e o conjunto Y. A matemática é simples Só precisamos de uma referência ao elemento Canvas que podemos acessar dentro dessa função. Vou declarar uma nova variável chamada Canvas e defini-la o parâmetro Canvas que obtemos na função sketch Agora, dentro do movimento do mouse, podemos usar um inverso para calcular as coordenadas proporcionais X e Y. Vamos começar com X. custo X é igual entre parênteses E o deslocamento do ponto X dividido pela largura do deslocamento do ponto Cvas, a largura do deslocamento é a largura real do elemento Canvas na tela após a O custo X é igual entre parênteses E o deslocamento do ponto X dividido pela largura do deslocamento do ponto Cvas, a largura do deslocamento é a largura real do elemento Canvas na tela após a escala. Então, o deslocamento X dividido pela largura do deslocamento nos dará um número Então, só precisamos multiplicar essa largura binominal da tela, que é Canvas, largura do ponto Agora duplique a linha e faça exatamente o mesmo para Y, substitua-a por ela pela altura Vamos registrar X e Y, no canto superior esquerdo, manter um número próximo de zero, zero e, agora, no canto inferior direito, finalmente mostrar um número próximo a 1080 por 108 Essa pequena fórmula aqui nos fornece valores de proporção X e Y, independentemente de onde a tela esteja na tela ou de quão grande ela seja. Agora, como podemos saber se o cursor está pairando sobre um ponto ou Como eu disse, o navegador não sabe que há um círculo aqui, mas nós sabemos. Então, precisamos calcular isso nós mesmos. Precisaremos verificar ponto por ponto e fazer um teste de acerto com base na distância do cursor até a posição do ponto. Vamos adicionar uma nova função à nossa classe de pontos chamada teste de acerto, que usa dois parâmetros, X e Y. Aqui, precisamos de uma mão de Pitágoras Vamos fazer uma rápida recapitulação da fórmula. Pegue dois pontos em um plano de dois D, sendo a distância entre os pontos DX e DY Nós obtemos um triângulo retângulo, e a distância real entre os pontos é a hipotens do A fórmula para encontrar o hipotenso é a raiz quadrada da soma do quadrado dos lados Na verdade, isso é muito simples de escrever em código. Temos dx, que é esse ponto x menos X, então o delta entre o X que foi passado e o X do ponto é o mesmo para E então a distância real que estou chamando de DD é uma raiz quadrada de um ponto matemático. O X vezes o X mais dy vezes dy. teste Had retornará verdadeiro ou cairá dependendo se a distância for menor do que alguma coisa. Sabemos que o raio do nosso círculo é dez, então vou tornar a área atingida um pouco maior e retorná-la se DD for menor que 20 Agora podemos usar o Hit test internamente com o mouse pressionado. Também precisaremos das posições X e Y ajustadas aqui. Então, basta copiá-los de um movimento do mouse e colá-los aqui e, em seguida, percorrer todos os pontos com ponto para cada um e criar uma nova propriedade no ponto chamada É dragão, que é igual ao ponto, ponto atingido pelo texto X e Y. Essa nova propriedade armazenará o valor que podemos usar no insight ao mover o mouse Caso você não goste do nome dragão, sinta-se à vontade para usar outra coisa, como pressioná-lo ou pressioná-lo para baixo ou pressionar como preferir. Agora, com o movimento do mouse, precisamos de outro loop, então aponte um ponto para cada um e, se o ponto for um dragão, queremos definir a posição do ponto para a posição do cursor. Ponto x igual a X e ponto Y igual a Y. Só mais duas coisas antes de podermos ver isso em ação precisamos de um esboço animado Então, dentro da configuração, adicionamos T animado e precisamos que a variável de ponto seja visível em todo o esboço Então, precisamos declarar isso aqui. Agora podemos clicar em nossos pontos e modificar a curva quádrica em tempo real Ainda estamos em uma aula sobre as curvas, mas vamos recapitular nossa introdução sobre a interação do cursor Sempre que quiser a interação do mouse em seu esboço, você precisa primeiro adicionar ouvintes de eventos, declarar os manipuladores de eventos ou as funções que são chamadas quando o Calcule a posição correta do cursor, baseie-o na escala da tela e faça o que for necessário com essa posição, seja para desenhar com o mouse ou clicar em alguma forma, como fizemos aqui. A interação com o cursor ainda será útil para nós na próxima lição, qual continuaremos aprendendo sobre a maldição 31. Crie vários pontos: Este ainda não é nosso esboço principal. Há mais um aspecto que eu quero abordar, e é mais fácil explicá-lo dessa forma isoladamente. Vamos ver nossos recursos visuais na próxima lição. Neste caso, vamos examinar curvas sem costura. Vamos adicionar mais dois pontos à nossa matriz. Agora podemos nos livrar desse controle e, em seguida, duplicar a última linha e alterar X para 600 e Y para 700 Outra duplicata, X 640 e Y 900. Agora podemos desenhar outra curva duplicando essa linha e alterando os dados para três e quatro Na verdade, poderíamos reescrever isso para trabalhar com qualquer número de pontos em vez de digitar os índices manualmente. Fazemos isso com quatro voltas, com I começando em um, subindo até pontos de comprimento de ponto e sendo incrementado em dois em cada iteração Em seguida, pegamos apenas uma dessas linhas e curva quadrática da linha até I mais zero E eu mais um, obviamente não precisamos adicionar zero a nada. Isso é apenas para tornar o código mais simétrico e talvez mais legível O resultado é o mesmo, mas agora podemos adicionar mais pontos à nossa matriz, se quisermos. Com cinco pontos, fica bem claro que estamos desenhando duas curvas e não uma única curva E se quiséssemos desenhar uma única curva contínua usando todos esses pontos Há uma técnica para fazer isso, que aprendi há muito tempo um artista chamado Eric Nazi, que cria sua arte usando código e usa muitas curvas A técnica envolve pontos médios. Precisamos pensar em tudo isso como pontos de controle. Os pontos de ancoragem estarão no meio de dois pontos consecutivos Fará mais sentido quando o virmos. Então, precisamos escrever o código primeiro. Vamos tentar desenhar linhas retas entre os pontos. Podemos duplicar esse bloco de código porque ele será semelhante Em vez da curva quadrática dois, usamos a linha dois com apenas X e Y. Altere o incremento para um ou apenas I mais, que é a mesma coisa, e defina o estilo do traçado para 999, que é Vamos comentar as curvas por enquanto. Talvez seja um pouco mais fácil imaginar agora que o ponto no meio dessa linha seja a primeira âncora Sendo este o ponto de controle e o meio da próxima linha sendo o próximo ponto de ancoragem Vamos desenhar esses pontos médios. Começamos de novo para um loop subindo até o comprimento do ponto menos um. Queremos duas variáveis. Um para o ponto atual é índice I mais zero e um para o próximo ponto, que é o índice I mais um. Para o ponto médio, também podemos usar duas variáveis. Vou começar com a posição X e chamá-la de X. É o X atual mais a diferença entre o próximo X e o X atual dividido por dois ou multiplicado por 0,5 Essa é a posição atual mais metade da distância até o próximo ponto. Duplique essa linha e troque X por Y. Agora podemos desenhar esse ponto médio com o caminho inicial, depois arcar X e Y, dar a ele um raio de cinco, começar no ângulo zero e terminar no ângulo e terminar no Vamos definir o estilo do campo como azul e chamar o preenchimento. É um pouco mais fácil imaginar o que vamos fazer com as curvas agora, então vamos desenhá-las. Podemos usar o mesmo loop e iniciar uma nova forma antes do loop com o caminho inicial do ponto de contexto. Podemos comentar esse ponto médio apenas para focar na curva Curva quadrática de pontos de contexto dois. O ponto de controle será o X e Y atuais, e o ponto de ancoragem será X e Y. Depois do loop, chamamos traçado de ponto de contexto, mas antes disso, podemos definir a linha com ela muito longe e definir o estilo do traçado Agora vemos uma curva contínua usando todos os nossos pontos. A curva não passa pelos pontos, é usá-los como pontos de controle. O primeiro é começar como uma linha reta antes da curva, mas podemos corrigir isso com condicionais simples Se I for zero, contexto move dois, X e Y, ou então impulsiona a curva Agora, todos os pontos se comportam da mesma maneira, caso desejemos que o primeiro e o último ponto sejam âncoras. Podemos mudar nossas condições para acomodar isso. Se I for zero, mova dois pontos curvos X e Y. Isso faz com que a curva comece no primeiro ponto e a torne um pouco mais longa que o outro Podemos fazer o mesmo com a largura do último ponto. contrário, se I for igual ao comprimento do ponto menos dois, ponto de contexto, curva quadrática dois, ponto coalhado g, recorte Y, próximo ponto g e NxDTY próximo ponto g e NxDTY Essa é uma técnica bastante simples que nos permite desenhar curvas com qualquer número de pontos Na verdade, podemos facilmente adicionar mais pontos para ver isso em ação. Vamos rolar para baixo até nossa função mais baixa. Antes do loop, criamos uma nova variável chamada hit e a configuramos como dobras. Em seguida, adicionamos uma condicional que eu acerto ainda está dobrada, e se o ponto for um dragão, ou seja, se a linha acima simplesmente retornar verdadeira, defina hit como Isso nos dirá se algum ponto foi atingido na maioria das vezes. Caso nada tenha sido atingido, criamos um novo ponto na posição do cursor. Então, se não houver pontos de vida, dot-push , new point, X e Y. Agora, se clicarmos no ponto, ainda podemos arrastá-lo como antes Mas quando clicamos fora de qualquer ponto, criamos um novo. Assim, podemos clicar e continuar estendendo a maldição. Agora sabemos o suficiente sobre curvas para começar a criar com elas. Você pode manter esse esboço Enter como referência para interação com o mouse e curvas multipontos, caso precise de uma dessas técnicas no futuro 32. Aprenda sobre como criar uma grade: Aqui é onde vamos usar o que aprendemos sobre curvas Vamos criar uma grade de pontos e desenhar curvas entre eles. Vamos deixar as curvas como um esboço separado e criar um novo Se você estiver usando o editor on-line, basta fazer outra cópia do modelo padrão. Se você estiver usando o terminal, pressione Control C para interromper o último processo e, em seguida, insira Canvas, sketch, sketch curves Abra o arquivo da curva de esboço no editor e, como de costume, altere a dimensão 1080 por 1080 Como eu disse, vamos criar uma grade de pontos e podemos avançar, começando copiando a classe de pontos. Criamos no esboço de introdução das curvas. Basta copiar a classe inteira e colar aqui na parte inferior do arquivo. Agora podemos simplificar as coisas. Não precisamos mais da função de teste de acerto e não precisamos da propriedade control. Para o estilo do campo, escolha a cor desejada. Eu vou usar vermelho. Agora vamos até a função de esboço e começamos a definir a grade Precisaremos de algumas variáveis. Os dois primeiros são os números de colunas e linhas na grade. Então, as chamadas são iguais a 12 e as linhas são iguais a seis. Também é útil armazenar o número total de células, que são linhas Calt. Em seguida, precisamos de mais duas variáveis para a largura e a altura da grade. A largura da grade ou GW será a largura da tela em tempo 0,8, o que significa 80% da maior largura da GH vai ter 80% da altura. Ainda não temos essa propriedade com altura e altura aqui, mas sabemos que elas estão disponíveis Eles também são passados para a função de esboço, então só precisamos declará-los Em seguida, faça a dimensão de cada célula, a célula arborizada ou CW é a largura da grade dividida pelo número de colunas e CH é a altura da grade dividida pelas Também podemos encontrar a fusão ao redor da grade. A mesclagem no eixo X é a diferença entre as larguras da tela e as larguras da grade. Dividido por dois, e o mesmo para a fusão no eixo Y. Todas essas são propriedades de que precisamos para definir uma grade. Mas agora podemos colocar nossos pontos, primeira matriz para armazenar todos os pontos. Em seguida, para o loop, percorra todas as células da grade, onde vamos inserir um novo ponto na matriz de pontos. E passe X e Y. Agora só precisamos definir X e Y. X será o resto O operador restante manterá o número em 0-11 Toda vez que eu alcanço um múltiplo de 12 volta a zero. Para obter a posição, basta multiplicá-la pela largura da célula Y será o piso de pontos matemáticos. Eu o divido por carvão, então começo do zero e depois aumento um, dois, três, quatro, etc., até chegar a 12 Essa divisão retorna zero, algo que somos flúor, então zero, algo se torna Então 12-23, isso será um e assim por diante. Isso nos dá o índice da linha e, para obter a posição Y, precisamos multiplicá-la pela altura da célula Agora vamos esboçar esse ponto. Vou mudar a cor de fundo para preto e iniciar o cor de fundo para preto e iniciar bloco de transformação com um salvamento de pontos de contexto e uma restauração de pontos de contexto. Em seguida, traduza os contextos para Mx e MY, que são as margens superior e esquerda E, finalmente, desenhe os pontos com um ponto para cada um. Contexto de desenho de pontos e pontos. Agora podemos ver a inclinação, mas o alinhamento está errado. Isso porque os pontos são colocados no canto de cada célula. Para movê-los para o centro das chamadas, podemos adicionar outro ponto de contexto traduzido para metade da largura da célula e metade da altura da célula. E aí está nossa nota dinâmica. Podemos alterar o número de colunas ou linhas e tudo simplesmente fica em um lugar. Agora vamos desenhar linhas entre esses pontos. Primeiro, deixe-me definir o estilo do traçado, vou usar o vermelho novamente e depois definir a largura da linha para quatro. Queremos uma linha por linha, então precisamos de 24 loops O primeiro percorrerá as linhas, para que possamos nomear a variável R para as linhas. O segundo a percorrer as colunas, então nomeamos a variável C para colunas. Devemos iniciar uma nova linha em cada linha, então o ponto de contexto começa o caminho no início do loop e, em seguida, o traçado do ponto de contexto no final do loop. Dentro do segundo loop, precisamos de uma posição para cada ponto. O ponto de custo é igual aos colchetes de dois pontos. O índice do ponto dentro do loop será o índice da linha multiplicado pelo número das colunas mais o índice da coluna. Então, precisamos do ponto de contexto para mover dois, ponto X e ponto Y, o ponto ponto, que só precisa acontecer no primeiro ponto, para que possamos preparar a condicional se não houver C ou se C for zero Ou então, para cada outro índice de coluna, contextualize a linha dois, X e Y. Com isso em vigor, se movermos os pontos, as linhas seguirão Então, vamos fazer isso usando a função de ruído. Mais uma vez, o Canvas Sketch UT será útil porque já tem alguma função de ruído no módulo aleatório Se você estiver usando a configuração local e estiver seguindo o curso cronologicamente, você já tem o Canvas Sketch UT instalado porque o instalamos na lição anterior Se você estiver usando um editor online, basta digitar Canvas sketch UTL na caixa devanta C. Então, precisamos exigi-lo com iguais aleatórios para exigir que o Canvas sketch TL seja Canvas sketch A função de ruído retorna um número que vamos armazenar em uma variável chamada N. O ruído é ótimo para dar uma sensação orgânica a estruturas como nossa grade, que são muito retas e precisas. É diferente de uma pura aleatoriedade. Se alimentarmos a função de ruído com números sequenciais, ela nos dará números aleatórios que fluem uns para os outros Vamos usar o ruído de ponto aleatório dois D e passar X e Y e, em seguida, adicionar o número às nossas posições X e Y. Nada realmente muda no visual porque N é um número muito pequeno. Mas podemos mudar isso usando o último parâmetro do ruído para a função D, que é amplitude. Vamos declarar variáveis para esses dois parâmetros, que vou deixar como um, e a amplitude, que vou definir como dint Agora podemos ver o que o ruído está fazendo, mas ainda parecem números aleatórios porque a frequência é muito alta. Vou alterá-lo para um número minúsculo como 0002. Agora ainda parece bastante aleatório, mas flui muito melhor. Algumas delas até parecem curvas, mas se escondermos os pontos, podemos ver que ainda são apenas linhas retas Portanto, há um pouco mais de trabalho a fazer aqui. Isso será muito parecido com o que fizemos na lição anterior. O circuito interno vai parar na Colts Mines 1. Então, em vez de um ponto, queremos fazer uma curva, que é o ponto atual, e queremos fazer essa exploração adicionando zero ao índice Em contraste com o próximo ponto, basta duplicar a linha e alterar o índice dois mais um Podemos nos livrar das linhas retas e da próxima parte praticamente idêntica à que fizemos na introdução das curvas, possamos trapacear e copiá-la É possível excluir a parte de saída do comando e só precisamos alterar o iterador de I para C e alterar o comprimento dos pontos dos pontos para chamadas E aí está nossa grade de curvas. As grades são graduadas e geralmente são usadas como base para coisas que queremos criar com código Foi bom para nós dedicarmos um tempo para aprender a criar uma grade dinâmica. Na próxima lição, vamos ser mais criativos com isso. 33. Aprenda a criar segmentos: No momento, temos uma curva por linha da grade. Em vez disso, quero pequenos segmentos curvos. Para cada coluna, podemos fazer isso movendo o comando do caminho inicial e o comando stroke dentro do loop. Sei que acabamos de escrever essas linhas no final da lição anterior, mas já vamos mudá-las. Para a próxima etapa, sinta-se à vontade para comentá-los ou se livrar deles. Só queremos a última linha sem usar no início. O resultado é interessante, mas não é o que eu procuro. Eu ainda quero o segmento completo, então precisamos começar cada caminho no ponto médio anterior Precisamos armazená-lo em uma variável, que os vários persistam após cada iteração do loop Vamos declarar duas novas variáveis chamadas último X e último Y. Antes da curva, movemos o último X e o último Y e, no final da iteração, definimos o último x para x e o último Y para Y. Isso está quase aqui. Agora, as curvas começam onde a última terminou Só precisamos lidar com uma exceção para o primeiro ponto de cada coluna. Se C zero, o último X é X e o último Y é o corte Y. Agora vemos as curvas completas novamente, mas desta vez estamos desenhando-as em segmentos, o que significa que podemos dar propriedades supert a cada segmento e podemos instalar essas propriedades diretamente no ponto e o último Y é o corte Y. Agora vemos as curvas completas novamente, mas desta vez estamos desenhando-as em segmentos, que significa que podemos dar propriedades supert a cada segmento e podemos instalar essas propriedades e podemos instalar essas propriedades . Aqui em cima, preencheremos a matriz de pontos. Podemos declarar uma nova variável chamada largura da linha e configurá-la para qualquer número por enquanto Digamos dez, passe-o para o construtor de pontos e seguida, role para baixo até a classe de pontos Certifique-se de armazenar a nova propriedade como uma variável numérica com essa largura de linha pontilhada igual à largura da linha De volta à função de renderização, podemos definir a largura da linha de pontos de contexto, igual à largura da linha de pontos da curva Ainda não muito, mas sabemos que podemos variar a linha e baseá-la no valor do ruído que calculamos anteriormente. Sabemos que N é um número que varia dentro da amplitude ou, na verdade, varia entre amplitude negativa e amplitude positiva. Assim, podemos mapear isso para um intervalo diferente para a largura da nossa linha. Mapear um intervalo de valores em outro é uma operação muito comum e, mais uma vez, podemos contar com o Canvas sketch UTL para nos ajudar com O intervalo do mapa faz parte do módulo matemático, então precisamos importá-lo primeiro. A matemática de custos exige o Canvas sketch TL math. A largura da linha será Branch do mapa de pontos matemáticos. O valor é N e a faixa de entrada vai de amplitude negativa para amplitude, e a faixa de saída pode ir de 2 a Isso está começando a parecer interessante. Podemos alterar mais propriedades, como a cor. Mostrarei outra biblioteca de cores diferente da que usamos na lição anterior, chamada mapa de cores. Ele tem várias paletas de cores que são úteis para visualizar uma variedade de valores, que é muito bom para nós. Então, vamos instalá-lo. No editor on-line, acesse as dependências e insira o Mapa de cores No terminal, interrompa o processo com um Controle C ou Comando C e insira o mapa de cores NPM I. Depois que a instalação estiver concluída, pressione a seta para cima, remova o traço aberto e o novo Execute o esboço novamente. Precisamos dividir a biblioteca em nosso código. Portanto, mapa de cores Const, requer mapa de cores. Agora vamos voltar para a página do mapa de cores e ver o exemplo de uso, e vamos seguir isso e armazenar as cores nas variáveis. Cores iguais ao mapa de cores e , em seguida, abra colchetes frios para definir as propriedades O primeiro, como vemos no exemplo, também é chamado de mapa de cores. E é o nome da paleta que podemos escolher nesta lista Eu vou escolher MA GMA. Em seguida, para o número de etapas de cores que usamos e tonalidades, que no nosso caso será amplitude. Para ver isso em ação, criamos uma nova variável de cor resfriada e fazemos o mesmo que fizemos com a linha com ela, passando-a para o construtor de pontos e armazenando-a como uma variável numérica na classe point Na função de renderização, definimos o estilo de traçado do ponto de contexto para a cor do ponto c. Agora, para escolher uma cor da lista, podemos usar novamente o intervalo MAP para que a cor seja igual às Colchetes, ramificação matemática do mapa de pontos e amplitude negativa para amplitude positiva e, em seguida, zero para amplitude A diferença aqui é que estamos usando esse número como um índice para a matriz de cores, que significa que ele precisa ser inteiro Então, precisamos envolvê-lo com o piso de pontos matemáticos. Vamos ver como isso fica com mais linhas. Digamos 48, isso não é ruim, mas podemos continuar brincando com o esboço. Obviamente, podemos tentar outra paleta de cores. Vamos ver como isso fica com a salinidade, mas esse não é o único recurso com o qual podemos jogar Como criamos um sistema, podemos simplesmente experimentar valores. Por exemplo, o que aconteceria se multiplicássemos esse valor por zero ponto oito em vez de 0,5 ou este por 5,5 Ok, está bagunçado, mas o que mais poderíamos tentar? E se adicionarmos números ao último X e digamos, 250 ou subtrairmos 250, se nem sempre for 250, mas um aumento no valor dependendo de C e talvez fizéssemos a mesma coisa com o último Y. Usando linhas, talvez torne as linhas mais finas com a faixa de saída variando de 0 a E como isso ficaria com mais colunas? Digamos 72 linhas e menos. Ok, isso é bom. Eu gosto disso. Aqui na gravação da tela, pode parecer que eu fui direto para esse resultado. Mas quando eu estava preparando o material para o curso, eu não tinha um objetivo claro. Eu apenas experimento com os valores até encontrar algo que eu goste E isso faz parte do processo. Depois de escrever a lógica, podemos ser criativos com ela e também fazer experiências com ela. Estou curioso para ver quais variações você vai criar. E na próxima lição, usaremos o ruído para animar nossas curvas 34. Crie animação de grade: Essa vai ser curta. Mostrarei como animar a grade e como exportar a animação como um vídeo Você deve se lembrar de nossa primeira lição sobre o Canvas sketch que podemos adicionar uma propriedade da configuração chamada animate e defini-la como verdadeira Isso faz com que a função de renderização seja chamada repetidamente sempre que o navegador estiver pronto para repintar a tela Podemos usar isso para alterar valores ao longo do tempo e vamos mudar a posição dos nossos pontos. Assim, podemos rolar para baixo até a classe de pontos e armazenar os X e Y iniciais e X e Y. Então, em vez de definir a posição do ponto apenas uma vez no início, podemos copiar essas linhas para usá-las na função de renderização E saindo desses dois, primeiro começamos um novo loop com ponto para cada um. Então, podemos colar essas linhas aqui. E em vez de apenas X e Y, usamos o ponto x igual ao ponto Ix, que é o X inicial mais N e o mesmo para o ponto Y. N também usará o ponto x e o ponto Isso não vai fazer nada porque os valores são os mesmos para cada quadro. Portanto, precisamos de variáveis que mudem com o tempo, e já vimos isso na lição anterior. Temos acesso a um chamado frame. Tudo o que precisamos fazer agora é adicionar quadro a X ou Y. Vou adicioná-lo a X. Ele está se movendo um pouco devagar para que possamos acelerá-lo e multiplicar o quadro Se você gosta disso, pode clicar no navegador e pressionar Control ou Command S para salvar alguns quadros. Mas você também pode querer salvar isso como um maçom. Então, deixe-me mostrar como fazer isso. Isso só funciona com a configuração offline porque precisamos FFMPH e precisamos acessar o sistema de arquivos local Então, primeiro de tudo, precisamos instalar o FFMPH e podemos copiar essa linha da documentação ou simplesmente digitá-la NPM, eu no instalador do FPH FFmphg. Estamos usando o G, o que significa que o estamos instalando globalmente. Quando a instalação estiver concluída, executaremos o Canvas sketch, sketch curves Mas desta vez, precisamos acrescentar a traço igual às curvas de saída, que é a pasta para a qual queremos que o arquivo exportado vá, e também precisamos acrescentar o fluxo do traço que é a pasta para a qual queremos que o arquivo exportado vá, e também precisamos acrescentar o e Quando esse esboço é executado com fluxo de traço, podemos pressionar Control Shift S para iniciar o gravador e a animação e seguida, pressionar o mesmo Control Shift S novamente para Agora, dentro de esboços, curvas de saída, vemos um arquivo MP four com nossa animação Na documentação, você também pode encontrar mais informações sobre como exportar animações, incluindo sequências de imagens Então vá em frente e experimente o que vimos até agora. Estou ansioso para ver suas animações na aula do projeto Esta lição foi sobre curvas, mas também aprendemos sobre interação com o cursor, grades dinâmicas e como importar esboços animados E na próxima lição, examinaremos a visualização de áudio 35. Crie o jogo prensado: visualização de áudio consiste em extrair dados de uma fonte de áudio e usá-los para gerar algo Vamos começar de forma simples com um círculo que nos puxa de acordo com uma fonte de áudio Este é um esboço simples e vamos criá-lo do zero Mas há alguns conceitos por trás disso que precisamos examinar primeiro. E começaremos com a forma de tocar música no navegador da web. Vamos começar um novo esboço. Você já sabe o Se estiver usando um editor on-line, basta fazer uma nova cópia do modelo e pronto. Se você estiver usando o terminal, controle C se ele estiver executando outro esboço e, em seguida, Canvas sketch, sketch audios Altere as dimensões para 1080 por 1080. Para reproduzir algum áudio, precisamos de pelo menos três linhas de código. Primeiro, precisamos criar um elemento de áudio HTML. Podemos armazená-lo em uma variável chamada audio e criá-lo com um elemento dot quit audio do documento. Ele não precisa ser adicionado ao corpo do documento. Eu só precisava existir como uma entidade. Em seguida, precisamos fornecer uma fonte com a fonte de pontos de áudio igual e depois passar para um arquivo de áudio que veremos em um minuto. E a terceira linha é uma chamada para audio dot pla para o arquivo de áudio, se você tiver alguma música, salve-a no seu computador, você pode usá-la. Existem poucos formatos de arquivo suportados , incluindo o muito popular P three. Portanto, se você tiver qualquer arquivo MP de três , eles devem funcionar aqui. Se você não tiver nenhum ou se preferir baixar um arquivo de demonstração, posso recomendar o artlest dot, onde você pode baixar músicas isentas de direitos autorais O download dos arquivos é gratuito, mas se você não tiver uma licença, eles virão com uma marca d'água de áudio, o que, no nosso caso é bom porque estamos interessados em aprender a técnica aqui, sempre podemos trocar os arquivos posteriormente Depois de baixar o arquivo, eu recomendei movê-lo para sua pasta de esboços No meu caso, vou criar uma subpasta chamada audio e colar o arquivo MP three dentro dela Isso serve para manter nossos arquivos organizados, mas também para facilitar a referência a eles em nosso código. Por exemplo, agora posso voltar para a linha que estava digitando anteriormente e inserir fonte de pontos de áudio igual à barra de áudio e depois o nome do arquivo Se você estiver usando um editor on-line, precisará inserir uma URL e ela deverá apontar para um arquivo p three hospedado publicamente. Novamente, você pode usar um do artlest DoTo e este é bem longo para você Mas vou disponibilizá-lo na nota abaixo do vídeo. Se você salvar um esboço, perceberá que o áudio ainda não está sendo reproduzido, e isso se deve à política de reprodução automática Podemos adicionar uma propriedade ao objeto de áudio chamada autoplay e defini-la como verdadeira Mas isso ainda não garante que o áudio comece a ser reproduzido e por um bom motivo, que está bem explicado nesta página. Resumindo, não queremos que as páginas da web comecem a fazer barulho repentinamente sempre que quiserem E por causa disso, a reprodução automática de áudio é bloqueada por padrão. Portanto, essa linha aqui não é suficiente para começar a reproduzir áudio. Dependendo da sua configuração, o áudio pode realmente ter começado a ser reproduzido porque o URL que você está usando foi listado como permitido pelo navegador. Mas isso nem sempre é garantido. Precisamos de pelo menos algum tipo de interação do usuário com a página como uma espécie de declaração de intenção. Em essência, basta clicar em qualquer lugar da página. Portanto, precisamos de um ouvinte de eventos do mouse. Vamos criar uma função chamada Ed Listeners. Estamos interessados em clicar em qualquer lugar da janela, então a janela adiciona um ouvinte de eventos, e o tipo de evento pode ser quando o botão do mouse é solto, com o mouse para cima, a função handle pode ser chamada de função como usamos na lista anterior e pode ser uma função anônima embutida como esta Agora, dentro dele, podemos finalmente chamar a reprodução de pontos de áudio. Podemos remover essas duas linhas daqui de cima e também tornar a propriedade de áudio visível para todo o esboço, declarando-a aqui em vez de dentro da função Agora, só precisamos cantar para o ouvinte em algum lugar, e eu vou fazer isso na parte inferior da linha, pouco antes do Canvas Em seguida, salve a página e clique em qualquer lugar. E como temos algum controle agora, podemos converter isso em um botão dizendo, se o áudio for colocado, se o áudio for colocado, chame play ou então chame audio dot post Agora podemos clicar para jogar e clicar novamente para pausar. É disso que precisamos se tudo queremos é reproduzir um pouco de áudio, mas queremos ler os dados de áudio para que possamos visualizá-los Veremos isso na próxima lição. 36. Crie um analisador: Queremos visualizar uma fonte de áudio. Precisamos dos dados de áudio e, para isso, precisaremos da API de áudio da web. A API de áudio da web tem pelo menos um conceito em comum com o IPI da bússola, que é que ela também tem um contexto Estamos usando nosso contexto de renderização em dois D para fazer todo o drone e precisaremos de um contexto de áudio para qualquer coisa relacionada ao som. A forma como funciona é com nós, como podemos ver neste gráfico. Dentro do contexto, teremos uma entrada ou uma fonte, como um elemento de áudio com um arquivo livre de MP, e vamos conectá-la ao destino, que normalmente é o alto-falante do sistema. E nesse meio tempo, podemos conectar vários outros nós, que na verdade não teremos tempo de abordar aqui. A API de áudio da web é muito rica e poderíamos fazer um curso inteiro sobre ela. Vamos nos concentrar em um nó chamado Analyzer, que é o que precisamos para extrair dados de uma fonte de áudio Voltando ao nosso esboço, precisamos criar um contexto de áudio. Para manter as coisas organizadas, podemos escrever uma nova função chamada ret audio e mover essas linhas dentro dela Vamos precisar de algumas novas variáveis que podemos declarar globalmente aqui Deixe o áudio contextualizar o nó da fonte de dados e o nó do analisador De volta à função, vá para o contexto de áudio, igual ao novo contexto de áudio. Então, para nosso primeiro nó, precisamos de uma entrada ou fonte de áudio. Esse será o nó de origem que é igual ao ponto de criação do elemento de mídia do contexto de áudio. E aqui estamos passando os elementos de áudio que criamos. Então, a fonte será nosso arquivo MP três, e precisamos conectá-lo ao destino do contexto de áudio, que é a fala. Agora é hora do nó do analisador, que é o audiocontext dot create Analyzer, e então também precisamos conectar o nó de origem ao nó do Não precisamos conectar o analisador ao destino porque a fonte já está conectada a ele Em seguida, precisamos de uma matriz para armazenar os dados de áudio e ela precisa ser digitada como matriz Mais especificamente, uma matriz float 32. Precisamos especificar o comprimento e podemos usar a propriedade do nó do analisador chamada contagem de frequência Se você está curioso sobre essa propriedade, podemos verificar a página do MDN A contagem de feixes de frequência é propriedade somente de leitura da interface do nó do analisador Geralmente, isso equivale ao número de valores de dados a serem usados na visualização, que é exatamente o que precisamos Isso é para a função de saída de áudio, mas de onde a chamamos? O contexto de áudio também é restrito pelas mesmas regras da reprodução automática Podemos até mesmo criá-lo fora da interação do usuário, mas ele permaneceu em um estado suspenso, o que só poderia ser alterado após algumas interações do usuário. Portanto, é melhor já criá-lo dentro de um manipulador de interação, como nossa função de aplicativo de mouse aqui, mas só precisamos fazer isso uma vez Nem toda vez que há um clique do mouse , podemos adicionar uma condicional na frente dessa linha dizendo apenas chame quit audio se não houver contexto de áudio No primeiro mouse para cima, a propriedade audio context, ela ficará indefinida Em seguida, seremos criados internamente, saia do áudio. E então, para qualquer mouse subseqüente, isso terá um valor e a condicional será falsa O áudio ainda está sendo reproduzido como antes. E agora vamos desenhar alguma coisa. Este será um esboço animado. Portanto, adicione True animado à configuração. Em seguida, dentro da função de renderização, precisamos ler os dados de áudio do nó do analisador em cada quadro com ponto do nó do analisador. Obtenha dados de frequência flutuante e passe-os em nossa matriz de dados de áudio Se tentarmos executar isso agora, haverá um erro no console, que diz que Cantad properties of defined Isso porque o nó do analisador não é criado até que haja um clique Então, precisamos levar isso em consideração e pular qualquer coisa que tenha a ver com o contexto de áudio até que ele seja criado Uma condição simples que eu faria se não houvesse contexto de áudio, retornaria. Agora, vamos dar uma olhada nos dados. Primeiro, vamos ver o tamanho dessa matriz. Podemos adicionar um rápido registro do console aqui em Quit Audio e verificar o tamanho dos dados de áudio, que é o mesmo que a frequência que está sendo contada. Podemos clicar em qualquer lugar e ver que é 1024. Caso um número diferente apareça para você, não há nada com que se preocupar. O que queremos é uma média de todos esses valores dentro dos dados de áudio. Eles são todos valores numéricos, então só precisamos somá-los e dividir a soma pelo número dos valores Vamos criar uma função para isso chamada get average. Ele recebe um parâmetro chamado data, que sabemos que será uma matriz de valores. Então, precisamos de uma variável chamada soma, que começa em zero, e então, para cada item dentro dos dados, vamos somar mais colchetes de dados iguais Depois que o loop terminar, podemos retornar a média, que é a soma dividida pelo comprimento dos pontos dos dados Agora, dentro da função de renderização depois de extrairmos as frequências do nó analisador, podemos armazenar a média em uma variável chamada AVG, que é igual a obter a média e passar na matriz de dados de áudio Agora, com esse valor, podemos finalmente desenhar nosso círculo. Começamos com o salvamento de pontos de contexto e a restauração de pontos de contexto. Em seguida, traduzimos o contexto para o centro da tela. E defina a linha com ela para dez. Em seguida, para a forma, ponto de contexto começa Path , o arco do ponto de contexto começa no meio em 00 e o raio será AVG Mas como o AVG pode ser um número negativo, precisamos agrupá-lo com um ponto matemático aBS, que nos dá o valor absoluto sem o lado Então, ele converte um número negativo em positivo e o ângulo inicial zero e o ângulo final ponto matemático Pi vezes dois e, finalmente, o traçado do Context Dot Há algumas coisas a serem melhoradas aqui que vamos analisar. A mais óbvia é que, quando publicamos o áudio, não colocamos o esboço Para controlar o estado de reprodução do esboço, precisamos acessar algo chamado gerenciador de esboços Há um exemplo de como obtê-lo aqui, e podemos ver imediatamente que é por causa de uma sincronização e um peso. Demos uma olhada antes de qualquer aula anterior e mencionei que elas seriam úteis, e é aqui que precisamos delas. Em vez de apenas copiar o exemplo, vamos escrevê-lo nós mesmos. Começamos declarando uma variável global chamada manager e, em seguida, precisamos trazer essas duas chamadas para uma função de sincronização, que chamarei de start A chamada para o Canvas é sketch return, uma referência ao gerenciador de esboços, que vamos armazenar em nossa variável de gerenciador, e precisamos preparar o peso para essa Essa é uma função de sincronização. Depois de termos o gerenciador, já podemos iniciar o esboço no estado oposto à pose de pontos do gerenciador, e reproduziremos o esboço somente quando o áudio Podemos controlar isso dentro do nosso manipulador de mouse up e adicionar algumas linhas aqui Baixa reprodução de pontos de áudio, adicionamos o gerenciador de reprodução de pontos. Abaixo da pose de pontos de áudio, adicionamos a pose de pontos do gerenciador. Nada está acontecendo ainda porque esquecemos de chamar nossa função inicial. Então, vamos fazer isso. Agora é jogar quando clicamos e pausar quando clicamos É um bom começo. Vamos nos aprofundar um pouco mais na próxima lição. 37. Aprenda a criar frequências: Chegamos a esse ponto sem mencionar um termo chave para análise de áudio. É FFT FFT significa transformação rápida de Fourier e é um algoritmo que converte um sinal contínuo como uma onda sonora, em um componente de frequências diferentes Essa é a função principal do nó do analisador, e podemos alterar o tamanho do FFT para ler mais ou menos dados e retornar mais ou menos desses componentes O valor padrão é 2048 e o motivo pelo qual a frequência contada é 1024 porque é sempre a metade do tamanho do FFT Se quisermos menos grãos, podemos definir o tamanho do FFT como 512 Por exemplo, esse valor sempre precisa ser uma potência de dois. Agora, vamos dar uma olhada no que está dentro da matriz de dados de áudio. Há muitos dados bloqueados em cada quadro. Então, vou pausar o esboço e dar uma olhada em um desses Agora existem 256 Vallos. E se olharmos para os primeiros cem, podemos ter uma ideia do alcance desses vals. Podemos ver que estão todos abaixo de zero. Por que isso? Para entender isso, precisamos examinar mais de perto o nó do analisador, partindo dos dados de frequência flutuante G. Cada item na matriz representa um valor de discípulo para uma frequência específica Então, o valor que estamos vendo aqui é indiscípulo. Podemos ter uma ideia do intervalo desse valor se voltarmos uma página e verificarmos essas outras propriedades do nó analisador Discípulo principal e discípulo máximo. O mínimo padrão é -100 e o máximo padrão é -30 Essas propriedades estão aqui para outro método chamado get byte frequency data, que retorna o valor em bytes mapeado para esse intervalo, mas estamos usando get float frequency data, que não é afetado por esse mínimo e máximo, ainda podemos usá-los como uma Podemos esperar valores aproximadamente entre -100 e -30. E é por isso que todos os números que vemos são negativos. É também por isso que, quando fazemos um esboço, o círculo parece encolher sempre que há um som alto, porque o número absoluto fica menor É melhor remapear esse valor para algo mais fácil de usar, como um intervalo de 0 Mais uma vez, podemos contar com o Canvas sketch UTL e usar a função de intervalo de mapas do modelo matemático No modo offline, já o instalamos. No editor on-line, você precisa pará-lo novamente como uma dependência para cada esboço, e você já sabe como fazer Basta inserir Canvas sketch Util na caixa de dependência e, em seguida, exigi-lo com math require Cv sketch Agora podemos criar uma variável mapeada e atribuí-la ao ponto matemático Maprench De discípula mínima e discípula máxima a zero e um. E, nesse caso, queremos que o último parâmetro seja verdadeiro porque queremos restringir esses valores de 0 a E o raio do nosso círculo agora será mapeado vezes 200. O círculo agora está ficando maior sempre que o som está mais alto, mas, na maioria das vezes, não vemos o círculo Então, o que está acontecendo aqui? Vamos registrar o valor de Map para descobrir. Parece ser zero na maior parte do tempo. Precisamos verificar os dados de áudio novamente. A maioria desses valores é, na verdade , tão baixa que eles são essencialmente silenciosos. Eles estão diminuindo nossa média e nem vemos o círculo, mesmo que ainda possamos ouvir a música. Portanto, a média não é realmente muito útil para a visualização Podemos encontrar valores mais úteis perto do início da matriz se trocarmos a média por um único valor, digamos, índice 12 Então o círculo está de volta. A maior parte da energia está concentrada no início da matriz de dados de áudio. E para explicar por que esse é o caso, precisaríamos de uma aula muito mais longa. Mas deixe-me dar uma versão curta. Eu tenho outro esboço aqui mostrando uma contagem de feixes de frequência de 32 em vez de 256 Cada viga é representada por uma barra vertical e a altura da barra é um mapa de valor indiscutível até a metade da altura da tela No lado esquerdo, temos as frequências baixas, começando em zero hertz e no lado direito, a alta frequência até cerca de 22.000 hertz, a alta frequência até cerca de 22.000 hertz, que está aproximadamente alinhada com a O intervalo entre os nós de baixa frequência em uma escala é muito menor do que nos nós de alta frequência. Os nós são espaço logarítmico e as curvas FFT são espaçadas Quando obtemos os dados de frequência do nó do analisador, obtemos muitas frequências baixas, agrupadas em algumas ligações, enquanto as frequências mais altas são distribuídas em vários compartimentos enquanto as frequências mais altas são distribuídas em Portanto, esse lado da carta sempre tenderá a ter valores mais altos. Há mais detalhes aqui, que estou omitindo, mas espero ajudar a entender um pouco dos dados com os quais estamos lidando. E agora podemos voltar ao nosso esboço. Não estamos criando uma ferramenta para exibir dados de áudio precisos. Podemos usar nosso próprio critério e escolher valores que pareçam bons Como fizemos aqui com esse índice 12, eu diria, vamos fazer o mesmo com mais alguns valores. Vamos sair de uma matriz chamada Beans inicializá-la com três valores Vou usar quatro, 12 e 37. Então, dentro da função de renderização, podemos sair de um loop de zero até Bin dot Link. Mova todo esse código para o loop. Podemos nos livrar da média e criar uma nova variável chamada Ben, que são colchetes I. Em seguida, na ramificação MA, usamos colchetes de dados de áudio Ben e aumentamos o raio um pouco, aumentamos e criar uma nova variável chamada Ben, que são colchetes I. Em seguida, na ramificação MA, usamos colchetes de dados de áudio Ben e aumentamos o raio um pouco, aumentamos para 300. No momento, quais são as frequências reais que estamos visualizando aqui? Na verdade, eu não sei. Precisamos saber? Eu acho que não. Como eu disse, estamos atrás de algo que achamos que parece bom. E temos a liberdade de escolher qualquer parte dos dados de áudio que seja adequada para nós. 412 e 37 são apenas números aleatórios que escolhemos. Sinta-se à vontade para escolher qualquer número que quiser e ver como é. Se você achar que o círculo está muito irregular, você pode alterar a constante de suavização Do valor padrão, que é 0,8 para algo maior, vou tentar 0,9. Agora que sabemos um pouco mais sobre os dados que estamos usando, é hora de mudar o foco para o visual na próxima lição 38. Aprenda a criar áudio para arcos: Com o nó analisador, obtemos que todos esses valores representam as diferentes frequências da fonte de áudio Eles mudam com o tempo, o que é ótimo para animação. O que resta a fazer é desenhar algumas formas interessantes para acompanhá-las. Uma das coisas que eu gosto de fazer para inspirar é folhear alguns pôsteres clássicos Gosto de imaginar como eles ficariam se fossem um reator de áudio Esta série de Jessica Swenson combina muito bem com isso. Nesta lição, vamos tentar recrutar esse. Você pode ver que há vários círculos constantes e eles são cortados de uma forma mais ou menos organizada Quanto maior o círculo, mais grossos são os arcos. Então, temos uma sensação de profundidade. Mesmo que tudo o que temos sejam duas formas D bastante simples. De volta ao nosso esboço, podemos começar declarando algumas variáveis num círculos, que eu vou definir para cinco e num fatias, que vou definir para nove O valor de cada fatia e brilho será matemático Pi vezes dois, que é o círculo completo dividido pelo número de E então o raio base do nosso primeiro círculo será 200 Eu também quero mudar a cor de fundo para algo branco como EEA e zero. Podemos pular a parte de áudio por enquanto e comandar essas linhas para focar no desenho Vamos precisar de dois para fazer loop mais um com a letra I, fazer loop e lançar o número de círculos. E dentro dele, precisamos de outro loop com a letra G, faça um loop e lance o número de fatias de cada círculo. Podemos mover, salvar e traduzir fora desses loops porque só precisamos traduzir o contexto uma vez E então, dentro do segundo loop, podemos usar essas linhas para desenhar nossos arcos. Mas em vez de desenhar um círculo completo de zero a Pi vezes dois, desenhamos um arco de zero a fatia E podemos nos livrar do resto do circuito antigo. Não precisamos mais disso. Isso é desenhar todos os arcos um em cima do outro Precisamos compensá-los radialmente girando o contexto em cada fatia Portanto, precisamos de outro bloco de salvamento de pontos contexto e restauração de pontos de contexto para cada círculo. E para cada fatia, precisamos de uma rotação de pontos de contexto Slice This é melhor, mas ainda precisamos deslocar o círculo de acordo com o raio Poderíamos fazer algo como raio mais I vezes 50, mas isso seria uma escala linear E se olharmos para a referência original, podemos ver que a escala definitivamente não é linear Não sei exatamente o que impulsiona a escala aqui, mas parece que os arcos crescem exponencialmente, e isso me leva a outra técnica muito útil para codificação criativa Normalmente são usados para animação, mas também podem ser usados para qualquer valor numérico Digamos que você tenha uma escala 0 a 5 e a divida em cinco etapas Com uma função linear, todas as etapas são iguais. Então, na primeira etapa, estaríamos em um. Na etapa dois, estaríamos em dois, etc. Com funções diferentes como esta, na primeira etapa, ainda estaríamos em algum lugar próximo de zero. Na segunda etapa, um pouco mais acima. E então, em algum momento por volta das etapas três e quatro, o valor aumentaria rapidamente Algumas dessas funções são bem conhecidas e documentadas por Robert Penn. Eu mencionei que nossos círculos cresceram exponencialmente, mas talvez esse não seja o caso Talvez tenham crescido quadraticamente, cubicamente ou talvez acordo com uma função diferente, que não está aqui Mas certamente uma delas servirá para nós , como seria de esperar, já existem bibliotecas com função ESN que podemos usar, e aquela que estou sugerindo se chama ESIS No editor on-line, basta digitar ESS. Na caixa de dependência do terminal, pressione Control C, PMI ESS E quando a instalação estiver concluída, Canvas, esboço de áudio para executar um esboço novamente. Em seguida, no topo. Es é igual a exigir Ess. E antes de usá-lo, vamos dar uma olhada em nossa referência. Podemos ver os arcos crescerem junto com o raio. Se dissermos que os arcos são linhas , o raio varia acordo com a largura das Isso significa que podemos usar nossa função de atenuação para definir a linha com ela e apenas calcular o raio a partir delas Então, vamos criar uma nova variável chamada linewid e uma nova linha de código variável com ela Em seguida, um laço para cada círculo. Para a função EM, precisamos de um número 0-1, que vou armazenar em uma variável chamada T e defini-la como dois Eu dividi por um círculo menos uma linha, com e dot expo e T vezes o maior valor possível que vou definir como 100 e, em seguida, empurrar linewid para dentro da linha com Agora podemos substituir nossa linha definida como dez por linha com ela. I e o raio mais a linha de pontos de contato com ele. Isso ainda não está certo. O problema é que as linhas são desenhadas a partir do centro do traçado. Precisamos de apenas metade da linha para o arco e precisamos compensar o raio pela linha completa ao lado dele. Podemos fazer isso fixando o raio em outra variável que vou chamar de raio C, e ela é definida como o raio base no início de cada quadro, depois incrementada pela linha atual com E podemos desenhar o arco usando o raio C mais a largura da linha de ponto de contato vezes 0,5 Agora temos um ajuste perfeito e parece que a Expo foi uma escolha extrema para uma função Eason Então, vamos tentar com o Quag. Isso parece melhor. Também notei que falta o primeiro círculo porque a menor linha possível com ele é zero, então podemos ter um valor mínimo aqui e adicionar algo como 20. Isso parece bom. Agora vamos trazer de volta os dados de áudio. No momento, temos uma matriz para nossos feijões com três tamanhos arbitrários e de tamanho de prato Queremos um feijão por fatia, então vamos remover isso. Crie uma variável chamada bin e precisamos de uma nova iteração de loop em todos os círculos, tempo e todas as fatias Então, o índice do compartimento pode ser qualquer número dentro de um determinado intervalo. Fizemos algo assim antes de usar o modelo aleatório Chrom Canvas sketch Então, vamos usar isso novamente. Precisamos exigi-lo primeiro. Em seguida, defina bin como um limite de intervalo de pontos aleatório porque queremos apenas números inteiros ou números com piso porque queremos apenas números inteiros ou e o intervalo pode ser o que você quiser Vou configurá-lo para 4-64. Em seguida, empurre ben para a matriz Bins. Podemos comentar essa linha porque estamos usando os dados de áudio novamente. E dentro do segundo loop, recebemos uma amostra de Bins Colchetes I vezes a fatia NAM mais G. A primeira parte é para cada círculo e a segunda parte é para cada fatia Os dados precisam ser mapeados novamente, assim como fizemos antes Eu só quero escrevê-lo de uma forma mais organizada. Agora vamos declarar mais algumas variáveis. Aqui, adicionamos mapeado e aqui visível a todo o esboço, adicionamos DB médio e DB máximo. Eles são apenas mais curtos para serem gravados, e podemos configurá-los como apenas um áudio interno para sair. O DB médio é igual a analisar um nó. Muitos desabilitam o máximo de dB, analisam um nó, o máximo de decibéis analisam um nó, o máximo De volta à função de renderização, definimos Mapped equals para mapear a ramificação do mapa de pontos, dados de áudio, colchetes de DB médio e DB máximo para zero e um, e fixamos o valor com verdadeiro Esse valor pode ser usado para conduzir a linha com ele. Então, linha com ela é igual a linha com ela. Colchetes I vezes mapeiam, então só precisamos definir a linha de pontos de contexto com ela para alinhá-la novamente. Ok, isso está meio que funcionando. Vemos cada fatia ser construída de acordo com uma frequência diferente nos dados de áudio, o que é bom. O. Mas isso ainda precisa de alguns ajustes. Às vezes, a largura da linha é um número inválido, então o contexto se apega ao número válido anterior, o que faz com que alguns dos arcos pisquem de uma forma estranha Podemos corrigir isso com uma condicional. Se a linha wd for menor que um, continue e pule o resto do código abaixo A outra coisa é que o círculo está cheio. Estamos desenhando todas as fatias, mas ficaria melhor se desenhássemos apenas algumas delas aleatoriamente. Podemos usar nossa matriz de beans para isso. Adicionamos outra condicional aqui. Se foi é zero, continue. E então dentro do loop onde definimos os compartimentos. Podemos definir alguns deles como zero aleatoriamente. Se o valor aleatório for maior que 0,5, igual a zero. Agora está melhor. pode testá-lo com outros audiófilos, se quiser Esse é o nosso esboço. Espero que você goste. Como um bônus, veremos uma variação disso na próxima lição. 39. Aprenda sobre a criação de pôster: O pôster que inspirou nosso esboço foi baseado em outro pôster, um clássico do designer suíço Joseph Mueller designer suíço Joseph Mueller Isso é de 1955 e inspirou muitas pessoas Existem dezenas de remixes e variações online. Vamos criar nossa própria versão aqui, com base no código que escrevemos até agora. Eu sugeriria fazer uma cópia do esboço antes de começar Vou chamar meu sketch Audio two e depois executá-lo via terminal Não vou mostrar o editor online desta vez porque você já sabe o que fazer. Vamos começar alterando o número de fatias para apenas uma. Em seguida, declare uma nova variável chamada PHI, que é uma letra grega para armazenar o ângulo da fatia Podemos excluir essa linha que define alguns beans como zero e rolar para baixo até a função de renderização, também podemos remover essa condicional E essa linha, que está mudando a linha com ela, então vamos definir pi como tempos de fatia mapeados E onde estamos desenhando o arco, vamos trocar a fatia por Ok, isso já não está muito longe de nossa referência, mas precisamos deixar uma lacuna entre os arcos e podemos fazer isso adicionando alguns pixels ao raio Ou, na verdade, nesse caso, é melhor incrementarmos o raio antes da função arco E então, no final, incremente-o novamente na outra metade da largura da linha Agora só precisamos deslocar esses arcos que não estejam todos alinhados no início Podemos criar uma nova matriz aqui chamada deslocamentos de rotação Precisamos de um valor por círculo novamente para que possamos até mesmo usar esse loop. Vamos criar um novo para a rotação para manter as coisas separadas. Rotação de set dot push, chave de pontos aleatória, ponto matemático Pi vezes -0,25 e ponto matemático Pi vezes 0,25 Isso nos dará um ângulo aleatório entre -45 graus e mais 45 graus. Agora podemos girar o contexto uma vez por círculo logo após salvar o ponto do contexto, inserimos Rotação do ponto de contexto, rotação dos colchetes definidos I Se quisermos olhar ainda mais perto do pôster de referência, podemos subtrair 90 graus Então, menos o ponto matemático pi vezes 0,5. E se você não gostar do movimento no sentido horário, pode simplesmente espelhar todo o esboço no eixo Y definindo a escala para um e menos um Ajuste final, defina a primeira linha com este 210. E aí está nossa humilde homenagem à peça clássica de um design gráfico Você pode tentar usar um número diferente de círculos ou fatias ou um es diferente na função, ou pode até tentar adicionar pouco de cor com base nas delícias que vimos nas lições anteriores Outra ideia é que você encontre suas próprias referências de design e tente recrutá-las e torná-las também reativas ao áudio Jim. Nesta lição, aprendemos como acessar dados de áudio para criar imagens reativas de áudio Nós apenas analisamos a superfície da API de áudio da web. Espero que você tenha achado interessante e talvez tenha deixado você curioso para continuar investigando e aprender mais sobre o assunto Agora vamos sair do áudio e começar algo diferente na próxima lição. 40. Desenhe uma única partícula: Nesta lição, vamos criar nosso último esboço, e o tema é partículas Não há nada de especial nas partículas afogadas. Eles podem ser apenas pequenos círculos. A parte interessante é como eles se comportam. Como fizemos até agora no início de cada aula, precisamos criar um novo esboço No editor on-line, crie outra bifurcação do modelo padrão mais uma vez No terminal, insira Canvas, traço esboço, partículas de esboço, traço novo, abra o arquivo JavaScript no editor e altere as dimensões Vamos começar de forma simples e desenhar uma única partícula. Mas primeiro, precisamos definir o que é partícula. Na parte inferior do arquivo, vamos criar uma nova classe chamada partícula no construtor, um objeto com três propriedades X Y e raio com um valor padrão Em seguida, armazenamos essa propriedade como variáveis numéricas com esse ponto X igual a X, esse ponto Y igual a Y e esse raio de ponto igual ao raio Por enquanto, precisamos apenas de uma função para desenhar a partícula, que usa o contexto como parâmetro Essa parte deve ser muito familiar agora. Começamos com Context dot save e context dot restore, depois traduzimos o contexto para esse ponto x e esse ponto Y, depois iniciamos uma nova forma com context dot start Path e desenhamos um círculo com arco de pontos de contexto, x0y0 Esse raio vai de zero à matemática Pi vezes dois, então chamamos preenchimento, e podemos definir o estilo do campo para Y dessa vez, volta ao topo do arquivo ucrite e raio Para armazenar outros objetos de partículas, então, dentro da função de esboço, podemos declarar X Y e Agora, para preencher a matriz, precisamos de quatro loops, e vou definir isso para apenas uma iteração por Podemos aumentar os números mais tarde. X estará no meio da tela, então vezes 0,5 e Y de altura vezes 0,5. Lembre-se de que esses valores estão disponíveis na função sketch, mas precisamos declará-los antes de usá-los Agora, a partícula pode ser uma nova partícula passando em X e Y, e podemos deixar o raio como o E então empurre a partícula para dentro da matriz de partículas. Até a função de renderização, altere a cor de fundo para preto e crie o loop para cada partícula chamado ponto de partícula w, passando pelo contexto E aí está nossa partícula, ajuste... no meio da tela e não é muito Para torná-lo mais interessante, precisamos adicionar mais propriedades a ele e vamos emprestar alguns nomes da física X e Y podem ser rotulados como posição. Então, precisamos de mais duas propriedades para aceleração, AX e AY. Mais dois para velocidade, VX e VY, e mais dois para a posição inicial, Ix e IY, que são essencialmente cópias de X e Y. Então, precisamos de uma nova função chamada update, que vamos chamar em cada quadro do esboço para que possamos ir até a configuração e definir Então, pouco antes de chamarmos o desenho de pontos de partículas, também chamamos de atualização de pontos de partículas Dentro da atualização, vamos incrementar a velocidade pela aceleração com esse VX mais igual a esse machado e o mesmo para VY e Vamos incrementar a posição pela velocidade com esse ponto X mais igual a esse ponto x e esse Y mais igual a esse ponto y. Com isso no lugar, tudo o que resta fazer é aplicar alguma força Podemos fazer isso incrementando a aceleração, exatamente como por enquanto, em um número minúsculo como Isso faz com que a partícula acelere gradualmente e saia da tela Na próxima lição, veremos maneira mais interessante de aplicar forças à partícula 41. Aprenda sobre a aplicação de forças: Vamos fazer com que a partícula se afaste do cursor Precisamos revisitar um tópico que abordamos anteriormente, que é a interação do cursor Esta parte será familiar e você pode abrir curvas de esboço para copiar algum código a partir daí, se quiser Ou podemos simplesmente digitá-lo novamente, pois não há muito o que digitar. Começamos com uma variável global chamada I Canvas. E defina-o como Canvas, que é uma propriedade que também precisamos expor no perímetro da função de esboço Em seguida, adicionamos um ouvinte de eventos ao Canvas. Para pressionar o mouse, chame o manipulador com o mouse para baixo após a função de esboço. Declaramos uma nova função chamada com o mouse para baixo, tomando o objeto de evento E como parâmetro Aqui, adicionamos dois novos ouvintes à janela, um para mover o mouse e outro para cima Estou me movendo um pouco mais rápido desta vez porque já vimos isso antes. Declare ao mover o mouse também com E como parâmetro e ao mover o mouse para cima sem parâmetro Aqui sabemos que podemos remover o ouvinte de eventos, nós o adicionamos com o mouse para baixo. Voltando ao movimento do mouse, podemos calcular a posição do cursor proporcional à escala do esboço com a mesma fórmula que usamos na curva de esboço entro X igual a entre parênteses, E desligue X dividido por L Canvas, ponto, largura do deslocamento e, em seguida, multiplique isso pela largura da Em seguida, duplique a linha e troque X por Y e Largura por Desta vez, não precisamos copiar essas linhas e colá-las dentro do Mouse down. Em vez disso, podemos delegar a lógica ao movimento do mouse chamando-a do mouse para baixo. Agora precisamos armazenar a posição do cursor em um objeto que seja visível em todo o esboço Então, vamos criar um aqui em cima. Chame-o de cursor e atribua a ele duas propriedades, X e Y. Começando com o mesmo número grande e, em seguida, com o movimento do mouse, configuramos o cursor X igual a X e o cursor Y igual a Y. Com o mouse para cima, podemos redefinir esses valores para um número grande novamente, apenas para garantir que eles não estejam nem perto da partícula quando não estivermos arrastando o Agora podemos registrar esse objeto para ver se ele está funcionando corretamente. E deveríamos ver um número próximo de zero nessa esquina e um número próximo a 1080 nessa esquina Agora precisamos calcular a distância entre o cursor e a partícula Já fizemos isso antes em nossa função de teste de TI. Desta vez, vamos fazer isso dentro da atualização. Vamos declarar algumas variáveis. DX DY, DD e esse Delta. DX é a diferença entre esse ponto x e o ponto do cursor X. DY é a diferença entre esse ponto y e o ponto do cursor E DD é a hipotensão que é a raiz quadrada do ponto matemático, dx vezes dx mais dy vezes Então, precisamos de uma condicional se DD for menor do que algo, e isso também pode ser armazenado em uma propriedade Então, vamos criar um aqui em cima. Chame-o de Min dist e defina-o para 100. Agora, de volta à condicional, se DD for menor que esse ponto Min Dist, e aqui é onde vamos definir a aceleração Queremos um valor proporcional ao inverso da distância, o que proporcional ao inverso da distância, o significa que é mais forte quanto mais próximo o cursor estiver da partícula E é por isso que precisamos de uma variável chamada Delta, que será uma distância mínima menos a distância atual DD Então Ax pode ser definido como DX dividido por DD multiplicado por esse E o mesmo para AY. Agora, se clicarmos e arrastarmos o cursor para perto da partícula, ela será disparada na direção oposta A força de impulso é muito forte. Precisamos multiplicar o que calculamos por um pequeno número, que podemos armazenar em uma nova propriedade chamada fator de impulso Vou configurá-lo para 0,02 e depois multiplicar AX e AY por Essa é a força de impulso e também queremos puxar a força. Isso trará a partícula volta à sua posição inicial Agora vou escrevê-lo antes da força de impulso, porque ele age constantemente na partícula independentemente de onde o cursor esteja Desta vez, dx é esse ponto x menos esse ponto X, e Dy é esse ponto ay menos esse ponto y. Ax será Dx vezes esse fator de atração do ponto, que vamos declarar daqui a E AY é DY vezes o fator de atração. Vamos declarar o fator de tração aqui, configurando-o para 0,004 Agora, sempre que entrarmos nessa condição, a força de impulso substituirá a força de tração, mas queremos que elas sejam adicionadas, então precisamos de mais iguais Isso faz com que a partícula tente voltar à sua posição original, mas nunca para de verdade. Ele continua ganhando impulso e ultrapassando o alvo. Precisamos acalmá-lo com um fator de dumping, que vou definir para 0,95 E usamos isso depois de calcular a velocidade, então multiplique VX e VY por esse fator de ponto Dam Agora, o comportamento está muito mais sob controle, e podemos sentir as duas forças agindo sobre a partícula quando tentamos afastá-la e ela tenta voltar à sua posição original Isso é divertido, mas é só uma única partícula. Vamos fazer mais deles na próxima lição. 42. Como distribuir as partículas: Vamos criar várias partículas e, como fizemos anteriormente no curso, as distribuiremos pelo Canvas usando uma função aleatória. Vamos usar uma função diferente do Canvas sketch UTLT time chamada Inside Mais uma vez, se você estiver usando o editor on-line, vá até a caixa de dependências e digite CasketchTo Você precisa portar o módulo aleatório na parte superior do arquivo. Esboço em tela UT aleatório. Em seguida, podemos criar uma nova matriz para armazenar as posições aleatórias chamadas pose. Altere nosso loop for 1-200 e, em seguida, chame um ponto aleatório dentro do círculo, e o primeiro parâmetro é o raio que estou configurando para 400 E o segundo parâmetro é a matriz para X e Y aleatórios, que será pose. Então, essa função preenche a matriz com um X aleatório e um Y aleatório. Já temos X e Y no meio da tela, então só precisamos adicionar o colchete de pausa de zero a X e colocar o colchete um a Y. E agora temos nossas partículas distribuídas aleatoriamente dentro do círculo. E agora temos nossas partículas a matriz com um X aleatório e um Y aleatório. Já temos X e Y no meio da tela, então só precisamos adicionar o colchete de pausa de zero a X e colocar o colchete um a Y. E agora temos nossas partículas distribuídas aleatoriamente dentro do círculo. Já usamos uma distribuição aleatória antes e, embora funcione e tenha uma aparência muito boa, às vezes também é um pouco preguiçosa Podemos encontrar outras formas interessantes de distribuir as partículas e, mais uma vez, podemos encontrar alguma inspiração em alguma referência existente Pesquisei um pouco e encontrei essa imagem de Paul McNeil. Acho que vamos tentar recriar isso em um código, eu trato esses pontos como uma Vou ajudá-lo na lógica por trás da recriação desse layout de partículas Mas a intenção aqui é fazer com que você pense sobre a lógica por trás de qualquer arranjo ou layout que você queira criar. Fazendo uma análise rápida desta. Eu vejo um círculo concêntrico começando do centro e crescendo À medida que ficam maiores, abrem espaço para mais pontos, e os pontos parecem manter uma certa distância um do outro Portanto, quanto menores os pontos, mais afastados eles estão Isso nos dá um ponto de partida. Precisamos descobrir quantos desses pontos podemos encaixar ao longo das circunferências desses círculos Você deve se lembrar que a fórmula para as circunferências do círculo é dois Pi R. Então, se pegarmos um círculo com um raio de 100, as circunferências seriam duas vezes três pontos, 14 vezes O que é aproximadamente 628. Podemos abrir o círculo e representar as circunferências como uma única linha Então, para encontrar o número de pontos, dividimos isso pela largura de cada ponto Digamos que se a largura de cada ponto for 60, então seis a 8/60 é dez Pontilhe algo com um número de pontos no chão, o que significa que podemos colocar dez pontos inteiros ao longo das circunferências Espero que essa explicação tenha sido feita agora, vamos escrevê-la em código. Começamos com alguns novos círculos numéricos variáveis definidos em 15, depois o raio do ponto, que é igual a 12, depois o raio do círculo, que pode começar em zero, depois o raio de ajuste, que é igual ao raio inicial do Pode comentar os quatro ciclos que escrevemos anteriormente e escrever um novo de zero a um círculo. Dentro dele, precisaremos de outro loop com a letra G indo de zero a NumFit Num fit é o número de pontos que podemos colocar ao longo do círculo e ainda precisamos calculá-lo Primeiro, precisamos das circunferências, que são o ponto matemático Pi vezes duas vezes o raio do círculo, do NumFit, que são as circunferências divididas pela largura do ponto, que é o que Não queremos nenhuma infração, então precisamos reduzir esse valor e também levar em consideração o primeiro ponto quando o raio do círculo é zero, então precisamos de uma exceção Podemos escrevê-lo como uma única linha aqui. Se eu usar essa fórmula, L é definido como nu fit como um. Então, quando I for zero, inapto será um. Caso contrário, será calculado com base nas referências do circo A última variável aqui será o tamanho da fatia. Depois de dividirmos o círculo por não ajustado, então o ponto matemático Pi vezes dois dividido por nu fit. Agora, dentro do loop interno, podemos calcular o ângulo de cada ponto e começar em uma nova variável chamada Teta, que é fatia ajustada vezes G. Para encontrar a posição X e Y, usamos uma fórmula que vimos antes , em usamos uma fórmula que vimos antes X é o cosseno de teta vezes o raio do círculo e Y é o seno do Teta vezes o próxima parte é a mesma antes: partícula igual à nova partícula, X e Y e partícula ponto-empurra partículas E agora a parte fundamental é continuar aumentando o raio do círculo em cada iteração Então, o raio do círculo mais é igual ao raio dos pés vezes dois. Vamos fazer isso e chegamos a algum lugar, mas ainda não chegamos lá. Precisamos mover o círculo para o centro do esboço, então precisamos adicionar largura vezes 0,5 e altura vezes 0,5 a X e Y novamente. Os pontos estão muito próximos, então precisamos adicionar algumas lacunas, uma variável para as lacunas entre o círculo, que vou definir como oito e depois adicioná-la ao raio do círculo no final do loop Também precisamos de uma variável para a lacuna entre cada ponto, que vou definir como quatro e adicionar à largura do ponto aqui. Agora, para tornar alguns desses pontos menores, definimos o raio da partícula para o raio No final do loop, podemos alterá-lo com base na divisão por um círculo vezes o raio de ajuste Na verdade, precisamos do oposto, um menos dividido por um círculo, e estamos quase lá Essa linha é uma alteração no tamanho dos pontos usando uma função linear Como vimos na lição anterior, também podemos usar a função ESN. Então, vamos importar o mesmo modelo. ESS, novamente, não se esqueça de instalar a dependência se você estiver usando um editor online, então o custo ss é igual ao requisito de ESS e podemos usá-la aqui como um menos Est quad out, eu divido por Isso é mais elegante. E embora não seja exatamente como a referência, acho que é bem parecida e parece melhor do que pura aleatoriedade. Agora, para tornar o comportamento mais interessante, podemos entrar na classe de partículas e randomizar os valores Em vez do fator de impulso de 0,02, podemos ter um intervalo aleatório entre 0,01 e 0,02 O mesmo para o fator de tração com uma faixa entre 0,002 e 0,006 Um fator de despejo pode variar entre 0,90 e 0,95. A distância mínima também pode variar 100 a 200. Vamos executar isso. Acho que está tudo bem. As partículas ainda se comportam da mesma forma que antes, mas de alguma forma é melhor examiná-las com esse layout. Temos o comportamento das partículas e temos uma distribuição interessante, e na próxima lição vamos trazer algumas cores 43. Como modificar escala e cores: Dentro da função de atualização, temos acesso a alguns valores que podemos usar para afetar o visual. Por exemplo, podemos aumentar a partícula mais longe ela estiver de sua posição inicial Vamos criar uma nova propriedade chamada scale e defini-la como uma. Em seguida, na função de desenho, multiplicamos o raio pela escala Na atualização em que estamos calculando DX e DY para a posição inicial, também podemos calcular o Hypotens e Baseie-o aqui para obter o DD. Em seguida, com base no DD, podemos mapear a escala a organizada e sabemos exatamente qual modelo precisamos para isso. Então, vamos importá-lo. É o modelo matemático do Canvas SkettL e, em seguida, voltando à escala, vamos mapear o intervalo com base no DD 0-200 Altere a escala da partícula de 1 a 5 salve o arquivo, e isso parecerá bem interessante Você poderia usar a mesma ideia e alterar mais propriedades das partículas, como as cores? Essa é outra boa opção para a biblioteca de mapas de cores, nós a usamos em curvas de esboço Já o temos sem estilo, mas se você for um editor on-line, precisará fazer isso para cada Então, insira o mapa de cores para desestilizá-lo. E, em seguida, exija um mapa de cores, um mapa de cores frontal. Declare uma nova variável chamada cores, defina-a como mapa de cores, abra colchetes e, para o mapa em si, usarei Varies Então, para o número de tons, vou usar 20. Podemos excluir esse outloop comentado porque não vamos mais usá-lo e, em seguida, rolar para baixo a classe de partículas e declarar uma nova propriedade chamada color, que pode ser definida como colchetes coloridos Na atualização, queremos outro intervalo mapeado, assim como temos para a escala Mas desta vez para o índice da matriz de cores, podemos criar uma variável para o índice de cores e defini-la como base de pontos matemáticos porque o índice deve ser um intervalo de mapa de pontos matemáticos inteiro DD de zero a cem a zero e comprimento de ponto colorido Menos um. Nesse caso, também queremos definir o grampo 22 como o último parâmetro Em seguida, atualize a propriedade de cor para cores, colchetes e a cor Na função de desenho, podemos atualizar o estilo do campo para essa cor de ponto. Isso parece bom, mas talvez seja um pouco estranho ver partículas pequenas na frente das grandes. Eles são desenhados na mesma ordem. Eles foram criados. Então, se você quiser que as partículas grandes apareçam na frente, precisamos alterar sua ordem na matriz. Podemos fazer isso com uma função da matriz chamada sort. Ele funciona comparando pares de valores e classificando as matrizes em um local Acontece que temos um valor numérico apropriado para classificação na forma de nossas propriedades de escala Essencialmente, queremos que escalas menores sejam desenhadas primeiro e maiores que a escala seja desenhada por último. A matriz pode ser classificada por uma ordem ascendente de escalas com uma classificação por pontos de partículas, A e B, e retornar na escala menos a escala Isso parece mais natural agora. Usamos um mapa de cores para atribuir cores às partículas, mas há outra técnica para atribuir cores a elas, que veremos na próxima lição 44. Criando dados de imagem: Esta é nossa última lição, então vamos tentar algo um pouco mais avançado. Vamos definir a cor da nossa partícula, baseá-la em uma imagem e depois misturá-la com as cores de outra imagem Precisamos de algumas imagens para trabalhar. Vou escolher dois do nsplash.com. Eles podem ser baixados gratuitamente e geralmente têm uma licença amigável. O primeiro que vou escolher será este retrato de Art Huntington E também estou escolhendo essa cor para o balão de Jess Gardner Nós realmente não precisamos de imagens de alta resolução. Na verdade, melhor ainda se forem Les. Estou arrastando-os para o Photoshop, cortando-os em um formato quadrado e reduzindo-os para 64 por 64 pixels Estou salvando-os como imagem. 01 e a imagem 02 ficam ao lado uma pasta chamada imagens que eu criei dentro dos esboços Agora, de volta ao código. Vamos criar uma nova função de sincronizadores chamada carregar imagem Ele usa um URL como parâmetro e retorna uma nova promessa. Com determinação e rejeição dentro da promessa, podemos criar um novo objeto de imagem. Então, quando a imagem é carregada, retornamos a resolução e passamos o objeto da imagem. Caso haja um erro, rejeitamos a promessa e, em seguida, definimos a fonte da imagem como a URL que passamos. Essa é uma função de sincronização e queremos que nossa imagem seja carregada antes de começarmos a desenhar Portanto, precisamos fazer algo semelhante ao que fizemos no esboço de áudio e criar uma função de início de sincronização dentro dele Podemos carregar nossa primeira imagem com Emga equals to await E aqui, a URL para mim será a imagem 01. Esse caminho é relativo à pasta de esboços, portanto, se você estiver usando um nome diferente ou uma pasta diferente, certifique-se de usar a correta Se você estiver usando um editor on-line, novamente, precisará de uma URL hospedada publicamente, assim como o arquivo de áudio da lição anterior. Esse da splash, você encontra nos links abaixo do vídeo E somente para o editor on-line, você também precisa definir a origem cruzada como anônima. Caso contrário, você não conseguirá ler os dados de uma imagem proveniente de um domínio diferente. Aqui nós o usamos EMGA, que ainda não declaramos. Então, vamos fazer isso na parte superior do arquivo. Nosso objetivo é extrair dados da imagem, mas podemos fazer isso diretamente do objeto da imagem. O que precisamos fazer é desenhar a imagem em uma tela primeiro, e ela não precisa ser a mesma tela que estamos usando para nosso Então, vamos criar uma nova tela e armazená-la como EMGA Canvas, que é igual ao ponto do documento Create Element Compass E também armazene o contexto EMGA, que é Emga Canvas, canvas dot G Context two D. As dimensões dessa nova tela são as mesmas da imagem que acabamos Então MGA com uma altura ENGA, e só precisamos de uma coisa desse contexto, que é desenhar Imagem Emga X zero e Y zero Se quisermos ver o que há nessa nova tela, podemos desenhá-la em nossa tela principal com uma imagem de desenho de contexto, Emga Canvas 00 E aí está nossa pequena imagem no canto superior esquerdo. Ver isso aqui pode parecer familiar para você. Agora, para extrair as cores da imagem obteremos os dados da imagem. Vamos armazenar em uma variável chamada dados EMGA, que é o contexto AMGA Obtenha dados de imagem de X zero e Y zero até largura e altura MGA. Esse retorno de um objeto do tipo image data e propriedade em que estamos interessados também é chamado de data. Então esse é o que estamos armazenando aqui. É uma grande matriz com valores LGBA sequenciais. Então, para cada pixel da imagem, obtemos quatro itens na matriz. O próximo passo é encontrar o pixel na imagem que corresponde às posições X e Y de cada parte. A imagem equivalente X será X dividido pela largura, multiplicado pela largura da imagem Isso precisa ser um número inteiro, então precisamos envolvê-lo com um piso de pontos matemáticos, depois duplicar a linha e trocá-la por Y Agora, para encontrar o índice dessa posição na matriz de dados da imagem, usaremos algo semelhante ao que vimos antes em nossa lição sobre dados de grade e áudio. O índice é AY vezes a largura da imagem mais X e, como a matriz tem quatro itens por pixel RGBA, precisamos multiplicar isso por O valor vermelho do pixel são dados Emga, colchetes, índice mais zero, verde é índice mais um e azul é índice mais dois Então, podemos construir uma string colorida chamada A, Bectis para strings literais, depois RGB, e entre parênteses definimos Vamos declarar essa variável que acabamos de citar. Em seguida, passe cool A para a nova partícula, declare-a no construtor e podemos atribuí-la à nossa propriedade de cor existente e comentar ou excluir essas linhas da atualização Agora podemos ver que nossa partícula está usando a cor da imagem Ainda não está ótimo, então vamos diminuir as lacunas e usar mais círculos. Digamos que 30. Também podemos preparar a partícula com base no brilho do pixel ou em um dos canais de cores Podemos mapear o raio até a faixa do canal vermelho de zero e 255 a um e 12 O efeito é interessante, mas há mais uma técnica que eu quero abordar antes de terminarmos. Semelhante ao que fizemos com o mapa de cores, vamos mudar as cores com base na distância da partícula até suas posições iniciais e vamos usar as cores de uma segunda imagem Em todo lugar no código em que temos o EMGA, também teremos o EMGB Na função inicial, EMGB é igual a carregar imagem, imagem 02 e, aqui em cima, declarar EMGB e duplicar todas essas linhas e trocar A por B, EMGB Canvas, contexto EMGB, largura e altura, desenhar imagem, dados EMGB e aqui declarar a chamada B. Então, dentro do loop, se ambas as imagens tiverem a mesma largura e altura que as minhas, você não precisará calcular o declarar EMGB e duplicar todas essas linhas e trocar A por B, EMGB Canvas, contexto EMGB, largura e altura, desenhar imagem, dados EMGB e aqui declarar a chamada B. Então, dentro do loop, se ambas as imagens tiverem a mesma largura e altura que as minhas, você não precisará calcular o indexe novamente e você só precisa duplicar RG e B e ler os dados EMGB e, em seguida, definir a chamada B. Desta vez, não precisamos passar Cd B para a Cd B para a Em vez disso, vamos passar um novo objeto, que é a interpolação entre a chamada A e a chamada B. Para isso, precisamos de uma nova pintura chamada Interpolação de cores Você já conhece a rotina. Vá até a caixa de dependência e digite Crawler Interpolate. No terminal, controle C para interromper o processo PMI, Crawler Em seguida, seta para cima e execute as partículas de esboço novamente. Importado como interpolação da interpolação Crowler. Estamos ficando sem nomes de variáveis para cores aqui, então vamos chamar esse mapa de chamadas e configurá-lo para interpolar entre colchetes, chamado A e chamado B. Esse é o objeto que estamos passando para a nova partícula em vez de chamado A. Podemos começar como uma cor de conjunto de propriedades para chamar Podemos começar como uma cor de conjunto de propriedades para Então, na atualização, faremos a mesma coisa que estamos fazendo para dimensionar e definir cores para resfriar o mapa e organizar com base em DD de zero e 200 a zero e um com a fixação definida como verdadeira Agora, à medida que nos movemos, o cursor vê as partículas tirando cores das duas imagens. E aqui está um exemplo com um par diferente de imagens. Foi uma longa lição, mas espero que você goste do que criamos. Nós cobrimos muitas coisas e vimos muitas técnicas. Agora é sua vez de usar todas essas técnicas que aprendemos para fazer suas próprias artes visuais. Obrigado por participar do curso e espero que tenha sido útil para você. 45. Projeto de curso: Olá, pessoal. Para o projeto de aula, quero que você acesse a Internet e pesquise algumas referências de arte de artistas famosos de sua preferência ou de qualquer outro artista e tente imitar a arte codificando-a no estilo Java e tornando-a estática como um pedaço de um pôster ou tente animá-la ou tentar torná-la visualizadora de áudio Experimente usar sua imaginação e criar sua própria obra de arte exclusiva É isso mesmo. Estarei esperando sua criação artística a apresente na forma de uma aula. 46. Aprenda as dicas finais: Olá, pessoal. Espero que tenham gostado da viagem. Trabalhamos em algumas composições juntos, mas a parte mais importante foi a técnica que aprendemos, porque agora você pode transferi-las, respondê-las em outro lugar e criar algo diferente. Embora tenhamos abordado muito, sempre há mais sobre o que falar. Então, preparei uma pequena lista de dicas para esse vídeo final. Bibliotecas. Usamos alguns ao longo do curso, mas existem mais 1.000 por aí. Algumas pessoas gostam de fazer tudo sozinhas, mas às vezes é como tentar reinventar a roda Sempre que você precisar de algo específico, eu recomendaria verificar primeiro o MPM Talvez outra pessoa já tenha resolvido o mesmo problema. Se você precisar ler dados de um arquivo CSV, há uma biblioteca para isso Se você precisar operar com os vetores ou converter entre espaços de cores ou carregar arquivos de fontes, também há uma biblioteca para isso Construindo um site. Um esboço pode viver sozinho. Você pode exportar sua composição e imprimi-la ou publicá-la em algum lugar. Mas se você quiser compartilhar seus esboços on-line, você também pode fazer isso com um comando build Gere arquivos JavaScript e HTML estáticos, que podem ser hospedados como uma página da Web normal em qualquer lugar Caso você precise que seu esboço seja integrado a um site existente, lembre-se de que estamos sempre usando a API do Canvases Pode copiar as partes válidas do seu código em outro projeto e executá-lo sem o Canvas sketch, Muitas pessoas entram na codificação criativa com o processamento de p five dot gs, e isso faz muito sentido Existem ótimas ferramentas. Estou acostumado a trabalhar com uma API nativa. Mas se você já está confortável com cinco DOTGs, você pode usá-lo junto Há um exemplo básico no sistema respiratório que mostra como fazer isso. Documentação. Essa é óbvia. Certifique-se de verificar a documentação que não é apenas para Canvas sketch ou para a API do Canvas, mas para qualquer API com a qual você esteja trabalhando, alguém dedicou um tempo para organizar e documentar seu código, que possamos tirar proveito Está lá para nos ajudar. Então é isso para mim. Estou curioso para ver o que você criou com o que aprendeu no curso. Lembre-se de postar sua composição no fórum da turma. Estou ansioso para vê-los.