diff options
| author | hanemile <hanemile@protonmail.com> | 2018-12-24 22:48:44 +0100 |
|---|---|---|
| committer | hanemile <hanemile@protonmail.com> | 2018-12-24 22:48:44 +0100 |
| commit | 501adaa4dc7f5542dfc93b7c61cbd57c3fbc0c8f (patch) | |
| tree | 4eca9f2dfca4749efbc273f036cde37beb69f019 /webgl/index.html | |
| parent | 4fb83ecfe52b28296d3ba7ca69b7ab2366a87e6c (diff) | |
overall push
Diffstat (limited to 'webgl/index.html')
| -rw-r--r-- | webgl/index.html | 177 |
1 files changed, 0 insertions, 177 deletions
diff --git a/webgl/index.html b/webgl/index.html deleted file mode 100644 index 875b3d8..0000000 --- a/webgl/index.html +++ /dev/null @@ -1,177 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<script src="https://d3js.org/d3.v4.min.js"></script> -<script src="https://unpkg.com/d3-3d/build/d3-3d.min.js"></script> -<body> -<svg width="960" height="500"></svg> -<style type="text/css"> - button { - position: absolute; - right: 10px; - top: 10px; - } -</style> -<button>update</button> -<script> - var origin = [480, 300], j = 10, scale = 20, scatter = [], yLine = [], xGrid = [], beta = 0, alpha = 0, key = function(d){ return d.id; }, startAngle = Math.PI/4; - var svg = d3.select('svg').call(d3.drag().on('drag', dragged).on('start', dragStart).on('end', dragEnd)).append('g'); - var color = d3.scaleOrdinal(d3.schemeCategory20); - var mx, my, mouseX, mouseY; - - var grid3d = d3._3d() - .shape('GRID', 20) - .origin(origin) - .rotateY( startAngle) - .rotateX(-startAngle) - .scale(scale); - - var point3d = d3._3d() - .x(function(d){ return d.x; }) - .y(function(d){ return d.y; }) - .z(function(d){ return d.z; }) - .origin(origin) - .rotateY( startAngle) - .rotateX(-startAngle) - .scale(scale); - - var yScale3d = d3._3d() - .shape('LINE_STRIP') - .origin(origin) - .rotateY( startAngle) - .rotateX(-startAngle) - .scale(scale); - - function processData(data, tt){ - - /* ----------- GRID ----------- */ - - var xGrid = svg.selectAll('path.grid').data(data[0], key); - - xGrid - .enter() - .append('path') - .attr('class', '_3d grid') - .merge(xGrid) - .attr('stroke', 'black') - .attr('stroke-width', 0.3) - .attr('fill', function(d){ return d.ccw ? 'lightgrey' : '#717171'; }) - .attr('fill-opacity', 0.9) - .attr('d', grid3d.draw); - - xGrid.exit().remove(); - - /* ----------- POINTS ----------- */ - - var points = svg.selectAll('circle').data(data[1], key); - - points - .enter() - .append('circle') - .attr('class', '_3d') - .attr('opacity', 0) - .attr('cx', posPointX) - .attr('cy', posPointY) - .merge(points) - .transition().duration(tt) - .attr('r', 3) - .attr('stroke', function(d){ return d3.color(color(d.id)).darker(3); }) - .attr('fill', function(d){ return color(d.id); }) - .attr('opacity', 1) - .attr('cx', posPointX) - .attr('cy', posPointY); - - points.exit().remove(); - - /* ----------- y-Scale ----------- */ - - var yScale = svg.selectAll('path.yScale').data(data[2]); - - yScale - .enter() - .append('path') - .attr('class', '_3d yScale') - .merge(yScale) - .attr('stroke', 'black') - .attr('stroke-width', .5) - .attr('d', yScale3d.draw); - - yScale.exit().remove(); - - /* ----------- y-Scale Text ----------- */ - - var yText = svg.selectAll('text.yText').data(data[2][0]); - - yText - .enter() - .append('text') - .attr('class', '_3d yText') - .attr('dx', '.3em') - .merge(yText) - .each(function(d){ - d.centroid = {x: d.rotated.x, y: d.rotated.y, z: d.rotated.z}; - }) - .attr('x', function(d){ return d.projected.x; }) - .attr('y', function(d){ return d.projected.y; }) - .text(function(d){ return d[1] <= 0 ? d[1] : ''; }); - - yText.exit().remove(); - - d3.selectAll('._3d').sort(d3._3d().sort); - } - - function posPointX(d){ - return d.projected.x; - } - - function posPointY(d){ - return d.projected.y; - } - - function init(){ - var count = 0; - xGrid = [], scatter = [], yLine = []; - for(var z = -j; z < j; z++){ - for(var x = -j; x < j; x++){ - xGrid.push([x, 1, z]); - scatter.push({x: x, y: d3.randomUniform(0, -10)(), z: z, id: 'point_' + count++}); - } - } - - d3.range(-1, 11, 1).forEach(function(d){ yLine.push([-j, -d, -j]); }); - - var data = [ - grid3d(xGrid), - point3d(scatter), - yScale3d([yLine]) - ]; - processData(data, 1000); - } - - 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); - var data = [ - grid3d.rotateY(beta + startAngle).rotateX(alpha - startAngle)(xGrid), - point3d.rotateY(beta + startAngle).rotateX(alpha - startAngle)(scatter), - yScale3d.rotateY(beta + startAngle).rotateX(alpha - startAngle)([yLine]), - ]; - processData(data, 0); - } - - function dragEnd(){ - mouseX = d3.event.x - mx + mouseX; - mouseY = d3.event.y - my + mouseY; - } - - d3.selectAll('button').on('click', init); - - init(); -</script> -</body> |
