rafgraph / fractal

Mandelbrot fractal generator - js web app, uses zero libraries

Mandelbrot Fractal Generator

https://fractal.rafgraph.dev

JavaScript app that draws the Mandelbrot fractal and allows you to zoom in and explore the fractal (uses zero libraries). Launches in fullscreen mode for maximum impact on desktop, and has a responsive mobile compatible design with a multi-touch interface on mobile devices.

The coloring algorithm adjusts to the number of colors needed (i.e. the maximum escape time for the Mandelbrot set generation). See below for more info on the coloring algorithm.

By default the maximum escape time is 224, but you can select 448, 896, or 1792 via the higher escape time links on the launch page. Note that if you zoom in on the fractal and exit back to the launch page, and then select a different escape time, it will launch and redraw the fractal in the same place that you had zoomed in on, just with a different maximum escape time (and different coloring).

The code is split into two independent parts: app.js and fractal.js. The app handles all the setup and user interaction, and communicates these to the fractal using the fractal's api. The fractal just calculates and draws itself based on the settings it receives from the app.

Screenshots

Captured on iPhone 6

Fractal API

fractal.js is designed to work independently from app.js and can easily be integrated into any project. It provides an api through its update function, which takes an options object that instructs the fractal how to adjust itself before it re-renders.

// create fractal object, send it an HTML canvas element
// on which it will draw itself
var fractal = new Fractal(fractalCanvasElement);

// tell the fractal to update itself based on the options sent
// it will only redraw itself if necessary
fractal.update(options);

// fractal api as an options object
// all keys are optional
var options = {

  // set size of canvas
  // set pixel width of canvas
  pxWidth: number, // e.g. 2880

  // set pixel height of canvas
  pxHeight: number, // e.g. 1800


  // reset to default settings (coordinates, max escape time, and
  // starting options - does not reset canvas size)
  defaults: true,

  // reset to default cartesian coordinates (shows the whole fractal)
  resetToDefaultCords: true,

  // draw the fractal at these specific cartesian coordinates
  cords: {  
    xCartMin: number, // e.g. -2.1
    xCartMax: number, // e.g. 0.8,
    yCartMin: number, // e.g. -1.2,
    yCartMax: number // e.g. 1.2
  },

  // set the maximum escape time
  // numbers < 14 will be converted to 14
  // numbers > 1792 will be converted to 1792
  maxEscapeTime: number, // e.g. 224

  // pixel coordinates on canvas of point to zoom in on
  zoomInPxPoint: {
    xPx: number, // e.g. 100
    yPx: number // e.g. 100
  },

  // pixel coordinates on canvas of point to zoom out from
  zoomOutPxPoint: {
    xPx: number, // e.g. 100
    yPx: number // e.g. 100
  },

  // pixel coordinates of rectangle on canvas to zoom in on
  zoomInPxBox: {
    xPxMin: number, // e.g. 50
    xPxMax: number, // e.g. 100
    yPxMin: number, // e.g. 50
    yPxMax: number // e.g. 100
  },

  // set the current options as the starting options
  // the fractal resets to its starting options when told to reset
  setAsStartingOptions: bool, // e.g. true

  // reset cartesian coordinates to starting cartesian coordinates
  resetCords: bool, // e.g. true

  // reset the max escape time to the starting max escape time
  resetMaxEscapeTime: bool, // e.g. true

  // draw with distortion if the ratio of canvas width/height doesn't
  // match the ratio of cartesian coordinates width/height
  // by default (if this is omitted or false) the cartesian coordinates are
  // adjusted to match the ratio of the canvas width/height to avoid distortion
  distortion: bool // e.g. true

}

Coloring Algorithm

Start with 2 of the 3 red, green and blue values fixed at either 0 or 255, then increase the other R, G or B value in a given number of increments based on the number of colors needed, repeat this for seven cases and you get a maximum of 1792 colors (7*256). Note that white repeats 3 times, at the end of cases 2, 4 and 6.

The seven case are:
case 0: R=0, B=0, increase green from 0 to 255
case 1: R=0 G=255, increase blue from 0 to 255
case 2: G=255, B=255, increase red form 0 to 255
case 3: G=0, B=255, increase red from 0 to 255
case 4: R=255, B=255, increase green from 0 to 255
case 5: R=255, B=0, increase green from 0 to 255
case 6: R=255, G=255, increase blue from 0 to 255

Fractal.prototype.rgbNum = function(escapeTime){
  if (escapeTime <= 2) {
    //pin all escape times less than 3 to black
    return [0, 0, 0];
  } else if (escapeTime === this.maxEscapeTime) {
    //normally this would be white, but that's too much white, so override
    return [0, 25, 0];
  }

  var redNum;
  var greenNum;
  var blueNum;
  var rgbIncrements = Math.floor(((this.maxEscapeTime) / 7));
  var caseNum = Math.floor(escapeTime / rgbIncrements);
  var remainNum = escapeTime % rgbIncrements;

  switch (caseNum) {
    case 0:
      redNum = 0;
      greenNum = Math.floor(256 / rgbIncrements) * remainNum;
      blueNum = 0;
      break;
    case 1:
      redNum = 0;
      greenNum = 255;
      blueNum = Math.floor(256 / rgbIncrements) * remainNum;
      break;
    case 2:
      redNum = Math.floor(256 / rgbIncrements) * remainNum;
      greenNum = 255;
      blueNum = 255;
      break;
    case 3:
      redNum = Math.floor(256 / rgbIncrements) * remainNum;
      greenNum = 0;
      blueNum = 255;
      break;
    case 4:
      redNum = 255;
      greenNum = Math.floor(256 / rgbIncrements) * remainNum;
      blueNum = 255;
      break;
    case 5:
      redNum = 255;
      greenNum = Math.floor(256 / rgbIncrements) * remainNum;
      blueNum = 0;
      break;
    case 6:
      redNum = 255;
      greenNum = 255;
      blueNum = Math.floor(256 / rgbIncrements) * remainNum;
      break;
  }

  return [redNum, greenNum, blueNum];
};