JuliaSet.js

Generate the Julia set in JavaScript.

See the demo.

About

A Julia set is a set of a function where small changes in starting values and produce very different iterated function values. When visualized, the results are fractal images like the Mandelbrot set. The Julia set formula is:

Z = Z^2 + C

This nanolibrary is visualization-agnostic: it's up to you to decide how to render it. The output looks like this:

[1,1,2,3,2,2,3,4,5,5,6,6,...]

You get a flat array of values, where each value is the number of iterations it took to decide if that point would go to infinity.

By looping over that data, it's trivial to produce a visualization using a <canvas>. (See "Example" below.)

Install

Copy the source code, or you can install with Bower:

$ bower install JuliaSet

Usage

Produce Julia set data:

var j = JuliaSet.getValues(
  complexConstantRealPart,
  complexConstantImaginaryPart,
  minXValue,
  maxXValue,
  minYValue,
  maxYValue,
  imageW,
  imageH,
  maxIterations,
  escapeRadius,
  degree,
  callback // Called when every value is calculated
);
// j => [1,1,2,3,2,2,3,4,5,5,6,6,...]

That's a lot of parameters! A good starting point is:

var j = JuliaSet.getValues(
  -0.75, // Real part of complex constant
  0.135, // Imaginary part of complex constant
  -1.0,
  1.0,
  -1.0,
  1.0,
  myCanvasWidth,
  myCanvasHeight,
  100,
  2,
  1
);

There's also a simpler API if you don't care about most of the options. This will give you a Julia set with a view field of -1,1, a low number of iterations, and so on.

var j = JuliaSet.getValuesQuick(
  -0.75,
  0.135,
  myCanvasWidth,
  myCanvasHeight
);

Note that "width" and "height" don't necessarily need to represent a <canvas>; they could represent any coordinate plane.

Using a callback

If you pass in a callback function (the last argument), it will be called as each value in the set is calculated. Signature:

function myJuliaCallback(i, n) {
  // i - array index
  // n - Julia set value
}

Performance

Generally speaking, the higher any of the argument values, the worse the performance. In particular, a larger image size or a greater value for max iterations will vastly increase the number of calculations required to produce the set.

Example: Drawing the result

You can use a routine like this:

// Canvas setup
var canvas = document.getElementById('canvas'),
    width = canvas.width,
    height = canvas.height,
    ctx = canvas.getContext('2d'),
    imageData = ctx.getImageData(0, 0, width, height);

// Julia Set
var juliaData = JuliaSet.getValuesQuick(
  -0.75,
  0.135,
  width,
  height
);

// Draw the result
for (var i = 0; i < juliaData.length; i++) {
  var dataIndex = i * 4;
  var juliaValue = juliaData[i];
  imageData.data[dataIndex++] = color(juliaValue); // you define this
  imageData.data[dataIndex++] = color(juliaValue); // you define this
  imageData.data[dataIndex++] = color(juliaValue); // you define this
  imageData.data[dataIndex++] = 255; // alpha
}

// Update the canvas
ctx.putImageData(imageData, 0, 0);

Contributing

Submit a pull request, please!

License

MIT. See LICENSE.txt in this directory.

Copyright

Copyright (c) 2014 Matthew Trost