If you're seeing this message, it means we're having trouble loading external resources on our website.

Se você está atrás de um filtro da Web, certifique-se que os domínios *.kastatic.org e *.kasandbox.org estão desbloqueados.

Conteúdo principal

Ruído bidimensional

A ideia de valores de ruído em um espaço unidimensional é importante porque ela nos leva a uma discussão de espaço bidimensional. Vamos refletir sobre isso. Com um ruído unidimensional, temos uma sequência de valores nos quais qualquer valor dado é semelhante ao seu valor vizinho. Como o valor está em uma única dimensão, ele tem apenas dois vizinhos: o valor que vem antes dele (á esquerda no gráfico) e o valor que vem depois dele (à direita).
Imagem da Natureza do Código
Figura I.10: Ruído 1D
O conceito de ruído bidimensional funciona exatamente da mesma forma. A diferença, é claro, é que não estamos olhando para valores ao longo de um caminho linear, mas sim valores colocados em uma plano de coordenadas. Pense em um pedaço de papel quadriculado com números escritos em cada célula. Um dado valor será semelhante a todos os seus vizinhos: acima, abaixo, à direita, à esquerda, e a qualquer diagonal.
Imagem da Natureza do Código
Figura I.11: Ruído 2D
Se você fosse visualizar esse papel quadriculado com cada valor mapeado para o brilho de uma cor, você iria ver algo parecido com nuvens. O branco fica próximo ao cinza claro, que fica próximo ao cinza, que fica próximo ao cinza escuro, que fica próximo ao preto, que fica próximo ao cinza escuro, etc.
Imagem da Natureza do Código
É por isso que o ruído foi inventado. Você pode ajustar os parâmetros ou brincar com cores para fazer com que a imagem fique mais parecida com o mármore, ou com a madeira, ou com qualquer outra textura orgânica.
Vamos dar uma olhada em como implementar um ruído bidimensional em ProcessingJS. Se você quisesse colorir todos os pixels de uma janela de forma aleatória, você precisaria de um laço aninhado, um que acessasse cada pixel e escolhesse um brilho aleatório.
Para colorir cada pixel de acordo com a função noise(), faremos exatamente a mesma coisa, mas ao invés de chamar random() vamos chamar noise().
var bright = map(noise(x,y), 0, 1, 0, 255);
Conceitualmente, esse é um bom começo — ele dá um valor de ruído para todas as localizações (x,y) em nosso espaço bidimensional. O problema é que isso não vai ser tão nublado quanto queremos. Ir do pixel 200 para o pixel 201 é um salto muito grande para o ruído. Lembre-se, quando trabalhamos com ruído unidimensional, incrementamos nossa variável por 0,01 a cada quadro, e não por 1! Uma boa solução para esse problema é usar variáveis diferentes para os argumentos referentes ao ruído. Por exemplo, poderíamos incrementar uma variável chamada xoff a cada movimento horizontal, e uma variável yoff a cada movimento vertical através dos laços aninhados.
Examinamos vários usos tradicionais do ruído de Perlin nesse tutorial. Com o ruído unidimensional, usamos valores suaves para atribuir a localização de um objeto para dar a aparência de movimento. Com o ruído bidimensional, criamos um padrão nublado com valores suaves em um plano de pixels. Contudo, é importante lembrar que os valores do ruído de Perlin são apenas isso — valores. Eles não estão ligados à posição dos pixels ou à cor. Qualquer exemplo nesses tutoriais que tem uma variável poderia ser controlado através do ruído de Perlin. Quando modelamos a força do vento, sua força poderia ser controlada pelo ruído de Perlin. O mesmo se aplica para os ângulos entre os galhos de um padrão de árvore fractal, ou a velocidade e a direção dos objetos que se movem por uma grade em uma simulação de campo de fluxo, como no programa abaixo.
Começamos o último tutorial falando sobre como a aleatoriedade pode ser uma muleta. De várias formas, essa é a resposta óbvia para os tipos de pergunta que temos feito continuamente — como esse objeto deveria se mover? De que cor ele deveria ser? Contudo, a resposta óbvia também pode ser preguiçosa.
Ao terminar esse tutorial, também é interessante notar que poderíamos facilmente cair na armadilha de usar o ruído de Perlin como muleta. Como esse objeto deve se mover? Ruído de Perlin! De que cor ele deveria ser? Ruído de Perlin! Quão rápido ele deve crescer? Ruído de Perlin!
Isso não quer dizer que você não deva usar a aleatoriedade. Ou que você não deva usar o ruído de Perlin. A questão é que as regras do seu sistema são definidas por você, e quanto maior for sua caixa de ferramentas, mais opções você tem para implementar essas regras. O objetivo desses tutoriais é ajudar a encher sua caixa de ferramentas.  Se tudo que você sabe é um tipo de aleatoriedade, então todos os seus projetos vão ter apenas um tipo de aleatoriedade.  O ruído de Perlin é outra ferramenta para aleatoriedade que você pode usar em seus programas.  Após praticar um pouco o ruído de Perlin, vamos ver outro tipo de ferramenta - os vetores!

Este curso "Natural Simulations" é um derivado do "The Nature of Code" por Daniel Shiffman, usado sob a Creative Commons Attribution-NonCommercial 3.0 Unported License.

Quer participar da conversa?

Nenhuma postagem por enquanto.
Você entende inglês? Clique aqui para ver mais debates na versão em inglês do site da Khan Academy.