Gravity points

src/bokeh/app.js

@@ -0,0 +1,214 @@
+////////////////////////// PARTICLE ENGINE ////////////////////////////////////////
+/////////////////////////////////////////////////////////////////////////////////////////
+
+var ParticleEngine = (function() {
+	'use strict';
+
+	function ParticleEngine(canvas_id) {
+		// enforces new
+		if (!(this instanceof ParticleEngine)) {
+			return new ParticleEngine(args);
+		}
+		
+		var _ParticleEngine = this;
+
+		this.canvas_id = canvas_id;
+		this.stage = new createjs.Stage(canvas_id);
+		this.totalWidth = this.canvasWidth = document.getElementById(canvas_id).width = document.getElementById(canvas_id).offsetWidth;
+		this.totalHeight = this.canvasHeight = document.getElementById(canvas_id).height = document.getElementById(canvas_id).offsetHeight;
+		this.compositeStyle = "lighter";
+
+		this.particleSettings = [{id:"small", num:300, fromX:0, toX:this.totalWidth, ballwidth:3, alphamax:0.4, areaHeight:.5, color:"#0cdbf3", fill:false}, 
+								{id:"medium", num:100, fromX:0, toX:this.totalWidth,  ballwidth:8, alphamax:0.3, areaHeight:1, color:"#6fd2f3", fill:true}, 
+								{id:"large", num:10, fromX:0, toX:this.totalWidth, ballwidth:30,  alphamax:0.2, areaHeight:1, color:"#93e9f3", fill:true}];
+		this.particleArray = [];
+		this.lights = [{ellipseWidth:400, ellipseHeight:100, alpha:0.6, offsetX:0, offsetY:0, color:"#6ac6e8"}, 
+						{ellipseWidth:350, ellipseHeight:250, alpha:0.3, offsetX:-50, offsetY:0, color:"#54d5e8"}, 
+						{ellipseWidth:100, ellipseHeight:80, alpha:0.2, offsetX:80, offsetY:-50, color:"#2ae8d8"}];
+
+		this.stage.compositeOperation = _ParticleEngine.compositeStyle;
+
+
+		function drawBgLight()
+		{
+			var light;
+			var bounds;
+			var blurFilter;
+			for (var i = 0, len = _ParticleEngine.lights.length; i < len; i++) {				
+				light = new createjs.Shape();
+				light.graphics.beginFill(_ParticleEngine.lights[i].color).drawEllipse(0, 0, _ParticleEngine.lights[i].ellipseWidth, _ParticleEngine.lights[i].ellipseHeight);
+				light.regX = _ParticleEngine.lights[i].ellipseWidth/2;
+				light.regY = _ParticleEngine.lights[i].ellipseHeight/2; 
+				light.y = light.initY = _ParticleEngine.totalHeight/2 + _ParticleEngine.lights[i].offsetY;
+				light.x = light.initX =_ParticleEngine.totalWidth/2 + _ParticleEngine.lights[i].offsetX;
+
+				blurFilter = new createjs.BlurFilter(_ParticleEngine.lights[i].ellipseWidth, _ParticleEngine.lights[i].ellipseHeight, 1);
+				bounds = blurFilter.getBounds();
+				light.filters = [blurFilter];
+				light.cache(bounds.x-_ParticleEngine.lights[i].ellipseWidth/2, bounds.y-_ParticleEngine.lights[i].ellipseHeight/2, bounds.width*2, bounds.height*2);
+				light.alpha = _ParticleEngine.lights[i].alpha;
+
+				light.compositeOperation = "screen";
+				_ParticleEngine.stage.addChildAt(light, 0);
+
+				_ParticleEngine.lights[i].elem = light;
+			}
+
+			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});
+			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});
+			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});
+		}
+		
+		var blurFilter;
+		function drawParticles(){
+
+			for (var i = 0, len = _ParticleEngine.particleSettings.length; i < len; i++) {
+				var ball = _ParticleEngine.particleSettings[i];
+
+				var circle;
+				for (var s = 0; s < ball.num; s++ )
+				{
+					circle = new createjs.Shape();
+					if(ball.fill){
+						circle.graphics.beginFill(ball.color).drawCircle(0, 0, ball.ballwidth);
+						blurFilter = new createjs.BlurFilter(ball.ballwidth/2, ball.ballwidth/2, 1);
+						circle.filters = [blurFilter];
+						var bounds = blurFilter.getBounds();
+						circle.cache(-50+bounds.x, -50+bounds.y, 100+bounds.width, 100+bounds.height);
+					}else{
+						circle.graphics.beginStroke(ball.color).setStrokeStyle(1).drawCircle(0, 0, ball.ballwidth);
+					}
+					
+					circle.alpha = range(0, 0.1);
+					circle.alphaMax = ball.alphamax;
+					circle.distance = ball.ballwidth * 2;
+					circle.ballwidth = ball.ballwidth;
+					circle.flag = ball.id;
+					_ParticleEngine.applySettings(circle, ball.fromX, ball.toX, ball.areaHeight);
+					circle.speed = range(2, 10);
+					circle.y = circle.initY;
+					circle.x = circle.initX;
+					circle.scaleX = circle.scaleY = range(0.3, 1);
+
+					_ParticleEngine.stage.addChild(circle);
+					
+
+					animateBall(circle);
+
+					_ParticleEngine.particleArray.push(circle);
+				}
+			}	
+		}
+
+		this.applySettings = function(circle, positionX, totalWidth, areaHeight)
+		{
+			circle.speed = range(1, 3);
+			circle.initY = weightedRange(0, _ParticleEngine.totalHeight , 1, [_ParticleEngine.totalHeight * (2-areaHeight/2)/4, _ParticleEngine.totalHeight*(2+areaHeight/2)/4], 0.8 );
+			circle.initX = weightedRange(positionX, totalWidth, 1, [positionX+ ((totalWidth-positionX))/4, positionX+ ((totalWidth-positionX)) * 3/4], 0.6);
+		}
+
+		function animateBall(ball)
+		{
+			var scale = range(0.3, 1);
+			var xpos = range(ball.initX - ball.distance, ball.initX + ball.distance);
+			var ypos = range(ball.initY - ball.distance, ball.initY + ball.distance);
+			var speed = ball.speed;
+			TweenMax.to(ball, speed, {scaleX:scale, scaleY:scale, x:xpos, y:ypos, onComplete:animateBall, onCompleteParams:[ball], ease:Cubic.easeInOut});	
+			TweenMax.to(ball, speed/2, {alpha:range(0.1, ball.alphaMax), onComplete:fadeout, onCompleteParams:[ball, speed]});	
+		}	
+
+		function fadeout(ball, speed)
+		{
+			ball.speed = range(2, 10);
+			TweenMax.to(ball, speed/2, {alpha:0 });
+		}
+
+		drawBgLight();
+		drawParticles();
+	}
+
+	ParticleEngine.prototype.render = function()
+	{
+		this.stage.update();
+	}
+
+	ParticleEngine.prototype.resize = function()
+	{
+		this.totalWidth = this.canvasWidth = document.getElementById(this.canvas_id).width = document.getElementById(this.canvas_id).offsetWidth;
+		this.totalHeight = this.canvasHeight = document.getElementById(this.canvas_id).height = document.getElementById(this.canvas_id).offsetHeight;
+		this.render();
+
+		for (var i= 0, length = this.particleArray.length; i < length; i++)
+		{
+			this.applySettings(this.particleArray[i], 0, this.totalWidth, this.particleArray[i].areaHeight);
+		}
+
+		for (var j = 0, len = this.lights.length; j < len; j++) {
+			this.lights[j].elem.initY = this.totalHeight/2 + this.lights[j].offsetY;
+			this.lights[j].elem.initX =this.totalWidth/2 + this.lights[j].offsetX;
+			TweenMax.to(this.lights[j].elem, .5, {x:this.lights[j].elem.initX, y:this.lights[j].elem.initY});			
+		}
+	}
+
+	return ParticleEngine;
+
+}());
+
+
+////////////////////////UTILS//////////////////////////////////////
+//////////////////////////////////////////////////////////////////
+
+function range(min, max)
+{
+	return min + (max - min) * Math.random();
+}
+		
+function round(num, precision)
+{
+   var decimal = Math.pow(10, precision);
+   return Math.round(decimal* num) / decimal;
+}
+
+function weightedRange(to, from, decimalPlaces, weightedRange, weightStrength)
+{
+	if (typeof from === "undefined" || from === null) { 
+	    from = 0; 
+	}
+	if (typeof decimalPlaces === "undefined" || decimalPlaces === null) { 
+	    decimalPlaces = 0; 
+	}
+	if (typeof weightedRange === "undefined" || weightedRange === null) { 
+	    weightedRange = 0; 
+	}
+	if (typeof weightStrength === "undefined" || weightStrength === null) { 
+	    weightStrength = 0; 
+	}
+
+   var ret
+   if(to == from){return(to);}
+ 
+   if(weightedRange && Math.random()<=weightStrength){
+	  ret = round( Math.random()*(weightedRange[1]-weightedRange[0]) + weightedRange[0], decimalPlaces )
+   }else{
+	  ret = round( Math.random()*(to-from)+from, decimalPlaces )
+   }
+   return(ret);
+}
+
+///////////////// RUN CODE //////////////////////////
+//////////////////////////////////////////////////////
+
+var particles
+(function(){
+	particles = new ParticleEngine('projector');
+	createjs.Ticker.addEventListener("tick", updateCanvas);
+	window.addEventListener('resize', resizeCanvas, false);
+
+	function updateCanvas(){
+		particles.render();
+	}
+
+	function resizeCanvas(){
+		particles.resize();
+	}
+}());

src/bokeh/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8"/>
+        <title>Bokeh effect</title>
+        <link href="style.css" rel="stylesheet" />
+        <script src="https://code.createjs.com/easeljs-0.7.1.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
+        <script type="module" src="app.js"></script>
+    </head>
+    <body>
+        <canvas id="projector"></canvas>
+    </body>
+</html>
+

src/bokeh/style.css

@@ -0,0 +1,59 @@
+html, body{
+	width:100%; 
+	height:100%; 
+	padding:0px; 
+	margin:0px;
+	overflow: hidden;
+	background: #191d1e; /* Old browsers */
+	background: -moz-linear-gradient(0deg,  #191d1e 50%, #283139 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#191d1e), color-stop(100%,#283139)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* IE10+ */
+	background: linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191d1e', endColorstr='#283139',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+	background-attachment: fixed
+}
+
+#projector {
+  position: absolute; 
+  top: 0px;
+  left: 0px;
+  width:100%;
+  height:100%;
+} 
+
+.center-div {
+	width:580px;
+    height:374px;
+    position:absolute;
+    left:50%;
+    top:50%;
+    margin-left: -290px;
+    margin-top:  -187px;
+}
+
+#preloaderDiv
+{
+	position:absolute;
+	left:50%;
+    top:50%;
+    margin-left: -27px;
+    margin-top:  -27px;
+}
+
+#logo{
+	opacity:0;
+    filter: alpha(opacity=0);
+}
+
+#date2014
+{
+	position:absolute;
+	padding-left: 210px;
+	padding-top:15px;
+	opacity:0;
+	top:303px;
+	left:0;
+    filter: alpha(opacity=0);
+}

src/gravity-points/app.js

@@ -0,0 +1,532 @@
+/**
+ * requestAnimationFrame
+ */
+window.requestAnimationFrame = (function(){
+    return  window.requestAnimationFrame       ||
+            window.webkitRequestAnimationFrame ||
+            window.mozRequestAnimationFrame    ||
+            window.oRequestAnimationFrame      ||
+            window.msRequestAnimationFrame     ||
+            function (callback) {
+                window.setTimeout(callback, 1000 / 60);
+            };
+})();
+
+
+/**
+ * Vector
+ */
+function Vector(x, y) {
+    this.x = x || 0;
+    this.y = y || 0;
+}
+
+Vector.add = function(a, b) {
+    return new Vector(a.x + b.x, a.y + b.y);
+};
+
+Vector.sub = function(a, b) {
+    return new Vector(a.x - b.x, a.y - b.y);
+};
+
+Vector.scale = function(v, s) {
+    return v.clone().scale(s);
+};
+
+Vector.random = function() {
+    return new Vector(
+        Math.random() * 2 - 1,
+        Math.random() * 2 - 1
+    );
+};
+
+Vector.prototype = {
+    set: function(x, y) {
+        if (typeof x === 'object') {
+            y = x.y;
+            x = x.x;
+        }
+        this.x = x || 0;
+        this.y = y || 0;
+        return this;
+    },
+
+    add: function(v) {
+        this.x += v.x;
+        this.y += v.y;
+        return this;
+    },
+
+    sub: function(v) {
+        this.x -= v.x;
+        this.y -= v.y;
+        return this;
+    },
+
+    scale: function(s) {
+        this.x *= s;
+        this.y *= s;
+        return this;
+    },
+
+    length: function() {
+        return Math.sqrt(this.x * this.x + this.y * this.y);
+    },
+
+    lengthSq: function() {
+        return this.x * this.x + this.y * this.y;
+    },
+
+    normalize: function() {
+        var m = Math.sqrt(this.x * this.x + this.y * this.y);
+        if (m) {
+            this.x /= m;
+            this.y /= m;
+        }
+        return this;
+    },
+
+    angle: function() {
+        return Math.atan2(this.y, this.x);
+    },
+
+    angleTo: function(v) {
+        var dx = v.x - this.x,
+            dy = v.y - this.y;
+        return Math.atan2(dy, dx);
+    },
+
+    distanceTo: function(v) {
+        var dx = v.x - this.x,
+            dy = v.y - this.y;
+        return Math.sqrt(dx * dx + dy * dy);
+    },
+
+    distanceToSq: function(v) {
+        var dx = v.x - this.x,
+            dy = v.y - this.y;
+        return dx * dx + dy * dy;
+    },
+
+    lerp: function(v, t) {
+        this.x += (v.x - this.x) * t;
+        this.y += (v.y - this.y) * t;
+        return this;
+    },
+
+    clone: function() {
+        return new Vector(this.x, this.y);
+    },
+
+    toString: function() {
+        return '(x:' + this.x + ', y:' + this.y + ')';
+    }
+};
+
+
+/**
+ * GravityPoint
+ */
+function GravityPoint(x, y, radius, targets) {
+    Vector.call(this, x, y);
+    this.radius = radius;
+    this.currentRadius = radius * 0.5;
+
+    this._targets = {
+        particles: targets.particles || [],
+        gravities: targets.gravities || []
+    };
+    this._speed = new Vector();
+}
+
+GravityPoint.RADIUS_LIMIT = 65;
+GravityPoint.interferenceToPoint = true;
+
+GravityPoint.prototype = (function(o) {
+    var s = new Vector(0, 0), p;
+    for (p in o) s[p] = o[p];
+    return s;
+})({
+    gravity:       0.05,
+    isMouseOver:   false,
+    dragging:      false,
+    destroyed:     false,
+    _easeRadius:   0,
+    _dragDistance: null,
+    _collapsing:   false,
+
+    hitTest: function(p) {
+        return this.distanceTo(p) < this.radius;
+    },
+
+    startDrag: function(dragStartPoint) {
+        this._dragDistance = Vector.sub(dragStartPoint, this);
+        this.dragging = true;
+    },
+
+    drag: function(dragToPoint) {
+        this.x = dragToPoint.x - this._dragDistance.x;
+        this.y = dragToPoint.y - this._dragDistance.y;
+    },
+
+    endDrag: function() {
+        this._dragDistance = null;
+        this.dragging = false;
+    },
+
+    addSpeed: function(d) {
+        this._speed = this._speed.add(d);
+    },
+
+    collapse: function(e) {
+        this.currentRadius *= 1.75;
+        this._collapsing = true;
+    },
+
+    render: function(ctx) {
+        if (this.destroyed) return;
+
+        var particles = this._targets.particles,
+            i, len;
+
+        for (i = 0, len = particles.length; i < len; i++) {
+            particles[i].addSpeed(Vector.sub(this, particles[i]).normalize().scale(this.gravity));
+        }
+
+        this._easeRadius = (this._easeRadius + (this.radius - this.currentRadius) * 0.07) * 0.95;
+        this.currentRadius += this._easeRadius;
+        if (this.currentRadius < 0) this.currentRadius = 0;
+
+        if (this._collapsing) {
+            this.radius *= 0.75;
+            if (this.currentRadius < 1) this.destroyed = true;
+            this._draw(ctx);
+            return;
+        }
+
+        var gravities = this._targets.gravities,
+            g, absorp,
+            area = this.radius * this.radius * Math.PI, garea;
+
+        for (i = 0, len = gravities.length; i < len; i++) {
+            g = gravities[i];
+
+            if (g === this || g.destroyed) continue;
+
+            if (
+                (this.currentRadius >= g.radius || this.dragging) &&
+                this.distanceTo(g) < (this.currentRadius + g.radius) * 0.85
+            ) {
+                g.destroyed = true;
+                this.gravity += g.gravity;
+
+                absorp = Vector.sub(g, this).scale(g.radius / this.radius * 0.5);
+                this.addSpeed(absorp);
+
+                garea = g.radius * g.radius * Math.PI;
+                this.currentRadius = Math.sqrt((area + garea * 3) / Math.PI);
+                this.radius = Math.sqrt((area + garea) / Math.PI);
+            }
+
+            g.addSpeed(Vector.sub(this, g).normalize().scale(this.gravity));
+        }
+
+        if (GravityPoint.interferenceToPoint && !this.dragging)
+            this.add(this._speed);
+
+        this._speed = new Vector();
+
+        if (this.currentRadius > GravityPoint.RADIUS_LIMIT) this.collapse();
+
+        this._draw(ctx);
+    },
+
+    _draw: function(ctx) {
+        var grd, r;
+
+        ctx.save();
+
+        grd = ctx.createRadialGradient(this.x, this.y, this.radius, this.x, this.y, this.radius * 5);
+        grd.addColorStop(0, 'rgba(0, 0, 0, 0.1)');
+        grd.addColorStop(1, 'rgba(0, 0, 0, 0)');
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius * 5, 0, Math.PI * 2, false);
+        ctx.fillStyle = grd;
+        ctx.fill();
+
+        r = Math.random() * this.currentRadius * 0.7 + this.currentRadius * 0.3;
+        grd = ctx.createRadialGradient(this.x, this.y, r, this.x, this.y, this.currentRadius);
+        grd.addColorStop(0, 'rgba(0, 0, 0, 1)');
+        grd.addColorStop(1, Math.random() < 0.2 ? 'rgba(255, 196, 0, 0.15)' : 'rgba(103, 181, 191, 0.75)');
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.currentRadius, 0, Math.PI * 2, false);
+        ctx.fillStyle = grd;
+        ctx.fill();
+        ctx.restore();
+    }
+});
+
+
+/**
+ * Particle
+ */
+function Particle(x, y, radius) {
+    Vector.call(this, x, y);
+    this.radius = radius;
+
+    this._latest = new Vector();
+    this._speed  = new Vector();
+}
+
+Particle.prototype = (function(o) {
+    var s = new Vector(0, 0), p;
+    for (p in o) s[p] = o[p];
+    return s;
+})({
+    addSpeed: function(d) {
+        this._speed.add(d);
+    },
+
+    update: function() {
+        if (this._speed.length() > 12) this._speed.normalize().scale(12);
+
+        this._latest.set(this);
+        this.add(this._speed);
+    }
+
+    // render: function(ctx) {
+    //     if (this._speed.length() > 12) this._speed.normalize().scale(12);
+
+    //     this._latest.set(this);
+    //     this.add(this._speed);
+
+    //     ctx.save();
+    //     ctx.fillStyle = ctx.strokeStyle = '#fff';
+    //     ctx.lineCap = ctx.lineJoin = 'round';
+    //     ctx.lineWidth = this.radius * 2;
+    //     ctx.beginPath();
+    //     ctx.moveTo(this.x, this.y);
+    //     ctx.lineTo(this._latest.x, this._latest.y);
+    //     ctx.stroke();
+    //     ctx.beginPath();
+    //     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
+    //     ctx.fill();
+    //     ctx.restore();
+    // }
+});
+
+
+
+// Initialize
+
+(function() {
+
+    // Configs
+
+    var BACKGROUND_COLOR      = 'rgba(11, 51, 56, 1)',
+        PARTICLE_RADIUS       = 1,
+        G_POINT_RADIUS        = 10,
+        G_POINT_RADIUS_LIMITS = 65;
+
+
+    // Vars
+
+    var canvas, context,
+        bufferCvs, bufferCtx,
+        screenWidth, screenHeight,
+        mouse = new Vector(),
+        gravities = [],
+        particles = [],
+        grad,
+        gui, control;
+
+
+    // Event Listeners
+
+    function resize(e) {
+        screenWidth  = canvas.width  = window.innerWidth;
+        screenHeight = canvas.height = window.innerHeight;
+        bufferCvs.width  = screenWidth;
+        bufferCvs.height = screenHeight;
+        context   = canvas.getContext('2d');
+        bufferCtx = bufferCvs.getContext('2d');
+
+        var cx = canvas.width * 0.5,
+            cy = canvas.height * 0.5;
+
+        grad = context.createRadialGradient(cx, cy, 0, cx, cy, Math.sqrt(cx * cx + cy * cy));
+        grad.addColorStop(0, 'rgba(0, 0, 0, 0)');
+        grad.addColorStop(1, 'rgba(0, 0, 0, 0.35)');
+    }
+
+    function mouseMove(e) {
+        mouse.set(e.clientX, e.clientY);
+
+        var i, g, hit = false;
+        for (i = gravities.length - 1; i >= 0; i--) {
+            g = gravities[i];
+            if ((!hit && g.hitTest(mouse)) || g.dragging)
+                g.isMouseOver = hit = true;
+            else
+                g.isMouseOver = false;
+        }
+
+        canvas.style.cursor = hit ? 'pointer' : 'default';
+    }
+
+    function mouseDown(e) {
+        for (var i = gravities.length - 1; i >= 0; i--) {
+            if (gravities[i].isMouseOver) {
+                gravities[i].startDrag(mouse);
+                return;
+            }
+        }
+        gravities.push(new GravityPoint(e.clientX, e.clientY, G_POINT_RADIUS, {
+            particles: particles,
+            gravities: gravities
+        }));
+    }
+
+    function mouseUp(e) {
+        for (var i = 0, len = gravities.length; i < len; i++) {
+            if (gravities[i].dragging) {
+                gravities[i].endDrag();
+                break;
+            }
+        }
+    }
+
+    function doubleClick(e) {
+        for (var i = gravities.length - 1; i >= 0; i--) {
+            if (gravities[i].isMouseOver) {
+                gravities[i].collapse();
+                break;
+            }
+        }
+    }
+
+
+    // Functions
+
+    function addParticle(num) {
+        var i, p;
+        for (i = 0; i < num; i++) {
+            p = new Particle(
+                Math.floor(Math.random() * screenWidth - PARTICLE_RADIUS * 2) + 1 + PARTICLE_RADIUS,
+                Math.floor(Math.random() * screenHeight - PARTICLE_RADIUS * 2) + 1 + PARTICLE_RADIUS,
+                PARTICLE_RADIUS
+            );
+            p.addSpeed(Vector.random());
+            particles.push(p);
+        }
+    }
+
+    function removeParticle(num) {
+        if (particles.length < num) num = particles.length;
+        for (var i = 0; i < num; i++) {
+            particles.pop();
+        }
+    }
+
+
+    // GUI Control
+
+    control = {
+        particleNum: 100
+    };
+
+
+    // Init
+
+    canvas  = document.getElementById('c');
+    bufferCvs = document.createElement('canvas');
+
+    window.addEventListener('resize', resize, false);
+    resize(null);
+
+    addParticle(control.particleNum);
+
+    canvas.addEventListener('mousemove', mouseMove, false);
+    canvas.addEventListener('mousedown', mouseDown, false);
+    canvas.addEventListener('mouseup', mouseUp, false);
+    canvas.addEventListener('dblclick', doubleClick, false);
+
+
+    // GUI
+
+    gui = new dat.GUI();
+    gui.add(control, 'particleNum', 0, 500).step(1).name('Particle Num').onChange(function() {
+        var n = (control.particleNum | 0) - particles.length;
+        if (n > 0)
+            addParticle(n);
+        else if (n < 0)
+            removeParticle(-n);
+    });
+    gui.add(GravityPoint, 'interferenceToPoint').name('Interference Between Point');
+    gui.close();
+
+
+    // Start Update
+
+    var loop = function() {
+        var i, len, g, p;
+
+        context.save();
+        context.fillStyle = BACKGROUND_COLOR;
+        context.fillRect(0, 0, screenWidth, screenHeight);
+        context.fillStyle = grad;
+        context.fillRect(0, 0, screenWidth, screenHeight);
+        context.restore();
+
+        for (i = 0, len = gravities.length; i < len; i++) {
+            g = gravities[i];
+            if (g.dragging) g.drag(mouse);
+            g.render(context);
+            if (g.destroyed) {
+                gravities.splice(i, 1);
+                len--;
+                i--;
+            }
+        }
+      
+        bufferCtx.save();
+        bufferCtx.globalCompositeOperation = 'destination-out';
+        bufferCtx.globalAlpha = 0.35;
+        bufferCtx.fillRect(0, 0, screenWidth, screenHeight);
+        bufferCtx.restore();
+
+        // パーティクルをバッファに描画
+        // for (i = 0, len = particles.length; i < len; i++) {
+        //     particles[i].render(bufferCtx);
+        // }
+        len = particles.length;
+        bufferCtx.save();
+        bufferCtx.fillStyle = bufferCtx.strokeStyle = '#fff';
+        bufferCtx.lineCap = bufferCtx.lineJoin = 'round';
+        bufferCtx.lineWidth = PARTICLE_RADIUS * 2;
+        bufferCtx.beginPath();
+        for (i = 0; i < len; i++) {
+            p = particles[i];
+            p.update();
+            bufferCtx.moveTo(p.x, p.y);
+            bufferCtx.lineTo(p._latest.x, p._latest.y);
+        }
+        bufferCtx.stroke();
+        bufferCtx.beginPath();
+        for (i = 0; i < len; i++) {
+            p = particles[i];
+            bufferCtx.moveTo(p.x, p.y);
+            bufferCtx.arc(p.x, p.y, p.radius, 0, Math.PI * 2, false);
+        }
+        bufferCtx.fill();
+        bufferCtx.restore();
+
+        // バッファをキャンバスに描画
+        context.drawImage(bufferCvs, 0, 0);
+
+        requestAnimationFrame(loop);
+    };
+    loop();
+
+})();
+

src/gravity-points/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8"/>
+        <title>Fizzy Sparks</title>
+        <link href="style.css" rel="stylesheet" />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
+        <script type="module" src="app.js"></script>
+    </head>
+    <body>
+        <canvas id="c"></canvas>
+        <div class="info">Click to add gravity point.</div>
+    </body>
+</html>
+

src/gravity-points/style.css

@@ -0,0 +1,28 @@
+body {
+    font-family: Helvetica sans-serif;
+    padding: 0;
+    margin: 0;
+    background-color: #222;
+    overflow: hidden;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+         -o-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+}
+
+canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.info {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 5px 15px;
+    color: #eee;
+    font-size: 13px;
+    background-color: rgba(0, 0, 0, .5);
+}

src/index.html

@@ -13,6 +13,9 @@
             <li> <a href="./orbital-trails-extern/index.html">Orbital Trails (theirs)</a>
             <li> <a href="./orbital-trails-extern-2/index.html">Orbital Trails 2 (theirs)</a>
             <li> <a href="./orbital-trails/index.html">Orbital Trails (mine)</a>
+            <li> <a href="./bokeh/index.html">Bokeh effect (their)</a>
+            <li> <a href="./sparks/index.html">Sparks (theirs)</a>
+            <li> <a href="./gravity-points/index.html">Gravity Points (theirs)</a>
         </ul>
     </body>
 </html>

src/sparks/app.js

@@ -0,0 +1,197 @@
+$(window).bind('load', function () {
+    const raf = function (entry) {
+        window.requestAnimationFrame(entry);
+    };
+    const random = function (min, max) {
+        max = max + 1;
+        return Math.floor(Math.random() * (max - min) + min);
+    }
+    var app = {
+        init: function () {
+            this.cacheDOM();
+            this.style();
+        },
+        cacheDOM: function () {
+            this.container = $('#container');
+            this.images = $('img');
+
+            this.mouseX = null;
+            this.mouseY = null;
+        },
+        style: function () {
+            this.images.imagesLoaded(function () {
+                $(window).resize(function initial() {
+                    TweenMax.set(app.container, {
+                        opacity: 1
+                    });
+                    return initial;
+                }());
+            });
+        },
+        cursorEvents: function (e) {
+            app.mouseX = e.clientX;
+            app.mouseY = e.clientY;
+        }
+    }
+
+    app.init();
+
+    var cContainer = $('#c-container'),
+        c = document.getElementById('c'),
+        c2Container = $('#c2-container'),
+        c2 = document.getElementById('c2'),
+        cx = c.getContext('2d'),
+        c2x = c2.getContext('2d'),
+        particleIndex = 0,
+        particles = {},
+        particleNum = 1,
+        particlesLoaded = false,
+        Particle,
+        Particle2,
+        canvas,
+        canvas2;
+
+    c.width = $('#c').outerWidth();
+    c.height = $('#c').outerHeight();
+
+    c2.width = $('#c2').outerWidth();
+    c2.height = $('#c2').outerHeight();
+
+    //INITIAL CANVAS DRAW
+    cx.fillStyle = 'rgba(0,0,0,1)';
+    cx.fillRect(0, 0, c.width, c.height);
+    c2x.fillStyle = 'rgba(0,0,0,1)';
+    c2x.fillRect(0, 0, c2.width, c2.height);
+
+    function particleFactory(thisCanvas, thisContext, thisParticleName, thisCanvasFunction) {
+
+        var particleIndex = 0,
+            particles = {},
+            particleNum = 2,
+            particlesLoaded = false;
+
+        thisParticleName = function () {
+            this.r = 8;
+            this.rStart = this.r;
+            this.rIncrement = this.r * -0.01;
+            this.x = thisCanvas.width / 2;
+            this.y = thisCanvas.height / 2;
+          
+            this.vxIsNegative = random(1,2);
+          
+            this.originTriggered = false;
+            this.vx = this.vxIsNegative === 1 ? random(0,50) * -0.1 : random(0,50) * 0.1;
+            this.vxMult = random(10,20) * 0.1;
+            this.vy = random(-10, 10);
+            this.vyMult = random(2,6) * -0.1;
+            this.opacityLimit = 1;
+            this.opacity = 1;
+            this.opacityIncrement = 0.05;
+            this.opacityReversing = false;
+            this.gravity = 1;
+            this.framerate = 0;
+            this.framerateCounter = this.framerate;
+            this.counter = 0;
+            particleIndex++;
+            particles[particleIndex] = this;
+            this.id = particleIndex;
+            this.life = 0;
+            this.maxLife = random(0, 100);
+            this.hue = random(30, 60);
+            this.light = random(50, 100);
+            this.color = `hsla(${this.hue},100%,${this.light}%,${this.opacity})`;
+          
+            this.bounced = false;
+          
+            this.duration = 60;
+            this.durationTotal = this.duration + this.opacityLimit * 10;
+            this.durationCounter = 0;
+        }
+
+        thisParticleName.prototype.draw = function () {
+
+            if ((!this.originTriggered) && (app.mouseX != null)) {
+                this.originTriggered = true;
+                this.x = app.mouseX;
+                this.y = app.mouseY;
+            }
+            this.color = `hsla(${this.hue},100%,${this.light}%,${this.opacity})`;
+            thisContext.fillStyle = this.color;
+            thisContext.beginPath();
+            thisContext.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
+            thisContext.fill();
+
+            //START DRAW OPERATION
+            this.r += this.rIncrement;
+            this.x += this.vx;
+            this.y += this.vy;
+            this.durationCounter++;
+            if (this.vx === 0) {
+                this.vx++;
+            }
+            if (this.vxIsNegative === 1) {
+                this.vx
+            }
+            if (this.vy === 0) {
+                this.vy++;
+            }
+            if (this.y > thisCanvas.height - this.rStart) {
+                if (!this.bounced) {
+                  this.vx *= this.vxMult;
+                } else {
+                  this.vx *= 0.9;
+                }
+                this.bounced = true;
+                this.vy *= this.vyMult;
+                this.y = thisCanvas.height - this.rStart;
+            }
+            this.vy += this.gravity;
+            if ((this.r <= 0)) {
+                delete particles[this.id];
+            }
+            this.life++;
+            //END DRAW OPERATION
+        }
+
+        thisCanvasFunction = function () {
+            thisContext.globalCompositeOperation = 'source-over';
+            thisContext.fillStyle = 'rgba(0,0,0,1)';
+            thisContext.fillRect(0, 0, thisCanvas.width, thisCanvas.height);
+            if (!particlesLoaded) {
+                for (var i = 0; i < particleNum; i++) {
+                    new thisParticleName();
+                }
+            }
+            thisContext.globalCompositeOperation = 'lighter';
+            for (var i in particles) {
+                particles[i].draw();
+            }
+        }
+        setInterval(thisCanvasFunction, 15);
+    }
+
+    $(window).resize(function initial() {
+        window.addEventListener('mousemove', app.cursorEvents, false);
+
+        c.width = $('#c').outerWidth();
+        c.height = $('#c').outerHeight();
+
+        c2.width = $('#c2').outerWidth();
+        c2.height = $('#c2').outerHeight();
+
+        return initial;
+    }());
+
+    particleFactory(c, cx, Particle, canvas);
+    particleFactory(c2, c2x, Particle2, canvas2);
+
+    TweenMax.set(c2Container, {
+        transformOrigin: 'center bottom',
+        scaleY: -1,
+        opacity: 1
+    });
+
+    TweenMax.set(c2, {
+        filter: 'blur(10px)'
+    });
+});

src/sparks/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8"/>
+        <title>Fizzy Sparks</title>
+        <link href="style.css" rel="stylesheet" />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
+        <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
+        <script type="module" src="app.js"></script>
+    </head>
+    <body>
+    <div id="container">
+        <div id="c-container">
+            <canvas id="c">Sorry.</canvas>
+        </div>
+        <div id="c2-container">
+            <canvas id="c2">Sorry.</canvas>
+        </div>
+
+    </div>
+    </body>
+</html>
+

src/sparks/style.css

@@ -0,0 +1,48 @@
+@import 'https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i';
+
+body,
+html {
+    margin: 0;
+    padding: 0;
+    font-family: 'Lato', sans-serif;
+    background-color: black;
+    overflow: hidden;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+a,
+li {
+    margin: 0;
+    padding: 0;
+}
+
+#container {
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+    float: left;
+    opacity: 0;
+}
+
+#c-container,
+#c2-container {
+    width: 100vw;
+    height: 80vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+canvas {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}