let theShader1;

​

function setup() {

  createCanvas(800, 800,WEBGL);

  pg = createGraphics(width, height);

  pg.noStroke();

  pg.fill('#776B5D');

  background('#F3EEEA');

  noStroke();

}

​

function draw() {

  translate(-width / 2,-height / 2);//WEBGLは真ん中基準だがcreageGraphicsは左上基準なので合わせるために設定している

  pg.push();

  grid(10,pg);

  pg.pop();

  // シェーダーの設定

  theShader1 = createShader(shader1.vs, shader1.fs);

  shader(theShader1);

  theShader1.setUniform(`u_tex`, pg);

  theShader1.setUniform(`u_time`, frameCount / 35);

  theShader1.setUniform('u_resolution', [pg.width, pg.height]);

  // シェーダー適用したイメージを描画

  image(pg,0,0);

}

​

/** num個で分割したグリッドを画面いっぱいに生成する

* @method grid

* @param  {Number}        num           画面の分割数

*/

const grid = (num,pg) => {

    const n1 = num + 1;

    const margin_left = width / n1 / n1;

    const margin_bottom = height / n1 / n1;

​

    const nw = width / n1;

    const nh = height / n1;

​

    for (let i = 0; i < num; i++) {

      for (let j = 0; j < num; j++) {

        const x = nw * i + margin_left * (i + 1);

        const y = nh * j + margin_bottom * (j + 1);

        pg.circle(x + nw / 2, y + nw / 2, nw);

      }

    }

};

​

keyPressed = () => {

  if (key === 's') {

    saveCanvas(canvas, 'canvas', 'png');

    //saveGif('canvas', 4);

  }

};

​

const shader1 = {

  vs: `

  precision highp float;

  precision highp int;

​

  attribute vec3 aPosition;

  attribute vec2 aTexCoord;

​

  varying vec2 vTexCoord;

​

  uniform mat4 uProjectionMatrix;

  uniform mat4 uModelViewMatrix;

​

  void main() {

    vec4 positionVec4 = vec4(aPosition, 1.0);

    gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;

    vTexCoord = aTexCoord;

  }

`,

  fs: `

  precision highp float;

  precision highp int;

​

  varying vec2 vTexCoord;

​

  uniform sampler2D u_tex;

  uniform float u_time;

  uniform vec2 u_resolution;

​

  float PI = 3.14159265358979;

​

  float random(vec2 c){

    return fract(sin(dot(c.xy ,vec2(12.9898,78.233))) * 43758.5453);

  }

​

  void main() {

    vec2 uv = vTexCoord;

​

​

    // white noise用

    float interval = 3.0;

    float strength = smoothstep(interval * 0.5, interval, interval - mod(u_time, interval));

    float whiteNoise = (random(uv + mod(u_time, 10.0)) * 2.0 - 1.0) * (0.15 + strength * 0.15);

​

    vec4 tex = texture2D(u_tex, uv);

    gl_FragColor = tex + whiteNoise;

​

  }

`,

};