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