Perlin noise 液体流动图 | 热力图 | 分裂融合动画模拟

Perlin noise Mitosis Simulation 还包括一个配套的P5.js视频教程，需要能访问youtube

canvas, math

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var c = {}
var cw = canvas.width = 400;
c.x = cw / 2;
var ch = canvas.height = 400;
c.y = ch / 2;
ctx.fillStyle = "#fff";
ctx.strokeStyle = "#fff";
var rad = Math.PI / 180;
var fps = 60; // frames per second
var rid = false;
var sid = false;
var xoff = 29,
    yoff = 27,
    zoff = 0;
var increment = .01;

var frames = 0;

var imgData = ctx.createImageData(cw, ch);
var pixels = imgData.data;

function Draw() {
    sid = setTimeout(function() {
        rid = window.requestAnimationFrame(Draw);
        frames++;
    }, 1000 / fps);
    zoff += 0.01;

yoff = 0;
    for (var y = 0; y < imgData.height; y++) {

xoff = 0;
        for (var x = 0; x < imgData.width; x++) {

var i = (x + y * cw) * 4;

//  noiseDetail(4,.5);//default
            noiseDetail(2, .7);

pixels[i + 0] = r;
            pixels[i + 1] = g;
            pixels[i + 2] = b;
            pixels[i + 3] = 255;

xoff += increment;

}

yoff += increment;

}
    ctx.putImageData(imgData, 0, 0);

}

requestId = window.requestAnimationFrame(Draw);

function map(n, a, b, _a, _b) {
    var d = b - a;
    var _d = _b - _a;
    var u = _d / d;
    return _a + n * u;
}

编译

CSS

HTML

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {
        var lastTime = 0;
        var vendors = ['ms', 'moz', 'webkit', 'o'];
        for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
            window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
        }

if (!window.requestAnimationFrame)
            window.requestAnimationFrame = function(callback, element) {
                var currTime = new Date().getTime();
                var timeToCall = Math.max(0, 16 - (currTime - lastTime));
                var id = window.setTimeout(function() {
                        callback(currTime + timeToCall);
                    },
                    timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            };

if (!window.cancelAnimationFrame)
            window.cancelAnimationFrame = function(id) {
                clearTimeout(id);
            };
    }());
    // ends requestAnimationFrame polyfill
</script>
<script>
    var PERLIN_YWRAPB = 4;
    var PERLIN_YWRAP = 1 << PERLIN_YWRAPB;
    var PERLIN_ZWRAPB = 8;
    var PERLIN_ZWRAP = 1 << PERLIN_ZWRAPB;
    var PERLIN_SIZE = 4095;

var perlin_octaves = 4; // default to medium smooth
    var perlin_amp_falloff = 0.5; // 50% reduction/octave

var scaled_cosine = function(i) {
        return 0.5 * (1.0 - Math.cos(i * Math.PI));
    };

var perlin; // will be initialized lazily by noise() or noiseSeed()

function noise(x, y, z) {
        y = y || 0;
        z = z || 0;

if (perlin == null) {
            perlin = new Array(PERLIN_SIZE + 1);
            for (var i = 0; i < PERLIN_SIZE + 1; i++) {
                perlin[i] = Math.random();
            }
        }

if (x < 0) {
            x = -x;
        }
        if (y < 0) {
            y = -y;
        }
        if (z < 0) {
            z = -z;
        }

var xi = Math.floor(x),
            yi = Math.floor(y),
            zi = Math.floor(z);
        var xf = x - xi;
        var yf = y - yi;
        var zf = z - zi;
        var rxf, ryf;

var r = 0;
        var ampl = 0.5;

var n1, n2, n3;

for (var o = 0; o < perlin_octaves; o++) {
            var of = xi + (yi << PERLIN_YWRAPB) + (zi << PERLIN_ZWRAPB);

rxf = scaled_cosine(xf);
            ryf = scaled_cosine(yf);

n1 = perlin[of & PERLIN_SIZE];
            n1 += rxf * (perlin[(of + 1) & PERLIN_SIZE] - n1);
            n2 = perlin[(of + PERLIN_YWRAP) & PERLIN_SIZE];
            n2 += rxf * (perlin[(of + PERLIN_YWRAP + 1) & PERLIN_SIZE] - n2);
            n1 += ryf * (n2 - n1);

of += PERLIN_ZWRAP;
            n2 = perlin[of & PERLIN_SIZE];
            n2 += rxf * (perlin[(of + 1) & PERLIN_SIZE] - n2);
            n3 = perlin[(of + PERLIN_YWRAP) & PERLIN_SIZE];
            n3 += rxf * (perlin[(of + PERLIN_YWRAP + 1) & PERLIN_SIZE] - n3);
            n2 += ryf * (n3 - n2);

n1 += scaled_cosine(zf) * (n2 - n1);

r += n1 * ampl;
            ampl *= perlin_amp_falloff;
            xi <<= 1;
            xf *= 2;
            yi <<= 1;
            yf *= 2;
            zi <<= 1;
            zf *= 2;

if (xf >= 1.0) {
                xi++;
                xf--;
            }
            if (yf >= 1.0) {
                yi++;
                yf--;
            }
            if (zf >= 1.0) {
                zi++;
                zf--;
            }
        }
        return r;
    };

lcg.setSeed(seed);
        perlin = new Array(PERLIN_SIZE + 1);
        for (var i = 0; i < PERLIN_SIZE + 1; i++) {
            perlin[i] = lcg.rand();
        }
    };
</script>

function Draw() {
        sid = setTimeout(function() {
            rid = window.requestAnimationFrame(Draw);
            frames++;
        }, 1000 / fps);
        zoff += 0.01;
        yoff = 0;
        for (var y = 0; y < imgData.height; y++) {

xoff = 0;
            for (var x = 0; x < imgData.width; x++) {

var i = (x + y * cw) * 4;

//  noiseDetail(4,.5);//default
                noiseDetail(2, .9);

pixels[i + 0] = r;
                pixels[i + 1] = g;
                pixels[i + 2] = b;
                pixels[i + 3] = 255;
                xoff += increment;
            }

yoff += increment;
        }
        ctx.putImageData(imgData, 0, 0);
    }

requestId = window.requestAnimationFrame(Draw);

function map(n, a, b, _a, _b) {
        var d = b - a;
        var _d = _b - _a;
        var u = _d / d;
        return _a + n * u;
    }
</script>

Perlin noise Mitosis Simulation 还包括一个配套的P5.js视频教程，需要能访问youtube

canvas, math

编辑器支持Emmet

快捷键

Perlin noise Mitosis Simulation 还包括一个配套的P5.js视频教程，需要能访问youtube

canvas, math

使用Perlin.js和Vector2.js实现的粒子流动画

HTML5 Perlin.js粒子游走万花筒动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：