Built with blockbuilder.org
xxxxxxxxxx
<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