You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
4.0 KiB
137 lines
4.0 KiB
'use strict';
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
|
var Bubbles = function () {
|
|
function Bubbles(_settings) {
|
|
_classCallCheck(this, Bubbles);
|
|
|
|
this.bRuning = false;
|
|
this.canvas = document.getElementById('canvas');
|
|
this.ctx = this.canvas.getContext('2d');
|
|
this.canvas.height = window.innerHeight;
|
|
this.canvas.width = window.innerWidth;
|
|
this.canvasbg = document.getElementById('canvasbg');
|
|
this.ctxbg = this.canvasbg.getContext('2d');
|
|
this.canvasbg.height = window.innerHeight;
|
|
this.canvasbg.width = window.innerWidth;
|
|
this.aBubbles = [];
|
|
this.aBgBubbles = [];
|
|
}
|
|
|
|
Bubbles.prototype.addBubble = function addBubble() {
|
|
this.aBubbles.push(new Bubble());
|
|
};
|
|
|
|
Bubbles.prototype.addBgBubble = function addBgBubble() {
|
|
this.aBgBubbles.push(new Bubble('rgba(192, 57, 43,0.5)', 3.5)); // Color for the bubbles in the back
|
|
};
|
|
|
|
Bubbles.prototype.update = function update() {
|
|
|
|
for (var i = this.aBubbles.length - 1; i >= 0; i--) {
|
|
|
|
this.aBubbles[i].update();
|
|
|
|
if (!this.aBubbles[i].life) this.aBubbles.splice(i, 1);
|
|
}
|
|
|
|
for (var i = this.aBgBubbles.length - 1; i >= 0; i--) {
|
|
|
|
this.aBgBubbles[i].update();
|
|
|
|
if (!this.aBgBubbles[i].life) this.aBgBubbles.splice(i, 1);
|
|
}
|
|
|
|
if (this.aBubbles.length < window.innerWidth / 4) this.addBubble();
|
|
|
|
if (this.aBgBubbles.length < window.innerWidth / 12) this.addBgBubble();
|
|
};
|
|
|
|
Bubbles.prototype.draw = function draw() {
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
this.ctxbg.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
|
for (var i = this.aBgBubbles.length - 1; i >= 0; i--) {
|
|
this.aBgBubbles[i].draw(this.ctxbg);
|
|
}
|
|
|
|
for (var i = this.aBubbles.length - 1; i >= 0; i--) {
|
|
this.aBubbles[i].draw(this.ctx);
|
|
}
|
|
};
|
|
|
|
Bubbles.prototype.run = function run() {
|
|
|
|
this.update();
|
|
this.draw();
|
|
|
|
if (this.bRuning) requestAnimationFrame(this.run.bind(this));
|
|
};
|
|
|
|
Bubbles.prototype.start = function start() {
|
|
this.bRuning = true;
|
|
this.run();
|
|
};
|
|
|
|
Bubbles.prototype.stop = function stop() {
|
|
this.bRuning = false;
|
|
};
|
|
|
|
return Bubbles;
|
|
}();
|
|
|
|
var Bubble = function () {
|
|
function Bubble() {
|
|
var _c = arguments.length <= 0 || arguments[0] === undefined ? 'rgba(241, 196, 15,0.7)' : arguments[0]; // Color for the bubbles on the front
|
|
|
|
var _y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
|
|
|
|
_classCallCheck(this, Bubble);
|
|
|
|
this.r = rand(20, 120);
|
|
this.life = true;
|
|
this.x = rand(-this.r, window.innerWidth);
|
|
this.y = rand(window.innerHeight + this.r, window.innerHeight + this.r + 20);
|
|
this.vy = rand(.1, .5) + _y;
|
|
this.vr = 0;
|
|
this.vx = rand(-3, 3);
|
|
this.c = _c;
|
|
}
|
|
|
|
Bubble.prototype.update = function update() {
|
|
|
|
this.vy += .07;
|
|
this.vr += .012;
|
|
this.y -= this.vy;
|
|
this.x += this.vx;
|
|
|
|
if (this.r > 1) this.r -= this.vr;
|
|
|
|
if (this.r <= 1) this.life = false;
|
|
};
|
|
|
|
Bubble.prototype.draw = function draw(ctx) {
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
|
|
ctx.fillStyle = this.c;
|
|
ctx.fill();
|
|
};
|
|
|
|
return Bubble;
|
|
}();
|
|
|
|
var rand = function rand(min, max) {
|
|
return Math.random() * (max - min) + min;
|
|
};
|
|
var onresize = function onresize() {
|
|
oBubbles.canvasbg.width = window.innerWidth;oBubbles.canvasbg.height = window.innerHeight;oBubbles.canvas.width = window.innerWidth;oBubbles.canvas.height = window.innerHeight;
|
|
};
|
|
var oBubbles = undefined;
|
|
var init = function init() {
|
|
oBubbles = new Bubbles();
|
|
oBubbles.start();
|
|
};
|
|
window.onresize = onresize;
|
|
window.onload = init;
|