Skip to content

Instantly share code, notes, and snippets.

@chrisbrich

chrisbrich/README.md

Last active August 25, 2017 06:03
Show Gist options
  • Save chrisbrich/92b0600c3b21dbdcdbf54c225723b082 to your computer and use it in GitHub Desktop.
Save chrisbrich/92b0600c3b21dbdcdbf54c225723b082 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script src="http://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://unpkg.com/d3-3d/build/d3-3d.js"></script>
<!-- <script src="torus.js"></script> -->
<style>
body {
font: 10px sans-serif;
}
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
var counter = 0, j = 10, usize = 7, vsize = 6, origin = [480, 250], points = [], planes = [], alpha = 0, beta = 0, startAngle = Math.PI/4;
var tube_radius = 2, center_to_tube_center = 6;
var svg = d3.select('svg').call(d3.drag().on('drag', dragged).on('start', dragStart).on('end', dragEnd)).append('g');
var mx, my, mouseX, mouseY;
function parametric_torus (u,v){
var x = (center_to_tube_center + tube_radius*Math.cos(v))*Math.cos(u),
y = (center_to_tube_center + tube_radius*Math.cos(v))*Math.sin(u),
z = tube_radius*Math.sin(v);
return {x: x,y: y,z: z};
}
var planes3D = d3._3d()
.scale(10)
.x(function(d){ return d.x; })
.y(function(d){ return d.y; })
.z(function(d){ return d.z; })
.origin(origin)
.rotateY(startAngle)
.rotateX(-startAngle)
.rotateCenter([0,0,0])
.shape('PLANE');
var color = d3.scaleLinear();
function processData(data, tt){
var planes = svg.selectAll('path').data(data, function(d){ return d.id; });
planes
.enter()
.append('path')
.attr('fill', "none")
.attr('opacity', 0)
.attr('stroke-opacity', 0.1)
.merge(planes)
.attr('stroke', 'black')
.sort(planes3D.sort)
.transition().duration(tt)
.attr('opacity', 1)
<!-- .attr('fill', colorize) -->
.attr('d', planes3D.draw);
planes.exit().remove();
}
function colorize(d){
var _y = (d[0].y + d[1].y + d[2].y + d[3].y)/4;
return d3.interpolateSpectral(color(_y));
<!-- return d.ccw ? d3.interpolateSpectral(color(_y)) : d3.color(d3.interpolateSpectral(color(_y))).darker(2.5); -->
}
function dragStart(){
mx = d3.event.x;
my = d3.event.y;
}
function dragged(){
mouseX = mouseX || 0;
mouseY = mouseY || 0;
beta = (d3.event.x - mx + mouseX) * Math.PI / 230 ;
alpha = (d3.event.y - my + mouseY) * Math.PI / 230 * (-1);
processData(planes3D.rotateY(beta + startAngle).rotateX(alpha - startAngle)(planes), 0);
}
function dragEnd(){
mouseX = d3.event.x - mx + mouseX;
mouseY = d3.event.y - my + mouseY;
}
function init(){
points = [], planes = [], counter = 0;
points_by_index = d3.range(usize + 1).map(function(s){return [];});
console.log(points_by_index);
//for(var z = -j; z < j; z++){
// for(var x = -j; x < j; x++){
// points.push({x: x, y: eq(x, z), z: z});
// }
// }
for(var u = 0; u < usize + 1; u++){
for(var v = 0; v < vsize + 1; v++){
var point = parametric_torus((u / usize) * 2 * Math.PI ,(v / vsize) * 2 * Math.PI);
point.u = u; //int
point.v = v; //int
points_by_index[u][v] = point;
points.push(point);
}
}
//var sqrt = Math.sqrt(points.length) - 1;
//for (var k = 0; k < sqrt; k++) {
// for (var l = 0; l < sqrt; l++) {
// var p1 = l+k*(sqrt+1), p2 = p1+1, p3 = p2+sqrt, p4 = p3+1;
// var pl = [points[p1], points[p3], points[p4], points[p2]];
// pl.id = 'plane_' + counter++;
// planes.push(pl);
// counter++;
// }
//}
var sqrt = Math.sqrt(points.length) - 1;
for (var u = 0; u < usize; u++) {
for (var v = 0; v < vsize; v++) {
var pl = [points_by_index[u][v],
points_by_index[(u + 1) % usize][v],
points_by_index[(u + 1) % usize][(v + 1) % vsize],
points_by_index[u][(v + 1) % vsize]];
pl.id = 'plane_' + counter++;
planes.push(pl);
counter++;
}
}
var yMin = d3.min(planes, function(p){
return d3.min([p[0],p[1],p[2],p[3]], function(d){
return d.y;
});
});
var yMax = d3.max(planes, function(p){
return d3.max([p[0],p[1],p[2],p[3]], function(d){
return d.y;
});
});
color.domain([yMin, yMax]);
processData(planes3D(planes), 1000);
}
function change(){
var rn1 = Math.floor(d3.randomUniform(1, 12)());
var eqa = function(x, z){
return Math.cos(Math.sqrt(x*x+z*z)/5*Math.PI)*rn1;
};
init();
}
d3.selectAll('button').on('click', change);
change();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment