pixel flipper, data sifter. trying to see what I can while I'm here
K = {
let context, canvas, scale = width / N;
if (this && this.getContext) {
canvas = this;
context = canvas.getContext("2d");
context.clearRect(0, 0, N * scale, HN * scale);
} else {
context = DOM.context2d(N * scale, HN * scale, 1);
canvas = context.canvas;
canvas.style.background = "#333";
canvas.style.width = `${scale * N}px`;
canvas.style.height = `${scale * HN}px`;
}
let path = d3.geoPath(d3.geoIdentity().scale(scale)).context(context);
let l = imageData.data.length / 4,
a = new Uint8Array(l);
for (let i = 0; i < l; i+=1)
a[i] = 1/3 * (imageData.data[i*4 + 0] + imageData.data[i*4 + 1] + imageData.data[i*4 + 2])
contours(a).forEach(c => {
context.beginPath(),
path(c),
context.fillStyle = d3.interpolateRdYlBu(c.value/256),
context.fill(),
context.strokeStyle = 'white',
context.stroke();
});
return canvas;
}
image = {
if (enableWebcam) {
let deviceId = devices.filter(function(d) {
return d.label == videoSource
}).map(function(d) { return d.deviceId })[0]
let constraints = {
video: {deviceId: {exact: deviceId}}
}
const stream = navigator.mediaDevices
? navigator.mediaDevices.getUserMedia(constraints)
: new Promise((y, n) => navigator.getUserMedia(constraints, y, n));
const video = html`<video autoplay=true playsinline=true width="${width}"></video>`;
video.style.maxWidth = "100%";
yield stream.then(stream => {
if ("srcObject" in video) video.srcObject = stream;
else video.src = URL.createObjectURL(stream);
invalidation.then(() => {
stream.getTracks().forEach(t => t.stop());
URL.revokeObjectURL(video.src);
});
return video;
});
while (true) {
yield video;
}
} else {
yield image2canvas(await getImageData(filepic), width)
}
// else {
// yield new Promise((resolve, reject) => {
// const image = new Image;
// image.onload = () => resolve(image);
// image.onerror = reject;
// image.crossOrigin = "anonymous";
// image.src = url;
// });
// }
}
devices = navigator.mediaDevices.enumerateDevices()
videoDevices = devices.filter(d => d.kind == "videoinput")
imageData = {
const width = N, height = HN;
const context = this ? this.context : DOM.context2d(width, height, 1);
context.drawImage(image, 0, 0, width, height);
const data = context.getImageData(0, 0, width, height);
data.context = context;
return data;
}
width
image.videoWidth
height = {
if(image.videoWidth) {
return image.videoHeight * width / image.videoWidth
}
return image.height * width / image.width
}
N = 224
HN = Math.round(N * height / image.width)
d3 = require("d3@6")
contours = d3.contours().thresholds(thresholds).size([imageData.width, imageData.height])
import {checkbox, slider, select} from "@jashkenas/inputs"
import {fileInput} from "@mbostock/file-input-with-initial-value"
async function getImageData(blob) {
let img = new Image();
img.crossOrigin = '*';
img.src = URL.createObjectURL(blob);
await new Promise(resolve => img.addEventListener('load', resolve));
let w = img.width
let h = img.height
let ctx = DOM.canvas(w, h).getContext('2d');
ctx.drawImage(img, 0, 0, w, h);
return ctx.getImageData(0, 0, w, h);
}
image2canvas = (imageData, width) => {
const context = DOM.context2d(imageData.width, imageData.height, 1);
context.putImageData(imageData, 0, 0);
if (!width || imageData.width <= width) return context.canvas;
const height = (imageData.height * width) / imageData.width;
const contextr = DOM.context2d(width, height, 1);
contextr.drawImage(context.canvas, 0, 0, width, height);
return contextr.canvas;
}
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.
