Zoomable Julia Set

A Julia set with constant -0.8 + 0.156i.

Based on DougX's Canvas Fractals.

Changes from Doug's:

HCL Color Space
Memoized coloring function to speed up rendering
Modifiable parameters. Try clicking the gear, and change CR to -0.75 and CI to 0.169

Two more demos:

Deep color scale
Multi-frame movie - takes a few minutes to render several frames

var real_scale = d3.scale.linear()
  .range([0, width])
  .domain([-1.7,1.7]);

var imag_scale = d3.scale.linear()
  .range([0, height])
  .domain([-1,1]);

d3.selectAll("canvas")
  .attr("width", width)
  .attr("height", height);

var ctx = canvas.getContext('2d'); 
var interaction_context = interaction_canvas.getContext('2d');

jul = julia(width,height)
  .context(ctx)
  .minResolution(21);

jul.color = d3.scale.linear()
      .domain([0, 12, 30, 50, 100, 180, 260, 380, 600, 800, 1200, 1600,3200])
      .range(["moccasin", "#999", "steelblue", "yellow", "brown", "#222", "pink", "purple", "#027", "#260", "orange", "yellow", "blue"])
      .interpolate(d3.interpolateHcl);

var zoom = d3.behavior.zoom()
  .x(real_scale)
  .y(imag_scale)
  .on("zoom", onzoom)

function onzoom() {
  d3.select("#input-realMin").attr("value", real_scale.domain()[0]);
  d3.select("#input-imagMin").attr("value", imag_scale.domain()[0]);
  d3.select("#input-realMax").attr("value", real_scale.domain()[1]);
  d3.select("#input-imagMax").attr("value", imag_scale.domain()[1]);
  jul.zoom(real_scale.domain(), imag_scale.domain());
};

// bind inputs to julia parameters
d3.keys(jul.__).forEach(function(key) {
  d3.select("#tools")
    .append("div")
    .html(key + "<br/>")
    .append("input")
    .attr({
      id: "input-" + key,
      type: "text",
      value: jul[key]()
    })
    .on("keyup", function() {
      jul[key](this.value);
    });
});

jul.render();
jul.go();

// toggle tools visibility
var gear_active = false;
d3.select("#zoom-gear").on("click", function() {
  gear_active = !gear_active;
  d3.select("#tools").style("display", function() { return gear_active ? "block" : "none" });
  d3.select(this).classed("active", gear_active);
});
d3.select("#zoom-reset").on("click", function() {
  real_scale.domain([-1.7,1.7]);
  imag_scale.domain([-1,1]);
  zoom.scale(1)
    .translate([0,0])
    .x(real_scale)
    .y(imag_scale);
  onzoom();
});

d3.select(interaction_canvas)
  .call(zoom);

window.onresize = function() {
  width = document.body.clientWidth;
  height = document.body.clientHeight;

real_scale.range([0, width]);
  imag_scale.range([0, height]);

zoom
    .x(real_scale)
    .y(imag_scale)
    .scale(1)
    .translate([0,0]);

jul.x_extent(width).y_extent(height);

d3.selectAll("canvas")
    .attr("width", width)
    .attr("height", height);
  onzoom();
};
</script>

Modified http://d3js.org/d3.v2.js to a secure url

Modified http://underscorejs.org/underscore.js to a secure url

https://d3js.org/d3.v2.js

https://underscorejs.org/underscore.js