let pg;

let theShader1;

let theShader2;

​

// https://editor.p5js.org/aferriss/sketches/h3vtY-SlK

function setup() {

  createCanvas(400, 400, WEBGL);

  fb = createFramebuffer({width: 400, height: 400});

  theShader1 = createShader(shader1.vs, shader1.fs);

  theShader2 = createShader(shader1.vs, shader2.fs);

  pg = createGraphics(width, height);

  pg.noStroke();

  pg.fill('#776B5D');

  background('#F3EEEA');

  noStroke();

}

​

function draw() {

  background(220);

  push();

  fb.begin();

    background(100);

    fill('#000000');

    circle(0, 0, 100);

  fb.end();

  shader(theShader1);

  theShader1.setUniform(`u_tex`, fb);

  theShader1.setUniform(`u_time`, frameCount / 35);

  //image(fb, -width/2, -height/2, width, height);

  //pg.circle(width/2,height/2,200);

  //shader(theShader2);

  //theShader2.setUniform(`u_tex`, fb);

  //theShader2.setUniform(`u_tex2`, pg);

  //theShader2.setUniform(`u_time`, frameCount / 35);

  //image(pg, -width/2, -height/2, width, height);

  texture(fb);

  textureMode(NORMAL);

  beginShape();

  vertex(-40, -40, 0, 0);

  vertex(40, -40, 1, 0);

  vertex(40, 40, 1, 1);

  vertex(-40, 40, 0, 1);

  endShape();

  pop();

  //image(fb, -width/2, -height/2, width, height);

​

}

​

​

const shader1 = {

  vs: `

  precision highp float;

  precision highp int;

​

  attribute vec3 aPosition;

  attribute vec2 aTexCoord;

​

  varying vec2 vTexCoord;

​

  uniform mat4 uProjectionMatrix;

  uniform mat4 uModelViewMatrix;

​

  void main() {

    vec4 positionVec4 = vec4(aPosition, 1.0);

    gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;

    vTexCoord = aTexCoord;

  }

`,

  fs: `

precision highp float;

precision highp int;

​

varying vec2 vTexCoord;

​

uniform sampler2D u_tex;

uniform float u_time;

uniform vec2 u_resolution;

​

float pi = 3.14159265358979;

float X = .211324865405187;

float Y = .36602540378443;

float Z = -.577350269189626;

float W = .024390243902439;

​

vec3 permute(vec3 x) { return mod( x*x*34.+x, 289.); }

​

float snoise(vec2 v) {

    vec2 i = floor(v + (v.x+v.y)*Y),

    x0 = v -   i + (i.x+i.y)*X,

    j = step(x0.yx, x0),

    x1 = x0+X-j,

    x3 = x0+Z;

  i = mod(i,289.);

  vec3 p = permute( permute( i.y + vec3(0, j.y, 1 )) + i.x + vec3(0, j.x, 1 ) ),

    m = max( .5 - vec3(dot(x0,x0), dot(x1,x1), dot(x3,x3)), 0.),

    x = 2. * fract(p * W) - 1.,

    h = abs(x) - .5,

    a0 = x - floor(x + .5),

    g = a0 * vec3(x0.x,x1.x,x3.x) + h * vec3(x0.y,x1.y,x3.y);

    m = m*m*m*m* ( 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ) );

​

    return .5 + 65. * dot(m, g);

}

​

void main() {

  vec2 uv = vTexCoord;

​

  vec2 p= vTexCoord;

  p.y += 0.09 * sin(p.x*pi*5.0 + u_time);

  vec3 col = 0.5 + 0.5*cos(u_time+uv.xyx+vec3(0,2,4));

  float l=.2;

  float f=5.;

  float n=snoise(p*5.)*.5+.5;

  float c=float(fract(n*f)<l);

  vec3 col_highline  = vec3(0,0,0);

  col_highline += vec3(c,c,c);

​

  vec4 tex = texture2D(u_tex, uv);

​

  if(vec3(0.0,0.0,0.0) == col_highline){

    gl_FragColor =  tex;

  }else{

    gl_FragColor =  vec4(col_highline,1.0);

  }

}

`,

};

​

const shader2 = {

  fs:`

  precision highp float;

  precision highp int;

​

  varying vec2 vTexCoord;

​

  uniform sampler2D u_tex;

  uniform sampler2D u_tex2;

  uniform float u_time;

​

  float PI = 3.14159265358979;

​

  void main() {

    vec2 uv = vTexCoord;

    uv.y += 0.09 * sin(uv.x*PI*5.0 + u_time);

​

    vec4 tex = texture2D(u_tex, uv);

    vec4 tex2 = texture2D(u_tex2, uv);

​

    if(tex == vec4(0.0,0.0,0.0,1.0)){

      gl_FragColor = tex;

    }else{

      gl_FragColor = tex2;

    }

  }

`

}