Criar arte abstrata com JavaScript e P5.js

1. Introdução: Olá. Meu nome é Asher. Afirmativo. Ilegal. E dou-vos as boas-vindas à minha aula hoje. Vamos aprender a criar arte abstrata programaticamente usando apenas javascript e Broza. Aqui estão algumas amostras da arte que vamos criar. Como você pode ver, esses gráficos são extremamente flexíveis. Simplesmente atingindo algumas variáveis, podemos mudar drasticamente suas formas e cores. Agora, você pode estar pensando que haverá ah, muito fora, Matt, nossa programação envolvida nesta aula. Mas não, deixem-me assegurar-vos que não é esse o caso. Esta vai ser uma aula muito fácil, e será silenciosamente afiada, também. Mas eu sei se você vai estar armado com um novo tipo de conhecimento que você pode usar enquanto faz algo criativo. Se não for qualquer outra coisa, você será pelo menos capaz de criar e compartilhar alguns papéis de parede muito legais com seus amigos. Então, o que você está esperando? Basta abrir a próxima lição e vamos mergulhar diretamente no código 2. Desenhando o atracador de Jong: Olá e bem-vindo de volta tudo que você precisa seguir. O que eu ensino nesta aula é um navegador. Casaco aberto, Ben, são qualquer outro livre para usar editor de código on-line, e você estará tudo pronto. Você pode usar este editor sem fazer login, mas você terá uma experiência melhor se fizer login. Tudo bem. Agora vamos usar uma biblioteca chamada P cinco Dajae para criar nossos gráficos abstratos. Só para que você saiba, esta é uma biblioteca muito popular e poderosa, e é uma porta JavaScript fora da linguagem de programação visual chamada processamento. De qualquer forma, para ser capaz de usar a biblioteca no editor de plano de código apenas peito um botão de configurações. Abra a aba JavaScript e digite p five dot Aqui você será capaz de ver essas três opções. Por enquanto, precisamos apenas das 2 primeiras opções. Então os judeus são 50 Js primeiro. Próximos judeus, sejam cinco pontos burros, nem Js. Como você pode ver em seus links. Seja cinco Js é a biblioteca de gráficos núcleo e ser cinco dot dom Georges é um add em que eu amo você trabalhar com o Dharma fora de sua página mais facilmente você pode agora pressionar o botão salvar e fechar, porque não precisamos adicionar mais nada. Não vamos escrever nada. É TML nosso código CSS nesta classe, então sinta-se livre para minimizar essas janelas. Para desenhar qualquer coisa em uma página web, você vai precisar de uma tela com ser 50 J s. Você deve criar a tela dentro de uma função chamada farto, então criar o conjunto de função primeiro e dentro dele chamado uma função criar tela. Esta função tem dois argumentos. Aberto e altura. Você pode especificar seus próprios valores com base em suas preferências. Eu vou dizer 500 com um ano 500 para que eu possa ter uma boa tela quadrada por padrão. Temos uma caneta preta, que estaremos secando sagacidade. Se você quiser alterar a cor da caneta, você deve usar a função de traçado. Agora esta função espera três valores. Um para o vermelho competente fora da sua cor, um para o verde confiante e um para o azul confiante. Então, basicamente, ele quer os valores R, G e B separadamente para fazer nossa arte abstrata olhar mais três d, embora eu sugiro que você inclua 1/4 valor que será o valor Alfa e Alfa Off 50 deve ser bom o suficiente. Neste ponto, estamos prontos para começar a desenhar. Para conduzi-lo ser 50 J. S. Você deve criar uma nova função chamada gota e fazer toda a sua secagem dentro dele. Esta é uma função especial e será automaticamente chamada 60 vezes a cada segundo, permitindo que você crie animações facilmente. Ok. Agora, para criar nossa arte abstrata, estaremos usando apenas para equações matemáticas. E estas são as perguntas. Juntos, eles definem um tipo muito popular de artesanato chamado Peter the Young um trator. O nome não é realmente tão importante porque existem dezenas de tratores e você pode encontrá-los todos na Wikipédia. Mas eu acho que a nota é que este trator é muito simples. Suas equações são muito tubarão e eles contêm apenas para ignorar funções métricas. Como você deve ter adivinhado, a idéia é que você acabou de ver as perguntas fáceis para obter valores para X e Y e sangue nomear. São coordenadas na tela? É extremamente simples. Como você vai ver nos próximos minutos. Vamos começar a resolvê-los. Em primeiro lugar, existem quatro coeficientes em nossas perguntas. Ei B, C e D. Eles não estarão cuidando da nossa função de desenho, então vamos declará-los fora dela. Para manter as coisas simples, vou declará-las no topo do nosso programa como variáveis globais. Você pode dar quaisquer valores aleatórios para esses coeficientes, mas certifique-se de que todos eles estão dentro do intervalo menos três e blustery. Isso é muito importante porque caso contrário, as perguntas não atrairão nada a seguir. As equações continham X e Y como variáveis, então vamos declará-los para ouvir que ambos podem ter um como seus valores iniciais. Agora dentro da função draw, vamos definir duas novas variáveis para armazenar os valores atuais de X e y. vou chamá-los de velho, ex e antigo. Por que e então nós apenas atualizamos X e Y com base nessas perguntas. Então, para calcular o sinal, podemos usar diretamente a função seno e calcular o sinal co, podemos usar a função de custo. Estou literalmente traduzindo as perguntas fáceis para o código JavaScript. Então nada de especial acontecendo aqui faz o mesmo para a pergunta do Havaí, e é isso. Há um problema agora. Nossas equações continham apenas sinais e sinais co, então o valor de X e Y será muito pequeno. Na verdade, eles sempre estarão dentro do intervalo menos dois e mais dois. Se você tentar traçar um ponto usando esses valores, sua arte abstrata será extremamente pequena. Será quase invisível. Então o que queremos fazer agora é dimensionar esses valores para que eles estejam nesta correspondência com as dimensões da nossa tela fazendo isso é muito fácil, mas a função de mapeamento dos processos. Então você apenas especifica o intervalo original do valor, que é menos dois e mais dois, e, em seguida, o intervalo desejado do valor para a coordenada X. Será zero no trabalho da tela. Temos que repetir a mesma coisa para a coordenada y, mas o intervalo desejado será zero e a altura da tela. Agora e agora. Podemos chamar a função de ponto para desenhar um ponto em nossa tela usando essas coordenadas, e isso é apenas fresco o botão de execução para ver o gráfico que você criou. Como eu disse anteriormente, a função draw está sendo chamada repetidamente toda vez que é chamada. Um novo ponto é desenhado na tela, então você deve ser capaz de ver a forma de arte abstrata lentamente na tela. Se você está impaciente como eu, no entanto, sinta-se livre para adicionar um loop dentro da função draw para que durante sua chamada, vários pontos são desenhados. Vou tentar desenhar 1000 pontos por chamada. Como você pode ver, isso é muito mais rápido. Esta arte abstrata é fortemente dependente dos valores desses coeficientes. Se você mudá-los, você terá uma secagem completamente diferente. Permitam-me que mude rapidamente alguns deles. Agora, como você pode ver, isso parece muito diferente. Mas mudar manualmente os coeficientes é bastante tedioso. Então, na próxima lição, vou mostrar-lhe como criar uma interface gráfica simples de usuário que permite alterá-los simplesmente arrastando alguns controles deslizantes. Te vejo lá. 3. Manipulação do atracador: Bem-vinda de volta. Nesta lição, usaremos a biblioteca P five Dom para criar quatro controles deslizantes para alterar os valores de nossos quatro coeficientes. Então eu vou declará-los todos aqui e chamá-los é mais tarde. Seja controle deslizante. Veja o Slater e estes mais tarde. Dentro da função de configuração, você deve inicializar todos os seus controles deslizantes usando a função de controle deslizante criar que espera intervalo como sua entrada. Todos são coeficientes devem estar dentro do intervalo menos três e mais árvore. Então diga que aqui em seguida você precisa especificar o valor padrão deste mais tarde, então você pode apenas dizer hey aqui. E, por último, você deve especificar o valor da etapa. Esse valor decide quanto o coeficiente muda quando você arrasta o controle deslizante. Digamos que queremos alterá-lo em incrementos fora 0.1 inicializado os outros três controles deslizantes da mesma maneira. Apenas certifique-se de que o valor padrão corresponde ao valor dos coeficientes. Em seguida, carrego um C Slater e você verá como o valor padrão e, por último, o controle deslizante. Se você está em seu cabo, você deve ser capaz de ver esses controles deslizantes agora. Neste momento, arrastá-los não faz nada, então vamos também adicionar um botão à nossa página web. Você deve ser capaz de pressionar este botão depois de arrastar estas letras para redesenhar a arte abstrata para que você possa dar-lhe um nível dizendo redesenhar. Ok, agora a alça do dedo do pé clica neste botão. Você pode usar a função de boca pressionada e passar uma função anônima para ela como um argumento . Dentro da função, você deve atualizar os valores dos coeficientes para que eles coincidam com os valores do menor, Então altere o valor de A para um valor de ponto deslizante. Da mesma forma, ser para ser controle deslizante que o valor C dois c slater que o valor Andy para estes mais tarde esse valor. Obviamente queremos limpar a tela quando começarmos a desenhar com esses novos coeficientes, então chame a função de fundo aqui no passado 255 como um argumento para ela. Isso remove essencialmente todos os pontos que desenhamos anteriormente e torna nossa tela totalmente branca. Tudo bem, vá em frente e execute o código e comece a arrastar os controles deslizantes para criar diferentes peças de arte . É tão simples assim. Se você não estiver satisfeito com a cor de seus pontos, basta alterar a cor do traçado na configuração e executar novamente. Se desejar Você também pode criar controles deslizantes para os valores R, G e B da cor do traçado . Mas deixo isso como um exercício para o projeto da turma. Certifique-se de completar o projeto em compartilhar suas criações comigo e com outros alunos. Estou ansioso por eles. Agora você sabe como criar arte com JavaScript e um pouco fora dos mapas. Obrigado por assistir mordida.