HTML5使用单纯形噪音算法实现逼真的水流动画 - 踏得网

html5 canvas water animation with simple noise

canvas，水

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var L = 600;
var N = 80;
var A = 60;
var SPACING_Y = 2;
var COLOR = [23, 190, 187];
var SPEED = 1 / 2400;
var SIMILARITY = 50;

var simplex = new SimplexNoise();
var SPACING_X = L / N;

var container = document.querySelector('.container');
var social = document.querySelector('.social');
var canvas = document.createElement('canvas');
canvas.height = canvas.width = L - SPACING_X;
canvas.style.height = canvas.style.width = (L - SPACING_X) / 2 + 'px';
social.style.color = 'rgb(' + COLOR + ')';
social.style.borderColor = 'rgba(' + COLOR + ', 0.5)';
container.insertBefore(canvas, social);

var ctx = canvas.getContext('2d');
ctx.lineWidth = 5;
ctx.strokeStyle = 'rgba(' + COLOR + ', 0.1)';
ctx.globalCompositeOperation = 'lighter';

var yBuffer = new ArrayBuffer(N * Uint8Array.BYTES_PER_ELEMENT);
var y = new Uint8Array(yBuffer);

(function draw(t) {
    ctx.clearRect(0, 0, L, L);
    for (var y_0 = 0; y_0 < L + A; y_0 += SPACING_Y) {
        for (var n = 0; n <= N; ++n) {
            y[n] = (simplex.noise3D(y_0 / SIMILARITY, n / SIMILARITY, t * SPEED) * 0.5 + 0.5) * A;
        }

ctx.beginPath();
        ctx.moveTo(0, y_0 - y[0]);
        for (var x = 0; x <= N; ++x) {
            var midX = x + 0.5;
            var midY = (y[x] + y[x + 1]) / 2;

// Rather than drawing straight lines between nodes, this gives
            // a curve that *approximates* each node value.
            ctx.quadraticCurveTo(x * SPACING_X, y_0 - y[x], midX * SPACING_X, y_0 - midY);
        }

ctx.stroke();
    }

requestAnimationFrame(draw);
})(0);

编译

CSS

HTML

<div class="container">
    <div class="social"></div>
</div>
<script type="text/javascript">
    /*! simplex-noise.js: copyright 2012 Jonas Wagner, licensed under a MIT license. See https://github.com/jwagner/simplex-noise.js for details */ ! function() {
        "use strict";

function SimplexNoise(random) {
            random || (random = Math.random), this.p = new Uint8Array(256), this.perm = new Uint8Array(512), this.permMod12 = new Uint8Array(512);
            for (var i = 0; 256 > i; i++) this.p[i] = 256 * random();
            for (i = 0; 512 > i; i++) this.perm[i] = this.p[255 & i], this.permMod12[i] = this.perm[i] % 12
        }
        var F2 = .5 * (Math.sqrt(3) - 1),
            G2 = (3 - Math.sqrt(3)) / 6,
            F3 = 1 / 3,
            G3 = 1 / 6,
            F4 = (Math.sqrt(5) - 1) / 4,
            G4 = (5 - Math.sqrt(5)) / 20;
        SimplexNoise.prototype = {
            grad3: new Float32Array([1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1, 0, 1, 0, 1, -1, 0, 1, 1, 0, -1, -1, 0, -1, 0, 1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1]),
            grad4: new Float32Array([0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1, 0, -1, -1, -1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1, 1, 1, 0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1, -1, 1, 0, 1, -1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, -1, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0]),
            noise2D: function(xin, yin) {
                var i1, j1, permMod12 = this.permMod12,
                    perm = this.perm,
                    grad3 = this.grad3,
                    n0 = 0,
                    n1 = 0,
                    n2 = 0,
                    s = (xin + yin) * F2,
                    i = Math.floor(xin + s),
                    j = Math.floor(yin + s),
                    t = (i + j) * G2,
                    X0 = i - t,
                    Y0 = j - t,
                    x0 = xin - X0,
                    y0 = yin - Y0;
                x0 > y0 ? (i1 = 1, j1 = 0) : (i1 = 0, j1 = 1);
                var x1 = x0 - i1 + G2,
                    y1 = y0 - j1 + G2,
                    x2 = x0 - 1 + 2 * G2,
                    y2 = y0 - 1 + 2 * G2,
                    ii = 255 & i,
                    jj = 255 & j,
                    t0 = .5 - x0 * x0 - y0 * y0;
                if (t0 >= 0) {
                    var gi0 = 3 * permMod12[ii + perm[jj]];
                    t0 *= t0, n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0)
                }
                var t1 = .5 - x1 * x1 - y1 * y1;
                if (t1 >= 0) {
                    var gi1 = 3 * permMod12[ii + i1 + perm[jj + j1]];
                    t1 *= t1, n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1)
                }
                var t2 = .5 - x2 * x2 - y2 * y2;
                if (t2 >= 0) {
                    var gi2 = 3 * permMod12[ii + 1 + perm[jj + 1]];
                    t2 *= t2, n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2)
                }
                return 70 * (n0 + n1 + n2)
            },
            noise3D: function(xin, yin, zin) {
                var n0, n1, n2, n3, i1, j1, k1, i2, j2, k2, permMod12 = this.permMod12,
                    perm = this.perm,
                    grad3 = this.grad3,
                    s = (xin + yin + zin) * F3,
                    i = Math.floor(xin + s),
                    j = Math.floor(yin + s),
                    k = Math.floor(zin + s),
                    t = (i + j + k) * G3,
                    X0 = i - t,
                    Y0 = j - t,
                    Z0 = k - t,
                    x0 = xin - X0,
                    y0 = yin - Y0,
                    z0 = zin - Z0;
                x0 >= y0 ? y0 >= z0 ? (i1 = 1, j1 = 0, k1 = 0, i2 = 1, j2 = 1, k2 = 0) : x0 >= z0 ? (i1 = 1, j1 = 0, k1 = 0, i2 = 1, j2 = 0, k2 = 1) : (i1 = 0, j1 = 0, k1 = 1, i2 = 1, j2 = 0, k2 = 1) : z0 > y0 ? (i1 = 0, j1 = 0, k1 = 1, i2 = 0, j2 = 1, k2 = 1) : z0 > x0 ? (i1 = 0, j1 = 1, k1 = 0, i2 = 0, j2 = 1, k2 = 1) : (i1 = 0, j1 = 1, k1 = 0, i2 = 1, j2 = 1, k2 = 0);
                var x1 = x0 - i1 + G3,
                    y1 = y0 - j1 + G3,
                    z1 = z0 - k1 + G3,
                    x2 = x0 - i2 + 2 * G3,
                    y2 = y0 - j2 + 2 * G3,
                    z2 = z0 - k2 + 2 * G3,
                    x3 = x0 - 1 + 3 * G3,
                    y3 = y0 - 1 + 3 * G3,
                    z3 = z0 - 1 + 3 * G3,
                    ii = 255 & i,
                    jj = 255 & j,
                    kk = 255 & k,
                    t0 = .6 - x0 * x0 - y0 * y0 - z0 * z0;
                if (0 > t0) n0 = 0;
                else {
                    var gi0 = 3 * permMod12[ii + perm[jj + perm[kk]]];
                    t0 *= t0, n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0 + grad3[gi0 + 2] * z0)
                }
                var t1 = .6 - x1 * x1 - y1 * y1 - z1 * z1;
                if (0 > t1) n1 = 0;
                else {
                    var gi1 = 3 * permMod12[ii + i1 + perm[jj + j1 + perm[kk + k1]]];
                    t1 *= t1, n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1 + grad3[gi1 + 2] * z1)
                }
                var t2 = .6 - x2 * x2 - y2 * y2 - z2 * z2;
                if (0 > t2) n2 = 0;
                else {
                    var gi2 = 3 * permMod12[ii + i2 + perm[jj + j2 + perm[kk + k2]]];
                    t2 *= t2, n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2 + grad3[gi2 + 2] * z2)
                }
                var t3 = .6 - x3 * x3 - y3 * y3 - z3 * z3;
                if (0 > t3) n3 = 0;
                else {
                    var gi3 = 3 * permMod12[ii + 1 + perm[jj + 1 + perm[kk + 1]]];
                    t3 *= t3, n3 = t3 * t3 * (grad3[gi3] * x3 + grad3[gi3 + 1] * y3 + grad3[gi3 + 2] * z3)
                }
                return 32 * (n0 + n1 + n2 + n3)
            },
            noise4D: function(x, y, z, w) {
                var n0, n1, n2, n3, n4, perm = (this.permMod12, this.perm),
                    grad4 = this.grad4,
                    s = (x + y + z + w) * F4,
                    i = Math.floor(x + s),
                    j = Math.floor(y + s),
                    k = Math.floor(z + s),
                    l = Math.floor(w + s),
                    t = (i + j + k + l) * G4,
                    X0 = i - t,
                    Y0 = j - t,
                    Z0 = k - t,
                    W0 = l - t,
                    x0 = x - X0,
                    y0 = y - Y0,
                    z0 = z - Z0,
                    w0 = w - W0,
                    rankx = 0,
                    ranky = 0,
                    rankz = 0,
                    rankw = 0;
                x0 > y0 ? rankx++ : ranky++, x0 > z0 ? rankx++ : rankz++, x0 > w0 ? rankx++ : rankw++, y0 > z0 ? ranky++ : rankz++, y0 > w0 ? ranky++ : rankw++, z0 > w0 ? rankz++ : rankw++;
                var i1, j1, k1, l1, i2, j2, k2, l2, i3, j3, k3, l3;
                i1 = rankx >= 3 ? 1 : 0, j1 = ranky >= 3 ? 1 : 0, k1 = rankz >= 3 ? 1 : 0, l1 = rankw >= 3 ? 1 : 0, i2 = rankx >= 2 ? 1 : 0, j2 = ranky >= 2 ? 1 : 0, k2 = rankz >= 2 ? 1 : 0, l2 = rankw >= 2 ? 1 : 0, i3 = rankx >= 1 ? 1 : 0, j3 = ranky >= 1 ? 1 : 0, k3 = rankz >= 1 ? 1 : 0, l3 = rankw >= 1 ? 1 : 0;
                var x1 = x0 - i1 + G4,
                    y1 = y0 - j1 + G4,
                    z1 = z0 - k1 + G4,
                    w1 = w0 - l1 + G4,
                    x2 = x0 - i2 + 2 * G4,
                    y2 = y0 - j2 + 2 * G4,
                    z2 = z0 - k2 + 2 * G4,
                    w2 = w0 - l2 + 2 * G4,
                    x3 = x0 - i3 + 3 * G4,
                    y3 = y0 - j3 + 3 * G4,
                    z3 = z0 - k3 + 3 * G4,
                    w3 = w0 - l3 + 3 * G4,
                    x4 = x0 - 1 + 4 * G4,
                    y4 = y0 - 1 + 4 * G4,
                    z4 = z0 - 1 + 4 * G4,
                    w4 = w0 - 1 + 4 * G4,
                    ii = 255 & i,
                    jj = 255 & j,
                    kk = 255 & k,
                    ll = 255 & l,
                    t0 = .6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
                if (0 > t0) n0 = 0;
                else {
                    var gi0 = perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32 * 4;
                    t0 *= t0, n0 = t0 * t0 * (grad4[gi0] * x0 + grad4[gi0 + 1] * y0 + grad4[gi0 + 2] * z0 + grad4[gi0 + 3] * w0)
                }
                var t1 = .6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
                if (0 > t1) n1 = 0;
                else {
                    var gi1 = perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32 * 4;
                    t1 *= t1, n1 = t1 * t1 * (grad4[gi1] * x1 + grad4[gi1 + 1] * y1 + grad4[gi1 + 2] * z1 + grad4[gi1 + 3] * w1)
                }
                var t2 = .6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
                if (0 > t2) n2 = 0;
                else {
                    var gi2 = perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32 * 4;
                    t2 *= t2, n2 = t2 * t2 * (grad4[gi2] * x2 + grad4[gi2 + 1] * y2 + grad4[gi2 + 2] * z2 + grad4[gi2 + 3] * w2)
                }
                var t3 = .6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
                if (0 > t3) n3 = 0;
                else {
                    var gi3 = perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32 * 4;
                    t3 *= t3, n3 = t3 * t3 * (grad4[gi3] * x3 + grad4[gi3 + 1] * y3 + grad4[gi3 + 2] * z3 + grad4[gi3 + 3] * w3)
                }
                var t4 = .6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
                if (0 > t4) n4 = 0;
                else {
                    var gi4 = perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32 * 4;
                    t4 *= t4, n4 = t4 * t4 * (grad4[gi4] * x4 + grad4[gi4 + 1] * y4 + grad4[gi4 + 2] * z4 + grad4[gi4 + 3] * w4)
                }
                return 27 * (n0 + n1 + n2 + n3 + n4)
            }
        }, "undefined" != typeof define && define.amd && define(function() {
            return SimplexNoise
        }), "undefined" != typeof exports ? exports.SimplexNoise = SimplexNoise : "undefined" != typeof window && (window.SimplexNoise = SimplexNoise), "undefined" != typeof module && (module.exports = SimplexNoise)
    }();

// Typed array .fill polyfill
    if (typeof Uint16Array.prototype.fill !== 'function') {
        Uint16Array.prototype.fill = function(value) {
            var i = this.length;
            while (i--) {
                this[i] = value;
            }
        }
    }
</script>