EffectHub.com: your best source for gaming

Recommendation

More Effects...

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();
	}
  
  window.addEventListener("resize", resize);

}

function resetCanvas() {
	clear();
}
function resize () {
  resizeCanvas(window.innerWidth, window.innerHeight);
  setup();
}

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);
		}
	}
}

CSS

HTML

Recommendation

Join Effecthub.com