Processing-毛玻璃滤镜

效果图：

Processing-毛玻璃滤镜

使用编译器：p5.js.Web Editor

1.基本操作：

p5类似于processing ，初始有setup 和 draw两个函数待实现，

首先创建画布确定尺寸，以及通过代码，打开本地摄像。

function setup() {
createCanvas(320,240);
pixelDensity=1;//确定了像素点排列密度
res=20;//定义一个分辨率
video=createCapture(VIDEO);

2.定义圆形粒子的特性：

随机游走，限制在窗口内活动，大小抖动，以及最核心的一步：获取摄像颜色并着色

function Particle(x,y)
{
this.x = x;
this.y=y;
this.update=function(){
this.r=random(4,20)
this.x+=random(-20,20);
this.y+=random(-20,20);
this.x=constrain(this.x,0,width)
this.y=constrain(this.y,0,height)
}
this.show=function(){
noStroke();

//获取摄像颜色着色：
var px=floor(this.x/vScale);//floor用来四舍五入
var py=floor(this.y/vScale);
let col=video.get(px,py);
fill(col[0],col[1],col[2],slider.value())
//对应位置显示对应的纯色圆片
ellipse(this.x,this.y, this.r, this.r);
}
}

3.遍历画布生成大量粒子

rows=int(width/res)
for(var i=0;i<cols+4 ;i++){
for(var j=0;j<rows+4 ;j++)
{particles.push(new Particle(i*res,j*res));
}
}
slider=createSlider(0,255,127);
background(51);

通过slider来控制透明度

4.调用粒子在draw中持续显示与更新：

function draw() {
video.loadPixels();
for(var i=0;i<320;i++)
{
particles[i].update();
particles[i].show();
}

}

结束！

总结：

总的来说，利用p5实现一个画面效果，并不需要大量的代码，而且本编译器其实也不适合编写大量内容，p5.js WebEditor实现的是轻量化编程以及实时的调试，实现本次滤镜效果，总的代码量大概在50行，逻辑简单易懂，画面效果的的难点实际在于创意。

拿本例来说，核心点是随机性的利用，以及粒子着色，通过粒子的随机性来体现画面效果

依据此特点，我又进行了改造，写了一个像素化的滤镜功能：

Processing-毛玻璃滤镜

核心代码如下：

pix=pixels[index];
   if (pix<(31))
{ r=247;g=52;b=150;}
           else if (pix>=32*1/4&&pix<63)
           { r=255;g=118;b=167;}
           else if (pix>=63&&pix<94)
{ r=255;g=80;b=80;}
           else if (pix>=94&&pix<125)
           { r=255;g=171;b=80;}
           else if (pix>=125&&pix<156)
           { r=255;g=251;b=174;}
else if (pix>=156&&pix<187)
           { r=219;g=247;b=102;}
else if (pix>=187&&pix<225)
           { r=162;g=213;b=171;}
else if (pix>=225)
           { r=57;g=174;b=169;}

vScale=slider.value();
bright=(r+g+b);
var w=map(bright,0,255,0,vScale);
noStroke();
rectMode(CENTER);

fill(r,g,b);
ellipse(random(-5,5)+x*vScale,random(-5,5)+y*vScale,w,w);

以上就是关于滤镜效果的介绍，结束。

Processing-毛玻璃滤镜

相关推荐