https://zeus.vision/wp-content/themes/zeus_new/assets/js/canvas.js

1////////////////////////// PARTICLE ENGINE ////////////////////////////////////////
2/////////////////////////////////////////////////////////////////////////////////////////
3
4var ParticleEngine = (function() {
5	'use strict';
6
7	function ParticleEngine(canvas_id) {
8		// enforces new
9		if (!(this instanceof ParticleEngine)) {
10			return new ParticleEngine(args);
11		}
12		
13		var _ParticleEngine = this;
14
15		this.canvas_id = canvas_id;
16		this.stage = new createjs.Stage(canvas_id);
17		this.totalWidth = this.canvasWidth = document.getElementById(canvas_id).width = document.getElementById(canvas_id).offsetWidth;
18		this.totalHeight = this.canvasHeight = document.getElementById(canvas_id).height = document.getElementById(canvas_id).offsetHeight;
19		this.compositeStyle = "lighter";
20
21		this.particleSettings = [{id:"small", num:300, fromX:0, toX:this.totalWidth, ballwidth:3, alphamax:0.4, areaHeight:.5, color:"#0cdbf3", fill:false}, 
22								{id:"medium", num:100, fromX:0, toX:this.totalWidth,  ballwidth:8, alphamax:0.3, areaHeight:1, color:"#6fd2f3", fill:true}, 
23								{id:"large", num:10, fromX:0, toX:this.totalWidth, ballwidth:30,  alphamax:0.2, areaHeight:1, color:"#93e9f3", fill:true}];
24		this.particleArray = [];
25		this.lights = [{ellipseWidth:400, ellipseHeight:100, alpha:0.6, offsetX:0, offsetY:0, color:"#6ac6e8"}, 
26						{ellipseWidth:350, ellipseHeight:250, alpha:0.3, offsetX:-50, offsetY:0, color:"#54d5e8"}, 
27						{ellipseWidth:100, ellipseHeight:80, alpha:0.2, offsetX:80, offsetY:-50, color:"#2ae8d8"}];
28
29		this.stage.compositeOperation = _ParticleEngine.compositeStyle;
30
31
32		function drawBgLight()
33		{
34			var light;
35			var bounds;
36			var blurFilter;
37			for (var i = 0, len = _ParticleEngine.lights.length; i < len; i++) {				
38				light = new createjs.Shape();
39				light.graphics.beginFill(_ParticleEngine.lights[i].color).drawEllipse(0, 0, _ParticleEngine.lights[i].ellipseWidth, _ParticleEngine.lights[i].ellipseHeight);
40				light.regX = _ParticleEngine.lights[i].ellipseWidth/2;
41				light.regY = _ParticleEngine.lights[i].ellipseHeight/2; 
42				light.y = light.initY = _ParticleEngine.totalHeight/2 + _ParticleEngine.lights[i].offsetY;
43				light.x = light.initX =_ParticleEngine.totalWidth/2 + _ParticleEngine.lights[i].offsetX;
44
45				blurFilter = new createjs.BlurFilter(_ParticleEngine.lights[i].ellipseWidth, _ParticleEngine.lights[i].ellipseHeight, 1);
46				bounds = blurFilter.getBounds();
47				light.filters = [blurFilter];
48				light.cache(bounds.x-_ParticleEngine.lights[i].ellipseWidth/2, bounds.y-_ParticleEngine.lights[i].ellipseHeight/2, bounds.width*2, bounds.height*2);
49				light.alpha = _ParticleEngine.lights[i].alpha;
50
51				light.compositeOperation = "screen";
52				_ParticleEngine.stage.addChildAt(light, 0);
53
54				_ParticleEngine.lights[i].elem = light;
55			}
56
57			TweenMax.fromTo(_ParticleEngine.lights[0].elem, 10, {scaleX:1.5, x:_ParticleEngine.lights[0].elem.initX, y:_ParticleEngine.lights[0].elem.initY},{yoyo:true, repeat:-1, ease:Power1.easeInOut, scaleX:2, scaleY:0.7});
58			TweenMax.fromTo(_ParticleEngine.lights[1].elem, 12, { x:_ParticleEngine.lights[1].elem.initX, y:_ParticleEngine.lights[1].elem.initY},{delay:5, yoyo:true, repeat:-1, ease:Power1.easeInOut, scaleY:2, scaleX:2, y:_ParticleEngine.totalHeight/2-50, x:_ParticleEngine.totalWidth/2+100});
59			TweenMax.fromTo(_ParticleEngine.lights[2].elem, 8, { x:_ParticleEngine.lights[2].elem.initX, y:_ParticleEngine.lights[2].elem.initY},{delay:2, yoyo:true, repeat:-1, ease:Power1.easeInOut, scaleY:1.5, scaleX:1.5, y:_ParticleEngine.totalHeight/2, x:_ParticleEngine.totalWidth/2-200});
60		}
61		
62		var blurFilter;
63		function drawParticles(){
64
65			for (var i = 0, len = _ParticleEngine.particleSettings.length; i < len; i++) {
66				var ball = _ParticleEngine.particleSettings[i];
67
68				var circle;
69				for (var s = 0; s < ball.num; s++ )
70				{
71					circle = new createjs.Shape();
72					if(ball.fill){
73						circle.graphics.beginFill(ball.color).drawCircle(0, 0, ball.ballwidth);
74						blurFilter = new createjs.BlurFilter(ball.ballwidth/2, ball.ballwidth/2, 1);
75						circle.filters = [blurFilter];
76						var bounds = blurFilter.getBounds();

77						circle.cache(-50+bounds.x, -50+bounds.y, 100+bounds.width, 100+bounds.height);
78					}else{
79						circle.graphics.beginStroke(ball.color).setStrokeStyle(1).drawCircle(0, 0, ball.ballwidth);
80					}
81					
82					circle.alpha = range(0, 0.1);
83					circle.alphaMax = ball.alphamax;
84					circle.distance = ball.ballwidth * 2;
85					circle.ballwidth = ball.ballwidth;
86					circle.flag = ball.id;
87					_ParticleEngine.applySettings(circle, ball.fromX, ball.toX, ball.areaHeight);
88					circle.speed = range(2, 10);
89					circle.y = circle.initY;
90					circle.x = circle.initX;
91					circle.scaleX = circle.scaleY = range(0.3, 1);
92
93					_ParticleEngine.stage.addChild(circle);
94					
95
96					animateBall(circle);
97
98					_ParticleEngine.particleArray.push(circle);
99				}
100			}	
101		}
102
103		this.applySettings = function(circle, positionX, totalWidth, areaHeight)
104		{
105			circle.speed = range(1, 3);
106			circle.initY = weightedRange(0, _ParticleEngine.totalHeight , 1, [_ParticleEngine.totalHeight * (2-areaHeight/2)/4, _ParticleEngine.totalHeight*(2+areaHeight/2)/4], 0.8 );
107			circle.initX = weightedRange(positionX, totalWidth, 1, [positionX+ ((totalWidth-positionX))/4, positionX+ ((totalWidth-positionX)) * 3/4], 0.6);
108		}
109
110		function animateBall(ball)
111		{
112			var scale = range(0.3, 1);
113			var xpos = range(ball.initX - ball.distance, ball.initX + ball.distance);
114			var ypos = range(ball.initY - ball.distance, ball.initY + ball.distance);
115			var speed = ball.speed;
116			TweenMax.to(ball, speed, {scaleX:scale, scaleY:scale, x:xpos, y:ypos, onComplete:animateBall, onCompleteParams:[ball], ease:Cubic.easeInOut});	
117			TweenMax.to(ball, speed/2, {alpha:range(0.1, ball.alphaMax), onComplete:fadeout, onCompleteParams:[ball, speed]});	
118		}	
119
120		function fadeout(ball, speed)
121		{
122			ball.speed = range(2, 10);
123			TweenMax.to(ball, speed/2, {alpha:0 });
124		}
125
126		drawBgLight();
127		drawParticles();
128	}
129
130	ParticleEngine.prototype.render = function()
131	{
132		this.stage.update();
133	}
134
135	ParticleEngine.prototype.resize = function()
136	{
137		this.totalWidth = this.canvasWidth = document.getElementById(this.canvas_id).width = document.getElementById(this.canvas_id).offsetWidth;
138		this.totalHeight = this.canvasHeight = document.getElementById(this.canvas_id).height = document.getElementById(this.canvas_id).offsetHeight;
139		this.render();
140
141		for (var i= 0, length = this.particleArray.length; i < length; i++)
142		{
143			this.applySettings(this.particleArray[i], 0, this.totalWidth, this.particleArray[i].areaHeight);
144		}
145
146		for (var j = 0, len = this.lights.length; j < len; j++) {
147			this.lights[j].elem.initY = this.totalHeight/2 + this.lights[j].offsetY;
148			this.lights[j].elem.initX =this.totalWidth/2 + this.lights[j].offsetX;
149			TweenMax.to(this.lights[j].elem, .5, {x:this.lights[j].elem.initX, y:this.lights[j].elem.initY});			
150		}
151	}
152
153	return ParticleEngine;
154
155}());
156
157
158////////////////////////UTILS//////////////////////////////////////
159//////////////////////////////////////////////////////////////////
160
161function range(min, max)
162{
163	return min + (max - min) * Math.random();
164}
165		
166function round(num, precision)
167{
168   var decimal = Math.pow(10, precision);
169   return Math.round(decimal* num) / decimal;
170}
171
172function weightedRange(to, from, decimalPlaces, weightedRange, weightStrength)
173{
174	if (typeof from === "undefined" || from === null) { 
175	    from = 0; 
176	}
177	if (typeof decimalPlaces === "undefined" || decimalPlaces === null) { 
178	    decimalPlaces = 0; 
179	}
180	if (typeof weightedRange === "undefined" || weightedRange === null) { 
181	    weightedRange = 0; 
182	}
183	if (typeof weightStrength === "undefined" || weightStrength === null) { 
184	    weightStrength = 0; 
185	}
186
187   var ret
188   if(to == from){return(to);}
189 
190   if(weightedRange && Math.random()<=weightStrength){
191	  ret = round( Math.random()*(weightedRange[1]-weightedRange[0]) + weightedRange[0], decimalPlaces )
192   }else{
193	  ret = round( Math.random()*(to-from)+from, decimalPlaces )
194   }
195   return(ret);
196}
197
198///////////////// RUN CODE //////////////////////////
199//////////////////////////////////////////////////////
200
201var particles
202(function(){
203	particles = new ParticleEngine('projector');
204	createjs.Ticker.addEventListener("tick", updateCanvas);
205	window.addEventListener('resize', resizeCanvas, false);
206
207	function updateCanvas(){
208		particles.render();
209	}
210
211	function resizeCanvas(){
212		particles.resize();
213	}
214}());