D3 version of "Interstellar Overdrive"

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-timer.v1.min.js"></script>
    <script src="https://d3js.org/d3-random.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <div id="art"></div>
  
  <script type="text/javascript">
        // based on https://deconbatch.blogspot.com/2017/12/interstellar-overdrive.html

var width = 900,
            height = 600;

var centx;
        var centy;
        
        var colorBase;
        var rotationBase;
        var sizeBase;
        var cxnoiseDivBase;
        var cynoiseBase;
        var csnoiseBase;

var base = d3.select('#art');
        var canv = base.append('canvas')
            .attr('width', width)
            .attr('height', height);

var context = canv.node().getContext("2d");
        // colorMode(HSB, 360, 100, 100, 100); ???

//init a few d3 things we'll need
        
        var scaleDivBase = d3.scaleLinear().domain([0.0, 1.0]).range([0.00005, 0.00025]);
        var scale360     = d3.scaleLinear().domain([0.0, 1.0]).range([0, 360.0]);
        var scaleRadius  = d3.scaleLinear().range([1.0, 1.6]).domain([-2.0, 2.0]);
        var scaleXY = d3.scaleLinear().domain([-1.0, 1.0]);
        
        var rnd = d3.randomUniform(1.0);

centx = width / 2;
        centy = height / 2;
        colorBase = d3.randomUniform(360.0)();
        rotationBase = d3.randomUniform(90.0)();
        sizeBase = 10.0;
        cxnoiseDivBase = scaleDivBase(rnd());
        cynoiseBase = scale360(rnd());
        csnoiseBase = scale360(rnd());

//var color = d3.scale.threshold().domain([-13, -6, 0, 5, 11]).range(['rgb(8,81,156)', 'rgb(107,174,214)', 'rgb(198,219,239)', 'rgb(254,197,79)', 'rgb(254,153,41)', 'rgb(217,95,14)']);
        function draw() {
            context.save();
            context.clearRect(0,0,width,height);

context.translate(centx, centy);

rotationBase -= 0.08;
            cxnoiseDivBase += 0.0000003;    // wave
            cynoiseBase += 0.00002;         // roll
            csnoiseBase += 0.00000;         // blink

var radiusBase = 15.0;
            var cxnoise = 0.0;
            var cynoise = cynoiseBase;
            var csnoise = csnoiseBase;
            var cxnoiseDiv = cxnoiseDivBase;
            var cynoiseDiv = 0.01;
            var csnoiseDiv = 0.005;
            var iangleMax = 360 * 68;

canvaseRotation(rotationBase);
            
            var color = d3.color('hsl(' + colorBase + ', 60%, 40%)');
            var ang, radius, ePtX, ePtY, eSiz, eAlp, rads;

context.fillStyle=color.toString();
             
            for (var iangle = 0; iangle <= iangleMax; ++iangle) {
                if (radiusBase > width * 0.6) {
                    break;
                }
                radiusBase += radiusBase * 0.00015;
                    
                ang = iangle * 0.1;
                rads = radians(ang);
                radius = radiusBase * scaleRadius(customNoise(cxnoise) + customNoise(cynoise));
                scaleXY.range([-radius, radius]);
                ePtX = scaleXY(Math.cos(rads));
                ePtY = scaleXY(Math.sin(rads));
                eSiz = (2.0 + Math.abs(customNoise(csnoise)) * sizeBase) * map(iangle, 0.0, iangleMax, 0.01, 1.0);
                eAlp = 100.0 - Math.abs(customNoise(csnoise)) * 100.0;
            
                context.beginPath();
                context.globalAlpha = eAlp / 200.0;
				context.ellipse(ePtX, ePtY, eSiz, eSiz, 0,  2 * Math.PI, false);
				context.fill();
				context.closePath();

cxnoise += cxnoiseDiv;
                cynoise += cynoiseDiv;
                csnoise += csnoiseDiv;
            }

context.restore();
        }

var delay = 1;
        var timer = d3.interval(function(elapsed) {
            if (elapsed > 540 * delay * 1000) timer.stop();
            draw();
        }, delay, 0);
        
        function customNoise(value) {
            return Math.pow(Math.sin(value), 3) * Math.cos(Math.pow(value, 2));
        }

function canvaseRotation(degrees) {
            context.rotate(radians(degrees));
        }

function radians(degrees) {
            return degrees * Math.PI / 180.0;
        }

function map(value, istart, istop, ostart, ostop) {
            return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
        }
      
    </script>
</body>

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

https://d3js.org/d3-timer.v1.min.js

https://d3js.org/d3-random.v1.min.js