Perlin Noise

Out 3, 2010 by Paulo Afonso    3 Comments    Posted under: Flash

No FlashCamp 2010 a apresentação que levei conjuntamente com o Jorge Varandas recaiu sobre três temas sendo eles: Perlin Noise, SEO for Flash, Inverse Kinematics.
Neste artigo vou escrever sobre o primeiro tema, Perlin Noise.

O Perlin Noise é uma função matemática que gera uma pseudo-random textura que podemos descrever como um grandient noise.
O autor desta função foi Ken Perlin, desenvolveu-a para o filme clássico TRON em 1982 e melhorou-a em 2002. Valeu-lhe uns prémios e merecido reconhecimento.

No Flash o PerlinNoise é um método da classe bitmapdata e têm uma grande utilidade nas mais variadas situações, onde a nossa imaginação é o limite. É muito usada em efeitos como nuvens, fogo, água corrente, backgrounds .. etc

Os parâmetros da função:
- baseX e baseY: permitem definir a frequência horizontal e vertical respectivamente.
- numOctave: corresponde ao numero de funções individuais a aplicar, poderá ser visto como layers.
- randomSeed: se todos os outros parâmetros forem iguais podemos ter um resultado diferente alterando este valor,
- stitch: permite gera texturas para padrões tile, uma imagem emenda nela própria sem notarmos onde fica a união. Neste caso usei o sitch para criar uma imagem de background.
-fractalNoise: true para um efeito mais suave, a false temos um efeito de turbulência. No exemplo se clicarmos em webcam pode-se visualizar a distorção da imagem e perceber o impacto do parâmetro fractalNoise.
- grayscale: força uma textura a ficar a preto e branco (neste caso só poderemos usar o canal do alpha, os restantes serão ignorados), ou então se usarmos false, podemos escolher os canais de cor que pretendemos usar com o channelOptions (para combinar distintos canais ou somamos ou usamos o operador lógico or)
- os offsets é um array de pontos que corresponde aos x,y para cada octave.

Dica: O perlinnoise é intensivo para o processador proporcionalmente ao tamanho do bitmap e aos parâmetros como por exemplo o numero de octavas etc.. para resolver este problema é usual usar um bitmapdata pequeno e depois fazer scale.

Exemplos de aplicação profissional do perlinnoise em projectos:

NEVOEIRO

Com meia duzia de linhas usando o alpha Channel e uma mascara criamos o efeito de nevoeiro

PAPAGAIO

À mais ou menos 2 anos desenvolvemos um m-rec extensível para a Opel onde o utilizador podia interagir com um papagaio. Distorcemos as fitas do papagaio usando perlinnoise para dar uma sensação de vento.

JATO DE LIQUIDOS E EXPLOSÕES

No caso do jato de líquidos existe uma animação simples de scale e alpha a um png onde é aplicado uma distorção, é o mapa da distorção que é gerado com o perlinnoise.
Já nas explosões o perlinnoise serve de mapa de fluxo das partículas.

EXPLOSÃO NOME

MAPA DE FLUXO

O mapa de fluxo é um perlinnoise que é modificado de 5 em 5 segundos, dai a variação das partículas mais acentuada neste intervalo de tempo.
Este mapa serve para encontrar o vector de deslocação de cada partícula, retirando-o através das informações do canais de cor. Com 4 canais (ARGB) podemos fazer corresponder 4 variáveis com variação entre valores inteiros de 0 a 255.
Para termos reacção ao rato bastou desenhar no mapa de fluxo um circulo na posição correspondente ao Mouse.

APLICAÇÃO DO EFEITO NO SITE COFIDIS MOBILE

Se gostares deixa-me uma mensagem :)