Public
Edited
Jan 22, 2023
Importers
18 stars
diffScale = d3.scaleDiverging(d3.interpolatePiYG)
contours = {
const { Dre } = fwd;
const w = pixels.width,
h = pixels.height,
wh = Math.floor(w / 2),
hh = Math.floor(h / 2);
const values = Float32Array.from(Dre).fill(0);
// fftshift
for (let k = 0; k < values.length; k++) {
const i = k % w,
j = Math.floor(k / w);
const shifti = (i >= wh ? i - w : i) + wh;
const shiftj = (j >= hh ? j - h : j) + hh;
values[shifti + w * shiftj] = Math.log1p(Math.hypot(Dre[k]));
}
return d3.contours().size([pixels.width, pixels.height]).thresholds(8)(
d3.blur2({ data: values, width: pixels.width }, 4).data
);
}
N = Math.min(+maxwidth, original.naturalWidth)
M = Math.round((N * original.naturalHeight) / original.naturalWidth)
// FWD({ data: pixels.data, width: pixels.width, height: pixels.height })
fwd = Generators.observe(
worker(
FWD,
{ data: pixels.data, width: pixels.width, height: pixels.height },
"const FFT = " + FFTtext
)
)
function FWD({ data, width: w, height: h }) {
if (w === undefined) {
w = data.length;
h = 1;
}
const Dre = Float64Array.from({ length: h * w }),
Dim = Float64Array.from({ length: h * w });
// horizontal
{
const re = new Float64Array(w),
im = new Float64Array(w);
for (let j = 0; j < h; j++) {
for (let i = 0; i < w; i++) {
re[i] = data[i + w * j];
im[i] = 0;
}
FFT.transform(re, im);
for (let i = 0; i < w; i++) {
const k = i + w * j;
Dre[k] = re[i];
Dim[k] = im[i];
}
}
}
// vertical
{
const re = new Float64Array(h),
im = new Float64Array(h);
for (let i = 0; i < w; i++) {
for (let j = 0; j < h; j++) {
re[j] = Dre[i + w * j];
im[j] = Dim[i + w * j];
}
FFT.transform(re, im);
for (let j = 0; j < h; j++) {
const k = i + w * j;
Dre[k] = re[j];
Dim[k] = im[j];
}
}
}
return { Dre, Dim };
}
filtered = FILTERED(fwd)
function FILTERED(fwd) {
const Dre = fwd.Dre.slice(),
Dim = fwd.Dim.slice();
const w = pixels.width,
h = pixels.height,
wh = Math.floor(w / 2),
hh = Math.floor(h / 2);
// low-pass (blur)
const r = lowpass_radius;
if (r < wh) {
for (let k = 0; k < Dre.length; k++) {
const i = k % w,
j = Math.floor(k / w);
const shifti = i > wh ? i - w : i;
const shiftj = j > hh ? j - h : j;
if (Math.hypot(shifti, shiftj) > r) Dre[k] = Dim[k] = 0;
}
}
// manipulate D as needed
for (let i = 0; i < mouses.length; i++) {
const mouse = mouses[i];
const down = i === 0 && mouses.down;
for (let k = 0; k < Dre.length; k++) {
const i = k % w,
j = Math.floor(k / w);
const shifti = i > wh ? i - w : i;
const shiftj = j > hh ? j - h : j;
if (
(down && mouse.x < w) ^
(Math.hypot(shifti - mouse.x, shiftj - mouse.y) < mouse.radius ||
Math.hypot(shifti + mouse.x, shiftj + mouse.y) < mouse.radius)
)
Dre[k] = Dim[k] = 0;
}
}
return { Dre, Dim };
}
// INVERSE({ data: filtered, w: pixels.width, h: pixels.height })
inverse = Generators.observe(
worker(
INVERSE,
{ data: filtered, width: pixels.width, height: pixels.height },
"const FFT = " + FFTtext
)
)
function INVERSE({ data, width: w, height: h }) {
if (w === undefined) {
w = data.length;
h = 1;
}
const Dre = data.Dre.slice(),
Dim = data.Dim.slice();
const wh = Math.floor(w / 2),
hh = Math.floor(h / 2);
// horizontal
{
const re = new Float64Array(w),
im = new Float64Array(w);
for (let j = 0; j < h; j++) {
for (let i = 0; i < w; i++) {
re[i] = Dre[i + w * j];
im[i] = Dim[i + w * j];
}
FFT.inverseTransform(re, im);
for (let i = 0; i < re.length; i++) {
Dre[i + w * j] = re[i];
Dim[i + w * j] = im[i];
}
}
}
// vertical
{
const re = new Float64Array(h),
im = new Float64Array(h);
const a = 1 / (w * h); // normalization
for (let i = 0; i < w; i++) {
for (let j = 0; j < h; j++) {
re[j] = Dre[i + w * j];
im[j] = Dim[i + w * j];
}
FFT.inverseTransform(re, im);
for (let j = 0; j < re.length; j++) {
Dre[i + w * j] = re[j] * a;
}
}
}
return Dre; // we ditch the Dim
}
import { worker } from "@fil/worker"
// probably one of the worst ways to load code :)
FFTtext = d3
.text(
"https://raw.githubusercontent.com/nayuki/Nayuki-web-published-code/master/free-small-fft-in-multiple-languages/fft.js"
)
.then(
d => "(function() { " + d + "; return { transform, inverseTransform }; })()"
)
FFT = "🤘" // eval(FFTtext) if you want to use it without the worker
import { checkbox, file, select, slider } from "@jashkenas/inputs"
import { imageInput } from "@mbostock/file-input"
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.
