JS Achieves Particle Shuttle

1. Expected effect

In the large screen scene, add a cool particle shuttle background to the decision report, and the effect is shown in the following figure:

2. Implementation ideas

Set initialization JS event to generate dynamic background.

1. Design report

Click the body component to add after initialization events, as shown in the figure below:

The JavaScript code is as follows:

$("body").prepend('<canvas id="mycanvas" style="position:absolute;z-index:-2; background-color:black;"></canvas>');
var canvas = mycanvas; 
var w = window.innerWidth;
var h = window.innerHeight;
canvas.width = w;
canvas.height = h;
canvas.backgroundColor = "#000";
var ctx = canvas.getContext('2d');
 
function Build() {
    this.ctx = ctx;
    this.counts = 3000;  
    this.maxSize = 4;  
    this.halfWidth = w / 2,
        this.halfHeight = h / 2;
    this.arr = [];  
}
Build.prototype.add = function(coor) {
    var grd = this.ctx.createRadialGradient(coor.x, coor.y, coor.size / 2, coor.x, coor.y, coor.size);
    grd.addColorStop(0, "white");
    grd.addColorStop(1, coor.color);
    this.ctx.fillStyle = grd;
    this.ctx.beginPath();
    this.ctx.arc(coor.x, coor.y, coor.size, 0, Math.PI * 2, true);
    this.ctx.transform(1, 0, 0, 1, 0, coor.z);
    this.ctx.closePath();
    this.ctx.fill();
}
Build.prototype.init = function() {
    this.run();
    this.render();
    this.animate();
}
Build.prototype.run = function() {
    var nums = 0;
    while (nums < this.counts) {
        var coor = {
            x: Math.ceil(Math.random() * w),
            y: Math.ceil(Math.random() * h),
            posx: Math.random() * w - this.halfWidth,
            posy: Math.random() * h - this.halfHeight,
            fl: 100,
            speed: Math.random() * 2,
            posz: Math.random() * 250,
            r: Math.ceil(Math.random() * this.maxSize),
            color: "rgba(" + Math.ceil(Math.random() * 255) + "," + Math.ceil(Math.random() * 255) + "," + Math.ceil(Math.random() * 255) + "," + Math.random() + ")"
        };
        this.arr.push(coor);
        nums++;
    }
}
Build.prototype.clear = function() {
    ctx.clearRect(0, 0, w, h);
}
Build.prototype.render = function() {
    this.clear();
    for (var item of this.arr) {
        this.draw(item);
    }
}
Build.prototype.animate = function() {
        var _this = this;
        this.render(); 
        window.requestAnimationFrame(function() {
            _this.animate();
        });
    },
    Build.prototype.draw = function(item) {
        if (item.posz > -item.fl) { 
            var scale = item.fl / (item.fl + item.posz); 
            item.x = this.halfWidth + item.posx * scale;
            item.y = this.halfHeight + item.posy * scale;
            item.size = item.r * scale;
            item.posz -= item.speed;
        } else { 
            item.posz = Math.random() * 250;
        }
        this.add(item);
    }
var app = new Build();
app.init();
window.addEventListener('resize', function() {
    canvas.width = w = window.innerWidth;
    canvas.height = h = window.innerHeight;
}, false); 

2. Effect preview

Save the template, click dashboard preview, the effect is as shown in I.1 expected effect.

For completed templates, please refer to:

%fr_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\JS\JS_particle_shuttle.frm

Click to download the template:JS_particle_shuttle.frm