attempt2 - genuary13

let cnv2;
let myShader;

function setup() {
  createCanvas(600, 600, WEBGL);
  cnv2 = createGraphics(width * 2, height * 2);
  myShader = createShader(vert, frag);
  cnv2.background(50);
  cnv2.stroke(255);
  cnv2.strokeWeight(2);

  shader(myShader);
}

function draw() {
  let t = frameCount / 500;
  let n = 50 - 49 * cos(t);
  myShader.setUniform("u_time", t);
  myShader.setUniform("u_resolution", [width, height]);
  cnv2.translate(width, height);
  cnv2.background(0, 0, 0, 20);
  for (let i = 0; i < n; i++) {
    cnv2.push();

    cnv2.rotate((TWO_PI / n) * i + t);
    cnv2.translate((width / 4) * sin(t / 3), 0);
    cnv2.stroke(255);
    cnv2.noFill();
    cnv2.circle(200 * sin((t * i) / 10), 0, 20 + 10 * i * sin(t / 2));
    cnv2.pop();
  }

  drawScreen();
  cnv2.translate(-width, -height);
}

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

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

void main() {
  vec2 uv = vTexCoord;
  vec2 st = gl_FragCoord.xy/u_resolution.xy;
  uv.y = 1.0 - uv.y;//flip y  
  
  
  vec3 col;
  col.r = texture2D(texture, uv*st*sin(u_time)*sin(u_time+st.x) ).r;
  col.g = texture2D(texture, uv*st*sin(u_time)*sin(u_time)).g;
  col.b = texture2D(texture, uv*st ).b;
  gl_FragColor = vec4(col.r,col.g,col.b, 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.0 - 1.0;//remap center

  gl_Position = positionVec4;
}
`;