let pg;

let theShader1;

let theShader2;

// 参考：https://kyndinfo.notion.site/Pencils-Brushes-and-Paint-54c0f94aa30940aba2f11b637dc009c2

// 参考：https://codepen.io/kynd/pen/xxMMBmv

​

function setup() {

  createCanvas(500, 500,WEBGL);

  pg = createGraphics(width, height);

  pg.noStroke();

  pg.fill('#776B5D');

  background('#F3EEEA');

 // noStroke();

  theShader1 = createShader(shader1.vs, texFrag);

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

}

​

function draw() {

  translate(-width / 2,-height / 2);

  rect(0,0,width,height);

  // シェーダーの設定

  shader(theShader1);

  //theShader1.setUniform(`u_tex`, pg);

  theShader1.setUniform("brushColor", colorToUniformArray("#FF6644"));

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

​

​

  if(frameCount===10){

  resetShader();

  const tex = get(0,0,width,height);

    // シェーダーの設定

  shader(theShader2);

  theShader2.setUniform(`u_tex`, tex);

  theShader2.setUniform("brushColor", colorToUniformArray("#FF6644"));

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

    rect(0,0,width,height);

    noLoop();

  }

  //rect(0,0,width/2+200,height/2);

  // pg.push();

  // grid(10,pg);

  // pg.pop();

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

  //image(pg,0,0);

}

​

function colorToUniformArray(c) {

  return [red(c) / 255.0, green(c) / 255.0, blue(c) / 255.0, alpha(c) / 255.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 vec3 brushColor;

  uniform sampler2D u_tex;

  uniform float u_time;

​

  float PI = 3.14159265358979;

​

​

  void main() {

    vec2 crd = vTexCoord; 

    vec4 samp = texture2D(u_tex, crd);

    float threshold = 0.35;

    float d = length(vTexCoord - vec2(0.5));

    d -= samp.r * 0.1;

    float lev = 1.0 - smoothstep(threshold, threshold + 0.05, d);

    lev = smoothstep(0.1, 0.3, lev) - samp.r * 0.5;

    // emphasize the edge

    lev *= 1.0 - smoothstep(0.0, 0.05, abs(d - threshold)) * 0.25;

    vec4 color = vec4(brushColor, 1.0) * lev;

    gl_FragColor = color;

​

  }

`,

};

​

const texFrag=`

  precision highp float;

  varying vec2 vTexCoord;

​

  uniform vec3 brushColor;

  uniform sampler2D u_tex;

  uniform float u_time;

​

//https://thebookofshaders.com/edit.php#11/iching-03.frag

vec3 random3(vec3 c) {

    float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));

    vec3 r;

    r.z = fract(512.0*j);

    j *= .125;

    r.x = fract(512.0*j);

    j *= .125;

    r.y = fract(512.0*j);

    return r - 0.5;

}

​

const float F3 =  0.3333333;

const float G3 =  0.1666667;

​

float snoise(vec3 p) {

​

    vec3 s = floor(p + dot(p, vec3(F3)));

    vec3 x = p - s + dot(s, vec3(G3));

​

    vec3 e = step(vec3(0.0), x - x.yzx);

    vec3 i1 = e*(1.0 - e.zxy);

    vec3 i2 = 1.0 - e.zxy*(1.0 - e);

​

    vec3 x1 = x - i1 + G3;

    vec3 x2 = x - i2 + 2.0*G3;

    vec3 x3 = x - 1.0 + 3.0*G3;

​

    vec4 w, d;

​

    w.x = dot(x, x);

    w.y = dot(x1, x1);

    w.z = dot(x2, x2);

    w.w = dot(x3, x3);

​

    w = max(0.6 - w, 0.0);

​

    d.x = dot(random3(s), x);

    d.y = dot(random3(s + i1), x1);

    d.z = dot(random3(s + i2), x2);

    d.w = dot(random3(s + 1.0), x3);

​

    w *= w;

    w *= w;

    d *= w;

​

    return dot(d, vec4(52.0));

}

​

void main(void)

{

  vec2 crd = vTexCoord;

  float v = snoise(vec3(crd * vec2(3.0, 3.0), 0.0)) * 0.5

  + snoise(vec3(crd * vec2(16.0, 16.0), 0.0)) * 0.25

  + snoise(vec3(crd * vec2(64.0, 64.0), 0.0)) * 0.125 + 0.5;

​

    vec4 samp = vec4(vec3(v), 1.0);

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

​

    float threshold = 0.35;

    float d = length(vTexCoord - vec2(0.5));

    d -= samp.r * 0.1;

    float lev = 1.0 - smoothstep(threshold, threshold + 0.05, d);

    lev = smoothstep(0.1, 0.3, lev) - samp.r * 0.5;

    // emphasize the edge

    lev *= 1.0 - smoothstep(0.0, 0.05, abs(d - threshold)) * 0.25;

    vec4 color = vec4(brushColor, 1.0) * lev;

    // gl_FragColor = color;

}`;