Shader template

​

// https://www.maristcircle.com/opinion/2022/10/6/star-wars-andor-the-series-fans-have-been-asking-for

let img;

​

let screen;

​

let glitchShader;

​

function preload() {

  img = loadImage('andor.jpg');

  glitchShader = loadShader('shader.vert', 'shader.frag');

}

​

​

function setup() {

  createCanvas(800, 600, WEBGL);

  background(100);

  img.resize(800, 600);

  screen = createGraphics(width, height);

  screen.background(50);

  screen.stroke(255);

  screen.strokeWeight(5);

  shader(glitchShader);

}

​

function draw() {

  screen.image(img, 0, 0);

  // WEBGL coordinate origin is in the center of the screen

  glitchShader.setUniform('texture', screen);

  glitchShader.setUniform('noise', 0);

  rect(-width/2, -height/2, width, height);

}