Canvas+JS 粒子分解和流体运动

Particle-based JS Fluid Simulation refer to: http://kotsoft.googlepages.com/Viscoelastic2.html

Particle

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

! function() {
    "use strict";
    var gridResolution = 20;
    var rad = 30;
    var maxParticles = 1000;
    /* ==== the RAM ==== */
    var nBytes = 8 * maxParticles;
    var buffer = new ArrayBuffer(10 * nBytes);
    var particles_x = new Float64Array(buffer, 0 * nBytes, maxParticles);
    var particles_y = new Float64Array(buffer, 1 * nBytes, maxParticles);
    var particles_pprevx = new Float64Array(buffer, 2 * nBytes, maxParticles);
    var particles_pprevy = new Float64Array(buffer, 3 * nBytes, maxParticles);
    var particles_velx = new Float64Array(buffer, 4 * nBytes, maxParticles);
    var particles_vely = new Float64Array(buffer, 5 * nBytes, maxParticles);
    var particles_vxl = new Float64Array(buffer, 6 * nBytes, maxParticles);
    var particles_vyl = new Float64Array(buffer, 7 * nBytes, maxParticles);
    var particles_q = new Float64Array(buffer, 8 * nBytes, maxParticles);
    var grid = [];
    var neighbors = [];
    var nParticles = 0;
    // ==== screen ====
    var screen = ge1doot.screen;
    var pointer = ge1doot.drag;
    screen.init("screen", function() {}, true);
    pointer.init(screen);
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = screen.width;
    canvas.height = screen.height;
    var nbX = Math.round(screen.width / gridResolution) + 1;
    var nbY = Math.round(screen.height / gridResolution) + 1;
    // ==== cell constructor ====
    function Cell() {
            this.len = 0;
            this.neighborsParticles = [];
        }
        // ==== build grid ====
    for (var i = 0; i < nbX * nbY; i++) {
        grid[i] = new Cell();
    }
    // ==== create image particle ====
    var r1 = rad * 1.5;
    var r2 = r1 * 0.15;
    var particleImage = document.createElement('canvas');
    particleImage.width = r1 * 2;
    particleImage.height = r1 * 2;
    var ict = particleImage.getContext('2d');
    ict.shadowBlur = rad;
    ict.shadowColor = 'rgb(255,0,0)';
    ict.beginPath();
    ict.arc(r1, r1, r2, 0, 2 * Math.PI);
    ict.fillStyle = 'rgb(255,255,0)';
    ict.fill();
    ict.strokeStyle = 'rgb(255,0,0)';
    ict.stroke();
    ict.closePath();

// ==== Double Density Relaxation Algorithm ====
    function pass2(n) {
        var px = particles_x[n];
        var py = particles_y[n];
        var pressure = 0,
            presnear = 0,
            nl = 0;
        // ----- get grid position -----
        var xc = (0.5 + px / gridResolution) | 0;
        var yc = (0.5 + py / gridResolution) | 0;
        // ----- 3 x 3 grid cells -----
        for (var xd = -1; xd < 2; xd++) {
            for (var yd = -1; yd < 2; yd++) {
                var h = grid[(yc + yd) * nbX + (xc + xd)];
                if (h && h.len) {
                    // ==== for each neighbours pair ====
                    for (var a = 0, l = h.len; a < l; a++) {
                        var pn = h.neighborsParticles[a];
                        if (pn != n) {
                            var vx = particles_x[pn] - px;
                            var vy = particles_y[pn] - py;
                            var vlen = Math.sqrt(vx * vx + vy * vy);
                            if (vlen < rad) {
                                // ==== compute density and near-density ====
                                var q = 1 - (vlen / rad);
                                pressure += q * q; // quadratic spike
                                presnear += q * q * q; // cubic spike
                                particles_q[pn] = q;
                                particles_vxl[pn] = (vx / vlen) * q;
                                particles_vyl[pn] = (vy / vlen) * q;
                                neighbors[nl++] = pn;
                            }
                        }
                    }
                }
            }
        }
        // ==== screen limits ====
        if (px < r2) {
            var q = 1 - Math.abs(px / r2);
            particles_x[n] += q * q * 0.5;
        } else if (px > screen.width - r2) {
            var q = 1 - Math.abs((screen.width - px) / r2);
            particles_x[n] -= q * q * 0.5;
        }
        if (py < r2) {
            var q = 1 - Math.abs(py / r2);
            particles_y[n] += q * q * 0.5;
        } else if (py > screen.height - r2) {
            var q = 1 - Math.abs((screen.height - py) / r2);
            particles_y[n] -= q * q * 0.5;
        }
        if (px < r2) particles_x[n] = r2;
        else if (px > screen.width - r2) particles_x[n] = screen.width - r2;
        if (py < r2) particles_y[n] = r2;
        else if (py > screen.height - r2) particles_y[n] = screen.height - r2;
        // ==== second pass of the relaxation ====
        pressure = (pressure - 3) * 0.5;
        presnear *= 0.5;
        for (var a = 0; a < nl; a++) {
            var np = neighbors[a];
            // ==== apply displacements ====
            var p = pressure + presnear * particles_q[np];
            var dx = (particles_vxl[np] * p) * 0.5;
            var dy = (particles_vyl[np] * p) * 0.5;
            particles_x[np] += dx;
            particles_y[np] += dy;
            particles_x[n] -= dx;
            particles_y[n] -= dy;
        }
    }

function pass3(n) {
        // ==== use previous position to compute next velocity ====
        particles_velx[n] = particles_x[n] - particles_pprevx[n];
        particles_vely[n] = particles_y[n] - particles_pprevy[n];
        // ==== draw particle ====
        ctx.drawImage(particleImage, particles_x[n] - r1, particles_y[n] - r1);
    }

// ==== main loop ====
    function run() {
        var i, l;
        requestAnimationFrame(run);
        // ==== inject new particles ====
        if (nParticles < maxParticles) {
            particles_x[nParticles] = 0.5 * screen.width + Math.random();
            particles_y[nParticles] = 0.5 * screen.height + Math.random();
            nParticles++;
        }
        // ==== clear screen ====
        ctx.clearRect(0, 0, screen.width, screen.height);
        // ==== reset grid ====
        for (i = 0, l = nbX * nbY; i < l; i++) grid[i].len = 0;
        // ==== simulation passes ====
        for (i = 0; i < nParticles; i++) pass1(i);
        for (i = 0; i < nParticles; i++) pass2(i);
        for (i = 0; i < nParticles; i++) pass3(i);
    }

// ==== start animation ====
    requestAnimationFrame(run);

}();

编译

CSS

HTML

Particle-based JS Fluid Simulation refer to: http://kotsoft.googlepages.com/Viscoelastic2.html

Particle

编辑器支持Emmet

快捷键

Particle-based JS Fluid Simulation refer to: http://kotsoft.googlepages.com/Viscoelastic2.html

Particle

HTML5 Canvas使用粒子模拟液体物理特性和运动动画

HTML5 Canvas 粒子化（电流）404页面动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：