SOURCE

var numWalkers;
var fr = 60;
var walkers = [];
var stage;
var hue;
var bgHue;
var shadow;
var origin;
var reset = true;


function setup() {
	// p5js treats setup() like a window.onload event
	// Create Stage
	stage = createVector(document.body.offsetWidth, document.body.offsetHeight);
	createCanvas(stage.x, stage.y);
  frameRate(fr);

	// Setup walkers
	numWalkers = random(50, 200);

	// Set Background
	hue = random(0, 360);
	colorMode(HSB);
	background(hue, 90, 50);

	// Create Walkers
	for (i = 0; i < numWalkers; i++) {
	    walkers[i] = new Walker();
	}

}

function resetCanvas() {
	clear();
}

function draw() {
	// Uncomment to see draw behavior
	// resetCanvas();
  if (mouseIsPressed) {
    if (reset) {
      clear ();
      setup();
      reset = false;
    }
  } else {
      reset = true;
  }
	// Update Walker
	for (i = 0; i < numWalkers; i++) {
	    walkers[i].display();
		walkers[i].update();
	}
}

function Walker() {
	// Set Properties
	this.pos = createVector(width/2, height/2);
  this.vel = createVector(0, 0);
  this.acc = createVector(random(random(-.05, .05), random(-.3,.3)), random(random(-.05, .05), random(-.3,.3)));
	this.decay = random(.5, 2); // Rate at which walkers shrink
	this.colorAngle = hue + random(-80, 80);
	this.sat = random(70, 80);
	this.light = random(60, 80);
	this.shadow = createVector(-this.acc.x, -this.acc.y);
  
	if (stage.x >= stage.y) {
		this.size = random(width*.02, width*.07);
		this.speed = random(width*.0032, width*.012);
	} else {
		this.size = random(height*.02, height*.07);
		this.speed = random(height*.0032, height*.012);
	}


	this.update = function() {

		var randomWalk = createVector(random(-this.speed, this.speed),random(-this.speed, this.speed));
    this.vel.add(this.acc.mult(1.005));
		this.pos.add(this.vel);
    this.pos.add(randomWalk);
		this.size -= this.decay;

		this.colorAngle += random(-.5, 1.5);
		if(this.colorAngle <= 0) {
			this.colorAngle += 360;
		} else if (this.colorAngle >=360) {
			this.colorAngle -= 360;
		}
    
    this.light += .03;
    this.sat += .03;
	}

	this.display = function() {

		if(this.size <= 0){
			return;
		} else {
			colorMode(HSB);

			//Shadow
			fill(this.colorAngle, this.sat, this.light);
			noStroke();
			ellipse(this.pos.x + this.shadow.x, this.pos.y + this.shadow.y, this.size, this.size);

			// Circle
			fill(this.colorAngle, this.sat, this.light);
			noStroke();
			ellipse(this.pos.x, this.pos.y, this.size, this.size);
		}
	}
}

$color_blue-dark: #44656a;
$color_blue: #719998;
$color_blue-light: #b9d0be;
$color_pink: #dd8088;
$color_pink-light: #e6b7ad;
$color_silver: #a89f90;
$color_silver-light: #e4ddcb;

$font_primary: 'Knewave', cursive;
$font_secondary: 'Raleway', sans-serif;

$animation_reveal-duration: 1s;
$animation_reveal-stagger: $animation_reveal-duration / 2;

$ease-default: ease-in-out;

body {  
  // cursor: none;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: pointer;
}

@keyframes reveal {
  100% { opacity: 1; }
}

#title {
  display: block;
  user-select: none;
  position: absolute;
  top: 75%;
  left: 50%;
  font-family: $font_primary;
  font-size: 24px;
  text-shadow: 1px 1px 3px black;
  text-align: center;
  color: white;
  mix-blend-mode: overlay;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;

  &::after {
    content: "A Pen by Chris Caldwell";
    display: block;
    font-family: $font_secondary;
    font-size: 12px;
    margin-top: 1em;
    color: white;
  }
  
}