biovisualize/.block

## .block
license: mit

## index.html
<html>
<head>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      background: black
    }
      path {
        stroke-width: 5px;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-opacity: 1;
        fill-opacity: 0.8
      }
      .path1 {
        stroke: lime;
        fill: red;
      }
      .path3 {
        stroke: lime;
        fill: lime;
        fill-opacity: 0;
        stroke-opacity: 1;
        stroke-width: 2px;
      }
      .path2 {
        stroke: brown;
        fill: orange;
      }
      .path4 {
        stroke: lime;
        fill: lime;
        stroke-width: 10px;
      }
    .chart {
      margin-top: 300px;
    }
  </style>
</head>
<body>
<div class="chart"></div>
<script>

d3.superformula = function() {
    var _line = d3.line()

    function generatePath(params, size, segments) {
        // var params = superformulaTypes[type]
        var diameter = size
        var n = segments

        var i = -1,
            dt = 2 * Math.PI / n,
            t,
            r = 0,
            x,
            y,
            points = []

        while (++i < n) {
          t = params.m * (i * dt - Math.PI) / 4
          t = Math.pow(Math.abs(Math.pow(Math.abs(Math.cos(t) / params.a), params.n2)
            + Math.pow(Math.abs(Math.sin(t) / params.b), params.n3)), -1 / params.n1)
          if (t > r) r = t
          points.push(t)
        }

        r = diameter * Math.SQRT1_2 / r
        i = -1
        while (++i < n) {
          x = (t = points[i] * r) * Math.cos(i * dt)
          y = t * Math.sin(i * dt)
          points[i] = [Math.abs(x) < 1e-6 ? 0 : x, Math.abs(y) < 1e-6 ? 0 : y]
        }

        return _line(points) + "Z"
    }

    var superformulaTypes = {
        asterisk: {m: 12, n1: .3, n2: 0, n3: 10, a: 1, b: 1},
        bean: {m: 2, n1: 1, n2: 4, n3: 8, a: 1, b: 1},
        butterfly: {m: 3, n1: 1, n2: 6, n3: 2, a: .6, b: 1},
        circle: {m: 4, n1: 2, n2: 2, n3: 2, a: 1, b: 1},
        clover: {m: 6, n1: .3, n2: 0, n3: 10, a: 1, b: 1},
        cloverFour: {m: 8, n1: 10, n2: -1, n3: -8, a: 1, b: 1},
        cross: {m: 8, n1: 1.3, n2: .01, n3: 8, a: 1, b: 1},
        diamond: {m: 4, n1: 1, n2: 1, n3: 1, a: 1, b: 1},
        drop: {m: 1, n1: .5, n2: .5, n3: .5, a: 1, b: 1},
        ellipse: {m: 4, n1: 2, n2: 2, n3: 2, a: 9, b: 6},
        gear: {m: 19, n1: 100, n2: 50, n3: 50, a: 1, b: 1},
        heart: {m: 1, n1: .8, n2: 1, n3: -8, a: 1, b: .18},
        heptagon: {m: 7, n1: 1000, n2: 400, n3: 400, a: 1, b: 1},
        hexagon: {m: 6, n1: 1000, n2: 400, n3: 400, a: 1, b: 1},
        malteseCross: {m: 8, n1: .9, n2: .1, n3: 100, a: 1, b: 1},
        pentagon: {m: 5, n1: 1000, n2: 600, n3: 600, a: 1, b: 1},
        rectangle: {m: 4, n1: 100, n2: 100, n3: 100, a: 2, b: 1},
        roundedStar: {m: 5, n1: 2, n2: 7, n3: 7, a: 1, b: 1},
        square: {m: 4, n1: 100, n2: 100, n3: 100, a: 1, b: 1},
        star: {m: 5, n1: 30, n2: 100, n3: 100, a: 1, b: 1},
        triangle: {m: 3, n1: 100, n2: 200, n3: 200, a: 1, b: 1}
    }

    return {
        generatePath: generatePath
    }
}

var w = 1000
var h = 1000
var superformulaPath

var svg = d3.select(".chart").append("svg")
    .attr("width", w)
    .attr("height", h)

var path1 = svg.append("path")
    .classed("path1", true)
    .attr("transform", "translate(" + [w / 2, h / 2] + ")")

var path2 = svg.append("path")
    .classed("path2", true)
    .attr("transform", "translate(" + [w / 2, h / 2] + ")")

var path3 = svg.append("path")
    .classed("path3", true)
    .attr("transform", "translate(" + [w / 2, h / 2] + ")")

var path4 = svg.append("path")
    .classed("path4", true)
    .attr("transform", "translate(" + [w / 2, h / 2] + ")")

function generate(params1, params2, params3, params4) {
    superformulaPath = d3.superformula().generatePath(params1, w * 0.7, 2048)
    path1.attr("d", superformulaPath)
    superformulaPath = d3.superformula().generatePath(params2, w * 0.6, 2048)
    path2.attr("d", superformulaPath)
    superformulaPath = d3.superformula().generatePath(params3, w * 0.7, 2048)
    path3.attr("d", superformulaPath)
    superformulaPath = d3.superformula().generatePath(params4, w * 0.2, 2048)
    path4.attr("d", superformulaPath)
}


var m = 1,
n1 = 1,
n2 = 1,
n3 = 1,
a = 0,
b = 0,
n4 = 50,
n5 = 0,
n6 = 50

var end = 5 + 3 * 10
var count = 0
setInterval(() => {
  if(count < end) {
    generate(
        {m: 10, n1: n1 += 0.1, n2: n2 += 5, n3: 10, a: 1, b: 0.5},
        {m: 20, n1: n1 += 0.8, n2: n2 += 1, n3: 20, a: 0.8, b: 0.01},
        {m: 10, n1: n1 += 0.3, n2: n2 += 1, n3: 1, a: 1, b: 1},
        {m: 6, n1: n4 -= 0.1, n2: n5 -= 1, n3: 3, a: 0.8, b: 1}
    )
	}
  else {
    generate(
        {m: 10, n1: n1 -= 0.1, n2: n2 -= 5, n3: 10, a: 1, b: 0.5},
        {m: 20, n1: n1 -= 0.8, n2: n2 -= 1, n3: 20, a: 0.8, b: 0.01},
        {m: 10, n1: n1 -= 0.3, n2: n2 -= 1, n3: 1, a: 1, b: 1},
        {m: 6, n1: n4 += 0.1, n2: n5 += 1, n3: 3, a: 0.8, b: 1}
    )
  }
  count++
}, 200)


</script>
</body>
</html>
	<html>
	<head>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body {
	background: black
	}
	path {
	stroke-width: 5px;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-opacity: 1;
	fill-opacity: 0.8
	}
	.path1 {
	stroke: lime;
	fill: red;
	}
	.path3 {
	stroke: lime;
	fill: lime;
	fill-opacity: 0;
	stroke-opacity: 1;
	stroke-width: 2px;
	}
	.path2 {
	stroke: brown;
	fill: orange;
	}
	.path4 {
	stroke: lime;
	fill: lime;
	stroke-width: 10px;
	}
	.chart {
	margin-top: 300px;
	}
	</style>
	</head>
	<body>
	<div class="chart"></div>
	<script>

	d3.superformula = function() {
	var _line = d3.line()

	function generatePath(params, size, segments) {
	// var params = superformulaTypes[type]
	var diameter = size
	var n = segments

	var i = -1,
	dt = 2 * Math.PI / n,
	t,
	r = 0,
	x,
	y,
	points = []

	while (++i < n) {
	t = params.m * (i * dt - Math.PI) / 4
	t = Math.pow(Math.abs(Math.pow(Math.abs(Math.cos(t) / params.a), params.n2)
	+ Math.pow(Math.abs(Math.sin(t) / params.b), params.n3)), -1 / params.n1)
	if (t > r) r = t
	points.push(t)
	}

	r = diameter * Math.SQRT1_2 / r
	i = -1
	while (++i < n) {
	x = (t = points[i] * r) * Math.cos(i * dt)
	y = t * Math.sin(i * dt)
	points[i] = [Math.abs(x) < 1e-6 ? 0 : x, Math.abs(y) < 1e-6 ? 0 : y]
	}

	return _line(points) + "Z"
	}

	var superformulaTypes = {
	asterisk: {m: 12, n1: .3, n2: 0, n3: 10, a: 1, b: 1},
	bean: {m: 2, n1: 1, n2: 4, n3: 8, a: 1, b: 1},
	butterfly: {m: 3, n1: 1, n2: 6, n3: 2, a: .6, b: 1},
	circle: {m: 4, n1: 2, n2: 2, n3: 2, a: 1, b: 1},
	clover: {m: 6, n1: .3, n2: 0, n3: 10, a: 1, b: 1},
	cloverFour: {m: 8, n1: 10, n2: -1, n3: -8, a: 1, b: 1},
	cross: {m: 8, n1: 1.3, n2: .01, n3: 8, a: 1, b: 1},
	diamond: {m: 4, n1: 1, n2: 1, n3: 1, a: 1, b: 1},
	drop: {m: 1, n1: .5, n2: .5, n3: .5, a: 1, b: 1},
	ellipse: {m: 4, n1: 2, n2: 2, n3: 2, a: 9, b: 6},
	gear: {m: 19, n1: 100, n2: 50, n3: 50, a: 1, b: 1},
	heart: {m: 1, n1: .8, n2: 1, n3: -8, a: 1, b: .18},
	heptagon: {m: 7, n1: 1000, n2: 400, n3: 400, a: 1, b: 1},
	hexagon: {m: 6, n1: 1000, n2: 400, n3: 400, a: 1, b: 1},
	malteseCross: {m: 8, n1: .9, n2: .1, n3: 100, a: 1, b: 1},
	pentagon: {m: 5, n1: 1000, n2: 600, n3: 600, a: 1, b: 1},
	rectangle: {m: 4, n1: 100, n2: 100, n3: 100, a: 2, b: 1},
	roundedStar: {m: 5, n1: 2, n2: 7, n3: 7, a: 1, b: 1},
	square: {m: 4, n1: 100, n2: 100, n3: 100, a: 1, b: 1},
	star: {m: 5, n1: 30, n2: 100, n3: 100, a: 1, b: 1},
	triangle: {m: 3, n1: 100, n2: 200, n3: 200, a: 1, b: 1}
	}

	return {
	generatePath: generatePath
	}
	}

	var w = 1000
	var h = 1000
	var superformulaPath

	var svg = d3.select(".chart").append("svg")
	.attr("width", w)
	.attr("height", h)

	var path1 = svg.append("path")
	.classed("path1", true)
	.attr("transform", "translate(" + [w / 2, h / 2] + ")")

	var path2 = svg.append("path")
	.classed("path2", true)
	.attr("transform", "translate(" + [w / 2, h / 2] + ")")

	var path3 = svg.append("path")
	.classed("path3", true)
	.attr("transform", "translate(" + [w / 2, h / 2] + ")")

	var path4 = svg.append("path")
	.classed("path4", true)
	.attr("transform", "translate(" + [w / 2, h / 2] + ")")

	function generate(params1, params2, params3, params4) {
	superformulaPath = d3.superformula().generatePath(params1, w * 0.7, 2048)
	path1.attr("d", superformulaPath)
	superformulaPath = d3.superformula().generatePath(params2, w * 0.6, 2048)
	path2.attr("d", superformulaPath)
	superformulaPath = d3.superformula().generatePath(params3, w * 0.7, 2048)
	path3.attr("d", superformulaPath)
	superformulaPath = d3.superformula().generatePath(params4, w * 0.2, 2048)
	path4.attr("d", superformulaPath)
	}


	var m = 1,
	n1 = 1,
	n2 = 1,
	n3 = 1,
	a = 0,
	b = 0,
	n4 = 50,
	n5 = 0,
	n6 = 50

	var end = 5 + 3 * 10
	var count = 0
	setInterval(() => {
	if(count < end) {
	generate(
	{m: 10, n1: n1 += 0.1, n2: n2 += 5, n3: 10, a: 1, b: 0.5},
	{m: 20, n1: n1 += 0.8, n2: n2 += 1, n3: 20, a: 0.8, b: 0.01},
	{m: 10, n1: n1 += 0.3, n2: n2 += 1, n3: 1, a: 1, b: 1},
	{m: 6, n1: n4 -= 0.1, n2: n5 -= 1, n3: 3, a: 0.8, b: 1}
	)
	}
	else {
	generate(
	{m: 10, n1: n1 -= 0.1, n2: n2 -= 5, n3: 10, a: 1, b: 0.5},
	{m: 20, n1: n1 -= 0.8, n2: n2 -= 1, n3: 20, a: 0.8, b: 0.01},
	{m: 10, n1: n1 -= 0.3, n2: n2 -= 1, n3: 1, a: 1, b: 1},
	{m: 6, n1: n4 += 0.1, n2: n5 += 1, n3: 3, a: 0.8, b: 1}
	)
	}
	count++
	}, 200)


	</script>
	</body>
	</html>