Live programming @ University of Washington
Public
Edited
Aug 10, 2023
{
// https://docs.opencv.org/4.5.4/d5/d10/tutorial_js_root.html
const data = cv.imread(im);
const canvas = DOM.canvas(im.width, im.height);
// const mask = new cv.Mat()
// cv.cvtColor(data, mask, cv.COLOR_RGBA2GRAY, 0);
// const invmask = new cv.Mat()
// cv.bitwise_not(mask, invmask)
// const black = new cv.Mat()
// cv.bitwise_and(mask, invmask, black)
// cv.bitwise_and(mask, black, mask)
// cv.cvtColor(mask, mask, cv.COLOR_GRAY2RGBA);
cv.cvtColor(data, data, cv.COLOR_RGBA2GRAY);
// cv.threshold(data, data, ex2_threshold, 300, cv.THRESH_OTSU);
// cv.threshold(data, data, 50, 300, cv.THRESH_BINARY_INV)
let anchor = new cv.Point(-1, -1);
// You can try more different parameters
let M = cv.Mat.ones(2, 2, cv.CV_8U);
cv.erode(data, data, M, anchor, 1, cv.BORDER_CONSTANT, cv.morphologyDefaultBorderValue());
// cv.imshow(canvas, data);
// return canvas
// cv.adaptiveThreshold(data, data, 255, cv.ADAPTIVE_THRESH_GAUSSIAN_C, cv.THRESH_BINARY, 9, 2);
// 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_CCOMP, cv.CHAIN_APPROX_NONE)//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);
// cv.imshow(canvas, hierarchy);
// return canvas
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);
let color = new cv.Scalar(Math.round(Math.random() * 255), Math.round(Math.random() * 255),
Math.round(Math.random() * 255));
cv.drawContours(data, contours, i, color, 1, cv.LINE_8, hierarchy, 100);
// let color = new cv.Scalar(Math.round(Math.random() * 255), Math.round(Math.random() * 255),
// Math.round(Math.random() * 255));
// let color = new cv.Scalar(Math.round(0), Math.round(255),
// Math.round(0));
// if (cv.contourArea(contours.get(i)) > 50) {
// cv.drawContours(mask, contours, i, color, -1, cv.LINE_8, hierarchy, 100);
// }
}
// cv.cvtColor(mask, mask, cv.COLOR_RGBA2GRAY, 0);
// cv.threshold(mask, mask, 100, 255, cv.THRESH_BINARY);
// cv.cvtColor(mask, mask, cv.COLOR_GRAY2RGB, 0)
// // cv.bitwise_not(mask, mask)
// // cv.cvtColor(black, black, cv.COLOR_GRAY2RGBA);
// cv.bitwise_and(data, mask, data)
// let color = new cv.Scalar(Math.round(Math.random() * 255), Math.round(Math.random() * 255),
// Math.round(Math.random() * 255));
// cv.drawContours(data, contours, -1, color, -1, cv.LINE_8, hierarchy, 100);
// const canvas = DOM.canvas(image.width, image.height);
// return contours.get(0)
cv.imshow(canvas, data);
data.delete();
contours.delete();
hierarchy.delete();
return sideBySide(im, canvas);
}
data1 = fetchp(`https://fontpark.com/en/preview/font?id=${font}&text=${text}&size=100&color=000000`)
`https://fontpark.com/en/preview/font?id=${font}&text=${text}&size=100&color=000000`
im = {
const imgUrl = await URL.createObjectURL(await data1.blob())
const im = new Image;
im.src = imgUrl;
im.height = 50; // (deliberately squashed)
im.width = 200;
await (new Promise(r => setTimeout(r, 10)))
return im
}
render = {
// cap.read(src);
// cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY, cv.CV_8UC1)
const data = cv.imread(image);
cv.Canny(data, dst1, 100, 200);
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);
}
cv.imshow(canvas, data);
}
viewof ex2_threshold = Inputs.range([0, 255], {value: 50, step: 1, label: 'Threshold'})
function sideBySide(a, b) {
const css = 'max-width:100%';
a.style.cssText += css;
b.style.cssText += css;
return html`<div style="display:flex;max-width:800px">
<div style="padding-right:10px">${a}</div>
<div>${b}</div>
`;
}
dst1 = new cv.Mat(image.height, image.width, cv.CV_8UC1)
import {cv} from "@mootari/opencv-js"
import {fetchp} from '@tomlarkworthy/fetchp'
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.