HTML5圆盘图案环绕动画

Discoid, 可用于天花板、歌舞厅、演播室灯光设计。

html5, lights

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var c = document.getElementById('canv'),
    $ = c.getContext("2d");
c.width = window.innerWidth;
c.height = window.innerHeight;
window.addEventListener('resize', function() {
    c.width = window.innerWidth;
    c.height = window.innerHeight;
}, false);

function möb(a, b, c) {
    var pa = a[0] * a[0] + a[1] * a[1],
        pb = b[0] * b[0] + b[1] * b[1],
        pc = c[0] * c[0] + c[1] * c[1];
    var y = (
            (a[0] - b[0]) * (pb - pc) - (b[0] - c[0]) * (pa - pb)
        ) / (
            2 * (b[1] - a[1]) * (b[0] - c[0]) - 2 * (a[0] - b[0]) * (c[1] - b[1])
        ),
        x = (pa - pb + 2 * (b[1] - a[1]) * y) / (2 * (a[0] - b[0])),
        r = Math.sqrt((x - a[0]) * (x - a[0]) + (y - a[1]) * (y - a[1]));
    return [x, y, r];
}

function arcs(x, y, r) {
    var c = möb_arc(x, y, r);
    if (c[2] > 10) return;
    $.beginPath();
    $.arc(c[0], c[1], c[2] / 1.65, 0, Math.PI * 2, false);
    $.fill();
    $.closePath();
}

function möb_pt(x, y) {
    var denom = (x + 1) * (x + 1) + y * y;
    return [(x * x - 1 + y * y) / denom, 2 * y / denom];
}

function möb_arc(x, y, r) {
    var a = möb_pt(x - r, y),
        b = möb_pt(x + r, y),
        c = möb_pt(x, y + r);
    return möb(a, b, c);
}

function cmul(w, z) {
    return [
        w[0] * z[0] - w[1] * z[1],
        w[0] * z[1] + w[1] * z[0]
    ];
}

function rotate(z, theta) {
    return cmul(z, [Math.cos(theta), Math.sin(theta)]);
}

function modulus(p) {
    return Math.sqrt(p[0] * p[0] + p[1] * p[1]);
}

function crecip(z) {
    var d = z[0] * z[0] + z[1] * z[1];
    return [z[0] / d, -z[1] / d];
}

var p = 9,
    q = 36;
var root = doyle(p, q);
var rep = 20000;

function anim(t) {
    $.setTransform(1, 0, 0, 1, 0, 0);
    $.clearRect(0, 0, c.width, c.height);
    $.translate(Math.round(c.width / 2), Math.round(c.height / 2));
    $.scale(250, 250);

var beg = rotate(root.a, Math.PI * 2 * t);
    for (var i = 0; i < q; i++) {
        spiral(root.r, beg, root.a, {
            fill: ["#EB1E23", "#D9DFD1", "#008F86"],
            i: (i) % 3.5,
            min_d: 1e-3,
            max_d: 1e3
        });
        beg = cmul(beg, root.b);
    }
}

var fst;

function run(ts) {
    if (!fst) fst = ts;
    anim(((ts - fst) % rep) / rep);
    window.requestAnimationFrame(run);
}
run();

编译

CSS

HTML

Discoid, 可用于天花板、歌舞厅、演播室灯光设计。

html5, lights

编辑器支持Emmet

快捷键

Discoid, 可用于天花板、歌舞厅、演播室灯光设计。

html5, lights

HTML5一款带背景图片动画的用户档案社交卡片

HTML5 P5.js光芒生成图案动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：