实时Delaunay三角剖分动画

鼠标停留在低多边形背景图案上会高亮附近区域的三角形。

HTML5, 图形学

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';
var q = "undefined" != typeof window && window === this ? this : "undefined" != typeof global ? global : this;

function u(n, c) {
    function b() {}

b.prototype = c.prototype;
    n.prototype = new b;
    n.prototype.constructor = n;
    for (var a in c)
        if (q.Object.defineProperties) {
            var r = q.Object.getOwnPropertyDescriptor(c, a);
            void 0 !== r && q.Object.defineProperty(n, a, r)
        } else n[a] = c[a]
}
var v;
(function(n) {
    function c(b) {
        this.f = b = void 0 === b ? [0, 0, 0] : b
    }

c.prototype.toString = function() {
        return this.f.join(", ")
    };
    c.prototype.add = function(b) {
        return new c([this.x + b.x, this.y + b.y, this.z + b.z])
    };
    c.prototype.v = function(b) {
        return new c([this.x - b.x, this.y - b.y, this.z - b.z])
    };
    c.prototype.B = function(b) {
        var a = new c;
        a.x = 0 == this.x ? 0 : this.x / b;
        a.y = 0 == this.y ? 0 : this.y / b;
        a.z = 0 == this.z ? 0 : this.z / b;
        return a
    };
    c.prototype.N = function(b) {
        var a = new c;
        a.x = 0 == this.x ? 0 : this.x * b;
        a.y = 0 == this.y ? 0 : this.y * b;
        a.z = 0 == this.z ? 0 : this.z * b;
        return a
    };
    c.prototype.O = function(b) {
        var a = new c;
        a.x = this.x * b.x;
        a.y = this.y * b.y;
        a.z = this.z * b.z;
        return a
    };
    c.prototype.L = function(b) {
        var a = new c;
        a.x = this.y * b.z - this.z * b.y;
        a.y = this.z * b.x - this.x * b.z;
        a.z = this.x * b.y - this.y * b.x;
        return a
    };
    c.prototype.a = function() {
        return this.x * this.x + this.y * this.y + this.z * this.z
    };
    c.prototype.length = function() {
        return Math.sqrt(this.a())
    };
    c.prototype.normalize = function() {
        return this.B(this.length())
    };
    c.prototype.M = function(b) {
        return this.x * b.x + this.y * b.y + this.z * b.z
    };
    c.prototype.min = function(b) {
        var a = new c;
        a.x = this.x < b.x ? this.x : b.x;
        a.y = this.y < b.y ? this.y : b.y;
        a.z = this.z < b.z ? this.z : b.z;
        return a
    };
    c.prototype.max = function(b) {
        var a = new c;
        a.x = this.x > b.x ? this.x : b.x;
        a.y = this.y > b.y ? this.y : b.y;
        a.z = this.z > b.z ? this.z : b.z;
        return a
    };
    Object.defineProperties(c.prototype, {
        x: {
            configurable: !0,
            enumerable: !0,
            set: function(b) {
                this.f[0] = b
            },
            get: function() {
                return this.f[0]
            }
        },
        y: {
            configurable: !0,
            enumerable: !0,
            set: function(b) {
                this.f[1] = b
            },
            get: function() {
                return this.f[1]
            }
        },
        z: {
            configurable: !0,
            enumerable: !0,
            set: function(b) {
                this.f[2] = b
            },
            get: function() {
                return this.f[2]
            }
        }
    });
    n.h = c
})(v || (v = {}));
var w;
(function(n) {
    function c(a) {
        var c = a.length,
            e, f, h, d, l, m, p, k, g;
        if (3 > c) this.C = [];
        else {
            a = a.slice(0);
            h = Array(c);
            for (e = c; e--;) h[e] = e;
            h.sort(function(d, b) {
                return a[b][0] - a[d][0]
            });
            e = this.g(a);
            a.push(e[0], e[1], e[2]);
            d = [this.a(a, c + 0, c + 1, c + 2)];
            l = [];
            m = [];
            for (e = h.length; e--; m.length = 0) {
                g = h[e];
                for (f = d.length; f--;) p = a[g][0] - d[f].x, 0 < p && p * p > d[f].r ? (l.push(d[f]), d.splice(f, 1)) : (k = a[g][1] - d[f].y, p * p + k * k - d[f].r > b || (m.push(d[f].i, d[f].j, d[f].j, d[f].k, d[f].k, d[f].i), d.splice(f, 1)));
                this.c(m);
                for (f = m.length; f;) k = m[--f],
                    p = m[--f], d.push(this.a(a, p, k, g))
            }
            for (e = d.length; e--;) l.push(d[e]);
            d.length = 0;
            for (e = l.length; e--;) l[e].i < c && l[e].j < c && l[e].k < c && d.push(l[e].i, l[e].j, l[e].k);
            this.C = d
        }
    }

function b() {}

function a() {}

function e() {
        var a = this;
        this.a = new v.h([this.o / 2, this.g / 2, 1.2]);
        self.addEventListener("mousemove", function(b) {
            a.a.x = b.pageX;
            a.a.y = b.pageY
        })
    }

function f(a) {
        this.l = new v.h(a)
    }

function h(b, c, m, h) {
        function k() {
            e.a.I() && e.a.A();
            if (0 == n || n != e.b.offsetWidth + e.b.offsetHeight) n = e.b.offsetWidth + e.b.offsetHeight, g(), e.a.A();
            requestAnimationFrame(k)
        }

function g() {
            e.g();
            e.a = new r(e.b.offsetWidth, e.b.offsetHeight, e.c, new f(m), new f(c));
            b.appendChild(a.a(e.a.c.map(function(a) {
                return a.b
            }), e.b.offsetWidth, e.b.offsetHeight))
        }

var e = this;
        this.b = b;
        this.c = h;
        g();
        var n = 0;
        requestAnimationFrame(k)
    }

h.prototype.g = function() {
        for (var a = this.b.childNodes.length - 1; 0 <= a; a--) this.b.removeChild(this.b.childNodes[a])
    };
    n.F = h;
    f.prototype.H = function(a, b, c) {
        var e = new v.h(this.l.f);
        return new f(e.add(a.l.O(b.l).N(c)).f.map(function(a) {
            return Math.ceil(a)
        }))
    };
    f.prototype.toString = function() {
        return "rgb(" + this.l.toString() + ")"
    };
    e.prototype.A = function() {
        for (var a = 0; a < this.c.length; a++) {
            var b = this.c[a],
                c;
            a: switch (c = b.P.M(this.a.v(b.K).normalize()), b.face) {
                case 1:
                    c = .99 * Math.abs(Math.min(c, 0));
                    break a;
                case 2:
                    c = .89 * Math.max(Math.abs(c), 0);
                    break a;
                default:
                    c = .85 * Math.abs(c)
            }
            c = b.m.H(this.s, this.u, c);
            b.b.setAttributeNS(null, "style", "fill: " + c.toString() + "; stroke: " + c.toString() + ";")
        }
    };
    u(r, e);
    r.prototype.I = function() {
        return this.R != this.a.x + this.a.y ? (this.R = this.a.x + this.a.y, !0) : !1
    };
    a.prototype.s = function() {
        return document.createElementNS("http://www.w3.org/2000/svg", "polygon")
    };
    a.prototype.c = function(a, b) {
        Object.keys(b).forEach(function(c) {
            a.setAttributeNS(null, c, b[c])
        });
        return a
    };
    a.a = function(a, b, c) {
        var e = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
            f = document.createElementNS("http://www.w3.org/2000/svg", "g");
        e.setAttributeNS(null, "viewBox", "0 0 " + b + " " + c);
        e.appendChild(f);
        a.forEach(function(a) {
            f.appendChild(a)
        });
        return e
    };
    u(b, a);
    b.a = a.a;
    b.prototype.u = function() {
        return this.c(this.s(), {
            "stroke-linejoin": "round",
            "stroke-miterlimit": "1",
            "stroke-width": "1",
            points: this.a.map(function(a) {
                return a.x + " " + a.y
            }).join(" "),
            style: "fill: " + this.m.toString() + "; stroke: " + this.m.toString() + ";"
        })
    };
    u(c, b);
    c.a = b.a;
    c.prototype.g = function() {
        return (new v.h([this.a.map(function(a) {
            return a.x
        }).reduce(function(a, b) {
            return a + b
        }), this.a.map(function(a) {
            return a.y
        }).reduce(function(a, b) {
            return a + b
        }), this.a.map(function(a) {
            return a.z
        }).reduce(function(a, b) {
            return a + b
        })])).B(3)
    };
    c.prototype.o = function() {
        return this.w.v(this.G).L(this.w.v(this.J)).normalize()
    };
    Object.defineProperties(c.prototype, {
        w: {
            configurable: !0,
            enumerable: !0,
            get: function() {
                return this.a[0]
            }
        },
        G: {
            configurable: !0,
            enumerable: !0,
            get: function() {
                return this.a[1]
            }
        },
        J: {
            configurable: !0,
            enumerable: !0,
            get: function() {
                return this.a[2]
            }
        }
    })
})(z || (z = {}));
new z.F(document.getElementById("vandal"), [86, 200, 148], [25, 52, 65], 250);

编译

CSS

#border__top,
#border__right,
#border__bottom,
#border__left {
    position: fixed;
    z-index: 2;
    background-color: white;
}
#border__top {
    top: 0;
    height: 14px;
    width: 100%;
}
#border__right {
    right: 0;
    width: 14px;
    height: 100%;
}
#border__bottom {
    bottom: 0;
    width: 100%;
    height: 14px;
}
#border__left {
    left: 0;
    width: 14px;
    height: 100%;
}
#vandal {
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#getme {
    position: fixed;
    z-index: 3;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}
#getme a {
    display: inline-block;
    vertical-align: middle;
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
}
#getme a:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
body {
    margin: 0;
    padding: 0;
}

HTML

鼠标停留在低多边形背景图案上会高亮附近区域的三角形。

HTML5, 图形学

编辑器支持Emmet

快捷键

鼠标停留在低多边形背景图案上会高亮附近区域的三角形。

HTML5, 图形学

TweenMax.js+Physics2DPlugin.js 水珠气化发散（蒸发）的模拟动画

使用SoundCity和Three.JS结合实现的音乐城市可视化动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：