HTML5简单的二维水面波动模拟

simple 2D Water Simulation, 使用单纯形噪音（simplex noise）算法。

h5, water

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var width = 300;

var ground = new Array(width).fill(1);
ground[0] = ground[width - 1] = 100;

// Predictable randomize multi-sine for generating the ground
// from @shshaw, thx!
var twoPI = Math.PI * 4;
var placement;
var offset = Math.random() + 1.1;
for (x = 1; x < width / 2; x++) {
    placement = (x / (width / 2)) * twoPI;
    ground[x] = tmp = 30 + 10 * ((Math.sin(placement) + Math.sin(offset * placement)) / 2);
}
/* my lame kinda random spiky ground...doh! */
var level = tmp; // Math.random()*50;
for (x = width / 2; x < width - 1; x++) {
    ground[x] = level;
    level = Math.min(100, Math.max(0, level + Math.random() * 8 - 4));
}

// empty pool with a drip of water in the middle
var water = new Array(width).fill(0);
water[0] = water[width - 1] = 0;
water[parseInt(width / 2)] = 250;

var energy = new Array(width).fill(0);

// put that thing into the DOM
var wrap = document.getElementById("wrap");
var html = "<div class='ww'></div><div class='gw'></div>";
for (x = 0; x < width; x++) {
    var col = document.createElement("div");
    col.classList.add('col');
    col.innerHTML = html;
    wrap.appendChild(col);
}
var cols = document.getElementById("wrap").children; // ...for the renderer

// add the mouse actions
for (var i = 0; i < cols.length; i++) {
    (function(j) {
        cols[i].addEventListener("mousedown", function() {
            var time = new Date();
            var index = j;
            window.onmouseup = function() {
                var diff = new Date() - time;
                window.onmouseup = null;
                water[index] = diff;
            }
        });
    })(i);
}

// calculate the next frame
function calc() {
    var dwater = new Array(width).fill(0);
    var denergy = new Array(width).fill(0);

for (x = 1; x < width - 1; x++) {
        if (ground[x] + water[x] - energy[x] > ground[x - 1] + water[x - 1] + energy[x - 1]) {
            var flow = Math.min(water[x], ground[x] + water[x] - energy[x] - ground[x - 1] - water[x - 1] - energy[x - 1]) / 4;
            dwater[x - 1] += flow;
            dwater[x] += -flow;
            denergy[x - 1] += -energy[x - 1] / 2 - flow;
        }

if (ground[x] + water[x] + energy[x] > ground[x + 1] + water[x + 1] - energy[x + 1]) {
            var flow = Math.min(water[x], ground[x] + water[x] + energy[x] - ground[x + 1] - water[x + 1] + energy[x + 1]) / 4;
            dwater[x + 1] += flow;
            dwater[x] += -flow;
            denergy[x + 1] += -energy[x + 1] / 2 + flow;
        }
    }

for (x = 1; x < width - 1; x++) {
        water[x] = water[x] + dwater[x];
        energy[x] = energy[x] + denergy[x];
    }
}

// draw the next frame
function draw(terrain, water) {
    for (var i = 0; i < terrain.length; i++) {
        var col = cols[i].children;
        col[0].style.height = Math.min(100 - terrain[i], water[i]) + "%";
        col[1].style.height = terrain[i] + "%";
    }
}

// RUN it!
/* "use reqAnimFr instead of timeout, noob!"  hint from @shshaw, thx! */
function render() {
    requestAnimationFrame(render);
    calc();
    draw(ground, water);
}
requestAnimationFrame(render);

编译

CSS

HTML

simple 2D Water Simulation, 使用单纯形噪音（simplex noise）算法。

h5, water

编辑器支持Emmet

快捷键

simple 2D Water Simulation, 使用单纯形噪音（simplex noise）算法。

h5, water

HTML5 Canvas 很棒的水平面模拟动画

HTML5 Canvas 逼真的3D水体模拟动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：