let pg;

let num;

let theShader1;

const colors = ['#D04848', '#F3B95F', '#FDE767', '#6895D2'];

const colors2 = ['#191919', '#750E21', '#E3651D', '#BED754'];

let rand;

​

function setup() {

  createCanvas(800, 800,WEBGL);

  pg = createGraphics(width,height);

  pg.noStroke();

  num = parseInt(random(3,10));

  rand = parseInt(random(0,4));

  num = 15;

  pg.noSmooth();

}

​

function draw() {

  background(220);

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

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

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

      if(random(1) <0.5){

       pg.fill(colors[rand]);

       //pg.stroke(colors[rand]);

      }else{

        pg.fill(colors2[rand]);

        //pg.stroke(colors2[rand]);

      }

      tris(pg, i*86,j*150,100);

    }

  }

  theShader1 = createShader(vs, fs);

  // シェーダーの設定

  shader(theShader1);

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

  theShader1.setUniform(`u_tex`, pg);

  theShader1.setUniform(`u_color`, rand_color(colors[rand]));

  theShader1.setUniform(`u_color2`, rand_color(colors2[rand]));

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

​

  image(pg, 0, 0);

  noLoop();

}

​

keyPressed = () => {

  if (key === 's') {

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

    saveGif('canvas', 4);

  }

};

​

const tris = (pg,x,y,r,colors,isFill) => {

  const num = 3;

  const rr = r/2;

  const angle = 360/num;

  pg.push();

  pg.translate(x,y);

  pg.rotate(radians(30));

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

    const xx = rr * cos(radians(angle * i));

    const yy = rr * sin(radians(angle * i));

    if(isFill) pg.fill(colors[i]);

    hexagon(pg,xx,yy,r);

  }

  pg.pop();

}

​

const hexagon = (pg,x,y,r) => {

  const num = 6;

  const rr = r/2;

  const angle = 360/num;

  pg.push();

  pg.translate(x,y);

  pg.beginShape();

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

    const xx = rr * cos(radians(angle * i));

    const yy = rr * sin(radians(angle * i));

    pg.vertex(xx,yy);

  }

  pg.endShape(CLOSE);

  pg.pop();

}

​

​

/** rgbを0~1の範囲に変換する関数

 * @function rand_color

 * @param {p5.canvas} p - p5インスタンス

 * @param  {string} colors - 色コード

 */

const rand_color = (colorCode) => {

  let rc = color(colorCode);

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

};

​

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

  }

`;

​

const fs = `

  precision highp float;

  precision highp int;

​

  varying vec2 vTexCoord;

  uniform sampler2D u_tex;

  uniform float u_time;

  uniform vec4 u_color;

  uniform vec4 u_color2;

  uniform vec2 u_resolution;

​

​

  float PI = 3.14159265358979;

​

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

}

​

vec2 random2(vec2 p) {

    return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453);

}

​

vec2 rotation(vec2 p, float theta){

    return vec2((p.x) * cos(theta) - p.y * sin(theta), p.x * sin(theta) +  p.y * cos(theta));

}

​

float cellular(vec2 p) {

    vec2 i_st = floor(p);

    vec2 f_st = fract(p);

    float m_dist = 10.;

    for (int j=-1; j<=1; j++ ) {

        for (int i=-1; i<=1; i++ ) {

            vec2 neighbor = vec2(float(i),float(j));

            vec2 point = random2(i_st + neighbor);

            point = 0.5 + 0.5*sin(6.2831*point);

            vec2 diff = neighbor + point - f_st;

            float dist = length(diff);

            if( dist < m_dist ) {

                m_dist = dist;

            }

        }

    }

    return m_dist;

}

​

void main(void)

{

  vec2 crd = vTexCoord;

  vec4 color = texture2D(u_tex,crd);

  vec2 st = vTexCoord;

    st *= 10.0;

    st = rotation(st,u_time/10.);

    float vc = cellular(st);

​

    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(u_time*3., u_time*3.), 0.0)) * 0.125 + 0.5;

​

  if(color == u_color){

    gl_FragColor = texture2D(u_tex,crd + v);

  }else if(color == u_color2){

    gl_FragColor = texture2D(u_tex,crd - vc);

  }else{

    gl_FragColor = texture2D(u_tex,crd);

    //vec4(c,c,c,1.0);  //texture2D(u_tex,crd);

  }

​

  const float Pi = 6.28318530718;

  const float Directions = 16.0; // BLUR DIRECTIONS

  const float Quality = 20.0; // BLUR QUALITY 

  const float Size = 20.0; // BLUR SIZE 

  vec2 Radius = Size/u_resolution.xy;

  vec4 Color = gl_FragColor;

  for( float d=0.0; d<Pi; d+=Pi/Directions){

        for(float i=1.0/Quality; i<=1.0; i+=1.0/Quality){

            Color += texture2D( u_tex, uv+vec2(cos(d),sin(d))*Radius*i);        

        }

  }

  Color /= Quality * Directions - 15.0;

  float c = step(0.8, float(Color));

​

}

`;

​