Notebooks 2.0 is here.
p5(sketch => {
let detector
let video
let objects = []
function onModelReady() {
detector.detect(onDetected)
}
function onDetected(error, results) {
if (error) console.error(error)
else objects = results
onModelReady()
}
sketch.setup = function() {
sketch.createCanvas(640, 480)
sketch.background(0)
video = sketch.createCapture(sketch.VIDEO)
video.hide()
detector = ml5.objectDetector('cocossd', video, onModelReady)
};
sketch.draw = function() {
sketch.image(video, 0, 0)
objects.forEach(obj => {
sketch.stroke(0, 255, 0)
sketch.strokeWeight(4)
sketch.noFill()
sketch.rect(obj.x, obj.y, obj.width, obj.height)
sketch.noStroke()
sketch.fill(255)
sketch.textSize(24)
sketch.text(obj.label, obj.x + 10, obj.y + 24)
})
}
})
import { p5 } from "@bberak/p5"
ml5 = import("https://cdn.skypack.dev/ml5@0.5.0").then(x => x.default)
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.
