let tex2;

let tex3;

let tex4;

let tex5;

let tex6;

​

// 下記改良版：

// https://editor.p5js.org/Karakure178/sketches/a5vRriRAy

// シェーダーを複数用意すれば二個目が真っ黒というのが回避できる

// drawのたびに毎回初期化して使いなおすのがいいかも？

let theShader1;

let theShader2;

​

// 参考：https://editor.p5js.org/tinywitchdraws/sketches/747WbEYo-

function preload() {

  tex = createGraphics(400,400,WEBGL);

  tex.background(100);

  tex2 = createGraphics(400,400,WEBGL);

  tex2.background(100);

  tex3 = createGraphics(400,400,WEBGL);

  tex3.background(100);

  tex4 = createGraphics(400,400,WEBGL);

  tex4.background(100);

  tex5 = createGraphics(400,400,WEBGL);

  tex5.background(100);

  tex6 = createGraphics(400,400,WEBGL);

  tex6.background(100);

  const n = 10;

  const w = 5;

  const num = (n/tex.width) - 5*n;

  stripe(tex,"#402B3A","#D63484");

  stripe(tex2,"#234567","#3e3e3e");

  stripe(tex3,"#FF9843","#FFDD95");

  stripe(tex4,"#1D2B53","#FF004D");

  stripe(tex5,"#176B87","#80BCBD");

  stripe(tex6,"#43766C","#76453B");

  theShader1 = loadShader("normal.vert", "normal.frag");

  theShader2 = loadShader("normal.vert", "normal.frag");

}

​

function setup() {

  createCanvas(800, 800, WEBGL);

}

​

let angle = 0;

function draw() {  

  background(220);

  theShader1.setUniform(`u_tex`, tex);

  theShader1.setUniform(`u_tex2`, tex2);

  theShader1.setUniform(`u_tex3`, tex3);

  theShader1.setUniform(`u_tex4`, tex4);

  theShader1.setUniform(`u_tex5`, tex5);

  theShader1.setUniform(`u_tex6`, tex6);

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

  theShader2.setUniform(`u_tex`, tex);

  theShader2.setUniform(`u_tex2`, tex2);

  theShader2.setUniform(`u_tex3`, tex3);

  theShader2.setUniform(`u_tex4`, tex4);

  theShader2.setUniform(`u_tex5`, tex5);

  theShader2.setUniform(`u_tex6`, tex6);

  theShader2.setUniform('u_resolution', [tex.width, tex.height]);

  push();

  normalMaterial();

  shader(theShader1);

  texture(tex);  

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

  box(100);

  pop();

  resetShader();

​

  push();

  normalMaterial();

  shader(theShader2);

  texture(tex);  

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

  translate(150,150);

  box(100);

  pop();

  //grid(3);

}

​

​

// 縞模様

const stripe = (pg, c1, c2) => {

  const n = Math.floor(pg.random(5, 14));

  const w = pg.width;

  const h = pg.height;

  pg.push();

  pg.translate(-w/2,-h/2);

  pg.noStroke();

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

    pg.fill(c2);

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

​

    const y = (h / n) * i;

    pg.rect(0, y, w, n);

  }

  pg.pop();

};

​

​

/** num個で分割したグリッドを画面いっぱいに生成する

 * @method grid

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

 */

const grid = (num) => {

  const n1 = num + 1;

​

  const margin_left = width / n1 / n1;

  const margin_bottom = height / n1 / n1;

​

  const nw = width / n1;

  const nh = height / n1;

​

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

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

      push();

      const x = nw * i + margin_left * (i + 1);

      const y = nh * j + margin_bottom * (j + 1);

      translate(x + nw / 2, y + nw / 2);

      box(100);

      pop();

    }

  }

};