genuary13 - hyperspace puddle

let cnv2;
let myShader;

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


let a = 9
function draw() {
  let t = frameCount/500;
  myShader.setUniform("u_time",t)
  myShader.setUniform("u_resolution",[width,height])
  cnv2.translate(width,height)
  cnv2.background(0,0,a)
  
  for(let i=0;i<1000;i+=2){
    cnv2.fill(50,240-i/4,250-i/4)
    cnv2.push()
    cnv2.rotate(137.5*i+t+tan(i+t*0.00001))//golden angle
    cnv2.ellipse(0,i/2+i*sin(t)/2+i*sin(i*t/5+i)/30,4+10*abs(sin(t)),2+10*abs(sin(t-i)))
    cnv2.pop()
  } 
  drawScreen();
  cnv2.translate(-width,-height)
}




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


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

void main() {
  vec2 uv = vTexCoord;
  uv.y = 1.0 - uv.y;//flip y  
  vec2 offset = vec2(0.01*sin(u_time),0.01*cos(u_time));
  
  vec3 col;
  col.r = texture2D(texture, uv+offset*sin(u_time)*sin(u_time) ).r;
  col.g = texture2D(texture, uv-offset*sin(u_time)*sin(u_time)).g;
  col.b = texture2D(texture, uv).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;
}
`