Tutorial Pixel bender + Flash

No post passado falei um pouco do pixel bender se não viu tem o link abaixo :

Introdução a Pixel Bender ToolKit

Então vamos lá vou utilizar o código do tutorial passado, mas antes temos que exportar o nosso script para o formato que o Flash suporta. então com o código anterior aberto.

kernel NewFilter
<   namespace : "Your Namespace";     vendor : "Your Vendor";     version : 1;     description : "your description"; >
{
    input image4 src;
    output pixel4 dst;

    void
    evaluatePixel()
    {
        dst = sampleNearest(src,outCoord());
        dst.r += 0.4;
        dst.b -= 0.4;

    }
}

Vamos exportar esse filtro para o Flash da seguinte forma: menu superior > file > Export Kernel Filter for Flash.

O pixel bender irá exportar uma extensão “.pbj” escolha o mesmo local onde será salvo seu Flash. Agora vamos para o Flash crie um novo documento. E importar a imagem “YellowFlowers.png” essa imagem você encontra no seguinte endereço:

* Windows: C:\Program Files (x86)\Adobe\Adobe Utilities\Pixel Bender Toolkit\sample images
* Mac OS: Mac HD/Applications/Utilities/Adobe Utilities/Pixel Bender Toolkit/sample images

Jogue a imagem no palco e converta em movieclip:

Coloque o nome de instância do movieclip “flor”:

Agora vamos ao código :

//criamos uma requisição com o endereço do nosso filtro
var urlRequest:URLRequest = new URLRequest("pixelbender.pbj");

//instaciamos um novo URLLoader para carregar nossa requisição
var urlLoader:URLLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.BINARY;

//adicionamos um evento para quando
urlLoader.addEventListener( Event.COMPLETE, aplicarFiltro);
urlLoader.load(urlRequest);

function aplicarFiltro( event:Event ):void
{
  	var shader:Shader = new Shader( event.target.data );
	var shaderFilter:ShaderFilter = new ShaderFilter( shader );
	flor.filters = [ shaderFilter ];
}

Quando o filtro for carregado o Evento COMPLETE irá chamar a função “aplicarFiltro” dentro da função criamos uma variável do tipo Shader: é o kernel do pixel bender no Flash ele cuida de aplicar as funções dos filtros em cada pixel da imagem. Gerencia o input e o output de uma ou mais imagens.
Na linha seguinte temos o ShaderFilter ele é o filtro em si que é aplicado nos DisplayObjects, aplicamos diretamente da propriedade filters passando um array [] como podemos ver na última linha. Se tivessemos trabalhando com BitmapData usaríamos o método BitmapData.applyFilter().

Agora vou criar um novo filtro no pixel bender para ser usado no flash :

kernel NewFilter
<   namespace : "Your Namespace";     vendor : "Your Vendor";     version : 1;     description : "your description"; >
{
    input image4 src;
    output pixel4 dst;
    // estou criando um paramento "azul" do tipo float que seu valor minimo é -1;
   // o valor máximo é 1 e o valor default é 0
    parameter float azul
    <         minValue: -1.0;         maxValue: 1.0;         defaultValue: 0.0;     >;

    // criei um parametro com o nome vermelho
    parameter float vermelho
    <         minValue: -1.0;         maxValue: 1.0;         defaultValue: 0.0;     >;
    // e um parametro com o nome verde
    parameter float verde
    <         minValue: -1.0;         maxValue: 1.0;         defaultValue: 0.0;     >;

    void
    evaluatePixel()
    {

        dst = sampleNearest(src,outCoord());
        // no meu output eu mutiplico cada parâmetro em um canal especifico
        // float4 ele trabalha com os 4 canais vermelho, verde, azul e alpha
        dst += float4(0.5*vermelho, 0.5*verde, 0.5 * azul, 0.0);
    }
}

Se você rodar o script no Pixel Bender irá notar que aparecerá 3 slides no canto direito da IDE do Pixel Bender.

Export para o script pra o formato aceito para o flash, e vamos montar o nosso exemplo:

Estou utilizando o fla antigo com o moviecliep “flor” mas agora eu vou criar 3 botões um pra cada canal, azul, verde e vermelho como na figura acima. Vou colocar o nome de instância de cada botão, btAzul, btVerde, btVermelho.

E agora vamos ao código:

var shader:Shader;
var shaderFilter:ShaderFilter;

var urlRequest:URLRequest = new URLRequest("pixelbender.pbj");
var urlLoader:URLLoader = new URLLoader();

urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
urlLoader.addEventListener( Event.COMPLETE, applyFilter );
urlLoader.load(urlRequest);

function applyFilter( event:Event ):void
{
	//aplicando o filtro
  	shader = new Shader( event.target.data );
	shaderFilter = new ShaderFilter( shader );
	flor.filters = [ shaderFilter ];

	//adicionando o evento de clique aos botões
	btAzul.addEventListener(MouseEvent.CLICK, setAzul);
	btVerde.addEventListener(MouseEvent.CLICK, setVerde);
	btVermelho.addEventListener(MouseEvent.CLICK, setVermelho);
}

function setAzul(e:MouseEvent):void{
	// mexendo com os valores dos parameters que criamos
	// adicionando 1 ao canal azul e zerando os demais
	shader.data.azul.value = [1];
	shader.data.verde.value = [0];
	shader.data.vermelho.value = [0];
	flor.filters = [ shaderFilter ];
}

function setVerde(e:MouseEvent):void{
	// adicionando 1 ao canal verde e zerando os demais
	shader.data.verde.value = [1];
	shader.data.azul.value = [0];
	shader.data.vermelho.value = [0];
	flor.filters = [ shaderFilter ];
}

function setVermelho(e:MouseEvent):void{
	shader.data.vermelho.value = [1];
	shader.data.azul.value = [0];
	shader.data.verde.value = [0];
	flor.filters = [ shaderFilter ];
}

Quando eu carrego o filtro do pixel bender eu adiciono os eventos de clique que contém as funções que manipulam os valores dos canais.

O resultado vai ser o seguinte:

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2010/03/post-blog2.swf w=470 h=353]

Uma boa referência é o blog pixelero:

http://pixelero.wordpress.com/

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *