about summary refs log tree commit diff
path: root/webgl
diff options
context:
space:
mode:
authorhanemile <hanemile@protonmail.com>2018-12-24 22:48:44 +0100
committerhanemile <hanemile@protonmail.com>2018-12-24 22:48:44 +0100
commit501adaa4dc7f5542dfc93b7c61cbd57c3fbc0c8f (patch)
tree4eca9f2dfca4749efbc273f036cde37beb69f019 /webgl
parent4fb83ecfe52b28296d3ba7ca69b7ab2366a87e6c (diff)
overall push
Diffstat (limited to 'webgl')
-rw-r--r--webgl/index.html177
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>