siers/index.html

## index.html
<!-- original: https://jsfiddle.net/poetix/KtCnB/ -->
<!-- testing hypothesis for generating: https://twitter.com/matthen2/status/1498717789233758222 -->
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <canvas width="500px" height="500px" id="canvas"></canvas>
        <input type="range" id="iterations" name="iterations" min="0" max="100" value="50" step="1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.3.0/math.js" type="text/javascript"></script>
        <script>
          function iterate(cr, ci, maxIter, slider) {
              var smooth = slider / 100
              var c = math.complex(cr, ci)
              var z = math.complex(0, 0)
              var iter = 0

              while (iter < maxIter && z.abs() < 4.0) {
                  z = math.add(math.pow(z, 1 + 1 * smooth), c)
                  iter += 1
              }
              return iter
          }

          function plotMandelbrot(slider) {
            return (x, y, data, ptr) => {
              value = iterate(x, y, 20, slider)
              data[ptr++] = 128 + (128 * Math.sin(value * Math.PI / 10))
              data[ptr++] = 128 + (128 * Math.cos(value * Math.PI / 11))
              data[ptr++] = 128 + (128 * Math.cos(value * Math.PI / 13))
              data[ptr] = 255
            }
          }

          function plotRow(minx, maxx, y, width, data, plotPoint) {
              var dx = (maxx - minx) / width,
                  x = minx,
                  px,
                  ptr = 0

              for (px = 0; px < width; px += 1) {
                  plotPoint(x, y, data, ptr)
                  ptr += 4
                  x += dx
              }
          }

          function plotGraph(minx, maxx, miny, maxy, width, height, plotPoint, ctx, slider) {
              var y = miny,
                  dy = (maxy - miny) / height,
                  py,
                  imageData

              for (py = 0; py < height; py += 1) {
                  imageData = ctx.createImageData(width, 1)
                  plotRow(minx, maxx, y, width, imageData.data, plotPoint(slider))
                  ctx.putImageData(imageData, 0, py)
                  y += dy
              }
          }

          var slider = $("#iterations")
          var plot = function() {
              plotGraph(-2.0, 0.5, -1.25, 1.25, 500, 500, plotMandelbrot, $('#canvas')[0].getContext('2d'), parseInt(slider[0].value))
          }

          $(document).ready(function() {
            slider.change(plot)
            plot()
          })
        </script>
    </body>
</html>
	<!-- original: https://jsfiddle.net/poetix/KtCnB/ -->
	<!-- testing hypothesis for generating: https://twitter.com/matthen2/status/1498717789233758222 -->
	<!DOCTYPE html>
	<html>
	<head>
	</head>
	<body>
	<canvas width="500px" height="500px" id="canvas"></canvas>
	<input type="range" id="iterations" name="iterations" min="0" max="100" value="50" step="1">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.3.0/math.js" type="text/javascript"></script>
	<script>
	function iterate(cr, ci, maxIter, slider) {
	var smooth = slider / 100
	var c = math.complex(cr, ci)
	var z = math.complex(0, 0)
	var iter = 0

	while (iter < maxIter && z.abs() < 4.0) {
	z = math.add(math.pow(z, 1 + 1 * smooth), c)
	iter += 1
	}
	return iter
	}

	function plotMandelbrot(slider) {
	return (x, y, data, ptr) => {
	value = iterate(x, y, 20, slider)
	data[ptr++] = 128 + (128 * Math.sin(value * Math.PI / 10))
	data[ptr++] = 128 + (128 * Math.cos(value * Math.PI / 11))
	data[ptr++] = 128 + (128 * Math.cos(value * Math.PI / 13))
	data[ptr] = 255
	}
	}

	function plotRow(minx, maxx, y, width, data, plotPoint) {
	var dx = (maxx - minx) / width,
	x = minx,
	px,
	ptr = 0

	for (px = 0; px < width; px += 1) {
	plotPoint(x, y, data, ptr)
	ptr += 4
	x += dx
	}
	}

	function plotGraph(minx, maxx, miny, maxy, width, height, plotPoint, ctx, slider) {
	var y = miny,
	dy = (maxy - miny) / height,
	py,
	imageData

	for (py = 0; py < height; py += 1) {
	imageData = ctx.createImageData(width, 1)
	plotRow(minx, maxx, y, width, imageData.data, plotPoint(slider))
	ctx.putImageData(imageData, 0, py)
	y += dy
	}
	}

	var slider = $("#iterations")
	var plot = function() {
	plotGraph(-2.0, 0.5, -1.25, 1.25, 500, 500, plotMandelbrot, $('#canvas')[0].getContext('2d'), parseInt(slider[0].value))
	}

	$(document).ready(function() {
	slider.change(plot)
	plot()
	})
	</script>
	</body>
	</html>