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

Math

A Julia set on the Riemann sphere The Z-Curve Barnsley's fern A stochastic digraph IFS algorithm Self-affine tiles The Twindragon The Eisenstein fractions A self-affine tile with holes Self-affine tiles via polygon merge Golden rectangle fractals Bifurcation diagram with critical curves The tame twindragon Illustrations for the proof of Green's theorem Non-orientability of a Mobius strip Examples of parametric surfaces Penrose tiling The extended unit circle Penrose three coloring Newtons's method on the Riemann sphere Conic sections Divisor graphs The dance of Earth and Venus Iterating multiples of the sine function Borderline fractals Self-similar intersections Box-counting dimension examples Mandelbrot by dimension Inverse iteration for quadratic Julia sets Integer Apollonian Packings Illustrations of two-dimensonal heat flow The logistic bifurcation locus The eleven unfoldings of the cube A unimodal function with fractal level curves Green's theorem and polygonal area The geometry and numerics of first order ODEs The xxx^xxx-spindle Animated beats Rauzy Fractals Hilbert's coordinate functions Pluck Not Pi Drum strike The Koch snowflake Fractalized square A Taylor series about π/4\pi/4π/4 PlotX3D Hyperboloid A PlotX3D animation Modular arithmetic in 5th grade art Simple S-I-R Model The Poisson Kernel Poly-gaskets Classification of 2D linear systems via trace and determinant

Julia sets and the Mandelbrot set

Water waves Fourier Series Disks for a solid of revolution Orbit detection for the Mandelbrot set Tracing a path on a sphere Plot for mathematicians Functions of two variables Partial derivatives Dijkstra's algorithm on an RGG Gradient ascent Unfolding polyhedra Tangent plane to a level surface A strange discontinuity Examples of level surfaces McMullen carpets Hills and valleys The definition of ⇒Double and iterated integrals MST in an RGG Trees are bipartite Fractal typesetting d3.hierarchy and d3.tree K23 is Planar Polar Coordinates Parametric region generator Parametric Plot 2D Contour plots Greedy graph coloring Graph6 A few hundred interesting graphs The Kings Problem First order, autonomous systems of ODEs Runge-Kutta for systems of ODEs

Also listed in…

Complex Dynamics

Explorables

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')

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more