p5 sketch

gistfile1.txt

// the shader variable
let edgeEffect;
let blurEffect;

let img;
let fps = 60;


function preload(){
  // load the shader
  edgeEffect = loadShader('edgeEffect.vert', 'edgeEffect.frag');
  blurEffect = loadShader('blurEffect.vert', 'blurEffect.frag');
  img = loadImage('ob.jpg');
}

function setup() {

  // shaders require WEBGL mode to work
  createCanvas(700, 700, WEBGL);
  noStroke();
  frameRate(fps);
  

 // initialize the createGraphics layers
  pass1 = createGraphics(width, height, WEBGL);
  pass2 = createGraphics(width, height, WEBGL);

  imageMode(CENTER);

}

function draw() {  


  //ACTUAL DRAW SHIT
  background(255);
  // shader() sets the active shader with our shader
  pass1.shader(edgeEffect);

  edgeEffect.setUniform('tex0', img);
  // the size of one pixel on the screen
  edgeEffect.setUniform('stepSize', [0.1/width, 0.1/height]);
  // how far away to sample from the current pixel
  // 1 is 1 pixel away
  edgeEffect.setUniform('dist', 2000+(cos(frameCount/200)*1400));
  pass1.rect(0,0,width,height);


  pass2.shader(blurEffect)
  blurEffect.setUniform('tex0', pass1);
  // the size of one pixel on the screen
  blurEffect.setUniform('stepSize', [0.1/width, 0.1/height]);
  // how far away to sample from the current pixel
  // 1 is 1 pixel away
  blurEffect.setUniform('dist', (cos(frameCount/200)*5));
  // rect gives us some geometry on the screen
  pass2.rect(0,0,width, height);
  
  image(img,0,0,width,height);
  tint(255,100);
  image(pass2,0,0,width,height);
  
  noTint();
  fill(255);
  triangle(-150,350, 350,130, width/2,height/2);
  triangle(280,-height/2, width/2,-width/2,width/2,-200)
  triangle(-width/2,width/2,-width/2,290,-276,width/2)


}