D3 Examples - #10print & SimplexNoise

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>#10print</title>
    <meta name="description" content="creative coding related to #10print">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="simplex-noise.min.js"></script>
    <style>
      #layouter {
        text-align: center;
        position: relative;
      }
      
      #wip {
        display: none;
        position: absolute;
        top: 220px;
        left: 120px;
        font-size: 40px;
        color: white;
      }
​
      svg {
        margin: 1px;
        border-radius: 1000px;
        box-shadow: 2px 2px 6px grey;
        background-color: black;
      }
      
      .char {
        stroke:green;
        stroke-width: 3px;
        stroke-linecap: round;
      }
    </style>
  </head>
  <body>
    <div id="layouter">
      <svg>
        <g id="drawing-area"></g>
      </svg>
​
      <div id="wip">
        Work in progress ...
      </div>
    </div>
    
    <script>
      var _2PI = 2*Math.PI,
          sqrt = Math.sqrt,
          sqr = function(d) { return Math.pow(d,2); },
              WITH_TRANSITION = true,
          WITHOUT_TRANSITION = false;
      
      //begin: layout conf.
      var totalWidth = 500,
          totalHeight = 500,
          controlsHeight = 0,
          svgRadius = (totalHeight-controlsHeight)/2,
          svgbw = 1, //svg border width
          svgHeight = 2*svgRadius,
          svgWidth = 2*svgRadius,
          radius = svgRadius-svgbw,
          width = 2*svgRadius,
          height = 2*svgRadius,
          halfRadius = radius/2
          halfWidth = halfRadius,
          halfHeight = halfRadius,
          quarterRadius = radius/4;
          quarterWidth = quarterRadius,
          quarterHeight = quarterRadius;
      
      var cellSize = 10,    // in [10, 20 ,40]
          strokeSize = cellSize/10+1,
          halfCellSize = cellSize/2,
          cellCount = Math.floor(2*radius/cellSize),
            drawingAreaSize = cellSize*cellCount,
            drawingAreaLeft = drawingAreaTop = (2*radius-drawingAreaSize)/2;
      //end: layout conf.
      
      //begin: drawing conf.
      var withTransition = true,
          duration = 250,
            simplex = new SimplexNoise(),
          spaceLength = cellSize*10, // in [*1, *5, *10, *20]
          timeLength = 10000;
      //end: drawing conf.
      
      //begin: init
      var   cellData = [];
      //end: init
      
      initData();
      initLayout();
      
      function initData() {
        for(var x=0; x<cellCount; x++) {
          for (var y=0; y<cellCount; y++) {
            cellData.push({
              x: cellSize*x,
              y: cellSize*y,
              sValue: 0,
            })
          }
        }
      }
      
      function simplexValue(x, y, elapsed) {
        return simplex.noise3D(x/spaceLength, y/spaceLength, elapsed/timeLength);
      }
      
      var rotate = function(d){ return "rotate("+((d.sValue<0)? 0 : 90)+")"; };
      
      var opacity = function(d){ return (d.sValue+1)/2; };
      
      function initLayout() {
        d3.select("#layouter").style("width", totalWidth+"px").style("height", totalHeight+"px");
        d3.select("svg").attr("width", svgWidth).attr("height", svgHeight);
                d3.select("#drawing-area").attr("width", drawingAreaSize).attr("height", drawingAreaSize).attr("transform", "translate("+[drawingAreaLeft, drawingAreaTop]+")").style("stroke-width", strokeSize);
        
        //begin: add slashes
        var d3selLines = d3.select("#drawing-area").selectAll(".char").data(cellData);
        var foo = halfCellSize-strokeSize+1;
        var slashPath = "M"+[-foo, -foo]+"L"+[foo, foo];
        
        
        d3selLines = d3selLines.enter()
            .append("g")
            .classed("char", true)
            .attr("transform", function(d){ return "translate("+[d.x+halfCellSize, d.y+halfCellSize]+")"; })
            .append("path")
                    .classed("slash", true)
                    .attr("d", slashPath);
        //end: add slashes
        
        redraw(WITHOUT_TRANSITION);
      }
      
      d3.interval(function(elapsed) {
        //begin: update cells' value with Simplex
        cellData.forEach(function(d) {
          d.sValue = simplexValue(d.x, d.y, elapsed);
        })
        //end: update cells' value with Simplex
        
        //redraw
        redraw(withTransition);
      }, duration)
      
      function redraw(withTransition) {
        var selection = d3.select("#drawing-area").selectAll(".slash").data(cellData);
        
        if (withTransition) {
          selection = selection.transition().duration(duration);
        }
        selection.attr("transform", rotate).style("opacity", opacity);
      }
    </script>
  </body>
</html>
    