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.

136 lines
4.0 KiB

1 year ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. 'use strict';
  2. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  3. var Bubbles = function () {
  4. function Bubbles(_settings) {
  5. _classCallCheck(this, Bubbles);
  6. this.bRuning = false;
  7. this.canvas = document.getElementById('canvas');
  8. this.ctx = this.canvas.getContext('2d');
  9. this.canvas.height = window.innerHeight;
  10. this.canvas.width = window.innerWidth;
  11. this.canvasbg = document.getElementById('canvasbg');
  12. this.ctxbg = this.canvasbg.getContext('2d');
  13. this.canvasbg.height = window.innerHeight;
  14. this.canvasbg.width = window.innerWidth;
  15. this.aBubbles = [];
  16. this.aBgBubbles = [];
  17. }
  18. Bubbles.prototype.addBubble = function addBubble() {
  19. this.aBubbles.push(new Bubble());
  20. };
  21. Bubbles.prototype.addBgBubble = function addBgBubble() {
  22. this.aBgBubbles.push(new Bubble('rgba(192, 57, 43,0.5)', 3.5)); // Color for the bubbles in the back
  23. };
  24. Bubbles.prototype.update = function update() {
  25. for (var i = this.aBubbles.length - 1; i >= 0; i--) {
  26. this.aBubbles[i].update();
  27. if (!this.aBubbles[i].life) this.aBubbles.splice(i, 1);
  28. }
  29. for (var i = this.aBgBubbles.length - 1; i >= 0; i--) {
  30. this.aBgBubbles[i].update();
  31. if (!this.aBgBubbles[i].life) this.aBgBubbles.splice(i, 1);
  32. }
  33. if (this.aBubbles.length < window.innerWidth / 4) this.addBubble();
  34. if (this.aBgBubbles.length < window.innerWidth / 12) this.addBgBubble();
  35. };
  36. Bubbles.prototype.draw = function draw() {
  37. this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  38. this.ctxbg.clearRect(0, 0, this.canvas.width, this.canvas.height);
  39. for (var i = this.aBgBubbles.length - 1; i >= 0; i--) {
  40. this.aBgBubbles[i].draw(this.ctxbg);
  41. }
  42. for (var i = this.aBubbles.length - 1; i >= 0; i--) {
  43. this.aBubbles[i].draw(this.ctx);
  44. }
  45. };
  46. Bubbles.prototype.run = function run() {
  47. this.update();
  48. this.draw();
  49. if (this.bRuning) requestAnimationFrame(this.run.bind(this));
  50. };
  51. Bubbles.prototype.start = function start() {
  52. this.bRuning = true;
  53. this.run();
  54. };
  55. Bubbles.prototype.stop = function stop() {
  56. this.bRuning = false;
  57. };
  58. return Bubbles;
  59. }();
  60. var Bubble = function () {
  61. function Bubble() {
  62. var _c = arguments.length <= 0 || arguments[0] === undefined ? 'rgba(241, 196, 15,0.7)' : arguments[0]; // Color for the bubbles on the front
  63. var _y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
  64. _classCallCheck(this, Bubble);
  65. this.r = rand(20, 120);
  66. this.life = true;
  67. this.x = rand(-this.r, window.innerWidth);
  68. this.y = rand(window.innerHeight + this.r, window.innerHeight + this.r + 20);
  69. this.vy = rand(.1, .5) + _y;
  70. this.vr = 0;
  71. this.vx = rand(-3, 3);
  72. this.c = _c;
  73. }
  74. Bubble.prototype.update = function update() {
  75. this.vy += .07;
  76. this.vr += .012;
  77. this.y -= this.vy;
  78. this.x += this.vx;
  79. if (this.r > 1) this.r -= this.vr;
  80. if (this.r <= 1) this.life = false;
  81. };
  82. Bubble.prototype.draw = function draw(ctx) {
  83. ctx.beginPath();
  84. ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
  85. ctx.fillStyle = this.c;
  86. ctx.fill();
  87. };
  88. return Bubble;
  89. }();
  90. var rand = function rand(min, max) {
  91. return Math.random() * (max - min) + min;
  92. };
  93. var onresize = function onresize() {
  94. oBubbles.canvasbg.width = window.innerWidth;oBubbles.canvasbg.height = window.innerHeight;oBubbles.canvas.width = window.innerWidth;oBubbles.canvas.height = window.innerHeight;
  95. };
  96. var oBubbles = undefined;
  97. var init = function init() {
  98. oBubbles = new Bubbles();
  99. oBubbles.start();
  100. };
  101. window.onresize = onresize;
  102. window.onload = init;