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行，逻辑简单易懂，画面效果的的难点实际在于创意。

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

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

核心代码如下：

 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);

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