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.
Public
Edited
Dec 4, 2023
1 fork
Importers
10 stars
IFS QuickstartIterated Function SystemsConstruction of the Serpinski triangleThe Sierpinski pedal triangleSimilarity and the Pedal TriangleDeterministic IFS algorithmsSelf-similar spiralsStochastic IFS algorithmsGeneralized Sierpinski trianglesThe Z-CurvePoly-gasketsThe Koch snowflakeBarnsley's fernIteratedFunctionSystem ClassAffineFunction ClassSimilarity transformationsThe TwindragonMcMullen carpetsThe Twindragon (with boundary)Self-affine tilesTutorial on self-affine tilesA self-affine tile with holesSelf-affine tiles via polygon mergeThe Eisenstein fractionsGolden rectangle fractalsDeterministic digraph IFS algorithmsA stochastic digraph IFS algorithmMixed self-similarityFractalized squareHilbert's coordinate functionsRauzy Fractals
Box-counting dimension examples
Also listed in…
Math
function box_count(canvas) {
let ctx = canvas.getContext("2d");
let im_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
let cnts = [];
for (let s = 1; s <= d3.min([canvas.width, canvas.height]); s = 2 * s) {
let boxes = [];
let cnt = 0;
for (let i = 0; s * (i + 1) <= canvas.height; i++) {
for (let j = 0; s * (j + 1) <= canvas.width; j++) {
if (check_box(i, j, s)) {
cnt = cnt + 1;
boxes.push([i, j]);
}
}
}
cnts.push({ s: s, cnt: cnt, boxes: boxes });
}
function check_box(i, j, s) {
for (let i0 = i * s; i0 < (i + 1) * s; i0++) {
for (let j0 = j * s; j0 < (j + 1) * s; j0++) {
let ij0 = 4 * (j0 + i0 * canvas.width);
if (
// im_data.data[ij0] == 0 &&
// im_data.data[ij0 + 1] == 0 &&
// im_data.data[ij0 + 2] == 0 &&
// im_data.data[ij0 + 3] == 255
im_data.data[ij0] < 100 &&
im_data.data[ij0 + 1] < 100 &&
im_data.data[ij0 + 2] < 100 &&
im_data.data[ij0 + 3] > 155
) {
return true;
}
}
}
return false;
}
return cnts;
}
regression = ss.linearRegression(
fractals.cnts.map((o) => [-Math.log(o.s), Math.log(o.cnt)])
)
fractals = {
let canvas;
if (example == "Sierpinski triangle") {
let sierpIFS = new IteratedFunctionSystem([
scale(1 / 2),
scale(1 / 2, [1, 0]),
scale(1 / 2, [1 / 2, Math.sqrt(3) / 2])
]);
canvas = sierpIFS.render_deterministic({
max_depth: 7,
init: [
[0, 0],
[1, 0],
[1 / 2, Math.sqrt(3) / 2]
],
extent: [
[0, 1],
[-0.1, 0.9]
],
image_width: 512,
image_height: 512
});
} else if (example == "Sparse spiral") {
let ifs = new IteratedFunctionSystem([
scale(0.95).compose(rotate(15 * degree)),
scale(0.15, [1, 0])
]);
canvas = ifs.render_stochastic({
n: 20000,
image_width: 1024,
image_height: 1024
});
} else if (example == "Phylo-spiral") {
let ifs = new IteratedFunctionSystem([
scale(0.99).compose(rotate(137.5 * degree)),
scale(0.1, [1, 0])
]);
canvas = ifs.render_stochastic({
n: 100000,
image_width: 1024,
image_height: 1024
});
} else if (example == "Koch curve") {
let f0 = scale(1 / 3, [0, 0]);
let f1 = shift([1 / 3, 0])
.compose(scale(1 / 3))
.compose(rotate(Math.PI / 3));
let f2 = shift([1 / 2, Math.sqrt(3) / 6])
.compose(scale(1 / 3))
.compose(rotate(-Math.PI / 3));
let f3 = scale(1 / 3, [1, 0]);
canvas = new IteratedFunctionSystem([f0, f1, f2, f3]).render_deterministic({
max_depth: 6,
init: [
[0, 0],
[1, 0]
],
extent: [
[0, 1],
[0, 1 / 2]
],
image_width: 512,
image_height: 256
});
} else if (example == "Kieswetter's curve") {
canvas = new IteratedFunctionSystem([
new AffineFunction([
[
[1 / 4, 0],
[0, -1 / 2]
],
[0, 0]
]),
new AffineFunction([
[
[1 / 4, 0],
[0, 1 / 2]
],
[1 / 4, -1 / 2]
]),
new AffineFunction([
[
[1 / 4, 0],
[0, 1 / 2]
],
[1 / 2, 0]
]),
new AffineFunction([
[
[1 / 4, 0],
[0, 1 / 2]
],
[3 / 4, 1 / 2]
])
]).render_deterministic({
max_depth: 6,
init: [
[0, 0],
[1, 1]
],
extent: [
[0, 1],
[-1, 1]
],
image_width: 512,
image_height: 1024
});
} else if (example == "Barnsley's fern") {
canvas = new IteratedFunctionSystem([
[
[
[0.85, 0.04],
[-0.04, 0.85]
],
[0, 1.6]
],
[
[
[-0.15, 0.28],
[0.26, 0.24]
],
[0, 0.44]
],
[
[
[0.2, -0.26],
[0.23, 0.22]
],
[0, 1.6]
],
[
[
[0, 0],
[0, 0.16]
],
[0, 0]
]
]).render_stochastic({ n: 80000, image_width: 512, image_height: 1024 });
} else if (example == "Line segment") {
canvas = d3.create("canvas").attr("width", 1024).attr("height", 256).node();
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 200);
ctx.lineTo(1000, 20);
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.closePath();
} else if (example == "Squiggle") {
let w = 1024;
let h = 512;
let xmin = 0;
let xmax = 13;
let ymin = 0;
let ymax = 7;
let x_scale = d3.scaleLinear().domain([xmin, xmax]).range([0, w]);
let y_scale = d3.scaleLinear().domain([ymin, ymax]).range([h, 0]);
canvas = d3.create("canvas").attr("width", w).attr("height", h).node();
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(x_scale(0), y_scale(0));
for (let t = 0; t <= 2 * Math.PI; t = t + Math.PI / 100) {
ctx.lineTo(x_scale(Math.sin(3 * t) + 2 * t), y_scale(t));
}
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.closePath();
} else if (example == "Solid circle") {
canvas = d3.create("canvas").attr("width", 512).attr("height", 512).node();
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(250, 255, 200, 0, 2 * Math.PI);
ctx.fill();
} else if (example == "British coast") {
let pts = british_coast.features[0].geometry.coordinates;
let xpts = pts.map((pt) => pt[0]);
let xmin = Math.floor(d3.min(xpts));
let xmax = Math.ceil(d3.max(xpts));
let ypts = pts.map((pt) => pt[1]);
let ymin = Math.floor(d3.min(ypts));
let ymax = Math.ceil(d3.max(ypts));
let w = 512;
let h = (w * (ymax - ymin)) / (xmax - xmin);
canvas = d3.create("canvas").attr("width", w).attr("height", h).node();
let x_scale = d3.scaleLinear().domain([xmin, xmax]).range([0, w]);
let y_scale = d3.scaleLinear().domain([ymin, ymax]).range([h, 0]);
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(x_scale(xpts[0]), y_scale(ypts[0]));
for (let i = 1; i < pts.length; i++) {
ctx.lineTo(x_scale(xpts[i]), y_scale(ypts[i]));
}
ctx.stroke();
ctx.closePath();
} else if (example == "Trees") {
let bits = await FileAttachment("tree_bits.txt").text();
bits = bits.split(";").map((s) => s.split("").map((c) => parseInt(c)));
let w = bits[0].length;
let h = bits.length;
canvas = d3.create("canvas").node();
canvas.width = w;
canvas.height = h;
let ctx = canvas.getContext("2d");
for (let i = 0; i < h; i++) {
for (let j = 0; j < w; j++) {
if (bits[i][j] == 0) {
ctx.rect(j, i, 1, 1);
}
}
}
ctx.fill();
}
return {
canvas: canvas,
cnts: box_count(canvas),
dataURL: canvas.toDataURL()
};
}
british_coast = {
let map_file = await FileAttachment("british_coastline.json").json();
let coast = topojson.feature(map_file, map_file.objects.ne_10m_coastline);
return coast;
}
import {
IteratedFunctionSystem,
AffineFunction,
shift,
scale,
rotate,
degree
} from "@mcmcclur/iteratedfunctionsystem-class"
ss = require("simple-statistics")
topojson = require("topojson-client@3")
MathJax = require("https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js").catch(
() => window["MathJax"]
)
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.
