I'm a Software Engineer who advocates for simplicity and readability, I strive for elegant solutions leveraging different languages and paradigms.
viewof noise = html`<input type='range' min=0 max=30 value=10 />`
image = FileAttachment("noise-small.png").image()
{
const render = (pixels) => {
const d = pixels.data;
for (let x = 0; x < pixels.width; x += 1) {
for (let y = 0; y < pixels.height; y += 1) {
const i = y * 4 * pixels.width + x * 4;
const { r, g, b } = net.run({ x, y });
d[i] = r;
d[i + 1] = g;
d[i + 2] = b;
}
}
return pixels;
};
// const canvas = renderImage(image, render);
return canvas;
}
net = {
const net = new brain.recurrent.LSTM();
const range = (n) => Array.from({ length: n }).map((_, i) => i);
let data = [];
const train = (pixels) => {
const d = pixels.data;
for (let x = 0; x < pixels.width; x += 10) {
for (let y = 0; y < pixels.height; y += 10) {
const input = [];
const output = [];
range(10).map((dx) =>
range(10).map((dy) => {
const i = (y + dy) * 4 * pixels.width + (x + dx) * 4;
input.push(dx + x, dy + y);
let r = d[i];
let g = d[i + 1];
let b = d[i + 2];
output.push(r * 1, g * 1, b * 1);
})
);
console.log(input, output);
// const i = y * 4 * pixels.width + x * 4;
// let r = d[i];
// let g = d[i + 1];
// let b = d[i + 2];
net.train([
{
input,
output
}
]);
}
}
return pixels;
};
renderImage(image, train);
return net;
}
{
const copy = (pixels) => {
const d = pixels.data;
for (let x = 0; x < pixels.width; x += 1) {
for (let y = 0; y < pixels.height; y += 1) {
const i = y * 4 * pixels.width + x * 4;
let r = d[i];
let g = d[i + 1];
let b = d[i + 2];
d[i] = r;
d[i + 1] = g;
d[i + 2] = b;
}
}
return pixels;
};
return renderImage(image, copy);
}
grain = intensity => pixels => {
const d = pixels.data;
for (let i = 0; i < d.length; i += 4) {
let v = d[i];
const n = math.randomGaussian(
0,
Math.sin(math.map(v, 0, 255, 0, Math.PI, true)) * intensity
);
v = math.constrain(v + n, 0, 255);
d[i] = d[i + 1] = d[i + 2] = v;
}
return pixels;
}
grayscale = pixels => {
const d = pixels.data;
for (let i = 0; i < d.length; i += 4) {
const r = d[i];
const g = d[i + 1];
const b = d[i + 2];
// CIE luminance for the RGB
// The human eye is bad at seeing red and blue, so we de-emphasize them.
let v = 0.2126 * r + 0.7152 * g + 0.0722 * b;
d[i] = d[i + 1] = d[i + 2] = v;
}
return pixels;
}
/** Renders image applying a list of processors to its pixels.
* @param image image HTML image instance.
* @param {...function} processors Functions that takes and returns pixels.
* @usage renderImage(image, ...processors)
*/
renderImage = (image, ...processors) => {
const getPixels = function (img) {
const c = document.createElement("canvas");
c.width = img.width > 1000 ? 1000 : img.width;
c.height = img.width > 1000 ? (1000 / img.width) * img.height : img.height;
const ctx = c.getContext("2d");
ctx.drawImage(img, 0, 0, c.width, c.height);
return {
pixels: ctx.getImageData(0, 0, c.width, c.height),
context: ctx,
canvas: c
};
};
const pipe = (fns) => (arg) => fns.reduce((acc, fn) => fn(acc), arg);
const { canvas, context, pixels } = getPixels(image);
context.putImageData(pipe(processors)(pixels), 0, 0);
return canvas;
}
brain = require('brain.js')
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.
