粒子碰撞（动量守恒）

在大佬的作品基础上修改

js, particle

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 968
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var max = Math.max,
    min = Math.min,
    round = Math.round,
    abs = Math.abs,
    pow = Math.pow,
    sqrt = Math.sqrt,
    PI = Math.PI,
    sin = Math.sin,
    cos = Math.cos,

NS_URI = 'http://www.w3.org/2000/svg',
    XLink_NS = 'http://www.w3.org/1999/xlink',

scene = document.querySelector('.scene'),
    g_particles = scene.querySelector('.particles'),
    frag = document.createDocumentFragment(),

vb = scene.getAttribute('viewBox').split(' '),
    vb_w = ~~vb[2],
    vb_h = ~~vb[3],
    vb_x = ~~vb[0],
    vb_y = ~~vb[1],

particles = [],
    n_particles = 32,

u = 50,
    t = 0;

var rand = function(max, min) {
    var b = (!max && max !== 0) ? 1 : max,
        a = min || 0;

return a + (b - a) * Math.random();
};

Node.prototype.setAttrs = function(attr_obj) {
    for (var prop in attr_obj) {
        this.setAttribute(prop, attr_obj[prop]);
    }
};

var Particle = function(r, p, m, v) {
    var a = PI * rand(2),
        va = rand(10, 3) * u;
    this.hitobj = new Array();
    this.hitdelay = new Array();

this.r = r || round(rand(20, 4));
    this.p = p || {
        'x': round(rand(vb_w - 4 * this.r) - vb_w / 2),
        'y': round(rand(vb_h - 4 * this.r) - vb_h / 2)
    };
    this.m = m || rand(10, 1);
    this.v = v || {
        'x': va * cos(a),
        'y': va * sin(a)
    };

this.el = document.createElementNS(NS_URI, 'circle');
    this.el.setAttrs({
        'r': this.r,
        'cx': this.p.x,
        'cy': this.p.y,
        'fill': 'hsl(' + round(rand(360)) + ',100%,50%)'
    });

this.d = function(b) {
        return sqrt(pow(this.p.x - b.p.x, 2) + pow(this.p.y - b.p.y, 2));
    };

this.dx = function(x) {
        return abs(this.p.x - x);
    };

this.dy = function(y) {
        return abs(this.p.y - y);
    };

this.hitsParticle = function(b) {
        if ((this.d(b) <= this.r + b.r) && (this.hitobj.indexOf(b) == -1)) {
            this.hitobj.push(b);
            this.hitdelay.push(10);
            b.hitobj.push(b);
            b.hitdelay.push(10);
            return true;
        } else {
            return false;
        }
    };

this.hitsWallX = function() {
        return ((vb_x >= this.p.x - this.r) && (this.v.x < 0)) || ((this.v.x > 0) && (vb_x + vb_w <= this.p.x + this.r));
    };

this.hitsWallY = function() {
        return ((vb_y >= this.p.y - this.r) && (this.v.y < 0)) || ((this.v.y > 0) && (vb_y + vb_h <= this.p.y + this.r));
    };
};

var init = function() {
    particles = [];
    g_particles.innerHTML = '';

for (var i = 0; i < n_particles; i++) {
        particles.push(new Particle());
        frag.appendChild(particles[i].el);
    }

g_particles.appendChild(frag);
};

//碰撞作用
        for (var j = 0; j < i; j++) {
            if (particles[i].hitsParticle(particles[j])) {
                var v1x = particles[i].v.x;
                var v1y = particles[i].v.y;
                var m1 = particles[i].r;
                var v2x = particles[j].v.x;
                var v2y = particles[j].v.y;
                var m2 = particles[j].r;
                particles[i].v.x = ((m1 - m2) * v1x + 2 * m2 * v2x) / (m1 + m2);
                particles[i].v.y = ((m1 - m2) * v1y + 2 * m2 * v2y) / (m1 + m2);

particles[j].v.x = ((m2 - m1) * v2x + 2 * m1 * v1x) / (m1 + m2);
                particles[j].v.y = ((m2 - m1) * v2y + 2 * m1 * v1y) / (m1 + m2);
            }
        }

if (particles[i].hitsWallX()) {
            particles[i].v.x *= -1;
        }
        if (particles[i].hitsWallY()) {
            particles[i].v.y *= -1;
        }
    }
    t++;

requestAnimationFrame(move);
};

init();
move();

编译

CSS

HTML

在大佬的作品基础上修改

js, particle

编辑器支持Emmet

快捷键

在大佬的作品基础上修改

js, particle

html5 canvas 光速星际旅行动画（粒子特效）

gsap冰凌掉落粒子（水帘）动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：