Arte gerativa para NFTs com Javascript e p5.js

1. Introdução: Olá e seja bem-vindo ao meu curso. Meu nome é Dan Burgess e eu sou, entre outras coisas, um músico e um desenvolvedor web. E vamos aprender como criar um programa de arte generativo que é executado no navegador usando JavaScript e uma biblioteca JavaScript chamada p5.js. Então, vamos desenhar um NFT, um design de estilo usando código. E, em seguida, o programa gerará uma variação única do design com cada atualização de página. Você também salvará as imagens geradas no disco rígido. O que você está vendo agora na tela são alguns exemplos. Então, se você está se perguntando como as variações do NFT são feitas, Este curso será uma ótima introdução. Então, basta clicar na próxima lição e chamá-la junto comigo. Eu estive aqui hoje. Obrigado. Um deles é mais que eu tenho que sair. Vocês dois são um 2. Configuração de ambiente: Certo, então, para este projeto, vamos usar o Visual Studio Code em nosso editor de código. Já o tenho instalado no meu computador. Mas se você não fizer isso, pode baixá-lo e instalá-lo diretamente do site, que é chamado de Visual Studio.com. Então eu já o tenho aqui. Então, dentro do Visual Studio Code, vamos criar dois arquivos e salvá-los na mesma pasta. Então, vou clicar em Novo arquivo e vamos salvá-lo. E vou chamá-lo de HTML de ponto de índice. Vou salvar isso na minha área de trabalho em uma nova pasta chamada Jan art. Certo? Precisamos de um ou arquivo. Vou salvá-lo na mesma pasta e chamá-lo de script dot js. Agora estou no arquivo index.html. Precisamos de algum HTML boilerplate que seja muito fácil de fazer e recurso ao código que acabamos de digitar HTML. E isso nos dá, aqui estão diferentes opções para diferentes formatos. Vou selecionar o que termina em cinco. E aqui temos nosso HTML básico de boilerplate. A última coisa que precisamos fazer é incluir aqui no arquivo HTML três dependências bem como dependências mais nosso script. Então, para isso, logo abaixo da tag de título, vamos adicionar uma tag de script. Pergunte à fonte. Vamos adicionar p5.js. Essa é a dependência que vamos usar e o link estará na descrição abaixo. Então eu copiei esta versão, 1 ponto para o ponto 0, Min e cole-o aqui. E precisamos de mais um. Este aqui. O link também está na descrição. É este pacote aqui chamado p5.js, SVG. E se rolarmos aqui no GitHub, está bem aqui no início. Só precisamos adicionar essa linha ao projeto. Portanto, ele já tem a tag de script. Então, vou substituir a coisa toda. E também precisamos do nosso roteiro, este aqui. Portanto, é um script, script dot js. Nós economizamos. Estamos prontos para usar o script.js. Vamos deixá-lo em branco por enquanto. 3. Como desenhar nosso design: Então, se eu abrir a pasta geral com nosso projeto na minha área de trabalho agora, um abridor de olhos, index.html e meu navegador. Nada vai acontecer porque o roteiro, ainda não o temos lá. Então, vamos escrever a versão básica do script em que desenhamos nosso design básico. Ok, Então, no nosso arquivo script.js, vamos adicionar uma função JavaScript. Vamos chamar isso de tudo isso realmente tudo que precisamos, podemos começar a jogar aqui. Então, antes de tudo, vou definir o peso do nosso AVC. Vamos definir isso para cinco. Agora, vamos fazer nossos antecedentes. Então, digamos, por exemplo, bloco de fundo. Vamos salvar. E vou abrir o arquivo index.html no meu navegador novamente e ver o que acontece. Ok, então temos um histórico aqui. É bastante pequeno, mas está aqui. Então isso significa que ele está funcionando. Ok, então vamos adicionar outra função logo antes da função de calha. E vamos chamá-lo de configuração em minúsculas. E dentro dessa função, poderemos definir o tamanho da nossa tela. Então, isso será criar tela. Vou passar em 600 por 600 pixels. E como terceiro argumento, só queremos colocar como VG em todas as maiúsculas. Então, vou abrir novamente nosso arquivo com meu navegador. E agora é 600 por 600. Ok, então para o meu plano de fundo, em vez de usar preto, vou usar um machado, bem, número hexadecimal de cor HTML. E estou aqui em HTML color codes.com. Vou deixar esse link na descrição e posso escolher uma cor e ela me dará o código hexadecimal. Então, por exemplo, algo assim, este vermelho. Vou copiar isso. Ok, então vou salvar e atualizar o documento para ver se ele está funcionando e apenas funcionando perfeitamente. Então, vou desenhar o corpo do meu design. Então, vou usar uma cor diferente por enquanto. Vou dizer que preencha o preenchimento. E vamos fazer, por exemplo, algum tipo de amarelo dentro de aspas simples irá. E vamos desenhar uma elipse, vamos dar como as coordenadas mais 2, trezentos e seiscentos e noventa seis quarenta por 40. Vou atualizar. E aqui está nosso corpo. Então, onde vou entrar nessas duas funções, configurar e desenhar de como elas funcionam? Bem, basicamente desde que estamos usando p5.js, desculpe, p5 js como uma dependência. Estamos apenas usando as convenções deles. Se formos à documentação deles, vou deixar esse link na descrição. Vemos que funciona exatamente assim. Precisamos de uma função chamada configuração dentro dela, crie tela. E passamos na largura e na altura. E então um desenho de função no qual desenhamos coisas. E há coisas diferentes que vamos desenhar como fundo como fizemos, ou podemos desenhar uma elipse como aqui. Então, na elipse, estamos passando quatro parâmetros diferentes aqui. Então, se formos para a documentação p5.js e formos para referência. Aqui em forma, aqui está a função elipse. E vemos que são necessários quatro parâmetros assim como passamos n. E aqui diz o que eles significam, diz por padrão, os dois primeiros parâmetros definem a localização do centro da elipse. Então, estamos dando 306, 90. E o terceiro e quarto parâmetros definem as formas, largura e altura. E é aí que somos dados em 640 e por 40. Ok, então depois do corpo, vamos desenhar as orelhas. Vamos dizer que não escolha uma cor diferente para alguma pesquisa, outra verde. E então vamos precisar de duas elipses. Então, para o primeiro, vou passar, digamos um 125, 135. Vamos fazer 170. 170. Para a orelha direita. Vamos fazer quatro, 75, 135 inchar. Então eles estão na mesma altura em segundo plano. E também 140, desculpe, 170, 170. Então eles são do mesmo tamanho, k. Então, vamos atualizar. E lá vamos nós. Aqui estão os ouvidos. Ok, então vamos agora fazer a parte interna da orelha. Preencha uma cor diferente para um verde mais escuro. E isso vai ser mais duas reticências. Então, vamos tão 125, assim como a orelha externa. Vamos fazer 135, mesmo centro, e depois vamos fazer 140 e 140. Por isso, é menor, menor. E a propósito, estamos usando a ferramenta elipse, mas estes são todos círculos porque a altura e a largura da elipse, Aqui está oi, aqui está a largura são as mesmas. E o outro que você acabou de fazer vai ser uma elipse e vai ser 475 e depois 135, e depois 140 e 140 para ir. Então, vamos atualizar e ver o que isso se parece . E lá vamos nós. Então, vamos fazer o rosto. Fui dizer preenchimento. Vamos dar outra cor. Vamos fazer um pouco de azul, outra elipse. E vamos dar 300. Vamos fazer trinta e quatro, cinquenta, quatro quarenta. Vamos atualizar. E lá vamos nós. Aí está o nosso rosto. Então, vamos fazer os olhos. Caiu sobre outra cor. Vamos fazer roxo. Certo. Isso é uma elipse. E vamos para 30 a 50. Vamos desenhar um 22 no outro olho. Então, outra elipse. Vamos fazer 370. E os mesmos valores, 250, queremos na mesma altura e depois do mesmo tamanho, 282. Certo, vamos atualizar. Lá vamos nós. Então, vamos fazer os PBLs. Então eles vão ter o mesmo centro, mas a falha será preta. Então, poderíamos apenas escrever preto, ou podemos usar o código hexadecimal, que é exatamente isso. Todos os zeros. Então elipse. E é claro que o centro será o mesmo, então serão dois trinta e duzentos e cinquenta. E queremos tornar a pupila menor. Então, vamos fazer 30, por exemplo. O caminho certo. Então, serão 375, 250 e depois 30 e 32 anos. Bem, vamos atualizar. E lá vamos nós. Ok, então vamos fazer essa nota. Falha. Bem, vamos escolher outra cor. Certo, e isso vai ser outra elipse. Então, vamos passar por 100, 390. E vamos fazer 200 por 200. Então, é um círculo novamente. Vamos atualizar. E lá vamos nós. E vamos fazer a boca. Então, vou torná-lo preto. No código para preto estão todos os zeros. Então, são seis zeros. E aqui, vou fazer algo diferente. Vou fazer um arco, um arco. E se olharmos para a documentação, faremos referência. Aqui está nosso arco. É assim que funciona. Se chamado apenas com x, y, w, a para iniciar e parar, o arco será drones falhou. É um segmento de torta aberto. Então, o que queremos fazer aqui é vamos fazer exatamente Isso é verdade. 300, isto é x. vamos fazer 420, e vamos fazer 70 e 65, a largura e a altura. E então, para começar e parar, vamos fazer, Vamos começar em 0. E vamos terminar em Pi k. Então vamos ver o que isso parece. Sim, perfeito. E estamos apenas perdendo o nariz. Só vai ser preto também. Então, se não fizermos nada, ainda será preto porque da última vez que chamamos de falha, dissemos que era preto, mas ainda vamos escrevê-lo novamente aqui também. Então é que a Xeon tem sua cor como a Clara explicitamente. Então, 000, 000, 000. E isso vai ser uma elipse. E vamos fazer 300, 350. E vamos fazer dele um círculo novamente. Então, apenas 80 por 80. Ok, então vamos atualizar. E aqui está nosso urso. 4. Como obter cores aleatórias de uma lista: Ok, então nós codificamos todas as nossas cores, retângulo com uma forma de clorofila. Temos agora, temos uma cor que Claire, então essas mudam, mas queremos que as cores mudem toda vez que atualizarmos a página apenas para torná-la uma ideia geral. Então, para isso, vamos tirar as cores daqui da função de preenchimento. E vamos colocá-los em uma matriz JavaScript e deixar o computador escolher aleatoriamente uma dessas cores. Então, para isso, no topo, vamos adicionar uma matriz. Ok, contras, cores. Vai ser uma matriz. E aqui vamos adicionar todas as cores que queremos usar. Então, podemos adicionar este. E podemos adicionar todos os outros. Então, aqui está outro. Oh, ok, então lá vamos nós. Eu adicionei todas as cores que estávamos usando em nosso exemplo. Então, agora é hora de chamarmos a função de preenchimento. Em vez de codificar a cor como tínhamos antes. Agora todas as cores estão aqui. Vamos passar uma função que escolherá aleatoriamente uma das cores desta lista aqui desta matriz JavaScript que inclui todas as cores que queremos usar. Então, vamos escrever essa função. Ok, então vamos chamá-lo de função de grande cor. Não vamos passar nenhum argumento. E é assim que vamos fazer isso. Vamos criar uma variável chamada index que será Math.floor. E haverá ponto matemático multiplicado aleatoriamente pelo comprimento do ponto dos chamadores, que é o comprimento dessa matriz. Então isso é 1234567. E então vamos retornar o array do chamador com o índice aleatório que geramos. Certo? Então, aqui, esse índice escolhe um número para uma posição na matriz aqui. E então nós devolvemos a cor nessa posição, ele processa. Então, agora toda vez que usamos nossa cor, em vez de ter a coloração aqui, vamos chamar a função de chamada rand. Certo, então vou fazer isso também pelo corpo. Para os ouvidos, para os ouvidos internos, para o rosto, os olhos. Vou deixar as pupilas pretas, fumar. Certo. Vou deixar a boca e o nariz pretos. Certo. Então, vou salvar e atualizar e ver se funciona. Certo. Então, não funcionou. Vamos descobrir o que aconteceu aqui. Certo, sim, esqueci o parêntese aqui. Queremos executar a função. Vamos nos certificar de que eu coloquei todos os outros. Então, vamos atualizar e ver se funciona desta vez. E isso não funciona. Sim, tenho um erro de digitação aqui. É comprimento. Ok, então estamos recebendo algo muito trippy e isso não é o que queremos. A razão é porque estamos chamando a função aqui, dentro da função de desenho. Então, em vez de para baixo, vamos fazer é definir as cores para as diferentes partes do corpo para algumas variáveis fora da função. E então usaremos a variável aqui. Por exemplo, podemos dizer que a cor BG é igual à cor FRAND. E então aqui, diremos B para colorir. Então, vamos tentar isso. E lá vamos nós. Agora, o plano de fundo é estático, então vou fazer a mesma coisa para todas as outras partes do corpo. Então, vamos fazer isso. cor do corpo é igual a cor R1. Vamos substituir aqui. mesmo para o IRS, mesmo para os ouvidos internos e o mesmo para os olhos. E, por último, o mesmo para os nevados. Então, vamos atualizar. E esquecemos os ouvidos internos. O que há de errado lá? Sim, aqui está. Temos dois substituídos pela variável. Certo, perfeito. E você verá que toda vez que atualizarmos, nosso script agora está selecionando cores diferentes aleatoriamente. No entanto, isso é um pouco colorido demais para mim. Quero que algumas cores combinem, por exemplo, a fase e as orelhas. Então, vamos usar menos variáveis para as diferentes cores. Então, vou manter um para o fundo, vou manter um para o rosto. E vou manter um para os olhos, mas é sobre isso. Então, para os ouvidos, internos e externos, e para esta nota, vou usar a cor do corpo. Então aqui está a fase também usa a cor do corpo. Este nó usa a cor do corpo. Certo? Sim, isso faz um pouco mais de sentido. No entanto, às vezes os chamadores são repetidos, por exemplo, aqui, esse script está usando as mesmas cores, a mesma cor para os olhos e para o corpo, o rosto, etc. E eu não quero isso. Então, vamos modificar nossa função de cor aleatória. E vamos dizer o seguinte. Primeiro de tudo, vamos criar uma matriz aqui que vamos chamar. Use chamadores, índices, ok, e esta é uma matriz vazia. Então agora, aqui na função, vamos dizer, enquanto usado, chamadores existem, ponto inclui índice. Então isso significa que se nesta matriz já tivermos esse índice, então vamos reescrever o valor do índice gerando um novo. Se não estiver neste array assim agora, porque está vazio, esse valor permanecerá. E a última coisa que queremos fazer é depois disso, depois de termos um índice, vamos adicionar esse índice a essa matriz. Então, vamos dizer usar cores no índice Porsche. Certo? Agora, se atualizarmos, veremos que agora as três cores são sempre diferentes. 5. Fix com olhos: Ok, então nosso roteiro está funcionando muito bem. Só vou adicionar um pequeno detalhe aos olhos. Só vou adicionar um pouco de branco. Então, para isso, o que temos nossos olhos aqui? Bem, vamos fazer é copiar essa coisa toda. Certo? E vamos ter uma elipse externa de que é realmente um círculo que ocupa todo o espaço. Mas este aqui, vamos torná-lo branco. Poderíamos escrever aqui branco. Ou podemos usar os códigos de cores HTML, que são FF, FF, FF, FF. E então o segundo, vamos deixá-lo com a cor de gelo gerada pelo roteiro. Mas vamos torná-lo menor. Então, digamos 59 por 59. O mesmo neste. Certo, vou salvar e atualizar. Isso vai embora. Isso é melhor. 6. Iluminar algumas cores: Ok, então estamos usando a mesma cor para o corpo, a fase, a neva, as orelhas, etc. Mas vou adicionar uma pequena função só para que tenhamos diferentes tons dessa cor. Em particular, o que estou planejando fazer é que eu farei o rosto, a orelha externa e o corpo ficar um pouco mais leve, e deixarei o carro real que foi selecionado para o ouvido interno e para esse nó. E então, no fundo, sempre vou torná-lo mais claro que a cor real. Então, para isso, haverá um link na descrição para este arquivo do GitHub. E é uma função para Leiden em uma cor, esta, é meio complicada. Bem, podemos simplesmente copiar e colar e depois incluí-lo em nosso script. Então, vou copiar e vou colá-lo. E vou colá-lo na parte inferior. Lá vamos nós. Portanto, essa função tira uma cor no formato HTML que começa com o sinal de libra e, em seguida, levará um percentual. Certo? Então, vou usar essa função. Vamos ver em segundo plano. Então, em vez de cor de fundo, vamos usar a função luz e parêntese de cor. E passamos na cor de fundo. E então vamos dizer 30. Então, vamos atualizar. Ok, sim, vamos escolher uma cor para o plano de fundo e ela está automaticamente tornando-a mais clara do que originalmente. Então, vamos fazer a mesma coisa com o da cor do corpo parêntese da cor do corpo. E então passamos na cor do corpo. E então vamos fazer 10 por cento aqui. E vou copiar toda essa linha. Vou usá-lo também nos ouvidos externos. Também vou usar isso na cara deles. E também vou usar essa coisa que diz no corpo, na orelha e no rosto. E isso deve funcionar. Então, vamos atualizar. Sim, perfeito. 7. Download download os arquivos: Certo, e a última coisa que vamos fazer é adicionar uma pequena função na parte inferior. E essa função nos permitirá baixar o arquivo. É hora de atualizarmos. Então, é assim. Ele vai documento, ponto, adicione evento, ouvinte. O tipo de evento que vamos ouvir, será o conteúdo DOM carregado. E o que estamos dizendo é quando o conteúdo do documento está totalmente carregado para o seguinte e vamos passar uma função. Isso é chamado de função de seta em JavaScript. Portanto, é um conjunto de parênteses e R0, que é o sinal igual mais maior que o sinal. E então colchetes encaracolados com ponto e vírgula. E aqui dentro de uma função com que vamos fazer é definir o tempo limite. E isso tomará outra função de seta como o primeiro argumento. E aqui, vamos fazer é abrir chaves encaracoladas e fechar chaves encaracoladas. E por dentro, vamos dizer Salvar como parêntese V, g, e depois SVG, todos minúsculos. E, em seguida, uma vírgula após o fechamento do suporte encaracolado. E 500, o que significa 500 milissegundos. Significa fazer isso após 500 milissegundos. Então, vamos salvar, vamos atualizar e vamos ver se funciona. Sim, está nos pedindo para baixá-lo. Então, vou baixá-lo novamente. Certo. Aqui, se eu abrir meus Downloads, aqui estão todos os meus ursinhos de pelúcia. 8. Como modificar a paleta de cores e as formas: Ok, então na última lição, quero mostrar como experimentar isso, um script para criar seu próprio design original. Então, antes de tudo, vou comentar a função que adicionamos na última lição. E para isso, existem diferentes maneiras de fazer isso. Podemos apenas fazer esse asterisco de barra e, em seguida, adicionamos outro no final. barra de asterisco, ou o contrário. E agora essa função será ignorada. Só estou fazendo isso. Portanto, ele não pede que façamos o download do arquivo toda vez que atualizamos enquanto estamos experimentando. Certo? Então, basicamente, você pode experimentar em primeiro lugar, modificando as cores. Você pode ter cores diferentes, você pode adicionar mais, você pode tirar algumas cores. A única coisa é que você deve respeitar a sintaxe de uma matriz JavaScript com todas as strings diferentes para os chamadores sempre entre aspas simples. E você adiciona uma vírgula no final em todos eles , exceto a última. Então agora temos poucas cores. E vamos passar por códigos de cores HTML e apenas experimentar, tentar adicionar algumas novas cores. Então, vamos adicionar este. E vamos adicionar algum tipo de cinza. Vamos também cinza claro. Certo? E vamos ter quantas cores quisermos aqui, já que a função para gerar uma cor aleatória é levada em consideração o comprimento dessa matriz. Não precisa ser nenhuma terra específica. Você pode usar quantas cores quiser. Então, vamos atualizar e vamos ver como. Agora, o script também é puxado nas novas cores. Aqui está nosso cinza. Certo? E então a outra coisa que você pode fazer é na função de desenho, você pode modificar tudo isso. Por exemplo, se modificarmos o peso do traçado, as linhas desenhadas serão muito mais finas. Assim. Além disso, você pode modificar cada elemento individual ou pode até criar elementos do zero. Você pode experimentar os lábios com o nome posterior. Lembre-se de que os dois primeiros parâmetros são x e y, que determinam o posicionamento do centro da elipse dentro da tela. E esses dois últimos são a altura e a largura dessa elipse. Por exemplo, poderíamos fazer a fase, poderíamos torná-la mais fina modificando esta que é a largura. Vamos fazer 400. Lá vamos nós. E também podemos adicionar algo ao plano de fundo. Poderíamos adicionar uma elipse, por exemplo, que tenha seu centro bem no meio da tela. Como a tela é de 600 por 600, será 300, 300. E então podemos fazer com que ela pegue toda a tela e será um círculo no fundo que leva toda a tela seiscentos, seiscentos. Podemos fazer disso uma cor diferente. Então preencha. E podemos adicionar uma nova variável para isso. cor do círculo é igual a cor sram. Digamos que a cor do círculo aqui. Vamos ver se funcionou. Lá vamos nós. Então, na seção de descrição, você terá um link para todo o meu script. Você pode verificá-lo. Há se você cometer algum erro, etc. E sinta-se livre para, sinta-se à vontade para experimentar e modificar todos os diferentes parâmetros e até tentar desenhar algo do zero com elipses em arcos. E se você se sentir muito aventureiros, pode até ler a documentação do p5.js e usar diferentes formas novas que nem sequer usamos neste curso.