Skip to content

Commit 602f44d

Browse files
larsensolutionslarsensolutions
committed
Added extension classes, enable new glow animation and custom animation feature
1 parent b6d1b26 commit 602f44d

File tree

4 files changed

+169
-30
lines changed

4 files changed

+169
-30
lines changed

‎emitter.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import Random from './random';
2+
import Vector from './vector';
3+
import Particle from './particle';
4+
5+
function Emitter(point, velocity, spread) {
6+
this.position = point; // Vector
7+
this.velocity = velocity; // Vector
8+
this.spread = spread || Math.PI / 32; // possible angles = velocity +/- spread
9+
this.drawColor = "#999"; // So we can tell them apart from Fields later
10+
this.emit = true;
11+
this.drawnToField = false;
12+
}
13+
14+
Emitter.prototype.emitParticle = function () {
15+
// Use an angle randomized over the spread so we have more of a "spray"
16+
var angle = this.velocity.getAngle + this.spread - (Math.random() * this.spread * 2);
17+
18+
// The magnitude of the emitter's velocity
19+
var magnitude = this.velocity.getMagnitude;
20+
21+
// The emitter's position
22+
var position = new Vector(this.position.x, this.position.y + Random.range(-1, -3));
23+
24+
// New velocity based off of the calculated angle and magnitude
25+
var velocity = Vector.fromAngle(angle, magnitude);
26+
27+
// return our new Particle!
28+
var p = new Particle(position, velocity);
29+
p.drawnToField = this.drawnToField;
30+
return p;
31+
};
32+
33+
export default Emitter;

‎glow.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Random from './random'
2+
3+
function Glow(x, y){
4+
this.x = x;
5+
this.y = y;
6+
// Radius of the white glow.
7+
this.innerRadius = 2,
8+
this.outerRadius = 20,
9+
// Radius of the entire circle.
10+
this.radius = 20;
11+
this.speed=1;
12+
this.acceleration = Random.range(1,1.05);
13+
this.direction = Random.plusMinus();
14+
}
15+
16+
Glow.prototype.draw = function(ctx){
17+
var gradient = ctx.createRadialGradient(this.x, this.y, this.innerRadius, this.x, this.y, this.outerRadius);
18+
gradient.addColorStop(0, '#fff');
19+
gradient.addColorStop(0.01, '#E8E8E8');
20+
gradient.addColorStop(0.1, '#666');
21+
gradient.addColorStop(1, 'transparent');
22+
ctx.beginPath();
23+
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
24+
ctx.fillStyle = gradient;
25+
ctx.fill();
26+
}
27+
28+
export default Glow;

‎index.js

Lines changed: 92 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
import Tree from './tree';
2+
import Random from './random';
3+
import Glow from './glow';
24

35
export default class ParticleAnimation {
4-
constructor(options){
6+
constructor(options) {
57
this.running = false;
68
this.parentElement = null;
79
this.canvas = null;
810
this.root = null;
911
this.ctx = null;
1012
this.parentElement = document.getElementById(options.id);
1113

12-
//User variables
14+
// Additions
15+
this.stars = [];
16+
this.runningStars = false;
17+
this.runningCustomAnimation = false;
18+
this.polyTime = 0;
19+
this.customAnimation = null;
20+
21+
// User variables
1322
this.usePalette = options.usePalette || false;
1423
this.drawLines = options.drawLines || false
1524
this.name = options.name || "";
@@ -18,27 +27,35 @@ export default class ParticleAnimation {
1827
this.color = options.color || "#0059b3";
1928
this.palette = options.palette || ["#0059b3", "#4CE038", "#E32023", "#ffa500"];
2029
this.relationColor = options.relationColor || '#F5F9FA';
21-
22-
if(typeof this.parentElement === 'undefined'){
30+
31+
if (typeof this.parentElement === 'undefined') {
2332
console.log("Element id doesn't exist");
2433
return;
2534
}
2635

2736
this.canvas = this.parentElement.querySelector('canvas');
28-
if(this.canvas === null){
29-
this.canvas = document.createElement('canvas');
30-
this.parentElement.innerHTML="";
37+
if (this.canvas === null) {
38+
this.canvas = document.createElement('canvas');
39+
this.parentElement.innerHTML = "";
3140
this.parentElement.appendChild(this.canvas);
3241
this.ctx = this.canvas.getContext('2d');
3342
this.clear();
3443
this.build();
3544
this.applyResizeRule();
36-
}else{
45+
} else {
3746
console.log("Canvas already exist");
38-
}
47+
}
48+
}
49+
buildAndRunStars() {
50+
this.stars = []
51+
for (var i = 0; i < 20; i++) {
52+
this.stars.push(new Glow(Random.range(window.innerWidth / 2 - 80, window.innerWidth / 2 + 80), Random.range(0, 10)));
53+
}
54+
this.runningStars = true;
55+
this.polyTime = 300;
3956
}
40-
build(){
41-
this.root = Tree.build({ levels: this.levels, maximumNodes: this.maximumNodes, color: this.color, palette: this.palette, canvasSize:{x:this.canvas.width, y:this.canvas.height} });
57+
build() {
58+
this.root = Tree.build({ levels: this.levels, maximumNodes: this.maximumNodes, color: this.color, palette: this.palette, canvasSize: { x: this.canvas.width, y: this.canvas.height } });
4259
}
4360
clear() {
4461
this.canvas.width = this.parentElement.clientWidth;
@@ -47,10 +64,10 @@ export default class ParticleAnimation {
4764
}
4865
queue() {
4966
var node = this;
50-
if(node.ctx===null){
67+
if (node.ctx === null) {
5168
return;
5269
}
53-
window.requestAnimationFrame(function(){
70+
window.requestAnimationFrame(function () {
5471
if (node.running) {
5572
node.clear();
5673
node.update();
@@ -64,18 +81,45 @@ export default class ParticleAnimation {
6481
}
6582
draw() {
6683
var ctx = this.ctx;
67-
this.ctx.lineWidth=0.5;
84+
this.ctx.lineWidth = 0.5;
6885
this.drawParticles(this.root);
86+
87+
if (this.polyTime > 0 && this.polyTime < 1000) {
88+
if(this.runningStars){
89+
for (var i = 0; i < this.stars.length; i++) {
90+
var g = this.stars[i];
91+
g.speed = g.speed * g.acceleration;
92+
g.y += g.speed;
93+
if (g.y < Random.range(140, 170)) {
94+
g.x += g.speed * g.direction;
95+
} else if (g.y > Random.range(200, 250)) {
96+
g.x -= g.speed * g.direction;
97+
}
98+
g.draw(ctx);
99+
}
100+
}
101+
if(this.runCustomAnimation && (typeof this.customAnimation === "function")){
102+
this.customAnimation(ctx, this.polyTime);
103+
}
104+
}
105+
106+
if (this.polyTime > -2) {
107+
this.polyTime--;
108+
} else if (this.runningStars) {
109+
this.runningStars = false;
110+
}else if (this.runningCustomAnimation) {
111+
this.stopCustomAnimation();
112+
}
69113
}
70114
drawParticles(node) {
71115
var ctx = this.ctx;
72-
116+
73117
if (this.usePallette) {
74118
ctx.fillStyle = node.color;
75-
ctx.strokeStyle= node.color;
76-
} else{
119+
ctx.strokeStyle = node.color;
120+
} else {
77121
ctx.fillStyle = node.fill;
78-
ctx.strokeStyle= node.fill;
122+
ctx.strokeStyle = node.fill;
79123
}
80124

81125
ctx.beginPath();
@@ -86,7 +130,7 @@ export default class ParticleAnimation {
86130

87131
for (var i = 0; i < node.children.length; i++) {
88132
var position = node.children[i].position;
89-
if (!node.wait && this.drawLines) {
133+
if (!node.wait && this.drawLines) {
90134
ctx.lineWidth = 0.33 - (0.01 * node.level);
91135
ctx.strokeStyle = this.relationColor;
92136
ctx.beginPath();
@@ -106,26 +150,44 @@ export default class ParticleAnimation {
106150
this.queue();
107151
}
108152
}
109-
applyResizeRule(){
153+
applyResizeRule() {
110154
var node = this;
111-
window.onresize =function(){
155+
window.onresize = function () {
112156
node.root.acceleration = 2;
113-
node.root.setDestination(node.parentElement.getBoundingClientRect().width/2,node.parentElement.getBoundingClientRect().height/3)
157+
node.root.setDestination(node.parentElement.getBoundingClientRect().width / 2, node.parentElement.getBoundingClientRect().height / 3)
114158
}
115159
}
116-
toggleColors(){
117-
this.usePallette = !this.usePallette;
160+
toggleColors() {
161+
this.usePallette = !this.usePallette;
118162
}
119-
toggleDrawLines(){
120-
this.drawLines = !this.drawLines;
163+
toggleDrawLines() {
164+
this.drawLines = !this.drawLines;
121165
}
122-
stop(){
123-
this.running = false;
166+
stop() {
167+
this.running = false;
124168
}
125169
run() {
126-
if(this.running==false){
127-
this.running=true;
170+
if (this.running == false) {
171+
this.running = true;
128172
this.queue();
129173
}
130174
}
175+
drawStars() {
176+
this.stopCustomAnimation();
177+
this.buildAndRunStars();
178+
}
179+
runCustomAnimation(custom, duration, callback){
180+
this.polyTime = duration;
181+
this.runningCustomAnimation = true;
182+
this.customAnimation = custom;
183+
this.customAnimationCallback = callback;
184+
}
185+
stopCustomAnimation(){
186+
this.runningCustomAnimation = false;
187+
this.customAnimation = null;
188+
if(typeof this.customAnimationCallback === 'function'){
189+
this.customAnimationCallback();
190+
}
191+
this.customAnimationCallback = null;
192+
}
131193
};

‎particle.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import Vector from './vector';
2+
3+
function Particle(point, velocity, acceleration) {
4+
this.position = point || new Vector(0, 0);
5+
this.velocity = velocity || new Vector(0, 0);
6+
this.acceleration = acceleration || new Vector(0, 0);
7+
}
8+
9+
Particle.prototype.move = function () {
10+
// Add our current acceleration to our current velocity
11+
this.velocity.add(this.acceleration);
12+
// Add our current velocity to our position
13+
this.position.add(this.velocity);
14+
};
15+
16+
export default Particle;

0 commit comments

Comments
 (0)