let theShader1;

​

function setup() {

  createCanvas(800, 800,WEBGL);

  pg = createGraphics(width, height);

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

  noStroke();

}

​

function draw() {

  background(220);

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

  pg.push();

  colorCircle(pg,7);

  pg.pop();

  // シェーダーの設定

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

}

​

// カラフルな円をかきたい

const colorCircle = (pg,num) =>{

  //const num = 10;

  const r = pg.width/num;

  let x,y;

  // numを2倍にするのがポイント

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

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

      if(j%2 == 0){

        pg.fill(30);

        x = r*i;

      }else{

        pg.fill(255);

        x = r*i+r/2;

      }

      y = r/2*j;

      pg.circle(x,y,r);

    }

  }

}

​

keyPressed = () => {

  if (key === 's') {

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

    saveGif('canvas', 3);

  }

};

​

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: `

// 参考：https://qiita.com/aa_debdeb/items/083a7ec32fb7f1cb3ae3

#define palette(t,offset,amplitude,frequency,phase) ((offset)+(amplitude)*cos(6.28318*((t)*(frequency)+(phase))))

​

precision highp float;

precision highp int;

​

varying vec2 vTexCoord;

​

uniform sampler2D u_tex;

uniform float u_time;

uniform vec2 u_resolution;

uniform vec3 u_color0;

​

​

float pi = 3.14159265358979;

float X = .211324865405187;

float Y = .36602540378443;

float Z = -.577350269189626;

float W = .024390243902439;

​

vec3 permute(vec3 x) { return mod( x*x*34.+x, 289.); }

​

float snoise(vec2 v) {

    vec2 i = floor(v + (v.x+v.y)*Y),

    x0 = v -   i + (i.x+i.y)*X,

    j = step(x0.yx, x0),

    x1 = x0+X-j,

    x3 = x0+Z;

  i = mod(i,289.);

  vec3 p = permute( permute( i.y + vec3(0, j.y, 1 )) + i.x + vec3(0, j.x, 1 ) ),

    m = max( .5 - vec3(dot(x0,x0), dot(x1,x1), dot(x3,x3)), 0.),

    x = 2. * fract(p * W) - 1.,

    h = abs(x) - .5,

    a0 = x - floor(x + .5),

    g = a0 * vec3(x0.x,x1.x,x3.x) + h * vec3(x0.y,x1.y,x3.y);

    m = m*m*m*m* ( 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ) );

​

    return .5 + 65. * dot(m, g);

}

​

void main() {

  vec2 uv = vTexCoord;

​

  vec2 p= vTexCoord;

  p.y += 0.09 * sin(p.x*pi*5.0 + u_time);

  vec3 col = 0.5 + 0.5*cos(u_time+uv.xyx+vec3(0,2,4));

  float l=.2;

  float f=5.;

  float n=snoise(p*5.)*.5+.5;

  float c=float(fract(n*f)<l);

  vec3 col_highline  = vec3(0,0,0);

  col_highline += vec3(c,c,c);

​

  vec4 tex = texture2D(u_tex, uv);

  // vec4 tex2 = texture2D(u_tex, vTexCoord);

​

  vec4 colors = vec4(0.0, 0.0, 0.0, 0.0);

​

  if(vec3(0.0,0.0,0.0) == col_highline){

    colors =  vec4(u_color0,1.0);

  }else{

    colors =  vec4(col_highline,1.0);

  }

​

​

  vec4 colors2 = vec4(0.0, 0.0, 0.0, 0.0);

  if(tex == vec4(1.0,1.0,1.0,1.0)){

    colors2 = tex;

  }else{

    colors2 = colors;

  }

​

  if(colors2 == vec4(0.0,0.0,0.0,1.0)){

    gl_FragColor = vec4(palette(u_time/10.0, vec3(0.2, 0.6, 0.4), vec3(0.1, 0.5, 0.1), vec3(1.0, 1.0, 2.0), vec3(0.0, 0.3, 0.15)),1.0);

  }else{

    gl_FragColor = colors2;

  }

​

}

`,

};