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
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.
