Julia Set

by Jonathan Lam

HTML

<canvas width="500" height="500" id="canvas"></canvas>
<!-- try dragging a sectin on the screen to enlarge -->
<!-- 1920x1645 for Full HD (1080p) screen background -->

CSS

body,html{margin:0;padding:0}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var xMin = -1.5;
var xMax = 1.5;
var yMin = -1.5;
var yMax = 1.5;

var palette = [];
var maxIteration = 70;
for(var i = 0; i <= maxIteration; i++) {
	var hue = 60+(i/maxIteration)*360;
  palette.push("hsl(" + hue + ",100%,50%)");
}
//palette.push("black");

var cX = 0.285;
var cY = 0.01;
var draw = function() {
  for(var x = 0; x < canvasWidth; x++) {
    for(var y = 0; y < canvasHeight; y++) {
      var scaledX = (x/canvasWidth)*(xMax-xMin)+xMin;
      var scaledY = (y/canvasHeight)*(yMax-yMin)+yMin;
      var zX = scaledX;
      var zY = scaledY;
      var iteration = 0;
      while(zX*zX + zY*zY < 4 && iteration < maxIteration) {
        var xTmp = zX*zX - zY*zY + cX;
        zY = 2*zX*zY + cY;
        zX = xTmp;
        iteration++;
      }
      ctx.fillStyle = palette[iteration];
      ctx.fillRect(x, y, 1, 1);
    }
  }
}
draw();

var startX, startY;
function mouseup(event) {
	var endX = event.pageX;
  var endY = event.pageY;
  canvas.removeEventListener("mouseup", mouseup);
  canvas.addEventListener("mousedown", mousedown);
  ctx.strokeRect(Math.min(startX, endX), Math.min(startY, endY), Math.abs(endX-startX), Math.abs(endY-startY));
  setTimeout(()=>{
  	var newXMin = Math.min(startX, endX)*(xMax-xMin)/canvasWidth+xMin;
    var newXMax = Math.max(startX, endX)*(xMax-xMin)/canvasWidth+xMin;
    var newYMin = Math.min(startY, endY)*(yMax-yMin)/canvasHeight+yMin;
    var newYMax = Math.max(startY, endY)*(yMax-yMin)/canvasHeight+yMin;
    xMin = newXMin;
    xMax = newXMax;
    yMin = newYMin;
    yMax = newYMax;
    draw();
  },0);  
}
function mousedown(event) {
	startX = event.pageX;
  startY = event.pageY;
  canvas.removeEventListener("mousedown", mousedown);
  canvas.addEventListener("mouseup", mouseup);
}
canvas.addEventListener("mousedown", mousedown);