Crie arte generativa emergente com JavaScript e P5.js

1. Introdução: Olá e bem-vindo um mestre de Belikov gorducho. E hoje vou ensiná-los a criar arte gerada usando uma técnica que envolve comportamento emergente. Depois de aprender esta técnica, você será capaz de criar uma grande variedade de animações e imagens estáticas que parecem muito intrincadas e bonitas. Por enquanto, criaremos duas peças animadas fora da arte. Este é o 1º 1. Parece estar tão cheio de vida, não é? Mas criar isso vai levar apenas alguns minutos e algum código muito simples. Ok. E esta é a segunda peça da arte emergente que criaremos hoje. Pode parecer mais complexo que o 1º 1, mas garanto que isso não é verdade. Seremos capazes de criar isso também. Em um tempo muito, muito curto. Você não precisará de nenhuma ferramenta ou conhecimento especial para esta aula. Estaremos escrevendo apenas código javascript, então você só precisará de um Broza. Vamos mergulhar no código no próximo vídeo. Então eu te vejo lá. 2. Criação de arte emergente animado: Olá e bem-vindo de volta. Vamos usar a caneta para escrever todo o nosso código. Então vá ao tribunal ben dot io e crie um novo pin. Nós não vamos estar escrevendo qualquer HTML r C s agora, então você pode minimizar esses painéis. Em seguida, estaremos usando uma biblioteca chamada p cinco pontos Js para desenhar em nossa tela. Você não tem que usá-lo, mas realmente simplifica seu tribunal e ajuda você a se concentrar mais em seus algoritmos para adicioná-lo. Vá para configurações, em seguida, JavaScript e aqui, como para p cinco largesse. Selecione a primeira opção e agora você pode fechar este que ser cinco DJs. Você só precisará de funções para começar a secar. A primeira função é chamada set up e a segunda função é chamada Draw. O conjunto de função é chamado apenas uma vez, mas a função draw é chamada uma e outra vez cerca de 60 vezes por segundo. Isso significa que qualquer coisa que você desenhar dentro desta função pode se tornar uma animação. Tudo bem. Primeiro, vamos criar um Gammas dentro da função de configuração. Queríamos ser um quadrado, então vamos definir o tamanho 400 por 400. E então vamos dar um fundo. Você pode passar quaisquer valores RGB para disfunção. , se você passar um único valor para ele No entanto, se você passar um único valor para ele, ele se torna um cinza compartilhado. Então, zero é preto e 55 é branco. Qualquer coisa no meio estará de acordo. Agora também é um bom momento para definir os valores de traçado e preenchimento para nossa tela. Eu vou dizer que a cor do traço é um preto semi transparente. Como você deve ter adivinhado, o segundo parâmetro aqui especifica a transparência no Daz para a cor de preenchimento. Deixe ser uma sensação de preto ligeiramente menos transparente. Esses valores foram retidos gratuitamente. Se você está sob tribunal agora, você pode ver a tela agora para criar gráficos com base no comportamento emergente, você vai precisar de um monte de elementos simples que podem se mover e colidir uns com os outros. Você pode chamá-los de partículas, criaturas Boyd ou qualquer outra coisa que você quiser. Eu simplesmente as chamo de partículas. Então, digamos que por enquanto temos AH 100 partículas. A loja, todas as partículas. Vamos usar um array. Cada partícula pode ter um tamanho, então digamos que é 40 novamente. Você é livre para alterar os valores dessas variáveis. Na verdade, é assim que você modifica sua geração sobre. Tudo bem agora, vamos escrever uma função para realmente criar uma partícula para manter as coisas arrumadas. Digamos que nossa partícula é um objeto. Vai ter alguns campos. O 1º 1 vai ser a sua posição. Obviamente, uma posição em nossas telas feita de uma coordenada X e da coordenada I para armazenar comprou os valores. Juntos, podemos usar um vetor. Por agora. Vamos atribuir uma posição aleatória para a nossa partícula, então vamos ter que usar a função aleatória para a coordenada X vai precisar de um valor aleatório entre zero e a largura da tela, então apenas multiplicado, mas escolhido de forma semelhante para o Y. Coordenada, Basta multiplicar um número aleatório com a altura da tela. Em seguida, precisaremos especificar a direção em que nossa partícula está se movendo. Esta direção para será feita fora de um X, confiante e de I confiante, então criar outro vencedor e definir o seu valor para alguns números aleatórios. Em outras palavras, dê-lhe uma direção aleatória. E agora vamos adicionar comportamentos muito simples às nossas partículas. Faremos isso dentro de uma função chamada atualização. Ok, o primeiro comportamento vai ser movimento em linha reta. Em outras palavras, a partícula deve estar sempre se movendo na direção que é atribuída a ela. Para implementar isso, tudo o que precisamos fazer é adicionar o vetor de direção ao vetor de posição. Agora, se a partícula continuar se movendo em uma direção, mais cedo ou mais tarde ela sairá da tela para lidar com tal situação. Vamos adicionar outro comportamento. Digamos que se a partícula se mover para fora da tela, ela simplesmente salta de volta para o centro da tela. Para fazer isso, devemos verificar se é coordenada X é maior que a palavra da tela, nossa Lesa do que zero. Se isso for verdade, definimos a coordenada X. Reboque por dois. Não é nada além do centro horizontal da nossa tela. Da mesma forma, se a coordenada por for maior do que a altura da tela são menores que zero, estamos ajustados altura do dedo do pé por dois, que é o centro vertical da nossa tela. A função de atualização agora está completa em nossa partícula para está pronta, então vamos apenas retorná-la a partir daqui. Agora é hora de criar 100 partículas. Podemos fazer isso dentro da função de configuração, então vamos direito. Farlow Pia. E dentro disso podemos empurrar novas partículas para dentro das partículas. O Harry. Tudo bem, agora nós desenhamos as partículas. Então, dentro da função de desenho, vamos escrever outro para loop toe iterar sobre todas as partículas aqui, vamos usar um círculo para representar uma partícula. Para desenhar um círculo em p cinco pontes, você deve usar a função Elipse após as coordenadas X e Y da partícula para a função e também passou o tamanho da partícula para ela. Note que este será o diâmetro fora do círculo, não o raio, e para mover sua partícula chamada função de atualização. Neste ponto, se estiver sob o tribunal, verá algo assim, não é exatamente o que esperávamos, não é? Isso está acontecendo porque os círculos estão sendo continuamente desenhados, cada quadro, e eles estão supervalorizando a si mesmos e uns aos outros para corrigir isso. Só precisamos limpar a tela toda vez que desenharmos. Podemos fazer isso chamando a função de fundo novamente. Desta vez, vou colocar o dedo do pé branco. E agora, como você pode ver, o movimento dos círculos está bom. É hora de adicionar um comportamento um pouco mais complexo às nossas partículas. Esse comportamento permitirá que eles colidam uns com os outros e respondam adequadamente. Então crie uma nova função chamada colisões de verificação. Dentro dele, devemos percorrer todas as partículas e tomar, se houver, para colidir. Então vamos precisar de dois aninhados para loops. Uma partícula não pode colidir consigo mesma, então vamos adicionar uma condição a tomar para isso. Ok, agora é muito fácil de aceitar. Se duas partículas circulares idênticas estiverem colidindo entre si, tudo o que você precisa fazer é verificar se a distância entre seus centros é menor do que igual ao seu raio. Para calcular a distância, você pode usar sua função de distância. Você deve passar as posições de ambas as partículas para disfunção. Muito bem, se esta distância for menor que o tamanho da partícula, significa que temos uma colisão. Como lidamos com a colisão? Digamos que simplesmente mudamos as direções de ambas as partículas, mas em vez de atribuir ah, nova direção aleatória a elas. Vamos simplesmente girar aleatoriamente a direção. Então chame a função girar na direção vencedora da primeira partícula e passou um valor aleatório para ela. Além disso, faça isso. Faça a segunda partícula. Ok, isso é bom o suficiente. Por enquanto, vamos chamar a função de colisões tic dentro da função draw e ver como as partículas se comportam. Muito interessante. Mas parece que todas as partículas estão congeladas e não são capazes de se mover. Isso é porque não estamos dando às partículas tempo suficiente para se afastarem umas das outras. Para corrigir isso, vamos adicionar algo como um contador para cada partícula e disse que seu valor para zero por padrão . Agora, digamos que depois de uma colisão, não queremos perturbar a partícula por algum tempo. Mais especificamente, digamos que não queremos perturbar a partícula para alguns ciclos de extração. Para especificar esse número, vamos usar uma variável chamada contador Max. Eu vou definir o seu valor para 1 50 Isto significa que após uma colisão, a partícula será capaz de se mover livremente para 1 50 chamadas de drogas para impor este comportamento Dentro da função de verificação religiões disse que o valor da propriedade contador fora ambos os partículas colidindo fazer contador Max. Agora podemos simplesmente dizer que o comportamento de colisão de uma partícula deve ser executado somente se o contador for zero, então adicione, tais condições se para ambas as partículas. Se o primeiro contador de partículas for zero, execute essas duas linhas e, se o segundo contador de partículas for zero, execute essas duas linhas. Por último, precisamos descriminalizar o contador. Podemos fazer isso dentro da função de atualização da partícula. Então, se o contador é maior que zero, apenas discriminado por um cada vez que é atualizado. Neste ponto, se ele comandou nossa corte, as partículas são capazes de se mover livremente. Tudo bem. Agora, não há razão para o tamanho dos círculos ser igual ao tamanho da partícula. Vamos mudar o raio aqui na função Elipse para algo muito menor. O momento parece muito mais claro agora. Em seguida, vamos tentar algo diferente. Sempre que duas partículas colidem, vamos traçar uma linha entre elas. Fazer isso é fácil, mas não podemos traçar uma linha por dentro. A função de verificação de colisões. Então, sempre que a colisão acontece, vamos armazenar as posições das partículas que colidem dentro de uma matriz. Vou ligar para as linhas do IRA. Aqui. Dentro da função de religiões tecnológicas começar Basta adicionar as posições fora de ambas as partículas para a área, então cada item, um diário em si, será uma matriz contendo dois itens que não são nada mais que as posições fora ambas as partículas. Agora você deve se certificar de que esta área de linhas está vazia toda vez que uma função de colisões é chamada. Caso contrário, ele crescerá muito grande. Então, redefina-o é o início da função. Ok, volta para dentro da função de desenho. Tudo o que devemos fazer agora é loop através das linhas são um e desenhar as linhas, então criar um loop for dentro. Ele usou a função de linha para cair. Os 2 primeiros argumentos para a função são as coordenadas X e Y da primeira partícula. E os próximos dois argumentos são as coordenadas X e Y da segunda partícula. E lá vai você. Já temos uma animação interessante. Agora você está livre para mudar os comportamentos das partículas. No entanto, você pode modificar essa animação alterando essas variáveis globais para, por exemplo, se eu mudei o tamanho da partícula para algo muito maior, digamos, 80 eu recebo uma animação muito diferente. Você também pode reduzir ainda mais o tamanho dos círculos para dar uma sensação diferente à animação. Você também pode aumentar o número de partículas em si, mas não que isso possa ter um efeito drástico no desempenho. Então, como você pode ver, mas apenas um monte de comportamentos simples atribuídos a um grande número de partículas, conseguimos criar uma animação que parece interessante e meio bonita Do . 3. Adição: Bem-vindos de volta à lição final desta aula. Agora não vamos adicionar nenhum comportamento extra às nossas partículas. Em vez disso, eles simplesmente vão mudar a forma como os usamos para traçar nossas linhas. Primeiro, digamos que a cor da linha que é desenhada entre as partículas colidindo depende da distância entre as partículas. Então aqui, junto com as posições, vamos incluir a distância para na matriz. Tudo bem agora nós precisamos converter a distância em um valor que está entre zero e 2 55 Isto é porque os valores RGB off cores deve estar entre zero e 2 55 apenas. Para fazer isso, podemos usar a função de mapa. O primeiro argumento para esta função é o valor que você deseja mapear para além da distância , que é o terceiro elemento da área. Os dois argumentos seguintes para disfunção definiram seu alcance fora da distância. Agora isso pode, é claro, ser apenas entre zero e o tamanho da partícula em si. Os dois argumentos seguintes definiram o intervalo das cores assim dizer zero e 2 55 aqui. Não, se aplicarmos esta cor ao traçado da linha e correr vz. Isto não é mau. Vamos agora esconder as reticências completamente. Na verdade, não vamos desenhá-los. Então eu vou apagar esta linha, nem que nossas linhas são muito leves para fazê-las parecer mais proeminentes. Vamos mudar a cor de fundo aqui. Faça preto. Ok, agora vamos ver o que acontece. Se movermos esta chamada para a função de fundo, faça o metal de configuração em vez disso. Isso significa que estaremos desenhando repetidamente sobre nossa tela sem limpá-la. Isto está muito melhor agora. Esta em si é uma boa animação para torná-lo ainda melhor. Vamos adicionar algum valor Alfa à nossa cor do traçado. Que seja um valor muito pequeno, digamos, cinco. Como você pode ver, isso teve um efeito muito profundo sobre o olhar fora da animação. Eu gosto muito mais porque as linhas são tenor. Na verdade, isso parece meio Harry, não é? Você pode jogar novamente com essas variáveis globais para alterar ainda mais a animação. Vamos ver o que acontece se temos muito poucas partículas dizer, Então novamente, uma animação muito diferente, mas muito interessante. Vale ressaltar que todas essas animações podem continuar para sempre e ainda parecem interessantes em qualquer momento. Se você quiser salvar a arte, você pode simplesmente clicar com o botão direito e imagem percebida, pois isso salvará sua arte como uma imagem estática na forma de um arquivo PNG. Tudo bem, isso é tudo por enquanto. Senhoras e senhores, eu sou o mestre do quente disponível, e eu agradeço por assistirem esses vídeos.