let overScreen;

const glowScale = 4;

​

let glowScreenShow = true;

let overScreenShow = true;

​

function setup() {

  createCanvas(400, 400);

  overScreen = createGraphics(width, height);

  overScreen.colorMode(HSB);

  glowScreen = createGraphics(width/glowScale, height/glowScale);

  glowScreen.blendMode(ADD);

  glowScreen.colorMode(HSB);

  glowStroke(4);

}

​

function draw() {

  background(50);

  //clearGlow();

  if(mouseIsPressed) {

    glowLine(mouseX, mouseY, pmouseX, pmouseY, 0);

  }

  drawGlow();

}

​

function keyReleased() {

  if(key === "g") {

    glowScreenShow = !glowScreenShow;

  }

  if(key === "o") {

    overScreenShow = !overScreenShow;

  }

}

​

function glowLine(x1, y1, x2, y2, hue) {

  overScreen.stroke(hue, 10, 255);

  overScreen.line(x1, y1, x2, y2);

  glowScreen.stroke(hue, 255, 255);

  glowScreen.line(x1/glowScale, y1/glowScale, x2/glowScale, y2/glowScale);

}

​

function glowCircle(x, y, r, hue) {

  overScreen.fill(hue, 10, 255);

  overScreen.noStroke();

  overScreen.circle(x, y, r * 2);

  glowScreen.fill(hue, 255, 255);

  glowScreen.noStroke();

  glowScreen.circle(x/glowScale, y/glowScale, r/glowScale * 2);

}

​

function glowStroke(weight) {

  overScreen.strokeWeight(weight);

  glowScreen.strokeWeight(weight);

}

​

function clearGlow() {

  glowScreen.clear();

  overScreen.clear();

}

​

function drawGlow() {

  if(glowScreenShow) {

    drawingContext.filter = `blur(8px)`;

    image(glowScreen, 0, 0, width, height);

  }

  if(overScreenShow) {

    drawingContext.filter = 'none';

    image(overScreen, 0, 0, width, height);

  }

}