Canvas 蹼形生物生成器

点击画布，生成各种形状的类似青蛙脚一样的蹼形生物。

canvas，蹼

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

第三方库
作品简介 2660
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

Object.getOwnPropertyNames(Math).map(function(p) {
    window[p] = Math[p];
});

var rand = function(max, min, is_int) {
    var max = (max - 1 || 0) + 1,
        min = min || 0,
        gen = min + (max - min) * random();

return (is_int) ? round(gen) : gen;
};

var σ = function(f) {
    return (random() < (f || .5)) ? -1 : 1;
};

var makeShade = function(hsla) {
    return 'hsla(' +
        ~~(hsla.h * 360) + ',' +
        hsla.s * 100 + '%,' +
        hsla.l * 100 + '%,' +
        hsla.a + ')';
};

var N = 8,
    c = document.querySelector('canvas'),
    w, h, min_dim,
    ctx = c.getContext('2d'),
    m = [],
    r_id = null,
    gp = null;

var Point = function(x, y, hsla, r) {
    this.r = r || rand(4, 1, 1);
    this.x = (x === 0 || x) ?
        x : rand(w - this.r, this.r, 1);
    this.y = (y === 0 || y) ?
        y : rand(w - this.r, this.r, 1);
    this.hsla = hsla || {};
    this.c = null;

this.init = function() {
        var fstr = 'hsla',
            len = fstr.length;

for (var i = 0; i < len; i++) {
            if (!this.hsla[fstr[i]]) {
                this.hsla[fstr[i]] =
                    rand().toFixed(2);
            }
        }

if (this.hsla.l < .7) {
            this.hsla.l = 1 - this.hsla.l;
        }

this.c = makeShade(this.hsla);
    };

this.mix = function(p1, p2, i) {
        var j = 1 - i;

this.x = ~~(i * p1.x + j * p2.x);
        this.y = ~~(i * p1.y + j * p2.y);

for (var p in this.hsla) {
            this.hsla[p] = i * p1.hsla[p] + j * p2.hsla[p];
        }

this.c = makeShade(this.hsla);
    };

this.draw = function(ctxt) {
        ctxt.fillStyle = makeShade(this.hsla);

ctxt.beginPath();
        ctxt.arc(this.x, this.y, this.r, 0, 2 * PI);
        ctxt.closePath();
        ctxt.fill();
    };

this.init();
};

var Segment = function(s, e) {
    this.s = s || new Point();
    this.e = e || new Point();

this.draw = function(ctxt, flag) {
        var flag = flag || false,
            g = ctxt.createLinearGradient(
                this.s.x, this.s.y,
                this.e.x, this.e.y
            );

g.addColorStop(0, makeShade(this.s.hsla));
        g.addColorStop(1, makeShade(this.e.hsla));

ctxt.strokeStyle = g;

ctxt.beginPath();
        ctxt.moveTo(this.s.x, this.s.y);
        ctxt.lineTo(this.e.x, this.e.y);
        ctxt.closePath();
        ctxt.stroke();

if (flag) {
            this.s.draw(ctxt);
            this.e.draw(ctxt);
        }
    };
};

var Sector = function(s, v, e, k) {
    this.s = s || new Point();
    this.v = v || new Point();
    this.e = e || new Point();
    this.s1 = new Segment(this.s, this.v);
    this.s2 = new Segment(this.v, this.e);
    this.k = k || 8;

this.draw = function(ctxt, flag) {
        var c_seg = new Segment(),
            j, g;

for (var i = 1; i < this.k; i++) {
            j = i / this.k;

c_seg.s.mix(this.s, this.v, j);
            c_seg.e.mix(this.v, this.e, j);

c_seg.draw(ctxt);
        }

if (flag) {
            this.s1.draw(ctxt);
            this.s2.draw(ctxt);

this.s.draw(ctxt);
            this.v.draw(ctxt);
            this.e.draw(ctxt);
        }
    }
};

var Mesh = function(n, o, R, k, r, φ, v, ω) {
    this.o = o || (new Point());
    this.n = n || 3;
    this.R = R || rand(min_dim / 8, min_dim / 16, 1);
    this.k = k || 8;
    this.r = r || 2;
    this.φ = φ || rand(PI / this.n);
    this.v = v || null;
    this.ω = ω || σ() * rand(PI / 90, PI / 360);
    this.vertices = [];
    this.sectors = [];
    this.m = 0;
    this.out = false;

this.init = function() {
        var β = 2 * PI / this.n,
            α;

if (!this.v) {
            this.v = {
                'x': σ() * rand(4, .25),
                'y': σ() * rand(4, .25)
            };
        }

this.vertices = [];
        this.sectors = [];

for (var i = 0; i <= this.n; i++) {
            if (i < this.n) {
                α = i * β + this.φ;

this.vertices.push(new Point(
                    (this.o.x + this.R * cos(α)), (this.o.y + this.R * sin(α)), {
                        'h': ((α * 180 / PI) % 360) / 360,
                        's': 1,
                        'l': .5,
                        'a': 1 * ((i / this.n).toFixed(2))
                    },
                    this.r
                ));
            }

if (i > 0) {
                this.sectors.push(new Sector(
                    this.vertices[(i % this.n)],
                    this.o,
                    this.vertices[i - 1],
                    this.k
                ));
            }
        }
    };

this.move = function() {
        this.φ += this.ω;
        this.o.x += this.v.x;
        this.o.y += this.v.y;

if (this.o.x < -this.R - this.r ||
            this.o.x > w + this.R + this.r ||
            this.o.y < -this.R - this.r ||
            this.o.y > h + this.R + this.r) {
            this.out = true;
        }

this.init();
    }

this.draw = function(ctxt) {
        for (var i = 0; i < this.n; i++) {
            this.sectors[i].draw(ctxt, 1);
        }
    };

this.init();
};

var init = function() {
    var s = getComputedStyle(c);

w = c.width = ~~s.width.split('px')[0];
    h = c.height = ~~s.height.split('px')[0];

if (r_id) {
        cancelAnimationFrame(r_id);
        r_id = null;
    }

m = [];

min_dim = min(w, h);
};

var draw = function() {
    ctx.clearRect(0, 0, w, h);

for (var i = 0; i < m.length; i++) {
        m[i].move();
        if (m[i].out) {
            m.splice(i, 1);
            i--;
        } else {
            m[i].draw(ctx);
        }
    }

if (m.length == 0) {
        cancelAnimationFrame(r_id);
        r_id = null;
        return;
    }

r_id = requestAnimationFrame(draw);
};

setTimeout(function() {
    init();

addEventListener('resize', init, false);

addEventListener('click', function(e) {
        gp = new Point(e.clientX, e.clientY, {}, 4);
        m.push(new Mesh(rand(16, 3, 1), gp));

if (!r_id) {
            draw();
        }
    }, false);
}, 15);

编译

CSS

HTML

点击画布，生成各种形状的类似青蛙脚一样的蹼形生物。

canvas，蹼

编辑器支持Emmet

快捷键

点击画布，生成各种形状的类似青蛙脚一样的蹼形生物。

canvas，蹼

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：