HTML5 动量守恒方程动画演示

Source: http://www.cs.ubc.ca/~rbridson/fluidsimulation/

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/*
 * fluid JS
 * ge1doot - 1 May 2011
 * --------------------
 * adapted from http://violentcoding.com/blog/2008/07/26/archives/135 (dead link)
 * ref: http://www.cs.ubc.ca/~rbridson/fluidsimulation/
 */

~ function() {

'use strict';

var pmX = 0,
        pmY = 0,
        nbX, nbY, grid = [],
        particles = [];

////////////////
    var res = 20,
        nbP = 1000,
        psi = 50;
    ////////////////

// ----- Particle -----

var Particle = function(x, y) {
        this.x = this.px = x;
        this.y = this.py = y;
        this.xvel = 0;
        this.yvel = 0;
        this.next = true;
    };

Particle.prototype.update = function() {
        if (this.x > 0 && this.x < canvas.width && this.y > 0 && this.y < canvas.height) {
            var x = (0.5 + this.x / res) | 0;
            var y = (0.5 + this.y / res) | 0;
            if (x >= nbX) x = nbX - 1;
            if (y >= nbY) y = nbY - 1;
            // ----- apply grid -----
            var cell = grid[y * nbX + x];
            var ax = (this.x % res) / res;
            var ay = (this.y % res) / res;
            this.xvel += (1 - ax) * cell.xvel * 0.05 + ax * cell.R.xvel * 0.05 + ay * cell.B.xvel * 0.05;
            this.yvel += (1 - ay) * cell.yvel * 0.05 + ax * cell.R.yvel * 0.05 + ay * cell.B.yvel * 0.05;
            this.x += this.xvel;
            this.y += this.yvel - 0.5;
            // ----- canvas painting -----
            var speed = (0.5 + this.xvel + this.yvel) | 0;
            ctx.lineWidth = speed * 0.8 + 2;
            ctx.lineCap = "round";
            ctx.beginPath();
            ctx.moveTo((0.5 + this.x) | 0, (0.5 + this.y) | 0);
            ctx.lineTo((0.5 + this.px) | 0, (1.5 + this.py) | 0);
            ctx.strokeStyle = "rgba(" + (speed * 25) + "," + 255 + "," + (speed * 25) + ", 1)";
            ctx.stroke();
            this.px = this.x;
            this.py = this.y;
        } else {
            // ----- new particle -----
            this.x = this.px = Math.random() * canvas.width;
            this.y = this.py = Math.random() * canvas.height;
            this.xvel = 0;
            this.yvel = 0;
        }
        this.xvel *= 0.5;
        this.yvel *= 0.5;
        // ---- fast loop ----
        return this.next;
    };

// ----- Grid -----

var Grid = function(x, y) {
        this.x = x;
        this.y = y;
        this.xvel = 0;
        this.yvel = 0;
        this.pressure = 0;
        this.L = new nullGrid();
        this.B = new nullGrid();
        this.T = new nullGrid();
        this.R = new nullGrid();
        this.TL = new nullGrid();
        this.TR = new nullGrid();
        this.BL = new nullGrid();
        this.BR = new nullGrid();
        this.next = true;
    };

var nullGrid = function() {
        this.x = 0;
        this.y = 0;
        this.xvel = 0;
        this.yvel = 0;
        this.pressure = 0;
    };

Grid.prototype.update = function() {
        //----- pointer ------
        var dx = this.x - pointer.x;
        var dy = this.y - pointer.y;
        var dist = Math.sqrt(dy * dy + dx * dx);
        if (dist < psi) {
            if (dist < 8) dist = psi;
            var p = psi / dist;
            this.xvel += (pointer.x - pmX) * p;
            this.yvel += (pointer.y - pmY) * p;
        }
        // ----- pressure -----
        this.pressure = (
            this.TL.xvel * 0.5 + this.L.xvel + this.BL.xvel * 0.5 - this.TR.xvel * 0.5 - this.R.xvel - this.BR.xvel * 0.5 +
            this.TL.yvel * 0.5 + this.T.yvel + this.TR.yvel * 0.5 - this.BL.yvel * 0.5 - this.B.yvel - this.BR.yvel * 0.5
        ) * 0.25;
        // ----- velocity -----
        this.xvel += (this.TL.pressure * 0.5 + this.L.pressure + this.BL.pressure * 0.5 - this.TR.pressure * 0.5 - this.R.pressure - this.BR.pressure * 0.5) * 0.25;
        this.yvel += (this.TL.pressure * 0.5 + this.T.pressure + this.TR.pressure * 0.5 - this.BL.pressure * 0.5 - this.B.pressure - this.BR.pressure * 0.5) * 0.25;
        this.xvel *= 0.996;
        this.yvel *= 0.996;
        return this.next;
    };

// ----- create grid -----
    var createGrid = function() {
        grid = [];
        particles = [];
        // ----- create grid -----
        for (var y = 0; y < nbY; y++) {
            for (var x = 0; x < nbX; x++) {
                grid[y * nbX + x] = new Grid(x * res, y * res);
            }
        }
        grid[grid.length - 1].next = false;
        // ----- link surrounding cells ----- 
        for (var x = 0; x < nbX; x++) {
            for (var y = 0; y < nbY; y++) {
                var cell = grid[y * nbX + x];
                if (y > 0) {
                    var T = grid[(y - 1) * nbX + x];
                    cell.T = T;
                    T.B = cell;
                }
                if (x > 0) {
                    var L = grid[y * nbX + x - 1];
                    cell.L = L;
                    L.R = cell;
                }
                if (y > 0 && x > 0) {
                    var TL = grid[(y - 1) * nbX + x - 1];
                    cell.TL = TL;
                    TL.BR = cell;
                }
                if (y > 0 && x < nbX - 1) {
                    var TR = grid[(y - 1) * nbX + x + 1];
                    cell.TR = TR;
                    TR.BL = cell;
                }
            }
        }
        // ---- create particles -----
        for (var i = 0; i < nbP; i++) {
            particles.push(new Particle(
                Math.random() * canvas.width,
                Math.random() * canvas.height
            ));
        }
        particles[particles.length - 1].next = false;
    }

// ---- main loop ----
    var run = function() {

requestAnimationFrame(run);

ctx.fillStyle = "rgba(0,0,0,0.04)";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

for (
            var i = 0; grid[i++].update();
        );

for (
            var i = 0; particles[i++].update();
        );

pmX = pointer.x;
        pmY = pointer.y;

};

// ---- set canvas ----

var canvas = {
        width: 0,
        height: 0,
        elem: document.createElement('canvas'),
        resize: function() {
            var o = this.elem;
            var w = this.elem.offsetWidth * 1;
            var h = this.elem.offsetHeight * 1;
            if (w !== this.width || h !== this.height) {
                for (this.left = 0, this.top = 0; o !== null; o = o.offsetParent) {
                    this.left += o.offsetLeft;
                    this.top += o.offsetTop;
                }
                this.width = this.elem.width = w;
                this.height = this.elem.height = h;

nbX = Math.round(w / res);
                nbY = Math.round(h / res);
                createGrid();

}
        },
        init: function() {
            var ctx = this.elem.getContext('2d');
            document.body.appendChild(this.elem);
            window.addEventListener('resize', this.resize.bind(this), false);
            this.resize();
            return ctx;
        }
    };

var ctx = canvas.init();

// ---- pointer ----

// ----- start -----
    run();

}();

编译

CSS

HTML

Source: http://www.cs.ubc.ca/~rbridson/fluidsimulation/

编辑器支持Emmet

快捷键

Source: http://www.cs.ubc.ca/~rbridson/fluidsimulation/

HTML5 Vue.js+D3.js+GSAP交互式机场飞行距离演示动画

HTML5 CANVAS沿固定曲线轨迹运动的演示动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：