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.
// Defines an IteratedFunctionSystem class
import { IteratedFunctionSystem } from "@mcmcclur/iteratedfunctionsystem-class"
// Defines the types of functions that the IteratedFunctionSystem class accepts
import {
scale,
shift,
rotate,
reflect,
pi
} from "@mcmcclur/affinefunction-class"
sierpIFS = new IteratedFunctionSystem([
scale(1 / 2),
scale(1 / 2, [1, 0]),
scale(1 / 2, [1 / 2, Math.sqrt(3) / 2])
])
sierpIFS.render_stochastic()
// I don't recommend increasing `max_depth`.
// Note that we've specified fill_colors and stroke_colors separately
{
let w = width < 600 ? width : 600;
let vertices = [
[-1, -1],
[0, -1],
[1, -1],
[1, 0],
[1, 1],
[0, 1],
[-1, 1],
[-1, 0]
];
let carpetIFS = new IteratedFunctionSystem(
vertices.map((pt) => scale(1 / 3, pt))
);
return carpetIFS.render_deterministic({
max_depth: 4,
init: [
[-1, -1],
[1, -1],
[1, 1],
[-1, 1]
],
colors: true,
stroke_colors: "black",
image_width: w,
image_height: w,
padding: 30
});
}
{
let w = width < 800 ? width : 800;
let kochIFS = new IteratedFunctionSystem([
scale(1 / 3),
shift([1 / 3, 0])
.compose(scale(1 / 3))
.compose(rotate(pi / 3)),
shift([1 / 2, Math.sqrt(3) / 6])
.compose(scale(1 / 3))
.compose(rotate(-pi / 3)),
shift([2 / 3, 0]).compose(scale(1 / 3))
]);
return kochIFS.render_stochastic({
image_width: w,
image_height: w / 4,
colors: true
});
}
{
let w = width < 800 ? width : 800;
return reflectedKochIFS.render_stochastic({
image_width: w,
image_height: w / 4,
colors: true
});
}
reflectedKochIFS = new IteratedFunctionSystem([
scale(1 / 3),
shift([1 / 3, 0])
.compose(scale(1 / 3))
.compose(rotate(pi / 3))
.compose(reflect([0, 1])),
shift([1 / 2, Math.sqrt(3) / 6])
.compose(scale(1 / 3))
.compose(rotate(-pi / 3))
.compose(reflect([0, 1])),
shift([2 / 3, 0]).compose(scale(1 / 3))
])
basic_affine_IFS = {
let A = [
[1 / 3, 0],
[0, 1 / 2]
];
let IFS = new IteratedFunctionSystem([
[A, [0, 0]],
[A, [1 / 3, 1 / 2]],
[A, [2 / 3, 0]]
]);
return IFS;
}
basic_affine_IFS.render_deterministic({
max_depth: basic_affine_depth,
init: [
[0, 0],
[1, 0],
[1, 1],
[0, 1]
],
fill_colors: "lightgray"
})
affine_reflection_IFS = {
let A = [
[1 / 3, 0],
[0, 1 / 2]
];
let B = [
[1 / 3, 0],
[0, -1 / 2]
];
let IFS = new IteratedFunctionSystem([
[A, [0, 0]],
[B, [1 / 3, 1]],
[A, [2 / 3, 0]]
]);
return IFS;
}
affine_reflection_IFS.render_deterministic({
max_depth: affine_reflection_depth,
init: [
[0.5, 0.9],
[0.6, 0.8],
[0.55, 0.8],
[0.55, 0.1],
[0.45, 0.1],
[0.45, 0.8],
[0.4, 0.8],
[0.5, 0.9]
],
fill_colors: "lightgray",
extent: [
[0, 1],
[0, 1]
]
})
{
let h = width < 600 ? width : 600;
let IFS = 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]
]
]);
return IFS.render_stochastic({
n: Math.round(40000 * (h / 600) ** 2),
image_width: h / 2,
image_height: h,
colors: ["#006600", "#00bb00", "#00aa00", "#231709"],
plist: [0.78, 0.1, 0.1, 0.02]
});
}
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.
