Vis. variations on Recamán sequence

This block displays some visual variations on the Recamán sequence. Inspiration comes from the Numberphile's video The Slightly Spooky Recamán Sequence.

Here is how the Recamán sequence is computed :

a(0) = 0;
for n > 0:
	a(n) = a(n-1) - n if positive and not already in the sequence,
	a(n) = a(n-1) + n otherwise

Technically speaking, this block allows me to experiment path animation with CSS.

Acknowledgments to :

D3.js (v.5)
blockbuilder.org
Numberphile's enlightments

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Vis. variations on Recamán sequence</title>
  <meta name="description" content="Some visual variations on the Recamán sequence using D3.js">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    .recaman {
      fill: none;
      stroke: grey;
    }
    
    .recaman.main {
      animation: dash;
      animation-duration: 10s;
      animation-timing-function: ease;
      animation-fill-mode: both;
    }

@keyframes dash {
      to {
        stroke-dashoffset: 0;
      }
    }
    
    .recaman.thumbnail {
      fill: transparent;
      stroke: lightGrey;
      stroke-opacity: 0;
      animation: thumbnail;
      animation-duration: .25s;
      animation-timing-function: ease; 
      animation-fill-mode: both;
    }
    
    .recaman.thumbnail:hover {
      stroke: grey;
    }
    
    .thumbnails>:nth-child(1).recaman { animation-delay: 10.5s; }
    .thumbnails>:nth-child(2).recaman { animation-delay: 10.75s; }
    .thumbnails>:nth-child(3).recaman { animation-delay: 11s; }
    .thumbnails>:nth-child(4).recaman { animation-delay: 11.25s; }
    .thumbnails>:nth-child(5).recaman { animation-delay: 11.5s; }
    .thumbnails>:nth-child(6).recaman { animation-delay: 11.75s; }
    .thumbnails>:nth-child(7).recaman { animation-delay: 12s; }

@keyframes thumbnail {
      80% {
        stroke: grey;
        stroke-opacity: 1;
      }
      
      100% {
        stroke-opacity: 1;
        cursor: pointer; 
      }
    }
  </style>
</head>

<body>
  <script>
    //begin: layout conf
    const svgWidth = 960,
          svgHeight = 500,
    			margins = {top: 10, right: 10, bottom:10, left:10},
          width = svgWidth - margins.top - margins.bottom,
      		height = svgHeight - margins.left - margins.right;
    //end: layout conf
    
    //begin: data conf
    const recamanSeqLength = 100,
          stretchedRecamanSeqMax = 400,
          seqScale = stretchedRecamanSeqMax/recamanSeqLength;
   	let recamanSeq,
        stretchedRecamanSeq;
    //end: data conf
    
    //begin: reusable d3 selection
    let svg, drawingArea,recamanPath, thumbnailContainer;
    //end reusable d3 selection
    
    initLayout();
    recamanSeq = computeRecaman(recamanSeqLength);
    stretchedRecamanSeq = recamanSeq.map((v)=>{ return v*seqScale; });
    updateRecamanPath("circle");
        
    
    function initLayout() {
    svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

drawingArea = svg.append("g")
    	.classed("drawing-area", true)
    	.attr("transform", "translate("+[margins.top, margins.left]+")");
      
    initThumbnails();
    
    recamanPath = drawingArea.append("path")
    	.classed("recaman main", true)
    	.attr("transform", "translate("+[0, height/2]+")");
    }
    
    function initThumbnails () {
      const recamanSeq = computeRecaman(6),
            thumbnailSeq = recamanSeq.map( (v)=>{ return v*seqScale; } )
            thumbnailHeight = 4.5*seqScale,
            thumbnailData = [
              {path: computeCirclePath(thumbnailSeq), type: "circle"},
              {path: computeHexPath(thumbnailSeq), type: "hex"},
              {path: computeLosangePath(thumbnailSeq), type: "losange"},
              {path: computeSquarePath(thumbnailSeq), type: "square"},
              {path: computeRoundedSquarePath(thumbnailSeq), type: "roundedSquare"},
              {path: computeZedSquarePath(thumbnailSeq), type: "zedSquare"},
              {path: computeRoundedPlusPath(thumbnailSeq), type: "roundedPlus"}
            ];
      
      thumbnailContainer = drawingArea.append("g")
      	.classed("thumbnails", true)
      	.attr("transform", "translate("+[0, height/2]+")");
      
      let thumbnails = thumbnailContainer.selectAll(".thumbnail")
      	.data(thumbnailData)
      	.enter()
      		.append("path")
      			.attr("d", (d)=>{ return d.path; })
      			.attr("transform", (d,i)=>{
                return "translate("+[0, i*2*thumbnailHeight]+")";
              })
      			.classed("recaman thumbnail", true)
      			.on("click", (d,i)=>{ selectRecamanPath(d,i); })
      
    }
    
    function computeRecaman(recamanSeqLength) {
      let newRecamanSequence = [],
          currentRecamanValue = 0,
          nexRecamanValue,
          i;
      
      for (i=0; i<recamanSeqLength; i++){
        nextRecamanValue = computeNextRecamanValue(currentRecamanValue, i, newRecamanSequence);
        newRecamanSequence.push(nextRecamanValue);
        currentRecamanValue = nextRecamanValue;
      }
      
      return newRecamanSequence;
    }
    
    function computeNextRecamanValue(currentRecamanValue, value, recaman) {
      minus = currentRecamanValue - value;
      if (minus<0) {
        return currentRecamanValue + value;
      } else if (recaman.includes(minus)) {
        return currentRecamanValue + value;
      } else {
        return minus;
      }
    }
    
    function updateRecamanPath(pathType, position) {
      let newPath;
      
      switch (pathType) {
          default:
          	newPath = computeCirclePath(stretchedRecamanSeq);
          	break;
        	case "hex":
          	newPath = computeHexPath(stretchedRecamanSeq);
          	break;
          case "losange":
          	newPath = computeLosangePath(stretchedRecamanSeq);
          	break;
          case "square":
          	newPath = computeSquarePath(stretchedRecamanSeq);
          	break;
          case "roundedSquare":
          	newPath = computeRoundedSquarePath(stretchedRecamanSeq);
          	break;
          case "zedSquare":
          	newPath = computeZedSquarePath(stretchedRecamanSeq);
          	break;
          case "roundedPlus":
          	newPath = computeRoundedPlusPath(stretchedRecamanSeq);
          	break;
      }
      if (!position) { position = 0};
      
      recamanPath.attr("d", newPath);
      let recamanPathLength = recamanPath.node().getTotalLength();
      recamanPath.style("stroke-dasharray", recamanPathLength)
        .style("stroke-dashoffset", recamanPathLength);
    }
    
    function selectRecamanPath(thumbnailDatum, i) {
      const thumbnailHeight = 4.5*seqScale;
      
      thumbnailContainer.transition()
      	.attr("transform", "translate("+[0, height/2-i*2*thumbnailHeight]+")")
      	.on('end', function(d,i){
        		updateRecamanPath(thumbnailDatum.type);
      	});
    }
    
    /////////////////////////////////////////////////////////////////////
    //begin: function used to computed circle/hex/losange/square paths //
    /////////////////////////////////////////////////////////////////////
    function computeCirclePath(recaman) {
      let recamanLength = recaman.length,
          newPath = "M0,0",
          lastValue = 0,
          even = true,
          currentValue,
          halfDist,
          absHalfDist,
          sweepFlag,
          i;
      
      for (i=0; i<recamanLength; i++) {
        currentValue = recaman[i];
        halfDist = (currentValue - lastValue)/2;
        absHalfDist = Math.abs(halfDist);
        
        
        if (currentValue < lastValue) {
          sweepFlag = even? 0 : 1;
        } else {
          sweepFlag = even? 1 : 0;
        }
        
        newPath += "A "+absHalfDist+" "+absHalfDist+" 0 0 "+sweepFlag+" "+[currentValue,0];
        
        lastValue = currentValue;
        even = !even;
      }
      
      return newPath;
    }
    
    function computeHexPath(recaman) {
      return d3.line().curve(d3.curveLinear)(computeCPs(recaman, 2)); 
    }
    
    function computeLosangePath(recaman) {
      return d3.line().curve(d3.curveLinear)(computeCPs(recaman, 1)); 
    }
    
    function computeSquarePath(recaman) {
      return d3.line().curve(d3.curveLinear)(computeSquareCPs(recaman)); 
    }
    
    function computeRoundedSquarePath(recaman) {
      return d3.line().curve(d3.curveBasis)(computeSquareCPs(recaman)); 
    }
    
    function computeZedSquarePath(recaman) {
      return d3.line().curve(d3.curveCardinal)(computeSquareCPs(recaman)); 
    }
    
    function computeRoundedPlusPath(recaman) {
      return d3.line().curve(d3.curveBasis)(computePlusCPs(recaman)); 
    }
    
    
    function computeCPs(recaman, intermediateCPCount) {
      let recamanLength = recaman.length,
          newCPs = [[0,0]],
          lastValue = 0,
          even = true,
          currentValue,
          intermediateCPsAngle,
          intermediateCPsUnitPositions,
          halfX,
          halfDeltaX,
          radius,
          i,
          x,
          y;
      
      if (intermediateCPCount<1) {
        intermediateCPCount = 1;
      }
      if (intermediateCPCount>4) {
        intermediateCPCount = 4;
      }
      intermediateCPsAngle = Math.PI/(intermediateCPCount+1);
      intermediateCPsUnitPositions=[];
      for (i=0; i<intermediateCPCount; i++){
        intermediateCPsUnitPositions.push([
          Math.cos((i+1)*intermediateCPsAngle),
          Math.sin((i+1)*intermediateCPsAngle)
        ]);
      }
      
      for (i=0; i<recamanLength; i++) {
        currentValue = recaman[i];
        halfX = (lastValue+currentValue)/2;
        halfDeltaX = -(currentValue - lastValue)/2;
        radius = Math.abs(halfDeltaX);
        
        intermediateCPsUnitPositions.forEach(function(intermediateCPUnitPosition){
          x = halfX+intermediateCPUnitPosition[0]*halfDeltaX;
          y = intermediateCPUnitPosition[1]*radius;
          if (even) { y = -y; }
          newCPs.push([x, y]);
        })
        newCPs.push([currentValue, 0]);
        
        lastValue = currentValue;
        even = !even;
      }
      
      return newCPs;
    }
    
    function computeSquareCPs(recaman) {
      let recamanLength = recaman.length,
          newCPs = [[0,0]],
          lastValue = 0,
          even = true,
          currentValue,
          absHalfDeltaX,
          i,
          y;
      for (i=0; i<recamanLength; i++) {
        currentValue = recaman[i];
        absHalfDeltaX = Math.abs((currentValue - lastValue)/2);
        
        y = even? -absHalfDeltaX : absHalfDeltaX;
        
        newCPs.push([lastValue, y]);
        newCPs.push([currentValue, y]);
        newCPs.push([currentValue, 0]);
        
        lastValue = currentValue;
        even = !even;
      }
      
      return newCPs;
    }
    
    function computePlusCPs(recaman) {
      let recamanLength = recaman.length,
          newCPs = [[0,0]],
          lastValue = 0,
          even = true,
          currentValue,
          halfX,
          quarterDeltaX,
          absHalfDeltaX,
          i,
          y;
      for (i=0; i<recamanLength; i++) {
        currentValue = recaman[i];
        halfX = (lastValue + currentValue)/2,
        quarterDeltaX = -(lastValue - currentValue)/4,
        absHalfDeltaX = Math.abs((currentValue - lastValue)/2);
        
        y = even? -absHalfDeltaX : absHalfDeltaX;
        
        newCPs.push([lastValue, y/2]);
        newCPs.push([lastValue+quarterDeltaX, y/2]);
        newCPs.push([lastValue+quarterDeltaX, y]);
        newCPs.push([currentValue-quarterDeltaX, y]);
        newCPs.push([currentValue-quarterDeltaX, y/2]);
        newCPs.push([currentValue, y/2]);
        newCPs.push([currentValue, 0]);
        
        lastValue = currentValue;
        even = !even;
      }
      
      return newCPs;
    }
		///////////////////////////////////////////////////////////////////
    //end: function used to computed circle/hex/losange/square paths //
    ///////////////////////////////////////////////////////////////////
  </script>
</body>

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