SmallPRNG 使用柏林噪音算法模拟泥泞的水洼

Perlin Plasma Puddle 有水洼波光粼粼的那种特效。

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

(function(target, name) {
    // maximum randval for .random([max/min [, max]])
    var RMAX = 0x7FFFFFFF;

var floor = Math.floor,
        abs = Math.abs;

// 32-bits rotate
    var rot = function(x, k) {
        return (((x << k) & 0xffffffff) | (x >>> (32 - k))) >>> 0;
    };

// constructor for the context
    var SmallPRNG = function(seed) {
        this.a = 0xf1ea5eed;
        this.b = seed;
        this.c = seed;
        this.d = seed;
        this.s = 0;
    };

// reseed the context
    SmallPRNG.prototype.seed = function(seed) {
        this.a = 0xf1ea5eed;
        this.b = seed;
        this.c = seed;
        this.d = seed;
        this.s = 0;
    };

// reseed the context b, c and d fields
    SmallPRNG.prototype.seedAll = function(b, c, d) {
        this.a = 0xf1ea5eed;
        this.b = b;
        this.c = c;
        this.d = d;
        this.s = 0;
    };

// get the next randval in the ctx
    SmallPRNG.prototype.randval = function() {
        // notice the >>>0, which is to get an unsigned integer.
        var e = ((this.a - rot(this.b, 27)) & 0xffffffff) >>> 0;
        this.a = ((this.b ^ rot(this.c, 17)) & 0xffffffff) >>> 0;
        this.b = ((this.c + this.d) & 0xffffffff) >>> 0;
        this.c = ((this.d + e) & 0xffffffff) >>> 0;
        this.d = ((e + this.a) & 0xffffffff) >>> 0;
        this.s++;
        return this.d;
    };

// step `times' times in the CTX
    SmallPRNG.prototype.step = function(times) {
        times = (typeof(times) === "number" ? times : 1);
        if (times === 0) {
            times = 1;
        }

for (var i = 0; i < times; i++) {
            var e = ((this.a - rot(this.b, 27)) & 0xffffffff) >>> 0;
            this.a = ((this.b ^ rot(this.c, 17)) & 0xffffffff) >>> 0;
            this.b = ((this.c + this.d) & 0xffffffff) >>> 0;
            this.c = ((this.d + e) & 0xffffffff) >>> 0;
            this.d = ((e + this.a) & 0xffffffff) >>> 0;
            this.s++;
        }
    };

SmallPRNG.prototype.random = function() {
        var r = ((this.randval() % RMAX) / RMAX);
        switch (arguments.length) {
            // zero arguments, return the 0-1 random factor
            case 0:
                {
                    return r;
                }
                break;

// 1 argument (max val), return random between 1 and max
            case 1:
                {
                    var u = arguments[0];
                    if (u < 1) {
                        console.log("upper limit invalid");
                        return null;
                    }

return (floor(r * u) + 1);

}
                break;

// 2 arguments (min, max val), return random between min and max
            case 2:
                {
                    var l = arguments[0];
                    var u = arguments[1];

if (l >= u) {
                        console.log("upper limit invalid");
                        return null;
                    }

return (floor(r * (u - l + 1)) + l);
                }
                break;

default:
                {
                    console.log("invalid amount of arguments");
                }
                break;
        }

return null;
    };

target[name] = SmallPRNG;
}(window, "SmallPRNG"));

/*
  jQuery was only used to set up a quick
  interface. Don't be mad :(
  
  This code is not required, use the lib
  above if you really really want to use
  this junk.
*/
$(function() {
    var rctx = new SmallPRNG(1337);
    var $seedField = $('input[name="seed"]');
    var $timeSeed = $('input[name="time"]');
    var $min = $('input[name="min"]');
    var $max = $('input[name="max"]');
    var $rval = $('input[name="rval"]');
    var $rmax = $('input[name="rmax"]');
    var $rmm = $('input[name="rmm"]');
    var $stp = $('#stepper');

$timeSeed.click(function() {
        var time = (new Date()).getTime();
        $seedField.val(time);
        rctx = new SmallPRNG(+time);
        return false;
    });

$seedField.change(function() {
        rctx = new SmallPRNG(+$(this).val());
        return false;
    });

var dumpCTX = function(r) {
        if (r) {
            $("#rr").text(r);
        }
        $("#ra").text(rctx.a);
        $("#rb").text(rctx.b);
        $("#rc").text(rctx.c);
        $("#rd").text(rctx.d);
        $("#rs").text(rctx.s);
    };

$rval.click(function() {
        var r = rctx.randval();
        dumpCTX(r);
        return false;
    });

$rmax.click(function() {
        var max = +$max.val();
        var r = rctx.random(max);
        dumpCTX(r);
        return false;
    });

$rmm.click(function() {
        var min = +$min.val();
        var max = +$max.val();
        var r = rctx.random(min, max);
        dumpCTX(r);
        return false;
    });

$stp.click(function() {
        rctx.step();
        dumpCTX();
        return false;
    });

$rval.click();
});

+ (function(root) {
    'use strict';
    var Vector3D = function Vector3D(x, y, z) {
            this.set(x, y, z);
        },
        v3dp = Vector3D.prototype;

v3dp.dot3d = function(x, y, z) {
        return ((this.x * x) + (this.y * y) + (this.z * z));
    };

v3dp.set = function(x, y, z) {
        this.x = x;
        this.y = y;
        this.z = z;

return this;
    };

root.Vector3D = Vector3D;
}(window));

+ (function(root) {
    'use strict';
    // a simple non-optimized Perlin Simplex Noise. I wrote this
    // to understand Simplex Noise a bit more.

// fully self-contained state, so you can influence the outcome
    // of each simplex noise state
    var Perlin = function Perlin() {
            this.grad3 = [
                new Vector3D(1, 1, 0), new Vector3D(-1, 1, 0), new Vector3D(1, -1, 0), new Vector3D(-1, -1, 0),
                new Vector3D(1, 0, 1), new Vector3D(-1, 0, 1), new Vector3D(1, 0, -1), new Vector3D(-1, 0, -1),
                new Vector3D(0, 1, 1), new Vector3D(0, -1, 1), new Vector3D(0, 1, -1), new Vector3D(0, -1, -1)
            ];

this.p = [
                0x97, 0xa0, 0x89, 0x5b, 0x5a, 0x0f, 0x83, 0x0d, 0xc9, 0x5f, 0x60, 0x35, 0xc2, 0xe9, 0x07, 0xe1,
                0x8c, 0x24, 0x67, 0x1e, 0x45, 0x8e, 0x08, 0x63, 0x25, 0xf0, 0x15, 0x0a, 0x17, 0xbe, 0x06, 0x94,
                0xf7, 0x78, 0xea, 0x4b, 0x00, 0x1a, 0xc5, 0x3e, 0x5e, 0xfc, 0xdb, 0xcb, 0x75, 0x23, 0x0b, 0x20,
                0x39, 0xb1, 0x21, 0x58, 0xed, 0x95, 0x38, 0x57, 0xae, 0x14, 0x7d, 0x88, 0xab, 0xa8, 0x44, 0xaf,
                0x4a, 0xa5, 0x47, 0x86, 0x8b, 0x30, 0x1b, 0xa6, 0x4d, 0x92, 0x9e, 0xe7, 0x53, 0x6f, 0xe5, 0x7a,
                0x3c, 0xd3, 0x85, 0xe6, 0xdc, 0x69, 0x5c, 0x29, 0x37, 0x2e, 0xf5, 0x28, 0xf4, 0x66, 0x8f, 0x36,
                0x41, 0x19, 0x3f, 0xa1, 0x01, 0xd8, 0x50, 0x49, 0xd1, 0x4c, 0x84, 0xbb, 0xd0, 0x59, 0x12, 0xa9,
                0xc8, 0xc4, 0x87, 0x82, 0x74, 0xbc, 0x9f, 0x56, 0xa4, 0x64, 0x6d, 0xc6, 0xad, 0xba, 0x03, 0x40,
                0x34, 0xd9, 0xe2, 0xfa, 0x7c, 0x7b, 0x05, 0xca, 0x26, 0x93, 0x76, 0x7e, 0xff, 0x52, 0x55, 0xd4,
                0xcf, 0xce, 0x3b, 0xe3, 0x2f, 0x10, 0x3a, 0x11, 0xb6, 0xbd, 0x1c, 0x2a, 0xdf, 0xb7, 0xaa, 0xd5,
                0x77, 0xf8, 0x98, 0x02, 0x2c, 0x9a, 0xa3, 0x46, 0xdd, 0x99, 0x65, 0x9b, 0xa7, 0x2b, 0xac, 0x09,
                0x81, 0x16, 0x27, 0xfd, 0x13, 0x62, 0x6c, 0x6e, 0x4f, 0x71, 0xe0, 0xe8, 0xb2, 0xb9, 0x70, 0x68,
                0xda, 0xf6, 0x61, 0xe4, 0xfb, 0x22, 0xf2, 0xc1, 0xee, 0xd2, 0x90, 0x0c, 0xbf, 0xb3, 0xa2, 0xf1,
                0x51, 0x33, 0x91, 0xeb, 0xf9, 0x0e, 0xef, 0x6b, 0x31, 0xc0, 0xd6, 0x1f, 0xb5, 0xc7, 0x6a, 0x9d,
                0xb8, 0x54, 0xcc, 0xb0, 0x73, 0x79, 0x32, 0x2d, 0x7f, 0x04, 0x96, 0xfe, 0x8a, 0xec, 0xcd, 0x5d,
                0xde, 0x72, 0x43, 0x1d, 0x18, 0x48, 0xf3, 0x8d, 0x80, 0xc3, 0x4e, 0x42, 0xd7, 0x3d, 0x9c, 0xb4
            ];

this.permutation = new Array(512);
            this.gradP = new Array(512);

// skew and unskew factors for 2D or 3D, can be modified per state!
            this.F3 = (1 / 3);
            this.G3 = (1 / 6);
        },
        pp = Perlin.prototype;

pp.init = function(prng) {
        if (typeof prng !== "function") {
            throw new TypeError("prng needs to be a function returning an int between 0 and 255");
        }

for (var i = 0; i < 256; i += 1) {
            var randval = (this.p[i] ^ prng());
            this.permutation[i] = this.permutation[i + 256] = randval;
            this.gradP[i] = this.gradP[i + 256] = this.grad3[randval % this.grad3.length];
        }
    };

// I removed the pp.simplex2d function, because I don't need it in this project
    // pp.simplex2d = function(x, y) {};

pp.simplex3d = function(x, y, z) {
        var n0, n1, n2, n3, i1, j1, k1, i2, j2, k2,
            x1, y1, z1, x2, y2, z2, x3, y3, z3,
            gi0, gi1, gi2, gi3, t0, t1, t2, t3,
            s = ((x + y + z) * this.F3),
            i = Math.floor(x + s),
            j = Math.floor(y + s),
            k = Math.floor(z + s),
            t = ((i + j + k) * this.G3),
            x0 = (x - i + t),
            y0 = (y - j + t),
            z0 = (z - k + t);

if (x0 >= y0) {
            if (y0 >= z0) {
                i1 = 1;
                j1 = 0;
                k1 = 0;
                i2 = 1;
                j2 = 1;
                k2 = 0;
            } else if (x0 >= z0) {
                i1 = 1;
                j1 = 0;
                k1 = 0;
                i2 = 1;
                j2 = 0;
                k2 = 1;
            } else {
                i1 = 0;
                j1 = 0;
                k1 = 1;
                i2 = 1;
                j2 = 0;
                k2 = 1;
            }
        } else {
            if (y0 < z0) {
                i1 = 0;
                j1 = 0;
                k1 = 1;
                i2 = 0;
                j2 = 1;
                k2 = 1;
            } else if (x0 < z0) {
                i1 = 0;
                j1 = 1;
                k1 = 0;
                i2 = 0;
                j2 = 1;
                k2 = 1;
            } else {
                i1 = 0;
                j1 = 1;
                k1 = 0;
                i2 = 1;
                j2 = 1;
                k2 = 0;
            }
        }

x1 = (x0 - i1 + this.G3), y1 = (y0 - j1 + this.G3), z1 = (z0 - k1 + this.G3);
        x2 = (x0 - i2 + 2 * this.G3), y2 = (y0 - j2 + 2 * this.G3), z2 = (z0 - k2 + 2 * this.G3);
        x3 = (x0 - 1 + 3 * this.G3), y3 = (y0 - 1 + 3 * this.G3), z3 = (z0 - 1 + 3 * this.G3);

i &= 255, j &= 255, k &= 255;

gi0 = this.gradP[i + this.permutation[j + this.permutation[k]]];
        gi1 = this.gradP[i + i1 + this.permutation[j + j1 + this.permutation[k + k1]]];
        gi2 = this.gradP[i + i2 + this.permutation[j + j2 + this.permutation[k + k2]]];
        gi3 = this.gradP[i + 1 + this.permutation[j + 1 + this.permutation[k + 1]]];

t0 = (0.6 - x0 * x0 - y0 * y0 - z0 * z0);
        t1 = (0.6 - x1 * x1 - y1 * y1 - z1 * z1);
        t2 = (0.6 - x2 * x2 - y2 * y2 - z2 * z2);
        t3 = (0.6 - x3 * x3 - y3 * y3 - z3 * z3);
        n0 = (t0 < 0 ? 0 : (t0 *= t0, t0 * t0 * gi0.dot3d(x0, y0, z0)));
        n1 = (t1 < 0 ? 0 : (t1 *= t1, t1 * t1 * gi1.dot3d(x1, y1, z1)));
        n2 = (t2 < 0 ? 0 : (t2 *= t2, t2 * t2 * gi2.dot3d(x2, y2, z2)));
        n3 = (t3 < 0 ? 0 : (t3 *= t3, t3 * t3 * gi3.dot3d(x3, y3, z3)));

return (32 * (n0 + n1 + n2 + n3));
    };

root.Perlin = Perlin;
}(window));

+ (function(root) {
    'use strict';

root.hslaToRgba = function(h, s, l, a) {
        var rgba = {},
            v, q, p, hsl = {
                h: (h % 360) / 360,
                s: (s % 101) / 100,
                l: (l % 101) / 100,
                a: a
            };

if (hsl.s === 0) {
            v = Math.round(255 * hsl.l);
            rgba = {
                r: v,
                g: v,
                b: v,
                a: hsl.a
            };
        } else {
            q = hsl.l < 0.5 ? hsl.l * (1 + hsl.s) : hsl.l + hsl.s - hsl.l * hsl.s;
            p = 2 * hsl.l - q;
            rgba.r = parseInt((hueToRgb(p, q, hsl.h + 1 / 3) * 256).toFixed(0), 10);
            rgba.g = parseInt((hueToRgb(p, q, hsl.h) * 256).toFixed(0), 10);
            rgba.b = parseInt((hueToRgb(p, q, hsl.h - 1 / 3) * 256).toFixed(0), 10);
            rgba.a = hsl.a;
        }

return rgba;
    };
}(window));

Math.clamp = function(value, min, max) {
    return Math.min(Math.max(value, 0), max);
};

window.addEventListener('load', function() {
    var rctx = new SmallPRNG(+new Date()),
        p = new Perlin(),
        canvas = document.getElementById("animation"),
        context = canvas.getContext("2d"),
        rmin = -1,
        rmax = 1,
        hue = 0,
        width = 400,
        height = 400;

p.init(function() {
        return rctx.random(0, 255);
    });

+ (function animation() {
        requestAnimFrame(animation);

hue += 0.15;

context.fillStyle = 'rgba(0, 0, 0, 0.5)';
        context.fillRect(0, 0, width, height);

var w = width,
            h = height,
            d = context.getImageData(0, 0, w, h),
            dd32 = new Uint32Array(d.data.buffer),
            dd = d.data,
            time = (new Date().getTime()),
            speed = .0005,
            z = time * speed,
            rgb = hslaToRgba(hue, 75, 50),
            r = rgb.r,
            g = rgb.g,
            b = rgb.b;

for (var i = 0; i < dd32.length; i += 1) {
            var x = (i % w),
                y = Math.floor(i / w),
                xx = (x * .020),
                yy = (y * .020),
                n = p.simplex3d(xx, yy, z),
                nn = ((n - rmin) / (rmax - rmin));

nn = Math.abs(nn - .5);
            var f = ((255 - Math.clamp(nn * 4096, 0, 255))) / 255;
            if (f > .1) {
                dd32[i] = ((f * r) | ((f * g) << 8) | ((f * b) << 16) | (255 << 24));
            }
        }

context.putImageData(d, 0, 0);
    }());
});

编译

CSS

HTML

Perlin Plasma Puddle 有水洼波光粼粼的那种特效。

编辑器支持Emmet

快捷键

Perlin Plasma Puddle 有水洼波光粼粼的那种特效。

原生WebGL单纯形噪音（simplex noise）算法生成的粒子特效

WebGL Three.js使用噪音算法实现的3D空间乱流动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：