Verlet Algorithm

Explorando p5.js: Implementando o Algoritmo de Velet para Experimentações Imagéticas A criatividade digital encontra na programação uma forma de expressão sem limites. Hoje, vamos mergulhar no p5.js, uma biblioteca JavaScript voltada para a arte e a experimentação visual, e implementar o Algoritmo de Velet. Este algoritmo, que propomos como uma forma de explorar padrões e transformações de imagem, utiliza funções matemáticas (como o seno) e manipulação direta dos pixels para criar efeitos dinâmicos e surpreendentes. O que é o p5.js? O p5.js é uma biblioteca que facilita a criação de sketches (pequenos programas gráficos) interativos e artísticos. Com ele, podemos desenhar, animar e manipular imagens de forma simples e intuitiva – perfeito para experimentações imagéticas! Introduzindo o Algoritmo de Velet Embora o Algoritmo de Velet não seja um padrão tradicional, aqui o definimos como uma técnica que mapeia a distância de cada pixel em relação a um ponto central e aplica uma função trigonométrica para modificar a cor. Dessa forma, obtemos efeitos que variam com o tempo, criando uma experiência visual dinâmica e orgânica. Implementação A seguir, veja um exemplo de código que implementa essa ideia. No sketch, a cor de cada pixel é modificada com base na sua distância ao centro do canvas e em uma variação temporal que utiliza a função sin(). function setup() { createCanvas(800, 600); pixelDensity(1); // Para trabalhar diretamente com os pixels } function draw() { background(0); loadPixels(); // Itera sobre todos os pixels do canvas for (let x = 0; x

Feb 15, 2025 - 07:08

Explorando p5.js: Implementando o Algoritmo de Velet para Experimentações Imagéticas

A criatividade digital encontra na programação uma forma de expressão sem limites. Hoje, vamos mergulhar no p5.js, uma biblioteca JavaScript voltada para a arte e a experimentação visual, e implementar o Algoritmo de Velet. Este algoritmo, que propomos como uma forma de explorar padrões e transformações de imagem, utiliza funções matemáticas (como o seno) e manipulação direta dos pixels para criar efeitos dinâmicos e surpreendentes.

O que é o p5.js?

O p5.js é uma biblioteca que facilita a criação de sketches (pequenos programas gráficos) interativos e artísticos. Com ele, podemos desenhar, animar e manipular imagens de forma simples e intuitiva – perfeito para experimentações imagéticas!

Introduzindo o Algoritmo de Velet

Embora o Algoritmo de Velet não seja um padrão tradicional, aqui o definimos como uma técnica que mapeia a distância de cada pixel em relação a um ponto central e aplica uma função trigonométrica para modificar a cor. Dessa forma, obtemos efeitos que variam com o tempo, criando uma experiência visual dinâmica e orgânica.

Implementação

A seguir, veja um exemplo de código que implementa essa ideia. No sketch, a cor de cada pixel é modificada com base na sua distância ao centro do canvas e em uma variação temporal que utiliza a função sin().

function setup() {
  createCanvas(800, 600);
  pixelDensity(1); // Para trabalhar diretamente com os pixels
}

function draw() {
  background(0);
  loadPixels();

  // Itera sobre todos os pixels do canvas
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      let index = (x + y * width) * 4;

      // Calcula a distância do pixel até o centro do canvas
      let d = dist(x, y, width / 2, height / 2);

      // Aplica uma variação temporal para criar animação
      // O valor 'factor' varia entre 0 e 255 de forma senoidal
      let factor = sin(d / 20 + millis() / 1000) * 127 + 128;

      // Modifica as cores do pixel com base no fator calculado
      pixels[index]   = factor;       // Componente Red
      pixels[index+1] = factor * 0.7;   // Componente Green (ajustado para um tom diferente)
      pixels[index+2] = factor * 0.5;   // Componente Blue (para variação)
      pixels[index+3] = 255;            // Componente Alpha (opacidade)
    }
  }

  updatePixels();
}

Explicação do Código

setup(): Inicializamos o canvas e definimos pixelDensity(1) para garantir que estamos manipulando os pixels de forma direta, sem interferência de alta densidade de pixels (como em telas retina).
draw(): Em cada frame, o canvas é atualizado:
- background(0) limpa o fundo.
- loadPixels() carrega os dados dos pixels para que possamos manipulá-los.
- Dois loops percorrem cada posição (x, y) do canvas.
- Calculamos a distância d do pixel até o centro.
- Usamos a função sin() combinada com millis() para introduzir uma variação temporal, resultando no valor factor que determina a intensidade da cor.
- Modificamos os componentes de cor (RGB) de cada pixel e garantimos opacidade total com pixels[index+3] = 255.
- Por fim, updatePixels() atualiza o canvas com as alterações realizadas.

Experimentações Imagéticas

Este exemplo é apenas um ponto de partida para as inúmeras experimentações possíveis:

Carregamento e Manipulação de Imagens: Em vez de criar padrões do zero, você pode usar a função loadImage() para carregar uma fotografia e aplicar transformações baseadas no Algoritmo de Velet.
Interatividade: Adicione controles (como sliders ou botões) para alterar parâmetros (por exemplo, a escala da distância ou a velocidade da variação temporal) em tempo real.
Combinação de Algoritmos: Experimente mesclar o Algoritmo de Velet com outras técnicas, como ruído Perlin ou filtros personalizados, para criar visuais ainda mais complexos e interessantes.

A implementação do Algoritmo de Velet no p5.js mostra como a matemática e a programação podem se unir para gerar arte digital única. Incentivamos você a explorar e adaptar esse exemplo, ajustando parâmetros e combinando técnicas para descobrir novos universos visuais.