260131

const { animate } = anime;
const W = 800;
const H = 800;
let palette = [];
// --- 頂点シェーダー
const vertShader = `
  precision mediump float;
  uniform float uAnimeCount;
  attribute vec3 aPosition;
  attribute vec2 aTexCoord;
  varying vec2 vTexCoord;
  
  void main() {
    vTexCoord = aTexCoord; // テクスチャ座標をフラグメントシェーダーへ
    vec3 pos = aPosition; // attributeは読み取り専用なのでローカル変数にコピー    
    gl_Position = vec4(pos, 1.0);
  }
`;

// --- フラグメントシェーダー
const fragShader = `
  precision mediump float;
  varying vec2 vTexCoord;
  uniform float uAnimeCount;
  
  vec3 colorA = vec3(0.615, 0.741, 0.729); // #9dbdba
  vec3 colorB = vec3(0.972, 0.690, 0.259); // #f8b042
  vec3 colorC = vec3(0.894, 0.467, 0.388); // #e47763
  vec3 colorD = vec3(0.149, 0.200, 0.486); // #253276
  vec3 colorE = vec3(0.933, 0.863, 0.831); // #dfdad3
  

  //Randomを返す関数
  float random(vec2 x){
    return fract(sin(dot(x ,vec2(12.9898, 78.233))) * 43758.5453);
  }
  void main() {
    const float TAU = 6.28318530718;
    // 回転行列を適用
    // uv座標を取得 (0.0～1.0)
    vec2 uv = vTexCoord;
    uv = floor(uv *  25.0) / 25.0;
    // グリッドごとにアニメーションの位相を遅延させる
    float gridSize = 25.0;
    vec2 gridId = floor(uv * gridSize);

    float gridDelayY = gridId.y * 0.09;
    float uCountY = uAnimeCount - gridDelayY;
    float gridDelayX = gridId.x * 0.08;
    float uCountX = uAnimeCount - gridDelayX;

    float waveY = sin(cos((uv.x*TAU * 0.1)) * sin(uCountX * TAU * 0.1)) * (uCountY);
    float waveX = cos(sin((uv.y *TAU * 0.2)) * cos(uCountY * TAU * 0.5)) * (uCountX);
    float waveY2 = cos(cos((uv.x * TAU * 0.5)) * sin(uCountX * TAU * 0.2)) * (uCountX);
    float waveX2 = sin(sin((uv.y * TAU * 0.1)) * cos(uCountY * TAU * 0.6)) * (uCountY);
    uv.y += cos(waveY);
    uv.x += sin(waveX2);
    uv.y *= cos(waveY2);
    uv.x *= sin(waveX);

    // A~Dを順番にグラデーションする
    vec3 col;
    if (uv.y < 0.33) {
      float t = uv.y / 0.33;
      col = mix(colorD, colorA, t);
    } else if (uv.y < 0.66) {
      float t = (uv.y - 0.33) / 0.33;
      col = mix(colorA, colorB, t);
    } else {
      float t = (uv.y - 0.66) / 0.34;
      col = mix(colorB, colorC, t);
    } 
    gl_FragColor = vec4(col, 1.0);
  }
`;

let myShader;
let animeValue = {
  count: 0,
};
function setup() {
  createCanvas(W, H, WEBGL);
  pixelDensity(1);
  myShader = createShader(vertShader, fragShader);
  palette = colorArray[1].colors;
  background(palette[4]);
  animate(animeValue, {
    count: 1,
    duration: 20000,
    ease: "inOutBack(2.59)",
    loop: true,
    loopDelay: 0,
    alternate: true,
  });
}

function draw() {
  background(palette[4]);
  // orbitControl();


  let f = (animeValue.count) * 8;
  myShader.setUniform('uResolution', [width, height]);
  myShader.setUniform('uAnimeCount', f);
  shader(myShader);
  quad(-1, -1, -1, 1, 1, 1, 1, -1);
  resetShader();
}

const colorArray = [
  {
    id: 0,
    colors: ['#253276', '#dfdad3', '#ffffff', '#000000'],
  },
  {
    id: 1,
    colors: [
      '#9dbdba',
      '#f8b042',
      '#e47763',
      '#253276',
      '#dfdad3',
      '#FFFFFF',
      '#000000',
    ],
  },
];