Programmer at Square. Mostly (currently) Go.
Public
Edited
May 6, 2021
1 fork
image = FileAttachment("rescue-raiders-words.png").image()
sourceImage = {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
context.fillStyle = 'rgba(0,0,0,1)';
context.fillRect(0, 0, width, height);
const topLeft = C.topLeft;
context.drawImage(image, topLeft.x, topLeft.y);
return canvas;
}
phaseInfo = {
const c = C.colorBurst / 2 / Math.PI;
return c - Math.floor(c)
}
sampleRate = C.NTSC_4FSC
subcarrier = C.NTSC_FSC / sampleRate
w = normalize(chebyshevWindow(17, 50))
Plot.plot({
height: 150,
marks: [Plot.barY(w.map((d,i) => ({index: i, w: d})), { x: "index", y: "w" })],
x: {label: "chebyshevWindow(17,50)"},
})
yBandwidth = luma_bandwidth / sampleRate
uBandwidth = chroma_bandwidth / sampleRate
vBandwidth = uBandwidth
wy = normalize(mul(w, lanczosWindow(17, yBandwidth)))
wu = scale(normalize(mul(w, lanczosWindow(17, uBandwidth))), 2)
wv = scale(normalize(mul(w, lanczosWindow(17, vBandwidth))), 2)
cs = [8, 7, 6, 5, 4, 3, 2, 1, 0].map(i => [wy[i], wu[i], wv[i]])
matrix0 = Matrix3.identity()
matrix1 = new Matrix3(1, 0, 0,
0, saturation, 0,
0, 0, saturation).mul(matrix0)
matrix2 = {
const h = 2 * Math.PI * Hue;
return new Matrix3(1, 0, 0,
0, Math.cos(h), -Math.sin(h),
0, Math.sin(h), Math.cos(h)).mul(matrix1);
}
// Decode Y'UV decoder matrix
matrix3 = new Matrix3(1, 1, 1,
0, -0.394642, 2.032062,
1.139883, -0.580622, 0).mul(matrix2)
matrix4 = matrix3.mul(Math.max(contrast, 0))
decoderMatrix = matrix4
decoderTranspose = decoderMatrix.transpose()
sourceData = sourceImage.getContext('2d').getImageData(0, 0, width, height).data
function getRawPixel(x, y) {
x = Math.min(Math.max(x, 0), width - 1);
y = Math.min(Math.max(y, 0), height - 1);
let red = (y * width + x) * 4;
return [sourceData[red], sourceData[red + 1], sourceData[red + 2]];
}
function pixel(x, y) {
let c = scale(getRawPixel(x, y), 1.0 / 255.0);
let p = phaseInfo;
let phase = 2.0 * Math.PI * (subcarrier * (x + 0.5) + p);
return mul(c, [1.0, Math.sin(phase), Math.cos(phase)]);
}
pixels = (x, y, i) => add(pixel(x + i, y), pixel(x - i, y))
function colorAt(x, y) {
let c = mul(pixel(x, y), cs[0]);
c = add(c, mul(pixels(x, y, 1), cs[1]));
c = add(c, mul(pixels(x, y, 2), cs[2]));
c = add(c, mul(pixels(x, y, 3), cs[3]));
c = add(c, mul(pixels(x, y, 4), cs[4]));
c = add(c, mul(pixels(x, y, 5), cs[5]));
c = add(c, mul(pixels(x, y, 6), cs[6]));
c = add(c, mul(pixels(x, y, 7), cs[7]));
c = add(c, mul(pixels(x, y, 8), cs[8]));
return decoderTranspose.mul(c);
return c;
}
decoderMatrix.mul([0.5, 0.5, 0.5])
newImage = {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const width = sourceImage.width;
const height = sourceImage.height;
canvas.width = width;
canvas.height = height * 2;
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.fillRect(0, 0, width, height * 2);
let imageData = ctx.getImageData(0, 0, width, height * 2);
const data = imageData.data;
const setPixel = (x, y, r, g, b) => {
let red = (y * width + x) * 4;
data[red] = r;
data[red + 1] = g;
data[red + 2] = b;
};
for (let x = 84; x < 660; x++) {
for (let y = 19; y < 211; y++) {
const sourceColor = scale(colorAt(x, y), 255.0);
setPixel(x, y * 2, sourceColor[0], sourceColor[1], sourceColor[2]);
setPixel(x, y * 2 + 1, sourceColor[0], sourceColor[1], sourceColor[2]);
}
}
ctx.putImageData(imageData, 0, 0);
return canvas;
}
function realIDFT(ary) {
const size = ary.length;
const w = Array(size).fill(0);
for (let i = 0; i < size; i++) {
const omega = 2 * Math.PI * i / size;
for (let j = 0; j < size; j++) {
w[i] += ary[j] * Math.cos(j * omega);
}
}
return scale(w, 1/size);
}
// Chebyshev Window
// Based on ideas at http://www.dsprelated.com/showarticle/42.php
function chebyshevWindow(n, sidelobeDb) {
const m = n - 1;
let w = Array(m).fill(0);
const alpha = Math.cosh(Math.acosh(Math.pow(10, sidelobeDb / 20)) / m);
for (let i = 0; i < m; i++) {
const a = Math.abs(alpha * Math.cos(Math.PI * i / m));
if (a > 1)
w[i] = Math.pow(-1, i) * Math.cosh(m * Math.acosh(a));
else
w[i] = Math.pow(-1, i) * Math.cos(m * Math.acos(a));
}
w = realIDFT(w);
w = resize(w, n);
w[0] /= 2;
w[n - 1] = w[0];
const max = w.reduce((prev, cur) => Math.max(prev, Math.abs(cur)));
return scale(w, 1/max);
}
// Lanczos Window
function lanczosWindow(n, fc) {
let v = Array(n).fill(0);
fc = Math.min(fc, 0.5);
const halfN = Math.floor(n / 2);
for (let i = 0; i < n; i++) {
const x = 2 * Math.PI * fc * (i - halfN);
v[i] = (x == 0.0) ? 1.0 : Math.sin(x) / x;
}
return v;
}
C = (() => {
const HORIZ_START = 16;
const HORIZ_BLANK = (9 + HORIZ_START) // 25;
const HORIZ_DISPLAY = 40;
const HORIZ_TOTAL = (HORIZ_BLANK + HORIZ_DISPLAY) // 65;
const CELL_WIDTH = 14;
const VERT_NTSC_START = 38;
const VERT_DISPLAY = 192;
// From CanvasInterface.h
// See https://en.wikipedia.org/wiki/Colorburst
const NTSC_FSC = 315 / 88 * 1e6; // 3579545 = 3.5 Mhz: Color Subcarrier
const NTSC_4FSC = 4 * NTSC_FSC; // 14318180 = 14.3 Mhz
const NTSC_HLENGTH = (52 + 8 / 9) * 1e-6;
const NTSC_HHALF = (35 + 2 / 3) * 1e-6;
const NTSC_HSTART = NTSC_HHALF - NTSC_HLENGTH / 2;
const NTSC_VLENGTH = 240;
const NTSC_VSTART = 19;
const ntscClockFrequency = NTSC_4FSC * HORIZ_TOTAL / 912;
const ntscVisibleRect = {x: ntscClockFrequency * NTSC_HSTART, y: NTSC_VSTART,
width: ntscClockFrequency * NTSC_HLENGTH, height: NTSC_VLENGTH};
const ntscDisplayRect = {x: HORIZ_START, y: VERT_NTSC_START,
width: HORIZ_DISPLAY, height: VERT_DISPLAY};
const vertStart = ntscDisplayRect.y;
// first displayed column.
const horizStart = Math.floor(ntscDisplayRect.x);
// imageSize is [14 * visible rect width in cells, visible lines]
const imageSize = {width: Math.floor(CELL_WIDTH * ntscVisibleRect.width),
height: Math.floor(ntscVisibleRect.height)};
// imageLeft is # of pixels from first visible point to first displayed point.
const imageLeft = Math.floor((horizStart - ntscVisibleRect.x) * CELL_WIDTH);
const colorBurst = 2 * Math.PI * (-33 / 360 + (imageLeft % 4) / 4);
// First pixel that OpenEmulator draws when painting normally.
const topLeft = {x: imageLeft, y: vertStart - ntscVisibleRect.y};
// First pixel that OpenEmulator draws when painting 80-column mode.
const topLeft80Col = {x: imageLeft - CELL_WIDTH / 2, y: vertStart - ntscVisibleRect.y};
return {
imageSize,
colorBurst,
topLeft,
NTSC_FSC,
NTSC_4FSC,
}
})()
d3 = require("d3@6")
// Scale elements of an array so they sum to 1.
function normalize(ary) {
let sum = ary.reduce((a, b) => a + b, 0)
return scale(ary, 1.0/sum);
}
mul = (ary1, ary2) => ary1.map((e, i) => e * ary2[i])
add = (ary1, ary2) => ary1.map((e, i) => e + ary2[i])
scale = (ary, factor) => ary.map((x) => x * factor)
function resize(ary, n) {
let w = Array(n).fill(0);
for (let i = 0; i < Math.min(n, ary.length); i++) {
w[i] = ary[i];
}
return w;
}
class Matrix3 {
constructor(c00, c01, c02, c10, c11, c12, c20, c21, c22) {
this.data = [
c00 || 0,
c01 || 0,
c02 || 0,
c10 || 0,
c11 || 0,
c12 || 0,
c20 || 0,
c21 || 0,
c22 || 0
];
}
static identity() {
return new Matrix3(1, 0, 0, 0, 1, 0, 0, 0, 1);
}
mul(val) {
if (typeof val == "number") {
return new Matrix3(...this.data.map((x) => x * val));
}
if (val instanceof Array) {
// vector
let v = Array(3).fill(0);
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
v[i] += this.data[i * 3 + j] * val[j];
}
}
return v;
}
let m = new Matrix3();
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
for (let k = 0; k < 3; k++) {
m.data[i * 3 + j] += val.data[i * 3 + k] * this.data[k * 3 + j];
}
}
}
return m;
}
transpose() {
let m = new Matrix3();
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
m.data[j * 3 + i] = this.data[i * 3 + j];
}
}
return m;
}
}
Plot = require("@observablehq/plot@0.1")
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.
