Skip to content

Instantly share code, notes, and snippets.

@Akiyah Akiyah/README
Last active Mar 6, 2016

Embed
What would you like to do?
Raphaelで手描き風の線
参考
https://bramp.github.io/js-sequence-diagrams/
body {
background: silver;
}
svg {
border: solid thin black;
}
<script src="https://rawgit.com/josdejong/mathjs/master/dist/math.min.js"></script>
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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.