Explore o código criativo com P5.JS

Sep 11, 2025

Como

Passar um dia com Brendan Dawes. no Gere London e descubra como Os dados são dawesome . Neste workshop do dia todo ele explicará como levar os dados que nos rodeia todos os dias e transformá-lo em algo bonito usando processamento e p5.js. Agende agora !

p5.js. é uma biblioteca projetada para trazer o poder de Em processamento para a web. Observa-se introduzir artistas, designers e educadores ao mundo da programação, além de oferecer ferramentas versáteis para trazer Devs e engenheiros para as artes visuais.

Vamos mergulhar e criar nosso primeiro "esboço". Nosso objetivo é construir uma ferramenta de desenho que transforma uma imagem simples em um campo de estrelas animadas. Primeiro, vamos definir algumas variáveis globais e escrever nossa configurar() função. P5's. configurar() é executado uma vez, quando o esboço é carregado, então é o local ideal para lidar com a inicialização.

Baixe os arquivos que você precisará aqui .

 Var Hintimagem, SkyImage, Estrelas = [];
Configuração de funções () {...}

Dentro do nosso configurar Função, vamos criar uma tela e esconder o cursor do mouse para que possamos chamar o nosso. Por padrão, P5 adiciona um esboço em torno de formas - queremos desativar os golpes neste caso.

 CreateCanvas (800.500);
nocursor ();
narrage ();

The background image – this night sky scene provides the setting for our animation — A imagem de fundo - esta cena do céu noturno fornece a configuração da nossa animação

Em seguida, vamos carregar um par de imagens. Um vai servir como plano de fundo - neste caso, uma cena do céu noturno. A outra será a imagem "dica" - o design preto e branco que nosso design final será baseado em. A ideia é colocar a maioria das estrelas sobre pixels pretos na nossa imagem da dica, para recriar o design em nossa cena de fundo. Seria fácil criar essas imagens com ferramentas de texto e desenho do P5, mas por uma questão de brevidade usaremos ativos estáticos.

 Hintimagem = loadImage ("// bit.ly/hintimage");
SkyImage = loadImage ("// bit.ly/skyimage") ;

The hint image, which dictates the positioning of our stars — A imagem da dica, que dita o posicionamento de nossas estrelas

A função do sorteio

É isso para configurar() ! Outra função chave é desenhar() . É chamado em um loop contínuo, que é útil para animações e adicionar elementos ao longo do tempo.

 Função Draw () {...}

Dentro da função Draw, nossa primeira tarefa é preencher a tela com a nossa imagem de fundo. P5 não limpa automaticamente a tela entre desenhar() Chama, portanto, precisamos fazer isso todo quadro ou acabaremos com alguns estranhos efeitos de acumulação. Para colocar uma imagem carregada na tela, use o imagem() função e dar coordenadas x e y para posicionamento.

 Imagem (SkyImage, 0, 0);

Em seguida, vamos pegar o local atual do mouse e armazená-lo como um P5.Vector usando CreateVector () . Este objeto vem com funções úteis para lidar com pontos no espaço, mas estamos apenas usando-o como um contêiner.

 Var posição = CreateVector (Mousex, Mousey);

Usando nossa posição de mouse recém-armazenada, podemos desenhar nosso cursor. Nós vamos definir a cor de desenho com preencher() passando valores de RGB e uso elipse() para desenhar um círculo no local do mouse.

 Preencha (255, 192, 0);
elipse (posicione.x, posição.y, 8, 8);

Nós só queremos desenhar novas estrelas enquanto o mouse é pressionado, então vamos verificar o P5's agenda antes de proceder. Se o mouse estiver inativo, precisamos calcular um bom lugar para a nossa próxima estrela acabar. Vamos fazer isso com uma função personalizada chamada findpixel () , que vamos definir mais tarde.

Discover the creative side of code with Brendan Dawes at Generate London — Descubra o lado criativo do código com Brendan Dawes em Generate London

Quando tivermos um alvo, criaremos uma nova instância de um objeto Estrela personalizado (mais abaixo) e empurrá-lo para o final da nossa Star Array. Se acabarmos com mais de 2.000 estrelas, começaremos a descartar os mais antigos.

 se (mouseeispred) {
var-alvo = findpixel ();
var estrela = nova estrela (posição, alvo);
Stars.push (estrela);
if (stars.length & gt; 2000) stars.shift ();
}

Finalmente, vamos loop através da nossa matriz de estrelas e ligar atualizar() e desenhar() em cada um deles. Vamos mergulhar nesses métodos mais tarde.

 para (var i = 0; i & lt; stars.length; i ++) {
estrelas [i] .update ();
estrelas [i] .draw ();
}

Funções de ajudante

Agora configurar() e desenhar() estão no lugar, vamos trabalhar nas funções e objetos ajudantes. Primeiro, definiremos uma função que encontra uma posição de descanso para cada nova estrela. Tudo o que precisamos fazer é verificar alguns pixels aleatórios em nossa imagem dica, usando obter() para ver se eles são negros ou brancos.

Na verdade, temos que olhar para o seu valor vermelho, porque em ambos os casos os valores RGB correspondem. Se encontrarmos um pixel não branco, vamos devolvê-lo porque atingimos nosso design. Se não, apenas devolveremos o último pixel verificado e ele servirá como uma estrela aleatória.

 Função FindPixel () {
var x, y;
para (var i = 0; i & lt; 15; i ++) {
x = chão (aleatório (hintimagem.width));
y = chão (aleatório (hintimagem));

if (vermelho (hintimage.get (x, y)) & lt; 255) quebrar;
}
Retorno CreateVector (x, y);
}

O último é o nosso objeto Star personalizado. Simplificando, queremos um recipiente reutilizável que armazene informações sobre cada estrela, e também fornece um meio para atualizar e desenhá-los. O JavaScript não fornece uma maneira de criar classes em um sentido tradicional, mas podemos obter o mesmo resultado definindo uma função e estendendo-a para nossas próprias necessidades.

Cada estrela tem algumas propriedades (posição inicial, localização final e um diâmetro gerado aleatoriamente), que definiremos em uma "função de construtor" que é necessária para cada nova estrela criada em nosso loop de desenho.

 Estrela de função (posição, alvo) {
this.position = posição;
este.Target = alvo;
este.Diameter = aleatório (1, 5);
}

Em seguida, vamos adicionar um atualizar() método para estrela, que usará p5.vector lerp () Para calcular um novo local entre as posições atuais e alvo de uma estrela. Neste caso, estamos movendo quatro por cento da distância restante para cada empate, o que efetivamente nos dá um efeito de facilidade.

Se queríamos ficar chique, também poderíamos simular alguma física aqui, mas agora vamos mantê-lo simples.

 Star.Prototype.update = função () {
this.position = p5.vector.lerp (
Este cargo,
este.Target,
0.04.
);
};

Desenhando estrelas

Finalmente, a estrela desenhar() O método realmente desenha a estrela para a tela. Mais uma vez, estamos usando preencher() e elipse() , embora desta vez estamos chamando preencher() com um valor de escala de cinza e um valor alfa para transparência.

Each frame, linear interpolation gives us a new point along the path between the current star position and its destination — Cada quadro, a interpolação linear nos dá um novo ponto ao longo do caminho entre a posição atual da estrela e seu destino

Para dar as estrelas um brilho, o valor alfa é determinado usando o P5 barulho() função. Isso retorna o valor do ruído da Perlin para as coordenadas especificadas, o que significa que você obtém uma sequência suave e fluida de números aleatórios. Para o terceiro parâmetro, estamos passando um valor baseado em tempo em vez de um valor espacial, de modo que o ruído animará ao longo do tempo.

 Star.Prototype.draw = função () {
var alfa = ruído (
this.target.x,
este.Target.y,
Millis () / 1000.0
);

preencher (255, alfa * 255);

elipse(
this.position.x, este.Position.y,
este.Diameter, este.Diameter.
);
};

É isso para o nosso primeiro esboço! Clique e arraste para ver novas estrelas aparecer e estar em conformidade com a imagem da dica.

Qual é o próximo?

A partir daqui, você pode adicionar alguns elementos HTML para controlar variáveis usando o add-on P5.Dom ou mesmo adicionar som para os visuais usando P5.Sound. .

Nós só arrancamos a superfície do que é possível com P5.js, e com novos recursos no caminho, há ainda mais para esperar. Divirta-se!

Saiba mais sobre o lado criativo da codificação em Gere London ! Brendan Dawes. vai te ensinar como usar processamento e p5.js para transformar dados em coisas de beleza Em seu workshop ;ele também estará falando sobre a alegria de trabalhar com papel, plástico e pixels . Reserve o seu bilhete agora !

Explore o código criativo com P5.JS

A função do sorteio

Funções de ajudante

Desenhando estrelas

Qual é o próximo?

Como - Artigos mais populares

Como escrever código HTML mais rápido

Como desenhar um cão

Como configurar um ambiente de desenvolvimento local

Como melhorar sua arte de personagem

Construa aplicativos móveis de plataforma cruzada com flutter do Google

Construa uma cena complexa de ficção científica 3D no Blender

Como esculpir um personagem em VR

Como preparar gráficos ilustradores para efeitos após

Categorias