Skip to content

Instantly share code, notes, and snippets.

@saifuddin778

saifuddin778/README.md

Last active May 21, 2016 19:03
Show Gist options
  • Save saifuddin778/86e05d23128625b201284a614e5cc4b2 to your computer and use it in GitHub Desktop.
Save saifuddin778/86e05d23128625b201284a614e5cc4b2 to your computer and use it in GitHub Desktop.
Download ZIP
Sierpiński Chess
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
text-align: center;
}
svg {
background: none;
}
.rect {
fill: rgba(34, 49, 63, 0.7);
}
.centroid {
fill: white;
stroke: rgba(34, 49, 63, 0.7);
stroke-width: 2;
}
</style>
<body>
<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: [0, 2, 4, 6, 8]
};
}
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 space = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
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 centroids = squares.color_i;
for (var j = 0; j < squares.points.length; j++) {
if (centroids.indexOf(j) > -1) {
var c = true;
spoints.push(squares.points[j]);
} else {
var c = false;
}
append_(squares.points[j], c);
}
//0, 5, 30, 155, 780, 3905
if (i == 155) {
break;
}
}
function append_(ppoints, centroid) {
var pts_ = get_polygon_points(ppoints);
if (!centroid) {
space.append("polygon")
.attr("class", "rect")
.attr("points", pts_);
} else {
space.append("polygon")
.attr("class", "centroid")
.attr("points", pts_);
}
return;
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment