Web developer and autodidact with an interest in creative coding.
{
const image = await FileAttachment('image@2.png').image();
const canvas = DOM.canvas(image.width, image.height);
const data = cv.imread(image);
cv.threshold(data, data, ex1_threshold, 255, cv.THRESH_BINARY);
cv.imshow(canvas, data);
data.delete();
return sideBySide(image, canvas);
}
{
const image = await FileAttachment('chris-briggs-VK7jXtOtEuM-unsplash.jpg').image();
const data = cv.imread(image);
cv.cvtColor(data, data, cv.COLOR_RGBA2GRAY);
cv.threshold(data, data, ex2_threshold, 255, cv.THRESH_BINARY);
const contours = new cv.MatVector();
const hierarchy = new cv.Mat();
cv.findContours(data, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_NONE);
// Now that we have our contours, convert back to RGB so that we can draw with colors.
cv.cvtColor(data, data, cv.COLOR_GRAY2RGB);
for(let i = 0; i < contours.size(); i++) {
const {m00, m01, m10} = cv.moments(contours.get(i));
if(m00 === 0) continue;
const center = new cv.Point(m10 / m00, m01 / m00);
cv.circle(data, center, 10, [0, 0, 0, 255], 6);
cv.circle(data, center, 10, [0, 255, 0, 255], 2);
}
const canvas = DOM.canvas(image.width, image.height);
cv.imshow(canvas, data);
data.delete();
contours.delete();
hierarchy.delete();
return sideBySide(image, canvas);
}
defineProxy = {
let define = window.define;
const proxy = function(...args) {
if(args.length < 2 && typeof args[0] === 'function') {
// Todo: Handle dependencies?
// See https://github.com/d3/d3-require/blob/4056a7869/src/index.js#L142
const module = args[0]();
if(module.then) delete module.then;
return define(() => module);
}
return define(...args);
};
proxy.amd = {};
Object.defineProperty(window, 'define', {
configurable: true,
get: () => proxy,
set: value => { define = value },
});
return true;
}
async function initOpenCV(source = 'https://docs.opencv.org/4.5.4/opencv.js') {
defineProxy;
const cv = await require(source);
// Wait for wasm initialization.
// See https://stackoverflow.com/a/63211547/521868 for details.
if(cv.getBuildInformation) return cv;
return new Promise(resolve => {
cv.onRuntimeInitialized = () => resolve(cv);
});
}
cv = initOpenCV()
function triggerExampleError() {
new cv.CascadeClassifier().detectMultiScale(new cv.Mat(), new cv.RectVector());
}
triggerExampleError()
{
try {
triggerExampleError();
}
catch(error) {
throw cv.exceptionFromPtr(error).msg;
}
}
handleError(triggerExampleError)
exampleFile = registerFile(FileAttachment('image@2.png'), {
name: 'my-custom-name',
invalidation, // add to automatically unlink the file
})
// Convert to string to get the file name
'' + exampleFile
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.