JS realizes particle floating background

1. Expected effect

In a big screen scenario, add a particle floating background to the dashboard, as shown in the following figure:

2. Realization idea

Add an After Initialization event to generate a dynamic background.

1. Design report

Create a new dashboard, select the body, and add an After Initialization event, as shown in the following figure:

The JavaScript code is as follows:

$("body").prepend('<canvas id="canvas" style="position:absolute;z-index:-2;"></canvas>');
var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}var Line = function () {
  function Line(x, y, size, color, speed, seed, amplitude) {_classCallCheck(this, Line);
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = color;
    this.speed = speed;
    this.seed = seed;
    this.amplitude = amplitude;
    this.i = this.seed;
  }_createClass(Line, [{ key: 'update', value: function update()
    {
      this.y -= this.speed;
      this.i += this.seed;
    } }, { key: 'draw', value: function draw(
    canvas) {
      var x = this.x + Math.sin(this.i) * this.amplitude;
      canvas.ctx.beginPath();
      canvas.ctx.fillStyle = this.color;
      canvas.ctx.shadowColor = this.color;
      canvas.ctx.shadowBlur = 5;
      canvas.ctx.arc(x, this.y, this.size, 0, 2 * Math.PI);
      canvas.ctx.fill();
      canvas.ctx.closePath();
    } }]);return Line;}();var
Canvas = function () {
  function Canvas(ctx, w, h) {_classCallCheck(this, Canvas);
    this.ctx = ctx;
    this.width = w;
    this.height = h;
    this.scale = 1.0;
    this.lines = [];
  }_createClass(Canvas, [{ key: 'pushParticle', value: function pushParticle()
    {
      var x = Math.random() * this.width;
      var y = this.height + Math.random() * 250;
      var size = 1 + Math.random();
      var g = Math.floor(150 + Math.random() * 50);
      var b = Math.floor(150 + Math.random() * 50);
      var color = 'rgba(120,' + g + ',' + b + ',0.7)';
      var speed = 2 + Math.random() * 1.5;
      var seed = Math.random() / 20;
      var amp = Math.random() * 15;
      this.lines.push(new Line(x, y, size, color, speed, seed, amp));
    } }, { key: 'start', value: function start()
    {
      for (var i = 0; i < 100; i++) {
        this.pushParticle();
      }
    } }, { key: 'update', value: function update()
    {
      for (var i = 0; i < this.lines.length; i++) {
        var line = this.lines[i];
        line.update();
      }
      this.lines = this.lines.filter(function (line) {
        return line.y > -2;
      });
      var toAdd = 100 - this.lines.length;
      if (toAdd === 0) {return;}
      for (var _i = 0; _i < toAdd; _i++) {
        this.pushParticle();
      }
    } }, { key: 'draw', value: function draw()
    {
      this.ctx.shadowColor = '#000';
      this.ctx.shadowBlur = 0;
      this.ctx.globalCompositeOperation = 'source-over';
      this.ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
      this.ctx.fillRect(0, 0, this.width, this.height);
      this.ctx.globalCompositeOperation = 'lighter';
      for (var i = 0; i < this.lines.length; i++) {
        var line = this.lines[i];
        line.draw(this);
      }
    } }]);return Canvas;}();
(function (_) {
  var canvasElement = document.getElementById('canvas'),
  ctx = canvasElement.getContext('2d'),
  canvas = new Canvas(ctx);
  var w = canvasElement.width = window.innerWidth,
  h = canvasElement.height = window.innerHeight,
  density = 1;
  function setup() {
    window.addEventListener('resize', resize);
    density = window.devicePixelRatio != undefined ? window.devicePixelRatio : 1.0;
    canvasElement.width = w * density;
    canvasElement.height = h * density;
    canvas.width = w;
    canvas.height = h;
    canvas.scale = density;
    ctx.scale(density, density);
    canvas.start();
    draw();
  }
  function draw() {
    canvas.update();
    canvas.draw();
    window.requestAnimationFrame(draw);
  }
  function resize() {
    w = canvasElement.width = window.innerWidth;
    h = canvasElement.height = window.innerHeight;
    canvasElement.width = w * density;
    canvasElement.height = h * density;
    canvas.width = w;
    canvas.height = h;
    ctx.scale(density, density);
  }
  setup();
})();

2. Preview effect

Save the template, click PC preview, the effect is as shown in the I.1 Expected effect.

Please refer to the completed template: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\JS\Particle_floating_background.frm

Click to download: 

Particle_floating_background.frm