attempt1 - 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/100;
  let n = 20+19*sin(t);
  myShader.setUniform("u_time",t)
  myShader.setUniform("u_resolution",[width,height])
  cnv2.translate(width,height)
  cnv2.background(0,100,150)
  for(let i = 0;i<n;i++){
    cnv2.push();
      cnv2.rotate(TWO_PI/n*i+t);
      cnv2.translate(width/4+width/4*sin(t/3),0);
      cnv2.stroke(255)
      cnv2.noFill()
      cnv2.circle(0,0,200+200*sin(t/2));
    cnv2.pop();
  }
  
  drawScreen();
  cnv2.translate(-width,-height)
}


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

function getNoiseValue() { 
  let v = noise(millis()/100);
  const cutOff = 0.5;
  
  if(v < cutOff) {
    return 0;
  }
  
  v = pow((v-cutOff) * 1/(1-cutOff), 2);
  
  return v;
}

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  
  vec2 offset = vec2(0.2*sin(u_time+st.x), 0.2*cos(u_time+st.y));
  vec3 col;
  col.r = texture2D(texture, uv + offset).r;
  col.g = texture2D(texture, uv+offset).g;
  col.b = texture2D(texture, uv - offset).b;
  gl_FragColor = vec4(col.r*0.6,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;
}
`