const h = 600;

const num = 5000; // 試行回数

let pg,pg2;

let theShader1;

​

// 参考：https://jp.deconbatch.com/2021/06/characteristic-circle-packing.html

// https://openprocessing.org/sketch/2113604

function setup() {  

  createCanvas(500, 500,WEBGL);

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

  noStroke();

  background("#D04848");

  pg = createGraphics(width, height);

  pg.noStroke();

  pg.fill('#ffffff');

  pg2 = createGraphics(width, height);

  pg2.noStroke();

  pg2.fill('#ffffff');

  push();

  pg.translate(width/2,height/2);

  const circles = getRandomCircles(num, w * 0.4, h * 0.4);

  //circles.forEach((c) => pg.circle(c.x, c.y, c.z));

  circles.forEach((c) => randomBox(pg,c.x, c.y, c.z));

  pct(pg2);

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

  shader(theShader1);

  theShader1.setUniform(`u_tex`, pg);

  theShader1.setUniform(`u_tex2`, pg2);

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

  image(pg,0,0);

  pop();

}

​

keyPressed = () => {

  if (key === 's') {

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

    //saveGif('canvas', 4);

  }

};

​

function getRandomCircles(_num, _w, _h) {

  let circles = [];

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

    let x = random(-1, 1) * _w;

    let y = random(-1, 1) * _h;

    let z = random(30, 200); // z軸の値を円の大きさとして使用

    if (circles.every((c) => dist(x, y, c.x, c.y) > (z + c.z) * 0.5)) {

      circles.push(createVector(x, y, z));

    }

  }

  return circles;

}

​

const randomBox = (pg,x,y,size) =>{

  const s = 7;

  const ss = 11;

  pg.push();

  //pg.fill(0);

  pg.rectMode(CENTER);

  pg.rect(x,y,size/2,size/2);  

  pg.pop();

}

​

const pct = (pg) => {

      pg.push();

      pg.background(0);

      pg.noStroke();

​

      let NUM = 40;

      let diameter = 800;

      for (let i = NUM; i > 0; i--) {

        let pct = i / NUM; // 0 ~ 1 のパーセンテージ

        let d = pct * diameter; // pct から算出

        pg.fill(0);

        if(i % 2 === 0) pg.fill(255);

        pg.circle(pg.width / 2, pg.height / 2, d);

      }

      pg.pop();

    };

​

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 sampler2D u_tex2;

  uniform float u_time;

​

  float PI = 3.14159265358979;

​

  void main() {

    vec2 uv = vTexCoord;

    vec4 tex = texture2D(u_tex, uv);

    vec4 tex_lattice = texture2D(u_tex2, uv);

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

      gl_FragColor = tex;

      //vec4(0.95, 0.73, 0.37, 1.00);

    }else{

      // 黒を反転させてる

      gl_FragColor = vec4(vec3(1.0) - tex.rgb,1.0);

    }

  }

`,

};

​