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);
// }
// }
// }
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.