Skip to content

Instantly share code, notes, and snippets.

@saifuddin778

saifuddin778/README.md

Last active August 14, 2016 08:09
Show Gist options
  • Save saifuddin778/cc56e6d23dcea75d3a69c5d42979da4f to your computer and use it in GitHub Desktop.
Save saifuddin778/cc56e6d23dcea75d3a69c5d42979da4f to your computer and use it in GitHub Desktop.
Download ZIP
Sierpiński Triangle (via Greek Cross)
Raw
README.md

A little manipulation while building the Greek Cross results in a magnificent Sierpiński triangle!

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
text-align: center;
font-family: monospace;
}
.vertical {
stroke: gray;
stroke-width: 0.6;
}
.horizontal {
stroke: gray;
sroke-width: 0.6;
}
#checks {
position: absolute;
left: 20%;
top: 20%;
width: auto;
height: auto;
padding: 10px;
background: gray;
text-align: left;
border-radius: 3px;
background-color: yellowgreen;
}
.input {
display: block;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<div id="checks">
<div class="input"><input type="checkbox" value="horizontal" checked>HORIZONTAL</input></div>
<div class="input"><input type="checkbox" value="vertical" checked>VERTICAL</input></div>
</div>
<script>
var vop = 1;
var hop = 1;
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", "horizontal");
var c2 = space.append("line")
.attr("x1", origin_x)
.attr("y1", origin_y)
.attr("x2", origin_x)
.attr("y2", origin_y)
.attr("class", "vertical");
c1
.transition()
.duration(10000)
.delay(i * 10)
.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 * 10)
.attr("x1", item[2][0])
.attr("y1", item[2][1])
.attr("x2", origin_x)
.attr("y2", origin_y);
space.append("circle")
.attr("r", 0.5)
.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 = 900;
var height = 1000;
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]);
}
items.pop(0)
if (i == (340 * 9) + 220) {
break;
}
}
d3.selectAll("input").on("click", function(){
if (this.value == "vertical"){
if (vop == 0){
vop = 1;
}
else if (vop == 1) {
vop = 0;
}
d3.selectAll(".vertical").style("opacity", vop);
}
if (this.value == "horizontal"){
if (hop == 0){
hop = 1;
}
else if (vop == 1) {
hop = 0;
}
d3.selectAll(".horizontal").style("opacity", hop);
}
});
items = [];
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment