Retired Computer Scientist: SRI-ARC (Engelbart),
Xerox PARC, Xerox SDS, Electronic Arts, SGI, Google, Box
operation
canvas1 = {
const canvas = DOM.canvas(imageTest.naturalWidth, imageTest.naturalHeight);
const context = canvas.getContext("2d");
canvas.style =
"image-rendering: pixelated; image-rendering: crisp-edges; width: 100%;";
context.drawImage(
imageTest,
0,
0,
imageTest.naturalWidth,
imageTest.naturalHeight
);
const imageData = context.getImageData(
0,
0,
imageTest.naturalWidth,
imageTest.naturalHeight
);
const operations = { brightness, colorshift };
operations[operation](imageData.data, amount);
brightness(imageData.data, amount);
// make15Bit(imageData, amount);
context.putImageData(imageData, 0, 0);
return canvas;
}
height = 200
w = 200
wasmMemory = new Uint8Array(height * w * 4 * 4) // pretend this is the wasm memory
outputPointer = 1024 // rustWasm.get_output_buffer_pointer();
imageDataArray = wasmMemory.slice(outputPointer, outputPointer + height * w * 4)
url = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Cappuchin_Bridge_(30706076020).jpg/1079px-Cappuchin_Bridge_(30706076020).jpg"
imageTest = d3.image(url, { crossOrigin: "anonymous" })
//imageTest = FileAttachment("Cappuchin_Bridge_16.jpg").image()
imageTest.naturalWidth
imageTest.naturalHeight
function brightness(data, delta) {
for (let i = 0; i < data.length; i += 4) {
data[i + 0] = data[i + 0] + delta;
data[i + 1] = data[i + 1] + delta;
data[i + 2] = data[i + 2] + delta;
}
}
function colorshift(data, shift) {
let mask = (0xff >> shift) << shift;
for (let i = 0; i < data.length; i += 4) {
data[i + 0] = data[i + 0] & mask;
data[i + 1] = data[i + 1] & mask;
data[i + 2] = data[i + 2] & mask;
}
}
function mask(shift) {
return (0xff >> shift) << shift;
}
mask(7)
d3 = require("d3@5")
import { radio, slider } from "@jashkenas/inputs"
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.
