Skip to content

Instantly share code, notes, and snippets.

@saifuddin778

saifuddin778/README.md

Last active August 14, 2016 06:33
Show Gist options
  • Save saifuddin778/05dae3eb1f2c37cdf3627d4cb9e697a9 to your computer and use it in GitHub Desktop.
Save saifuddin778/05dae3eb1f2c37cdf3627d4cb9e697a9 to your computer and use it in GitHub Desktop.
Download ZIP
Greek Cross
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
text-align: center;
}
.vertical {
stroke: orchid;
stroke-width: 0.8;
}
.horizontal {
stroke: lightblue;
sroke-width: 0.8;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<script>
function midpoint(p1, p2) {
return [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2];
}
function add_cross(item, space, i) {
var origin_x = (item[0][0] + item[1][0]) / 2;
var origin_y = (item[0][1] + item[1][1]) / 2;
var origin = [origin_x, origin_y];
var c1 = space.append("line")
.attr("x1", origin_x)
.attr("y1", origin_y)
.attr("x2", origin_x)
.attr("y2", origin_y)
.attr("class", "vertical");
var c2 = space.append("line")
.attr("x1", origin_x)
.attr("y1", origin_y)
.attr("x2", origin_x)
.attr("y2", origin_y)
.attr("class", "horizontal");
c1
.transition()
.duration(10000)
.delay(i * 30)
.attr("x1", item[0][0])
.attr("y1", item[0][1])
.attr("x2", item[1][0])
.attr("y2", item[1][1]);
c2
.transition()
.duration(10000)
.delay(i * 30)
.attr("x1", item[2][0])
.attr("y1", item[2][1])
.attr("x2", item[3][0])
.attr("y2", item[3][1]);
space.append("circle")
.attr("r", 0)
.attr("cx", origin_x)
.attr("cy", origin_y)
.attr("fill", "gray");
var children = [
[
[item[0][0], item[0][1]],
[origin_x, origin_y],
[midpoint(item[0], origin)[0], midpoint(item[2], origin)[1]],
[midpoint(item[0], origin)[0], midpoint(item[3], origin)[1]],
],
[
[midpoint(item[0], origin)[0], midpoint(item[2], origin)[1]],
[midpoint(origin, item[1])[0], midpoint(item[2], origin)[1]],
[item[2][0], item[2][1]],
[origin_x, origin_y],
],
[
[origin_x, origin_y],
[item[1][0], item[1][1]],
[midpoint(origin, item[1])[0], midpoint(item[2], origin)[1]],
[midpoint(origin, item[1])[0], midpoint(origin, item[3])[1]],
],
[
[midpoint(item[0], origin)[0], midpoint(item[3], origin)[1]],
[midpoint(origin, item[1])[0], midpoint(origin, item[3])[1]],
[origin_x, origin_y],
[item[3][0], item[3][1]],
],
];
return children;
}
var width = 500;
var height = 500;
var space = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var items = [
[
[0, height / 2],
[width, height / 2],
[width / 2, 0],
[width / 2, height]
]
];
for (var i = 0; i < items.length; i++) {
var children = add_cross(items[i], space, i);
for (var j = 0; j < children.length; j++) {
items.push(children[j]);
}
//84, 340
if (i == 340 * 4) {
break;
}
}
items = [];
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment