Julia sets and the Mandelbrot set / Mark McClure

I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization. I'm happy to be part of the first Observable Ambassador's cohort.

Workspace

Public

Edited

May 9, 2023

2 forks

Importers

31 stars

Explorables

Raft Consensus Simulator

Julia sets and the Mandelbrot set

How a power law emerges from aggregation Lambert's Cosine Law Sorting Algorithms Faceted Snow Periodic Planar Three-Body Orbits Bicycle Drivetrain Analyzer Introduction to Linear Regression Kaplan-Meier Curves Baseline Grid How Raymarching Works?Cell Settling An Easier-to-Use Sine Bar Inferring chart type from autocorrelation and other evils Variable Thickness Band Hyperbolic plane Torus Knots Let’s Try t-SNE!Routes to chaos How to build a Teachable Machine with TensorFlow.js Boba Science Boids Predator and Prey De Casteljau’s Algorithm Centerline labeling A visually more appealing fisheye function Federal Budget in a Bottle 2D point in triangle test BMI Calculator Sounds There’s Plenty of Room in the Corners t-SNE explained in plain javascript Circles, Spirals and Sunflowers Mini de Jong Attractor Beta-Distributed Random Values

Also listed in…

Complex Dynamics

Math

function put_it_all_together() {

let container = d3

.create('div')

.style('width', width + 'px')

.style('height', 0.54 * width + 'px');

container.append(() => mandel_canvas.node()).style('float', 'left');

container.append(() => julia_svg);

container.append(() => c.node());

return container.node();

}

// A canvas to draw the Mandelbrot set

mandel_canvas = {

let xmin = -2;

let xmax = 0.6;

let ymin = -1.3;

let ymax = 1.3;

let w = 0.5 * width;

let canvas = d3

.create('canvas')

.attr('width', w)

.attr('height', w);

draw_mandelbrot_set(canvas.node(), xmin, xmax, ymin, ymax);

let context = canvas.node().getContext("2d");

context.fillStyle = "#f30";

let ij = xy_to_ij([-1, 0], xmin, xmax, ymin, ymax, w);

context.fillRect(ij[0] + 1, ij[1] - 1, 3, 3);

const render = function(ij) {

let xy = ij_to_xy(ij, xmin, xmax, ymin, ymax, w);

// The lazy programmer's way to cover up the previous clicked point

draw_mandelbrot_set(canvas.node(), xmin, xmax, ymin, ymax);

context.fillRect(ij[0] + 1, ij[1] - 1, 3, 3);

d3.select(julia_svg)

.attr('c', ij_to_xy(ij, xmin, xmax, ymin, ymax, w))

.select('image')

.attr('xlink:href', generate_julia_im_url({ re: xy[0], im: xy[1] }));

c.html(`c = ${d3.format('.2f')(xy[0])} + ${d3.format('.2f')(xy[1])} i`);

};

let clicked = false;

canvas.on('mousedown', function() {

clicked = true;

render(d3.mouse(this));

});

canvas.on('mousemove', function() {

if (clicked) render(d3.mouse(this));

});

canvas.on('mouseup', function() {

clicked = false;

});

return canvas;

}

// A function to draw the mandelbrot set

function draw_mandelbrot_set(canvas, xmin, xmax, ymin, ymax) {

let bail = 100;

let w = width / 2;

let mandel_context = canvas.getContext("2d");

let canvasData = mandel_context.createImageData(canvas.width, canvas.height);

for (let i = 0; i < canvas.width; i++) {

for (let j = 0; j < canvas.height; j++) {

var c = ij_to_xy([i, j], xmin, xmax, ymin, ymax, w);

var it_cnt = mandelbrot_iteration_count(c[0], c[1], bail);

var scaled_it_cnt = 255 - (255 * it_cnt) / (bail + 1);

var idx = (i + j * canvas.width) * 4;

canvasData.data[idx + 0] = scaled_it_cnt;

canvasData.data[idx + 1] = scaled_it_cnt;

canvasData.data[idx + 2] = scaled_it_cnt;

canvasData.data[idx + 3] = 255;

}

mandel_context.putImageData(canvasData, 0, 0);

}

// Compute the iteration count from z=0 for a given z^2+c

function mandelbrot_iteration_count(cre, cim, bail = 200) {

let x = cre;

let y = cim;

let xtemp;

let ytemp;

let cnt = 0;

while (x * x + y * y <= 4 && ++cnt < bail) {

xtemp = x;

ytemp = y;

x = xtemp * xtemp - ytemp * ytemp + cre;

y = 2 * xtemp * ytemp + cim;

}

return cnt;

}

// A place to draw the Julia set

// The picture of the Julia set is drawn to a canvas which becomes the background of an SVG.

// The orbit is drawn as a path in the SVG on hover.

julia_svg = {

let w = width / 2;

const xScale = d3

.scaleLinear()

.domain([-2, 2])

.range([0, w]);

const yScale = d3

.scaleLinear()

.domain([-2, 2])

.range([w, 0]);

const rScale = d3

.scaleLinear()

.domain([0, 4])

.range([0, w]);

const pts_to_path = d3

.line()

.x(function(d) {

return xScale(d[0]);

})

.y(function(d) {

return yScale(d[1]);

});

let svg = d3

.create("svg")

.attr('width', w)

.attr('height', w);

if (!svg.attr('c')) {

svg.attr('c', '-1,0');

}

// Set up the SVG background

const mapbg = DOM.uid('mapbg');

svg

.append("defs")

.append('pattern')

.attr('id', mapbg.id)

.attr('patternUnits', 'userSpaceOnUse')

.attr('width', w)

.attr('height', w)

.append("image")

.attr("xlink:href", generate_julia_im_url({ re: -1, im: 0 }))

.attr('width', w)

.attr('height', w);

svg

.append("rect")

.attr("x", 0)

.attr("y", 0)

.attr("width", w)

.attr("height", w)

.attr("fill", mapbg);

svg

.on('mousemove', function() {

svg.selectAll('.orbit').remove();

let c = svg

.attr('c')

.split(',')

.map(parseFloat);

let xy = ij_to_xy(d3.mouse(this), -2, 2, -2, 2, w);

let orbit = compute_orbit(c, xy);

for (let i = 0; i < orbit.length; i++) {

svg

.append("path")

.attr('class', 'orbit')

.attr("d", pts_to_path(orbit.slice(i, i + 2)))

.attr("stroke", "#8888FF")

.attr("stroke-width", 2)

.attr("fill", "none")

.style('opacity', 0.5);

svg

.append("circle")

.attr("class", 'orbit')

.attr("cx", xScale(orbit[i][0]))

.attr("cy", yScale(orbit[i][1]))

.attr("r", 4)

.attr("fill", "red")

.attr("stroke", "none")

.attr('fill-opacity', 0.03);

}

svg

.append("circle")

.attr("class", 'orbit')

.attr("cx", xScale(orbit[0][0]))

.attr("cy", yScale(orbit[0][1]))

.attr("r", 4)

.attr("fill", "green")

.attr("stroke", "black")

.attr("stroke-width", 1);

})

.on('mouseleave', function() {

svg.selectAll('.orbit').remove();

});

return svg.node();

}

// Generate the dataURL that holds an image of the Julia set.

function generate_julia_im_url(c, bail = 200) {

let w = Math.floor(width / 2);

let context = DOM.context2d(w, w);

context.canvas.width = w;

context.canvas.height = w;

let xmin = -2;

let xmax = 2;

let ymin = -2;

let ymax = 2;

let canvasData = context.createImageData(w, w);

for (let i = 0; i < w; i = i + 1) {

for (let j = 0; j < w; j = j + 1) {

let xy = ij_to_xy([i, j], xmin, xmax, ymin, ymax, w);

let it_cnt = julia_iteration_count(c.re, c.im, xy[0], xy[1], bail);

let color = 255 - (255 * it_cnt) / (bail + 1);

let idx = (i + j * w) * 4;

canvasData.data[idx + 0] = color;

canvasData.data[idx + 1] = color;

canvasData.data[idx + 2] = color;

canvasData.data[idx + 3] = 255;

}

context.putImageData(canvasData, 0, 0);

return context.canvas.toDataURL();

}

// Compute the iteration count for a given z^2+c and given z0

function julia_iteration_count(cre, cim, x0, y0, bail) {

let x = x0;

let y = y0;

let xtemp;

let ytemp;

let cnt = 0;

while (x * x + y * y <= 4 && ++cnt < bail) {

xtemp = x;

ytemp = y;

x = xtemp * xtemp - ytemp * ytemp + cre;

y = 2 * xtemp * ytemp + cim;

}

return cnt;

}

function f(c, z) {

let cx = c[0];

let cy = c[1];

let x = z[0];

let y = z[1];

return [x * x - y * y + cx, 2 * x * y + cy];

}

function compute_orbit(c, z0) {

let z = z0;

let orbit = [z0];

let cnt = 0;

while (z[0] * z[0] + z[1] * z[1] < 20 && cnt < 500) {

z = f(c, z);

orbit.push(z);

cnt = cnt + 1;

}

return orbit;

}

// A place to display c

c = d3

.create('div')

.style('width', width + 'px')

.style('height', 0.033 * width + 'px')

.style('text-align', 'center')

.text('c = -1')

function ij_to_xy(ij, xmin, xmax, ymin, ymax, w) {

return [

((xmax - xmin) / (w - 1)) * ij[0] + xmin,

((ymin - ymax) / (w - 1)) * ij[1] + ymax

];

}

function xy_to_ij(xy, xmin, xmax, ymin, ymax, w) {

return [

((w - 1) * (xy[0] - xmin)) / (xmax - xmin),

((1 - w) * (xy[1] - ymax)) / (ymax - ymin)

];

}

d3 = require('d3@5')

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more