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')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.