Creates random particles with customizable properties

p5-particles.js

/**
 * Created by shramee on 28/02/17.
 */
var particles = {},
	particleProps = {},
	particleFixOutOfViewport = function ( p, k ) {
	var
		flipSign = 1,
		max = particleProps[ k + 'Max'];
	if ( p[k] > max/2 ) { // if particle is in greater half
		flipSign = -1; // We need to subtract
	}

	if ( particleProps.rebound ) {
		p[ k + 'Speed' ] = p[ k + 'Speed' ] * -1;
	} else {
		p[k] += flipSign * ( max - p.s );
	}
}

function setup() {
	createCanvas( windowWidth, windowHeight ).parent( 's1' );

	particleProps = {
		xMax : window.innerWidth,
		yMax : window.innerHeight,
		rebound : true, // Rebound particles on edge, or make them appear on the other side
		background: color( 0, 200, 250 ),
		num: 7,
		sizeMin: 70,
		sizeVariance: 160,
		colorMin :50,
		colorVariance: 200,
		opacityMin: 160,
		opacityVariance: 70,
		speedMin: 1,
		speedVariance: 1,
		blur: 1 // 0 for no blur
	};

	var createParticle = function ( data ) {
		data = data ? data : {};

		data.clr = data.clr ? data.clr : color(
			particleProps.colorMin + Math.random() * particleProps.colorVariance,
			particleProps.colorMin + Math.random() * particleProps.colorVariance,
			particleProps.colorMin + Math.random() * particleProps.colorVariance,
			particleProps.opacityMin + Math.random() * particleProps.opacityVariance
		);

		data.s = data.s ? data.s : particleProps.sizeMin + random() * particleProps.sizeVariance;

		data.x = data.x ? data.x : data.s + random() * (
		particleProps.xMax - 2 * data.s
		);
		data.y = data.y ? data.y : data.s + random() * (
		particleProps.yMax - 2 * data.s
		);

		function speed () {
			var direction = random() > 0.5 ? 1 : -1;
			return direction * ( particleProps.speedMin + random() * particleProps.speedVariance );
		}

		data.xSpeed = data.xSpeed ? data.xSpeed : speed();
		data.ySpeed = data.ySpeed ? data.ySpeed : speed();

		var pgSize = data.s * particleProps.graphicSizeMultiplier;
		var pg = createGraphics( pgSize, pgSize );
		pg.background( 0, 0, 0, 0 );
		pg.fill( data.clr );
		pg.noStroke();
		pg.ellipse( pgSize / 2, pgSize / 2, data.s, data.s );
		if ( particleProps.blur ) {
			pg.filter( BLUR, particleProps.blur );
		}
		data.graphics = pg.get();

		return data;
	};

	particleProps.graphicSizeMultiplier = particleProps.blur > 1 ? particleProps.blur : 1.24;

	for( var i = 0; i < particleProps.num; i++ ) {
		particles[ i ] = createParticle();
	}

	// All images should be centered
	imageMode(CENTER);
}

function draw() {
	background( particleProps.background );
	noStroke();

	for( var i = 0; i < particleProps.num; i++ ) {

		var
			p = particles[i],
			pPosX = p.x += p.xSpeed,
			pPosY = p.y += p.ySpeed,
			size = p.s,
			xDiff = mouseX - pPosX,
			yDiff = mouseY - pPosY,
			s = Math.sqrt( Math.pow( xDiff, 2 ) + Math.pow( yDiff, 2 ) ); // Distance square

		if ( Math.abs( xDiff ) + Math.abs( yDiff ) < particleProps.xMax/8 ) {
				//size += size * 25 / ( Math.abs( xDiff ) + Math.abs( yDiff ) + 16 );
				p.xSpeed += ( p.s / 25 ) * ( mouseX - pmouseX ) / particleProps.xMax;
				p.ySpeed += ( p.s / 25 ) * ( mouseY - pmouseY ) / particleProps.yMax;
		}

		fill( p.clr );

		image( p.graphics, pPosX, pPosY );

		// Getting out of viewport
		if ( pPosX > particleProps.xMax || pPosX < 0 ) particleFixOutOfViewport( p, 'x' );
		if ( pPosY > particleProps.yMax || pPosY < 0 ) particleFixOutOfViewport( p, 'y' );
	}
}