GLSL: clamp & smoothstep

// https://www.udemy.com/course/learn-glsl-shaders-from-scratch

var mainShader;

var blur = true;

var blurAmount = 0.1;

​

function preload() {

  mainShader = new p5.Shader(this.renderer, vShader, fShader);

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

}

​

function draw() {

  shader(mainShader);

  mainShader.setUniform("uResolution", [width, height]);

  mainShader.setUniform("uMousePosition", [mouseX / width, mouseY / height]);

  mainShader.setUniform("uBlur", blur);

  mainShader.setUniform("uBlurAmount", blurAmount);

  noStroke();

  plane(width, height);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function mouseClicked() {

  blur = !blur;

}

​

function mouseWheel(event) {

  blurAmount += event.delta * 0.0001;

}