Published
Edited
Mar 4, 2020
1 star
kernel = {
const gpu = new GPU.GPU();
return gpu.createKernel(function(foreground, background) {
// TY https://stackoverflow.com/a/20902482/1324039
let pixel = foreground[this.thread.y][this.thread.x];
// Every component (red, green, and blue) can have a value from 0 to 255, so determine the extremes
const max = Math.max(Math.max(pixel[0], pixel[1]), pixel[2]);
const min = Math.min(Math.min(pixel[0], pixel[1]), pixel[2]);
const green = pixel[1];
// Should the pixel be masked/replaced?
const replace =
(green !== min) // green is not the smallest value
&& (
green === max // green is the biggest value
|| (max - green) < this.constants.maxDifference // or at least almost the biggest value
)
&& (max - min) > this.constants.minDifference; // minimum difference between smallest/biggest value (avoid grays)
if (replace) {
pixel = background[this.thread.y][this.thread.x];
}
this.color(pixel[0], pixel[1], pixel[2], 1);
}, {
output: [image.width, image.height],
graphical: true,
argumentTypes: {
foreground: 'HTMLImage',
background: 'HTMLImage'
},
constants: {
maxDifference: 8 / 255,
minDifference: 96 / 255,
}
});
}
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.
