EffectHub.com: your best source for gaming

Recommendation

More Effects...

// configurable:
var dotSize = 56, blurLevels=9, speed=1, particleScale=0.33;

// globals:
var c = createjs, stage, t=0, count=0, w, h, max, min;
var spriteSheet, helixes=[];

/* Objects */
function HelixParticle(spriteSheet) {
	this.Sprite_constructor(spriteSheet);
	this.t = 0;
	this.speed = 1;
	this.size = 1;
	this.altAmp = 1;
	this.altPer = 1;
}
c.extend(HelixParticle, c.Sprite);
c.promote(HelixParticle, "Sprite");

/* global methods */
setup();
function setup() {
	stage = new c.StageGL("target");
	stage.tickChildren = false;
	stage.setClearColor("#201624"); // #206699
	
	window.addEventListener("resize", onResize);
	onResize();
	
	spriteSheet = generateSpriteSheet();
	
	var helix;
	
	helix = stage.addChild(new Helix(100));
	helix.x = w/2;
	helix.y = h/2;
	helix.speed = 0.1;
	helix.alpha = 0.1;
	helix.particleScale = 5;
	helix.altAmplitude = 1.6;
	helix.amplitude = 0.6;
	helix.rotations = 3;
	helixes.push(helix);
	
	helix = stage.addChild(helix.clone(150));
	helix.particleScale = 3;
	helix.rotation = -20;
	helix.speed = -0.5;
	helix.amplitude = 0.1;
	helix.altAmplitude = 2;
	helix.alpha = 0.3;
	helixes.push(helix);
	
	helix = stage.addChild(new Helix(1500));
	helix.x = w/2;
	helix.y = h/2;
	helix.amplitude = 0.4;
	helix.particleScale = 0.2;
	helix.rotation = -40;
	helix.rotations = 2.5;
	helix.speed = 2;
	helix.startRotation = 0.33;
	helixes.push(helix);
	
	helix = stage.addChild(helix.clone());
	helix.startRotation = 0.83;
	helixes.push(helix);
	
	helix = stage.addChild(helix.clone(100));
	helix.particleScale = 0.1;
	helix.speed = -3;
	helixes.push(helix);
	
	helix = stage.addChild(helix.clone());
	helix.startRotation = 0.33;
	helixes.push(helix);
	
	c.Ticker.timingMode = c.Ticker.RAF;
	c.Ticker.on("tick", tick);
}

function generateSpriteSheet() {
	// generates a 4x4 sheet of dots at different blur levels.
	var holder = new c.Container(), shape = holder.addChild(new c.Shape()), g=shape.graphics;
	var pow = Math.ceil(Math.log(dotSize*2.2)/Math.log(2)), size2 = Math.pow(2,pow);
	var rect = new c.Rectangle(-size2/2, -size2/2, size2, size2);
	var builder = new c.SpriteSheetBuilder();
	builder.padding = 0;
	builder.maxWidth = Math.ceil(Math.sqrt(blurLevels))*size2;
	for (var i=0; i<blurLevels; i++) { builder.addFrame(holder, rect, 1, prepFrame, i); }
	return builder.build();
}

function prepFrame(holder, i) {
	var shape = holder.getChildAt(0);
  var g=shape.graphics, m=i/blurLevels, r=dotSize/2*Math.pow(2-m,1.2), x=0*(1-m)*0.2*r;
	g.c().rf(["hsla("+(m*120+190)+",100%,95%,1)","hsla(270,100%,85%,0)"],[m*0.8+0.1,1],x,0,0,x,0,r).dc(0,0,r);
	shape.alpha = 0.3+0.7*m;
}

function tick(evt) {
	var d = evt.delta;
	for (var i=0,l=helixes.length; i<l; i++) { helixes[i].tick(d); }
	stage.update();
}

function rnd(min, max) {
	if (max === undefined) { max=min; min=0; }
	return Math.random()*(max-min)+min;
}

function onResize() {
	w = window.innerWidth
	h = window.innerHeight;
	max = Math.max(w,h);
	min = Math.min(w,h);
	target.width = w;
	target.height = h;
	stage.updateViewport(w,h);
	for (var i=0; i<helixes.length; i++) {
		helixes[i].x = w/2;
		helixes[i].y = h/2;
	}
	particleScale = min/1000*0.3;
	stage.update();
}

CSS

HTML

Recommendation

Join Effecthub.com