Raphaelで手描き風の線

README

参考
https://bramp.github.io/js-sequence-diagrams/

jsdoit.css

body {
  background: silver;
}

svg {
  border: solid thin black;
}

jsdoit.html

<script src="https://rawgit.com/josdejong/mathjs/master/dist/math.min.js"></script>

jsdoit.js

var SIZE = 400;
var PAGE_COUNT = 3;
var ACTOR_COUNT = 5;

var WIDDLE = 3;

var LINE = {
    'stroke': '#000',
    'stroke-width': 2
};

function m2p(x) {
  return [math.subset(x, math.index(0)), math.subset(x, math.index(1))];
}



function svg_path(params) {
    var path = "";

    for (var j = 0; j < params.length; j++) {
        var mark = params[j][0];
        var ps = params[j][1];

        for (var i = 0; i < ps.length; i++) {
            var pp = m2p(ps[i]);
            path += (i == 0 ? mark : " ") + pp[0] + "," + pp[1];
        }
    }
    return path;
}


function wobblePoint(p) {
    return math.add(p, [(Math.random() * 2 - 1) * WIDDLE, (Math.random() * 2 - 1) * WIDDLE]);
}

function wobbleLine(p1, p2) {
    var a = math.subtract(p2, p1);
    var ap = m2p(a);
    var n = [-ap[1], ap[0]];

    var r1 = Math.random();
    var r2 = Math.random();

    var t1 = Math.random() * 2 - 1;
    var t2 = Math.random() * 2 - 1;

    var s1 = math.add(math.add(p1, math.multiply(a, r1)), math.multiply(n, math.norm(a)/math.norm(n)/25*t1));
    var s2 = math.add(math.add(p1, math.multiply(a, r2)), math.multiply(n, math.norm(a)/math.norm(n)/25*t2));

    return ["C", [s1, s2, p2]];
}

function handCircle(paper, x, y, r) {
    var t = 0.55228;
    
    var p1 = wobblePoint([x + r, y]);
    var p2 = wobblePoint([x, y + r]);
    var p3 = wobblePoint([x - r, y]);
    var p4 = wobblePoint([x, y - r]);
    var p5 = wobblePoint([x + r, y]);
    
    var path = svg_path([
        ["M", [p1]],
        ["C", [[x + r, y + r * t], [x + r*t, y + r], p2]],
        ["S", [                    [x - r, y + r*t], p3]],
        ["S", [                    [x - r*t, y - r], p4]],
        ["S", [                    [x + r, y - r*t], p5]]
    ]);

    return paper.path(path).attr(LINE).rotate(120, x, y);
}

function handRect(paper, x, y, w, h) {
    var p1 = wobblePoint([x, y]);
    var p2 = wobblePoint([x + w, y]);
    var p3 = wobblePoint([x + w, y + h]);
    var p4 = wobblePoint([x, y + h]);

    var path = svg_path([
        ["M", [p1]],
        wobbleLine(p1, p2),
        wobbleLine(p2, p3),
        wobbleLine(p3, p4),
        wobbleLine(p4, p1)
    ]);

    return paper.path(path).attr(LINE);
}

function handLine(paper, x1, y1, x2, y2) {
    var p1 = wobblePoint([x1, y1]);
    var p2 = wobblePoint([x2, y2]);
    
    var path = svg_path([
        ["M", [p1]],
        wobbleLine(p1, p2)
    ]);

    return paper.path(path).attr(LINE);
}

function handActor(paper, x, y, l) {
    var set = paper.set();
    set.push(
        handCircle(paper, x, y - 3 * l, l),
        handRect(paper, x - l/2, y - 2 * l, l, 4 * l),
        handLine(paper, x + l/2, y - l, x + 2 * l, y + l),
        handLine(paper, x - l/2, y - l, x - 2 * l, y + l),
        handLine(paper, x + l/2, y + 2 * l, x + l, y + 4 * l),
        handLine(paper, x - l/2, y + 2 * l, x - l, y + 4 * l)
    );
    return set;
}

function draw(papers) {
    var x = 50;
    var y = 200;
    var l = 15;
    var actors_data = [];
    for (var j = 0; j < ACTOR_COUNT; j++) {
        var actors = [];
        for (var i = 0; i < papers.length; i++) {
            actors[i] = handActor(papers[i], x + j * 80, y, l);
        }
        var v = [Math.random()*2-1, Math.random()*2-1];
        actors_data[j] = {actors: actors, v: v};
    }
    return actors_data;
}

function move(actors_data) {
    for (var j = 0; j < actors_data.length; j++) {
        var actors = actors_data[j].actors;
        var v = actors_data[j].v;

        var box = actors[0].getBBox();
        v[0] *= (box.x < 0 || box.x + box.width  >= SIZE) ? -1 : 1;
        v[1] *= (box.y < 0 || box.y + box.height >= SIZE) ? -1 : 1;
        for (var i = 0; i < actors.length; i++) {
            actors[i].translate(v[0], v[1]);
        }
    }
}

function next_page(page) {
    $('.page').hide();
    $('#svg_' + page).show();
    return (page + 1) % PAGE_COUNT;
}

$(function() {
    var page = 0;
    var papers = [];
    for (var i = 0; i < PAGE_COUNT; i++) {
        var id = 'svg_' + i;
        $("body").append('<div id="' + id + '" class="page"></div>');
        papers[i] = Raphael(id, SIZE, SIZE);
    }

    var actors_data = draw(papers);
  
    setInterval(function() { page = next_page(page); }, 100);
    setInterval(function() { move(actors_data);}, 100);
});