//genuary2024 - shaders
//I forked last years shader to play with it.
//ref https://www.youtube.com/watch?v=r5YkU5Xu4_E (vert file from this video)
//and book of shaders: https://thebookofshaders.com/examples/
let cnv2;
let myShader;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  cnv2 = createGraphics(width * 2, height * 2);
  myShader = createShader(vert, frag);

  cnv2.stroke(255);
  cnv2.strokeWeight(2);

  shader(myShader);
  nRot = int(random(5, 20));
  cnv2.translate(width, height);
  myShader.setUniform("num1", random(0.1, 0.5));
  myShader.setUniform("num2", random(0.1, 0.5));
  myShader.setUniform("num3", random(-1, 1));
}

function draw() {
  let t = frameCount / 2000;
  let n = 40 + 19 * sin(t);
  myShader.setUniform("u_time", t);
  myShader.setUniform("u_resolution", [width / 10, height / 10]);

  cnv2.background(50, 190, 200, 2);
  for (let j = 0; j < nRot; j++) {
    cnv2.push();

    cnv2.rotate((TWO_PI / nRot) * j);
    cnv2.translate(100 * sin(t), 100 * cos(t));
    for (let i = 0; i < n; i++) {
      cnv2.push();
      cnv2.rotate((TWO_PI / n) * i * j + t);
      cnv2.translate(0, 0);
      cnv2.fill(255);

      cnv2.circle(width / 2, height / 2, 10);
      cnv2.pop();
    }
    cnv2.pop();
  }
  drawScreen();
}

function drawScreen() {
  myShader.setUniform("texture", cnv2);
  push();
  rect(-width, -height, width, height);
  pop();
}

var frag = `
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
varying vec2 vTexCoord;
uniform float u_time;
uniform float num1;
uniform float num2;
uniform float num3;
uniform sampler2D texture;

void main() {
  vec2 uv = vTexCoord;
  vec2 st = gl_FragCoord.xy/u_resolution.xy;
  uv.y = 1.0 - uv.y;//flip y  
  float d = length(uv);
  vec2 offset = vec2(num1*sin(num1*u_time*st.x-d*st.y*cos(u_time)), num2*cos(u_time*num3+st.y- d*sin(u_time)-st.x*num3));
  vec3 col;
  col.r = texture2D(texture, uv + offset*num3).r;
  col.g = texture2D(texture, uv+offset*num3).g;
  col.b = texture2D(texture, uv+ offset*num3).b;
  gl_FragColor = vec4(col.r*0.8- d*sin(u_time*num1),col.g-d*cos(u_time*num2-d),col.b- d*cos(u_time), 1);
  
  
}
`;

var vert = `
attribute vec3 aPosition;
attribute vec2 aTexCoord;

varying vec2 vTexCoord;

void main() {
  // copy the texcoords
  vTexCoord = aTexCoord;

  vec4 positionVec4 = vec4(aPosition, 1.0);
  positionVec4.xy = positionVec4.xy * 2.6 - 1.0;//remap center

  gl_Position = positionVec4;
}
`;

function mousePressed() {
  setup();
  draw();
}