I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
Apr 15, 2023
1 star
dog = (file && file.image()) || FileAttachment("dog.png").image()
getSilhouette(dog)
getSilhouette = (img) => {
const context = DOM.context2d(img.width, img.height);
context.drawImage(img, 0, 0);
const imgd = context.getImageData(0, 0, img.width*4, img.height*4);
let pix = imgd.data;
const blackpixel = 0;
for (var i = 0, n = pix.length; i < n; i += 4) {
if (pix[i+3] !== 0) {
pix[i] = blackpixel;
pix[i + 1] = blackpixel;
pix[i + 2] = blackpixel;
}
}
context.putImageData(imgd, 0, 0);
return context.canvas;
}
getBorder(dog)
getBorder = (img) => {
const context = DOM.context2d(img.width, img.height);
context.drawImage(img, 0, 0);
const w = img.width * 4,
h = img.height * 4;
const imgd = context.getImageData(0, 0, w, h);
let pix = imgd.data;
let newimgd = context.createImageData(imgd);
let newPix = newimgd.data;
let newimgd2 = context.createImageData(imgd);
let newPix2 = newimgd2.data;
const blackpixel = 0;
let prevTransparent = true;
function processPixel(i, newPix) {
function setBlack(i) {
newPix[i] = blackpixel;
newPix[i + 1] = blackpixel;
newPix[i + 2] = blackpixel;
newPix[i + 3] = 255;
}
function setTransparent(i) {
newPix[i] = 0;
newPix[i + 1] = 0;
newPix[i + 2] = 0;
newPix[i + 3] = 0;
}
// Restart every new line
if (i % (w * 4) === 0) {
prevTransparent = true;
}
if (pix[i + 3] !== 0) {
if (prevTransparent) {
setBlack(i);
} else {
// Previous pixel was black, so we should be inside the shape
setTransparent(i);
}
prevTransparent = false;
} else {
if (!prevTransparent && i > 3) {
setBlack(i - 4); // Set black the prev one
}
prevTransparent = true;
}
}
// Go side by side
for (var i = 0, n = pix.length; i < n; i += 4) {
processPixel(i, newPix);
}
for (let x = 0; x < w; x++) {
for (let y = 0; y < h; y++) {
let i = (y * w + x) * 4;
processPixel(i, newPix2);
}
}
context.putImageData(newimgd, 0, 0);
context.putImageData(newimgd2, 0, 0);
// function imgDataToDataURL(imgData) {
// const ctx = DOM.context2d(w, h);
// ctx.putImageData(imgData, 0, 0);
// return ctx.canvas.toDataURL();
// }
// function dataURLtoImg(dataURL) {
// var img = new Image();
// img.src = dataURL;
// return img;
// }
// context.clearRect(0, 0, w, h);
// let newimg = dataURLtoImg(imgDataToDataURL(newimgd));
// newimg.onload = () => context.drawImage(newimg, 0, 0);
// let newimg2 = dataURLtoImg(imgDataToDataURL(newimgd));
// newimg2.onload = () => context.drawImage(newimg2, 0, 0);
return context.canvas;
}
// {
// let w = 5, h = 3;
// for (let x = 0; x < w; x++) {
// for (let y = 0; y < h; y++) {
// let i = (y * w + x) * 4;
// console.log(x,y, i);
// }
// }
// }
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.
