let blur;

const r = 200; //半径

const colors = ["#DE3163", "#003285", "#FF7F3E", "#FFDA78", "#77B254", "#fff"];

let canvas;

​

function setup() {

  canvas = createCanvas(500, 500, WEBGL);

  pg = createGraphics(width, height);

  pg.noFill();

​

  background("#000000");

  noStroke();

​

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

  frameRate(15);

}

​

function draw() {

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

  pg.push();

  pg.background("#000000");

  drawRandomRect(pg,70);

  pg.pop();

  shader(blur);

  blur.setUniform(`u_tex`, pg);

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

  blur.setUniform("u_resolution", [pg.width, pg.height]);

​

  image(pg, 0, 0);

  noLoop();

}

​

keyPressed = () => {

  if (key === "s") {

    saveCanvas(canvas, "canvas", "png");

    saveGif("canvas", 4);

  }

};

​

// ランダムな四角形を描画する関数

function drawRandomRect(pg,n) {

  pg.stroke("#fff");

  pg.strokeWeight(3.5);

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

    let x = random(width); // ランダムなX座標

    let y = random(height); // ランダムなY座標

    let w = random(20, 100); // ランダムな幅

    let h = random(20, 100); // ランダムな高さ

    pg.rect(x, y, w, h);

  }

}

​

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;

​

  void main() {

    const float Pi = 6.28318530718;

    const float Directions = 30.0; // BLUR DIRECTIONS

    const float Quality = 200.0; // BLUR QUALITY 

    const float Size = 10.0; // BLUR SIZE 

    vec2 Radius = Size/u_resolution.xy;

    vec2 uv = vTexCoord; // / u_resolution.xy;

    vec4 Color = texture2D(u_tex, uv);

    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.35,float(Color));

    gl_FragColor = Color;

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

  }

`,

};

​