Blur and fade example

var positions = [];

var maxLength = 20;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

function draw() {

  blendMode(BLEND);

  background(0);

  blendMode(SCREEN);

  positions.push([mouseX, mouseY]);

  if (positions.length > maxLength) {

    positions.splice(0, 1);

  }

  drawingContext.shadowColor = color(0, 100, 200);

  for (let i = 0; i < positions.length; i++) {

    let pos = positions[i];

    stroke(0, map(i, 0, maxLength, 0, 255));  // tail=transparent, head=opaque

    strokeWeight(map(i, 0, maxLength, 60, 20));  // tail=bigger, head=smaller

    drawingContext.shadowBlur = map(i, 0, maxLength, 60, 1);  // tail=larger blur, head=smaller blur

    point(pos[0], pos[1]);

  }

}