​

const setcol=[]

setcol[1]=["#e2cfc4", "#354f52"];

​

let pg;

let pg2;

let theShader1;

​

// 参考：https://gin-graphic.hatenablog.com/entry/2021/05/02/191500

function setup() {

  createCanvas(800, 800,WEBGL);

​

  col = setcol[1];

  fill(col[1]);

  noStroke();

  noLoop();

  pg = createGraphics(width, height);

  pg2 = createGraphics(width, height);

  pg2.noStroke();

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

}

​

function draw() {

  background(col[0]);

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

  // pgレイアウト

  widthGrid(pg,Math.round(random(6,20)));

  pg.erase();

  hysagonGrid(pg,Math.round(random(10,30)));

  pg.noErase();

  // pg2レイアウト

  pg2.push();

  pg2.translate(pg.width/2,0);  

  hisi_group(pg2,100);

  pg2.pop();

  shader(theShader1);

  theShader1.setUniform(`u_tex2`, pg);

  theShader1.setUniform(`u_tex`, pg2);

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

  image(pg,0,0);

  //image(pg2,0,0);

}

​

​

keyPressed = () => {

  if (key === 's') {

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

  }

};

​

/** num個で分割した格子模様を画面いっぱいに生成する

* @method widthGrid

* @param  {p5.Graphics}        pg            レイヤー

* @param  {Number}        num           画面の分割数

*/

const widthGrid = (pg,num) =>{

  const w = width/num;

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

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

      if ((i % 2 === 0 && j % 2 === 0) || (i % 2 === 1 && j % 2 === 1)) {

        pg.fill('#ffffff')

      }else{

        pg.fill("#000000");

      }

      pg.rect(i*w, j*w, w, w);

    }

  }

}

​

​

// 六角形を並べる

const hysagonGrid = (pg,N) => {

  const d=w/N;

     for(let i=0;i<N*6/5+1;i++){

      const y = d*5/6*i;

      const dx = (i%2==1) ? d/2 : 0 ;

      for(let j=0;j<N+1;j++){

         const x = d*j;

         pg.push();

         pg.translate(x+dx, y);

         pattern(pg,0, 0, d);

         pg.pop();

      }

   }

}

​

// 六角形を描くだけ

const pattern = (pg,tx, ty, size) => {

   const point = [];

   pg.push();

   pg.translate(tx,ty);

   pg.beginShape();

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

     const x = size/2 * cos(TWO_PI/6*i + PI/2);

     const y = size/2 * sin(TWO_PI/6*i + PI/2);

     pg.vertex(x,y);

   }

   pg.endShape(CLOSE);

   pg.pop();

}

​

/**

  以降pg2用の処理関数

**/

​

​

// 個数分ひし形を重ねる

const hisi_group = (pg,n) =>{

  const colors = ["#FEFFDB","#FFC60B","#FF8B00","#444444"]

  const y = pg.height*2/n;

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

    pg.fill(random(colors));

    hisi(pg,0,y*i,pg.width/1.5);

  }

}

​

​

// ひし形を作る

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

  const angle = 360/4;

  pg.beginShape();

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

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

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

    pg.vertex(x+xx,y+yy);

  }

  pg.endShape(CLOSE);

}

​

​

/**

  shader用の変数

**/

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;

    }else{

      // 黒を反転させてる

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

    }

  }

`,

};