let theShader1;

let color0;

​

function setup() {

  createCanvas(800, 800,WEBGL);

  pg = createGraphics(width, height);

  pg.noStroke();

  pg.fill('#776B5D');

  background('#F3EEEA');

  noStroke();

  color0 = rand_color('#F3EEEA');

}

​

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

  theShader1.setUniform('u_color', color0);

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

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

      }

    }

};

​

const rand_color = (colorCode) => {

  const rc = color(colorCode);

  return [red(rc) / 255.0, green(rc) / 255.0, blue(rc) / 255.0];

};

​

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;

  uniform vec3 u_color;

​

  float PI = 3.14159265358979;

​

  void main() {

    vec2 uv = vTexCoord;

​

    // ハッチング: https://github.com/pixijs/filters/blob/main/filters/cross-hatch/src/crosshatch.frag

    float hatch = 10.0;// ハッチングのサイズを変えられる

    float lum = length(texture2D(u_tex, uv.xy).rgb);

​

    vec4 tex = texture2D(u_tex, uv);

    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);

    bool isHatch = false;

​

    if (lum < 1.00){

      if (mod(gl_FragCoord.x + gl_FragCoord.y, hatch) == 0.0){

        gl_FragColor = tex;

        isHatch = true;

      }

    }

​

    if (lum < 0.75){

      if (mod(gl_FragCoord.x - gl_FragCoord.y, hatch) == 0.0){

          gl_FragColor = tex;

          isHatch = true;

      }

    }

​

    if (lum < 0.50){

      if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, hatch) == 0.0){

          gl_FragColor = tex;

          isHatch = true;

      }

    }

​

    if (lum < 0.3){

      if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, hatch) == 0.0){

          gl_FragColor = tex;

          isHatch = true;

      }

    }

​

    if(isHatch == false){

      gl_FragColor = vec4(u_color, 1.0);

    }

​

  }

`,

};