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

'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;