html, body {
  margin: 0;
}

canvas {
  display: block;
}

/*
  Johan Karlsson (DonKarlssonSan)
  
  Click canvas to reset.
*/
function Particle() {
  this.pos = createVector(random(windowWidth), random(windowHeight));
  this.tail = [];
  this.tailLength = 7;
}

Particle.prototype.move = function() {
  if(this.tail.length > this.tailLength) {
    this.tail.splice(0, 1);
  }
  this.tail.push(this.pos.copy());

  this.pos.x += random(-particleStepMax, particleStepMax);
  this.pos.y += random(-particleStepMax, particleStepMax);
}

Particle.prototype.draw = function() {
  this.tail.forEach(pos => {
    line(this.pos.x, this.pos.y, pos.x, pos.y);
  });
}

var particles;
var particleStepMax;

function setup() {
  cursor(HAND);
  particleStepMax = 6;
  initParticles();
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255);
  particles.forEach(p => {
    p.move();
    p.draw();
  });
}

function initParticles() {
  particles = [];
  for(var i = 0; i < 40; i++) {
    particles.push(new Particle());
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function mouseClicked() {
  initParticles();
  background(255);
}