Skip to content

Instantly share code, notes, and snippets.

@saifuddin778

saifuddin778/README.md

Last active April 10, 2017 05:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save saifuddin778/ae508181f420d4eef879cf6216bad298 to your computer and use it in GitHub Desktop.
Save saifuddin778/ae508181f420d4eef879cf6216bad298 to your computer and use it in GitHub Desktop.
Download ZIP
Troodon - II
Raw
README.md

Troodon with dual perception.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
text-align: center;
}
.logoline {
stroke: steelblue;
stroke-width: 0.2;
}
.cross {
fill: none;
stroke: black;
}
svg {
background: honeydew;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var origw = 1000;
var origh = 500;
var width = 120;
var height = 120;
var space = d3.select("body")
.append("svg")
.attr("width", origw)
.attr("height", origh)
.append("g")
.attr("id", "sp");
var w = width * 0.75;
var h = height * 0.75;
var items = [
[0, h],
[0, 0],
[w, 0],
[w, h],
];
var x = (origw/2.5) + 10;
var y = (origh/2) + 10;
var g = w/1.3;
var dq = w * 0.007;
var bb = 1.3;
var linelogoleftcont = space.append("g").attr("class", "linelogoleftcont");
var linelogobottomcont = space.append("g").attr("class", "linelogobottomcont");
var linelogorightcont = space.append("g").attr("class", "linelogorightcont");
var linelogotopcont = space.append("g").attr("class", "linelogotopcont")
var linelogodata = {left: [], bottom: [], right: [], top: []};
for (var i = 0; i<48; i++){
linelogodata.left.push(
{x1: x+(i*dq)* bb, y1: y+(i*dq), x2: x+(i*dq) * bb, y2: (y+(i*dq))-g}
);
linelogodata.bottom.push(
{x1: x+(i*dq)* bb, y1: (y+(i*dq)), x2: x+(i*dq)* bb + g, y2: (y+(i*dq))-g*0.3}
);
linelogodata.right.push(
{x1: x+(i*dq)* bb + g, y1: (y+(i*dq))-g*0.3, x2: x+(i*dq)* bb + g, y2: (y+(i*dq))-g*1.3}
);
linelogodata.top.push(
{x1: x+(i*dq)* bb, y1: (y+(i*dq))-g, x2: x+(i*dq)* bb + g, y2: (y+(i*dq))-g*1.3}
);
if (i == 0){
console.log({x1: x+(i*dq)* bb, y1: (y+(i*dq))-g, x2: x+(i*dq)* bb + g, y2: (y+(i*dq))-g*1.3});
}
}
linelogoleftcont.selectAll()
.data(linelogodata.left)
.enter()
.append("line")
.attr("class", "logoline linelogoleft")
.attr("x1", function(d){return d.x1})
.attr("y1", function(d){return d.y1})
.attr("x2", function(d){return d.x2})
.attr("y2", function(d){return d.y2});
linelogobottomcont.selectAll()
.data(linelogodata.bottom)
.enter()
.append("line")
.attr("class", "logoline linelogobottom")
.attr("x1", function(d){return d.x1})
.attr("y1", function(d){return d.y1})
.attr("x2", function(d){return d.x2})
.attr("y2", function(d){return d.y2});
linelogorightcont.selectAll()
.data(linelogodata.right)
.enter()
.append("line")
.attr("class", "logoline linelogoright")
.attr("x1", function(d){return d.x1})
.attr("y1", function(d){return d.y1})
.attr("x2", function(d){return d.x2})
.attr("y2", function(d){return d.y2});
linelogotopcont.selectAll()
.data(linelogodata.top)
.enter()
.append("line")
.attr("class", "logoline linelogotop")
.attr("x1", function(d){return d.x1})
.attr("y1", function(d){return d.y1})
.attr("x2", function(d){return d.x2})
.attr("y2", function(d){return d.y2});
var b = 0;
setInterval(function(){
b += 1;
d3.selectAll("line").transition().style("stroke", d3.rgb(200 * Math.random(), 255 * Math.random(), 255*Math.random()).toString());
if (b % 2 == 0){
d3.selectAll('.linelogoleft')
.transition()
.duration(400)
.delay(function(d, i) {return i * 2})
.ease('cubic')
.attr('x1', linelogodata.left[0].x1)
.attr('y1', linelogodata.left[0].y1)
.attr('x2', linelogodata.left[0].x2)
.attr('y2', linelogodata.left[0].y2);
d3.selectAll('.linelogobottom')
.transition()
.duration(400)
.delay(function(d, i) {return i * 2})
.ease('cubic')
.attr('x1', linelogodata.bottom[0].x1)
.attr('y1', linelogodata.bottom[0].y1)
.attr('x2', linelogodata.bottom[0].x2)
.attr('y2', linelogodata.bottom[0].y2);
d3.selectAll('.linelogoright')
.transition()
.duration(400)
.delay(function(d, i) {return i * 2})
.ease('cubic')
.attr('x1', linelogodata.right[0].x1)
.attr('y1', linelogodata.right[0].y1)
.attr('x2', linelogodata.right[0].x2)
.attr('y2', linelogodata.right[0].y2);
d3.selectAll('.linelogotop')
.transition()
.duration(400)
.delay(function(d, i) {return i * 2})
.ease('cubic')
.attr('x1', linelogodata.top[0].x1)
.attr('y1', linelogodata.top[0].y1)
.attr('x2', linelogodata.top[0].x2)
.attr('y2', linelogodata.top[0].y2);
}
else{
d3.selectAll('.linelogoleft')
.transition()
.duration(400)
.delay(function(d, i) {return i * 2})
.ease('cubic')
.attr('x1', function(d){return d.x1})
.attr('y1', function(d){return d.y1})
.attr('x2', function(d){return d.x2})
.attr('y2', function(d){return d.y2});
d3.selectAll('.linelogobottom')
.transition()
.duration(400)
.delay(function(d, i) {return i * 2})
.ease('cubic')
.attr('x1', function(d){return d.x1})
.attr('y1', function(d){return d.y1})
.attr('x2', function(d){return d.x2})
.attr('y2', function(d){return d.y2});
d3.selectAll('.linelogoright')
.transition()
.duration(400)
.delay(function(d, i) {return i * 2})
.ease('cubic')
.attr('x1', function(d){return d.x1})
.attr('y1', function(d){return d.y1})
.attr('x2', function(d){return d.x2})
.attr('y2', function(d){return d.y2});
d3.selectAll('.linelogotop')
.transition()
.duration(400)
.delay(function(d, i) {return i * 2})
.ease('cubic')
.attr('x1', function(d){return d.x1})
.attr('y1', function(d){return d.y1})
.attr('x2', function(d){return d.x2})
.attr('y2', function(d){return d.y2});
}
}, 500
);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment