|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
body { |
|
text-align: center; |
|
} |
|
|
|
svg { |
|
background: none; |
|
} |
|
|
|
.rect { |
|
stroke-width: 0; |
|
stroke: lightblue; |
|
fill: white; |
|
} |
|
|
|
.centroid { |
|
stroke-width: 1; |
|
stroke: green; |
|
fill: teal; |
|
} |
|
</style> |
|
|
|
<body> |
|
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> |
|
<script> |
|
function get_squares(p) { |
|
var min_w = p[0][0]; |
|
var max_w = p[3][0]; |
|
|
|
var min_h = p[1][1]; |
|
var max_h = p[0][1]; |
|
|
|
var del_w = max_w - min_w; |
|
var del_h = max_h - min_h; |
|
|
|
var m_w = del_w / 3; |
|
var m_h = del_h / 3; |
|
|
|
var pp = [ |
|
[ |
|
[min_w, max_h], |
|
[min_w, max_h - m_h], |
|
[min_w + m_w, max_h - m_h], |
|
[min_w + m_w, max_h], |
|
], |
|
[ |
|
[min_w + m_w, max_h], |
|
[min_w + m_w, max_h - m_h], |
|
[min_w + 2 * m_w, max_h - m_h], |
|
[min_w + 2 * m_w, max_h] |
|
|
|
], |
|
[ |
|
[min_w + 2 * m_w, max_h], |
|
[min_w + 2 * m_w, max_h - m_h], |
|
[min_w + 3 * m_w, max_h - m_h], |
|
[min_w + 3 * m_w, max_h], |
|
|
|
], |
|
// |
|
[ |
|
[min_w, max_h - m_h], |
|
[min_w, max_h - 2 * m_h], |
|
[min_w + m_w, max_h - 2 * m_h], |
|
[min_w + m_w, max_h - m_h], |
|
], |
|
[ |
|
[min_w + m_w, max_h - m_h], |
|
[min_w + m_w, max_h - 2 * m_h], |
|
[min_w + 2 * m_w, max_h - 2 * m_h], |
|
[min_w + 2 * m_w, max_h - m_h] |
|
|
|
], |
|
[ |
|
[min_w + 2 * m_w, max_h - m_h], |
|
[min_w + 2 * m_w, max_h - 2 * m_h], |
|
[min_w + 3 * m_w, max_h - 2 * m_h], |
|
[min_w + 3 * m_w, max_h - m_h], |
|
|
|
], |
|
// |
|
[ |
|
[min_w, max_h - 2 * m_h], |
|
[min_w, max_h - 3 * m_h], |
|
[min_w + m_w, max_h - 3 * m_h], |
|
[min_w + m_w, max_h - 2 * m_h], |
|
], |
|
[ |
|
[min_w + m_w, max_h - 2 * m_h], |
|
[min_w + m_w, max_h - 3 * m_h], |
|
[min_w + 2 * m_w, max_h - 3 * m_h], |
|
[min_w + 2 * m_w, max_h - 2 * m_h] |
|
|
|
], |
|
[ |
|
[min_w + 2 * m_w, max_h - 2 * m_h], |
|
[min_w + 2 * m_w, max_h - 3 * m_h], |
|
[min_w + 3 * m_w, max_h - 3 * m_h], |
|
[min_w + 3 * m_w, max_h - 2 * m_h], |
|
|
|
], |
|
]; |
|
return { |
|
points: pp, |
|
color_i: 4 |
|
}; |
|
|
|
} |
|
|
|
function get_polygon_points(points) { |
|
var pts = ""; |
|
for (var i = 0; i < points.length; i++) { |
|
for (var j = 0; j < points[i].length; j++) { |
|
if (i < points.length - 1) { |
|
pts += points[i][j] + ","; |
|
} else { |
|
pts += points[i][j] + " "; |
|
} |
|
} |
|
pts += " " |
|
} |
|
return pts; |
|
} |
|
|
|
var width = 500; |
|
var height = 500; |
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("id", "particles_svg") |
|
.attr("width", width).attr("height", height); |
|
|
|
var spoints = [ |
|
[ |
|
[0, height], |
|
[0, 0], |
|
[width, 0], |
|
[width, height] |
|
] |
|
]; |
|
|
|
for (var i = 0; i < spoints.length; i++) { |
|
var squares = get_squares(spoints[i]); |
|
var centroid = squares.color_i; |
|
for (var j = 0; j < squares.points.length; j++) { |
|
if (j == centroid) { |
|
var c = true; |
|
} else { |
|
var c = false; |
|
spoints.push(squares.points[j]); |
|
} |
|
append_(squares.points[j], c); |
|
} |
|
|
|
//8^1, 8^2 + 8^1, 8^3 + 8^2 + 8^1, 8^4 + 8^3 + 8^2 + 8^1 |
|
if (i == 4680) { |
|
break; |
|
} |
|
} |
|
|
|
function append_(ppoints, centroid) { |
|
var pts_ = get_polygon_points(ppoints); |
|
if (!centroid) { |
|
svg.append("polygon").attr("class", "rect").attr("points", pts_); |
|
} else { |
|
svg.append("polygon").attr("class", "centroid").attr("points", pts_); |
|
} |
|
return; |
|
} |
|
</script> |
|
</body> |
