Mandelbrot as a flow field

by asemahle

HTML

<canvas id="canvas" width="400" height="400">
  Your browser does not support html5. Pls get a better one. Thx.
</canvas>

JavaScript

function GetPoint(x, y, iterations) {
	let zx = 0;
  let zy = 0;
  
  // z^2 = (zr + zi) * (zr + zi)
  for (let i = 0; i < iterations; i++) {
  	zxx = zx * zx;
    zyy = zy * zy;
    zxy = zx * zy;
    
    zx = zxx - zyy + x;
    zy = zxy + zxy + y;
  }
  
  return [zx, zy];
}

function ToSet(x,y) {
	return [
  	x * plotSize/canvas.width - 2,
    y * plotSize/canvas.height - 2
  ];
}

function ToCanvas(x,y) {
	return [
  	(x + 2) * canvas.width/plotSize,
    (y + 2) * canvas.height/plotSize
  ]
}

function Scale(a,b,factor) {
	return [
  	a[0] + (b[0] - a[0]) * factor,
    a[1] + (b[1] - a[1]) * factor
  ]
}

function Norm(a,b) {
	let dx = b[0] - a[0];
  let dy = b[1] - a[1];
  let len = Math.sqrt(dx*dx + dy*dy);
  if (len == 0) return [a[0],b[0]];
  return [
  	a[0] + (dx / len),
    a[1] + (dy / len)
  ]
}

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle="white";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle="black";
ctx.strokeStyle="black";
ctx.strokeWidth=1;

var step = 5;
var iterations = 6;
var plotSize = 4;


for (let y = 0; y < canvas.height; y += step) {
	for (let x =0; x < canvas.width; x += step) {
  	
    s = ToSet(x,y);
    let r = GetPoint(s[0], s[1], iterations);
    
    s = ToCanvas(...s);
    r = ToCanvas(...r);
    r = Scale(s, Norm(s,r), 4);
    
    ctx.beginPath();  
    ctx.moveTo(s[0], s[1]);
    ctx.lineTo(r[0], r[1]);
    ctx.stroke();
    
  }
}