Old school D3 from simpler times

All examples By author By category About

Kcnarf

Full window Github gist

Simplex Flurry

This block experiments SimplexNoise (see also 1). More particularly, how to produce distincts noise values from the same coordinates.

Work initiated by this block from elenstar, Drawing Vector Field, and the outstanding Neonflames.

In this block, I use SimplexNoise to produce each tentacle's path. The challenge was to compute distincts tentacles from one unique non-changing central point. It was challenging (for me) because all the others experiments I've done with SimplexNoise use x- and y- coords to produce distincts behaviours. The way I've used SimplexNoise doesn't suit my needs because all tentacles start from the central point, wich eventually produces the same path again and again. To overcome this issue, I influence the noise production with each tentacle's rank (see loc. /*0*/, where the 3rd param.'s value depends on it). Conceptually speaking, I imagine that each tentacle has its own rank-based shift, which uses a particular region of the noise field. What is important is that the shift is high enought to use far enought regions of the noise field. If the shift is too small, then the noises/tentacles will still remain more or less the same.

Another thing I've learnt is that the produced noise values are not uniformaly distributed. This is obvious, but I missed it. The SimplexNoise is an efficient way to produce white noise, which, by definition, is centered on 0. This impacts the code at line /*1*/, where I multiply by 2, and leads to an angle within the too large [-2PI, 2PI] interval. With this tweak, the noise field makes tentacles spreading in all directions. Without this tweak, the noise field tends to go the the right (around the 0° direction), and tentacles tend to spread only toward the right side of the root.

Acknowledgments to:

<meta charset="utf-8">
<style>
  
  #under-construction {
    display: none;
    position: absolute;
    top: 200px;
    left: 300px;
    font-size: 40px;
  }
  
  #flurry {
    margin: 1px;
    border-radius: 1000px;
    box-shadow: 2px 2px 6px grey;
    cursor: crosshair;
  }
</style>
<body>
  <div id="under-construction">
    UNDER CONSTRUCTION
  </div>
  <canvas id="flurry"></canvas>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="simplex-noise.min.js"></script>
  <script>
    var _2PI = 2*Math.PI;
    
    var simplex = new SimplexNoise();
    		coordBasedLength= 100, //lower values make more heratic tentacles
    		timeBasedLength= 20000; //lower values make tentacles evolving faster
    
    var tentacleCount = 12,
        segmentCount = 50,						//segments par tentacle
        segmentLength = 5,
        root = {},										// root coord. of all tentacles
        rootObjective = {},						// allows root to move toward mouse pointer
        tentacles = [],
        target = {},									// allows tentacles to target mouse pointer
    		homingStrength = 0,						// 1: tentacle are free; 0: tentacle target mouse pointer
        homingStrengthObjective = 0;	// allow damping of tentacles'targeting
    
    var cbw = 1, //canvas border width
        cm = 10, //canvas margintotalWidth = 960,
        totalWidth = 960,
        totalHeight = 500;
    		width = totalHeight-(cm+cbw)*2,
        height = totalHeight-(cm+cbw)*2;
    
    initLayout();
    initTentacles();
    
    var flurryContext = document.querySelector("#flurry").getContext("2d");
    
    d3.interval(function(elapsed) {
      updateTentacles(elapsed);
      redrawTentacles();
    });
    
    
    
    function initLayout() {
      d3.select("#flurry")
        .attr("width", width)
        .attr("height", height)
      	.on("mouseenter", entered)
      	.on("touchmove mousemove", moved)
      	.on("mouseout", exited);
    }
    
    function entered() {
      homingStrengthObjective = 0.5;
    }
    
    function moved() {
      var coords = d3.mouse(this);
      rootObjective = {x:coords[0], y: coords[1]};
      target = {x:coords[0], y: coords[1]};
    }
    
    function exited() {
      rootObjective = {x:width/2, y: height/2};
      homingStrengthObjective = 0;
    }
    
    function initTentacles() {
      root = {x: width/2, y: height/2};
      rootObjective = {x: width/2, y: height/2};
      target = {x: width/2, y: height/2};
      var tentacle;
      for (var t=0; t<tentacleCount; t++) { 
        tentacle = tentacles[t] = new Array(segmentCount);
        tentacle[0] = {
          x: root.x,
          y: root.y,
          width: 5
        };
        for (var s=1; s<segmentCount; s++) {
          tentacle[s] = {
            x: root.x,
          	y: root.y,
            width: 5*(1-s/segmentCount) //decrease segment's width as segment is far from root
          };
        }
      }
    }
    
    function updateTentacles(elapsed) {
      var timeBasedChange = elapsed/timeBasedLength;
      var tentacle,
      		prevSeg, seg,
          noise, noiseBasedAngle, targetBasedAngle, composedAngle;
      
      //begin: damping tentacles's targeting
      homingStrength = 0.99*homingStrength + 0.01*homingStrengthObjective;
      //end: damping tentacles's targeting
      
      //begin: damping root's movement toward target
      root.x = 0.995*root.x + 0.005*rootObjective.x;
      root.y = 0.995*root.y + 0.005*rootObjective.y;
      //end: damping root's movement toward target
      
      for (var t=0; t<tentacleCount; t++) {
        tentacle = tentacles[t];
        tentacle[0].x = root.x;
        tentacle[0].y = root.y;
        //begin: update each-but-1st segment's coord. using SimplexNoise
        for (var s=1; s<segmentCount; s++) {
          //segments are chained: coord. of a segment depends on coord. & noise of previous segment
          prevSeg = tentacle[s-1];
          seg = tentacle[s];
/*0*/     noise = simplex.noise3D(prevSeg.x/coordBasedLength, prevSeg.y/coordBasedLength, timeBasedChange+t);
/*1*/     noiseBasedAngle = 2*Math.PI*noise;
          targetBasedAngle = 2*Math.atan2(target.y-prevSeg.y, target.x-prevSeg.x);
          composedAngle = (homingStrength*targetBasedAngle+(1-homingStrength)*noiseBasedAngle);
          seg.x = prevSeg.x + segmentLength*Math.cos(composedAngle);
          seg.y = prevSeg.y + segmentLength*Math.sin(composedAngle);
        }
        //end: update each-but-1st segment's coord. using SimplexNoise
      }
    }
    
    function redrawTentacles() {
      var tentacle;
			flurryContext.strokeStyle = 'rgba(0, 0, 0, 0.05)';
      
      //begin: fade existing image
      flurryContext.fillStyle = 'rgba(255, 255, 255, 0.05)';
      flurryContext.fillRect(0, 0, width, height);
      //begin: fade existing image
      
      //begin: insert tentacles (black)
      for (var t=0; t<tentacleCount; t++) {
        tentacle = tentacles[t];
        for (var s=1; s<segmentCount; s++) {
          flurryContext.lineWidth = tentacle[s].width;
        	flurryContext.beginPath();
          flurryContext.moveTo(tentacle[s-1].x, tentacle[s-1].y);
          flurryContext.lineTo(tentacle[s].x, tentacle[s].y);
        	flurryContext.stroke();
        }
      }
      //end: insert tentacles (black)
      
      //begin: insert central root (red)
      flurryContext.fillStyle = 'rgba(255, 0, 0, 0.3)';
      flurryContext.beginPath();
      flurryContext.arc(root.x, root.y, 2, 0, _2PI);
      flurryContext.fill();
      //end: insert central root (red)
    }
  </script>
</body>

https://d3js.org/d3.v4.min.js