Compare commits
No commits in common. "4e718461bc318a162b518b0a200ae38f42448432" and "7cc413103cb1a575f53dc97edfb85db8bc998300" have entirely different histories.
4e718461bc
...
7cc413103c
214
src/bokeh/app.js
214
src/bokeh/app.js
@ -1,214 +0,0 @@
|
|||||||
////////////////////////// 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();
|
|
||||||
}
|
|
||||||
}());
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<!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>
|
|
||||||
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
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);
|
|
||||||
}
|
|
||||||
@ -1,532 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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();
|
|
||||||
|
|
||||||
})();
|
|
||||||
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<!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>
|
|
||||||
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
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);
|
|
||||||
}
|
|
||||||
@ -13,9 +13,6 @@
|
|||||||
<li> <a href="./orbital-trails-extern/index.html">Orbital Trails (theirs)</a>
|
<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-extern-2/index.html">Orbital Trails 2 (theirs)</a>
|
||||||
<li> <a href="./orbital-trails/index.html">Orbital Trails (mine)</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>
|
</ul>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,197 +0,0 @@
|
|||||||
$(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)'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
<!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>
|
|
||||||
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
@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;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user