Fractalized square / 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

Published

Edited

Mar 24, 2022

1 star

function fractalized_square(n, size = 600) {

let f1 = shift([1, 0]).compose(rotate(-90 * degree)).f;

let f2 = shift([1, -1]).compose(rotate(-180 * degree)).f;

let f3 = shift([0, -1]).compose(rotate(-270 * degree)).f;

let pts = path(n);

pts = pts.concat(pts.map(f1)).concat(pts.map(f2)).concat(pts.map(f3));

return Plot.plot({

width: size,

height: size,

x: { ticks: false, domain: [-0.2, 1.2] },

y: { ticks: false, domain: [-1.2, 0.2] },

marks: [

Plot.line(pts, { fill: "lightgray", stroke: "black" }),

Plot.dot(pts, { fill: "black", r: 5 * 0.6 ** n })

]

});

}

function path(n) {

let f0 = scale(1 / 5).f;

let f1 = shift([1 / 5, 0]).compose(scale(1 / 5)).f;

let f2 = shift([2 / 5, 0])

.compose(scale(1 / 5))

.compose(rotate(90 * degree)).f;

let f3 = shift([2 / 5, 1 / 5]).compose(scale(1 / 5)).f;

let f4 = shift([3 / 5, 1 / 5])

.compose(scale(1 / 5))

.compose(rotate(-90 * degree)).f;

let f5 = shift([3 / 5, 0]).compose(scale(1 / 5)).f;

let f6 = scale(1 / 5, [1, 0]).f;

let step = (pts) =>

pts

.map(f0)

.slice(0, -1)

.concat(pts.map(f1).slice(0, -1))

.concat(pts.map(f2).slice(0, -1))

.concat(pts.map(f3).slice(0, -1))

.concat(pts.map(f4).slice(0, -1))

.concat(pts.map(f5).slice(0, -1))

.concat(pts.map(f6));

let pts = [

[0, 0],

[1, 0]

];

for (let i = 0; i < n; i++) {

pts = step(pts);

}

return pts;

}

import { shift, scale, rotate, degree } from "@mcmcclur/affinefunction-class"

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