Sketch.js 逼真的火花/燃烧的烟花

Sparks，可以用鼠标控制烟花位置。

canvas，火

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2690
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var particles = [];

var Particle = function(x, y) {

this.x = x + random(-10, 10);
    this.y = y + random(-10, 10);
    this.vx = random(-2.5, 2.5);
    this.vy = random(-5, 5);
    this.radius = (random() > 0.75) ? random(25, 50) : 1 + random(1, 20);
    this.lifespan = random(25, 50);
    this.charge = this.lifespan;
    this.color = {
        r: round(random(255)),
        g: round(random(75)),
        b: round(random(50))
    };
}

Particle.prototype = {

update: function() {
        this.charge--;
        this.radius--;
        this.x += this.vx;
        this.y += this.vy;
    },

draw: function(ctx) {

var gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
        gradient.addColorStop(0, 'rgba(' + this.color.r + ', ' + this.color.g + ', ' + this.color.b + ', ' + this.opacity + ')');
        gradient.addColorStop(0.5, "rgba(" + this.color.r + ", " + this.color.g + ", " + this.color.b + ", " + this.opacity + ")");
        gradient.addColorStop(1, "rgba(" + this.color.r + ", " + this.color.g + ", " + this.color.b + ", 0)");

ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, TWO_PI, false);
        ctx.fill();
    }
};

Sketch.create({
    center: {},
    setup: function() {

this.resize();

for (var i = 0; i < 100; i++) {
            particles.push(new Particle(this.center.x, this.center.y));
        }

// this.stats = new Stats();
        // document.body.appendChild(this.stats.domElement);
    },

resize: function() {
        this.center.x = this.width * 0.5;
        this.center.y = this.height * 0.5;
    },

draw: function() {

this.globalCompositeOperation = "source-over";
        this.fillStyle = '#0A0B1F';
        this.fillRect(0, 0, this.width, this.height);
        this.globalCompositeOperation = "lighter";

var p, i = particles.length;

while (i--) {
            p = particles[i];
            p.opacity = round(p.charge / p.lifespan * 100) / 100;
            p.draw(this);
            p.update();
            if (p.charge < 0 || p.radius < 0) {
                particles[i] = new Particle(this.mouse.x || this.center.x, this.mouse.y || this.center.y);
            }
        }

//this.stats.update();
    }
});

编译

CSS

HTML

Sparks，可以用鼠标控制烟花位置。

canvas，火

编辑器支持Emmet

快捷键

Sparks，可以用鼠标控制烟花位置。

canvas，火

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：