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 itselfvarfractal=newFractal(fractalCanvasElement);// tell the fractal to update itself based on the options sent// it will only redraw itself if necessaryfractal.update(options);

// fractal api as an options object// all keys are optionalvaroptions={// set size of canvas// set pixel width of canvaspxWidth: number,// e.g. 2880// set pixel height of canvaspxHeight: 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 coordinatescords: {xCartMin: number,// e.g. -2.1xCartMax: 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 1792maxEscapeTime: number,// e.g. 224// pixel coordinates on canvas of point to zoom in onzoomInPxPoint: {xPx: number,// e.g. 100yPx: number// e.g. 100},// pixel coordinates on canvas of point to zoom out fromzoomOutPxPoint: {xPx: number,// e.g. 100yPx: number// e.g. 100},// pixel coordinates of rectangle on canvas to zoom in onzoomInPxBox: {xPxMin: number,// e.g. 50xPxMax: number,// e.g. 100yPxMin: number,// e.g. 50yPxMax: number// e.g. 100},// set the current options as the starting options// the fractal resets to its starting options when told to resetsetAsStartingOptions: bool,// e.g. true// reset cartesian coordinates to starting cartesian coordinatesresetCords: bool,// e.g. true// reset the max escape time to the starting max escape timeresetMaxEscapeTime: 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 distortiondistortion: 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 blackreturn[0,0,0];}elseif(escapeTime===this.maxEscapeTime){//normally this would be white, but that's too much white, so overridereturn[0,25,0];}varredNum;vargreenNum;varblueNum;varrgbIncrements=Math.floor(((this.maxEscapeTime)/7));varcaseNum=Math.floor(escapeTime/rgbIncrements);varremainNum=escapeTime%rgbIncrements;switch(caseNum){case0:
redNum=0;greenNum=Math.floor(256/rgbIncrements)*remainNum;blueNum=0;break;case1:
redNum=0;greenNum=255;blueNum=Math.floor(256/rgbIncrements)*remainNum;break;case2:
redNum=Math.floor(256/rgbIncrements)*remainNum;greenNum=255;blueNum=255;break;case3:
redNum=Math.floor(256/rgbIncrements)*remainNum;greenNum=0;blueNum=255;break;case4:
redNum=255;greenNum=Math.floor(256/rgbIncrements)*remainNum;blueNum=255;break;case5:
redNum=255;greenNum=Math.floor(256/rgbIncrements)*remainNum;blueNum=0;break;case6:
redNum=255;greenNum=255;blueNum=Math.floor(256/rgbIncrements)*remainNum;break;}return[redNum,greenNum,blueNum];};