Computer Graphics & Visualization @ufrj.br
showImageData(imageDataDifference(imageData(b), imageData(a), multiplier))
function imageDataDifference(imgData1, imgData2, multiplier = 1) {
const [a, b] = [imgData1.data, imgData2.data];
const result = new ImageData(imgData1.width, imgData1.height);
const c = result.data;
const n = a.length;
for (let i = 0; i < n; ) {
c[i] = Math.min(255, Math.abs(a[i] - b[i]) * multiplier);
i++;
c[i] = Math.min(255, Math.abs(a[i] - b[i]) * multiplier);
i++;
c[i] = Math.min(255, Math.abs(a[i] - b[i]) * multiplier);
i++;
c[i] = 255;
i++;
}
return result;
}
a = afile.image()
b = bfile.image()
function localFileInput({
accept, // e.g., ".txt,.md"
label,
value // set the initial value (typically to a FileAttachment),
} = {}) {
const lab = label
? html`<label style="display:inline-block;min-width:100px;font:9pt sans-serif; ">${label}</label>`
: "";
return Object.assign(
htl.html`<form>${lab}<input type=file ${{ accept }} oninput=${(event) => {
const { currentTarget: input } = event;
const {
form,
files: [file]
} = input;
form.value = new LocalFile(file);
}}>`,
{ value }
);
}
import { LocalFile } from "@mbostock/localfile"
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.
