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