HTML5 Canvas基于单纯形噪音算法的开罗五角贴砖特效

Cairo pentagonal tiling

h5, tile, noise

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/*
 * A speed-improved perlin and simplex noise algorithms for 2D.
 *
 * Based on example code by Stefan Gustavson (stegu@itn.liu.se).
 * Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
 * Better rank ordering method by Stefan Gustavson in 2012.
 * Converted to Javascript by Joseph Gentle.
 *
 * Version 2012-03-09
 *
 * This code was placed in the public domain by its original author,
 * Stefan Gustavson. You may use it as you see fit, but
 * attribution is appreciated.
 *https://github.com/josephg/noisejs
 */

(function(global) {
    var module = (global.noise = {});

function Grad(x, y, z) {
        this.x = x;
        this.y = y;
        this.z = z;
    }

Grad.prototype.dot2 = function(x, y) {
        return this.x * x + this.y * y;
    };

Grad.prototype.dot3 = function(x, y, z) {
        return this.x * x + this.y * y + this.z * z;
    };

var grad3 = [
        new Grad(1, 1, 0),
        new Grad(-1, 1, 0),
        new Grad(1, -1, 0),
        new Grad(-1, -1, 0),
        new Grad(1, 0, 1),
        new Grad(-1, 0, 1),
        new Grad(1, 0, -1),
        new Grad(-1, 0, -1),
        new Grad(0, 1, 1),
        new Grad(0, -1, 1),
        new Grad(0, 1, -1),
        new Grad(0, -1, -1)
    ];

var p = [151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180];
    // To remove the need for index wrapping, double the permutation table length
    var perm = new Array(512);
    var gradP = new Array(512);

// This isn't a very good seeding function, but it works ok. It supports 2^16
    // different seed values. Write something better if you need more seeds.
    module.seed = function(seed) {
        if (seed > 0 && seed < 1) {
            // Scale the seed out
            seed *= 65536;
        }

seed = Math.floor(seed);
        if (seed < 256) {
            seed |= seed << 8;
        }

for (var i = 0; i < 256; i++) {
            var v;
            if (i & 1) {
                v = p[i] ^ (seed & 255);
            } else {
                v = p[i] ^ ((seed >> 8) & 255);
            }

perm[i] = perm[i + 256] = v;
            gradP[i] = gradP[i + 256] = grad3[v % 12];
        }
    };

module.seed(0);

// ##### Perlin noise stuff

function fade(t) {
        return t * t * t * (t * (t * 6 - 15) + 10);
    }

function lerp(a, b, t) {
        return (1 - t) * a + t * b;
    }

// 2D Perlin Noise
    module.perlin2 = function(x, y) {
        // Find unit grid cell containing point
        var X = Math.floor(x),
            Y = Math.floor(y);
        // Get relative xy coordinates of point within that cell
        x = x - X;
        y = y - Y;
        // Wrap the integer cells at 255 (smaller integer period can be introduced here)
        X = X & 255;
        Y = Y & 255;

// Calculate noise contributions from each of the four corners
        var n00 = gradP[X + perm[Y]].dot2(x, y);
        var n01 = gradP[X + perm[Y + 1]].dot2(x, y - 1);
        var n10 = gradP[X + 1 + perm[Y]].dot2(x - 1, y);
        var n11 = gradP[X + 1 + perm[Y + 1]].dot2(x - 1, y - 1);

// Compute the fade curve value for x
        var u = fade(x);

// Interpolate the four results
        return lerp(lerp(n00, n10, u), lerp(n01, n11, u), fade(y));
    };
})(this);

//////////////////////////////////////////////////

var Cairo = function(ctx, count) {
    count = count || 30;

var w = ctx.canvas.width;
    var h = ctx.canvas.height;
    var cell = Math.min(w, h) / count;

this.update = function(dx, dy, scale, multiplier) {
        dx = dx || 0;
        dy = dy || 0;
        ctx.beginPath();
        for (var i = 0; i < w; i += cell) {
            for (var j = 0; j < h; j += cell) {
                splitQuad(
                    i,
                    j,
                    cell,
                    Math.abs(noise.perlin2(i * scale + dx, j * scale + dy) * multiplier)
                );
            }
        }
        ctx.stroke();
    };

var lattice = new Point();
    var p0 = new Point();
    var p1 = new Point();
    var p2 = new Point();
    var p3 = new Point();

function splitQuad(x, y, c, t) {
        var cx = x + c * 0.5;
        var cy = y + c * 0.5;

var axis_v = [new Point(cx, y), new Point(cx, y + c)];
        var axis_h = [new Point(x, cy), new Point(x + c, cy)];

lattice.set(cx, y);
        p0.set(0, 0);
        p1.set(c / 2 * t, 0);
        p2.set(c / 2 * (1 - t), c / 2);
        p3.set(c / 2, c / 2);

var line = [p0, p1, p2, p3];
        line.forEach(function(p) {
            p.add(lattice);
        });
        symmetries(line, axis_h, axis_v);

var pivot = new Point(cx + c / 4, cy + c / 4);
        line.forEach(function(p) {
            p.copy(rotate(p, pivot, PI / 2));
        });
        symmetries(line, axis_h, axis_v);
    }

function render(l) {
        ctx.moveTo(l[0].x, l[0].y);
        l.forEach(function(p) {
            ctx.lineTo(p.x, p.y);
        });
    }

function distance(a, b) {
        var dx = a.x - b.x;
        var dy = a.y - b.y;
        return Math.sqrt(dx * dx + dy * dy);
    }

function angle(a, b) {
        var dx = a.x - b.x;
        var dy = a.y - b.y;
        return Math.atan2(dy, dx);
    }

function rotate(p, lattice, angleDelta) {
        var a = angle(lattice, p) + angleDelta;
        var d = distance(lattice, p);

var pp = new Point();
        pp.x = lattice.x + Math.cos(a) * d;
        pp.y = lattice.y + Math.sin(a) * d;
        return pp;
    }

function reflect(p, a, b) {
        var dx = b.x - a.x;
        var dy = b.y - a.y;
        var t = ((p.x - a.x) * dx + (p.y - a.y) * dy) / (dx * dx + dy * dy);
        var pp = new Point(a.x + t * dx, a.y + t * dy);
        return new Point(p.x + (pp.x - p.x) * 2, p.y + (pp.y - p.y) * 2);
    }
};

var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var w = (canvas.width = window.innerWidth);
var h = (canvas.height = window.innerHeight);
var ctx = canvas.getContext("2d");
var PI = Math.PI;

var cairo = new Cairo(ctx, 20);

function update() {
    requestAnimationFrame(update);

ctx.clearRect(0, 0, w, h);
    var t = Date.now() * 0.001;
    cairo.update(t, Math.sin(t), 0.001, 2);
}
window.onload = function() {
    update();
}

编译

CSS

HTML

Cairo pentagonal tiling

h5, tile, noise

编辑器支持Emmet

快捷键

Cairo pentagonal tiling

h5, tile, noise

HTML5 Canvas滤镜特效示例 - 带模糊光晕背景的五角星粒子动画

HTML5 Canvas炫酷的线条分形动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：