In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
pointy = p5js(p5 => {
p5.setup = () => {
p5.createCanvas(128*scale,128*scale);
p5.noStroke();
p5.background(0);
}
p5.draw = () => {
for (let i = 0; i < imageIS.length ; ++i) {
let x = imageIS[i].x*scale
let y = imageIS[i].y*scale
p5.fill( `rgb(${imageIS[i].colour},${~~(imageIS[i].colour*2)%150},${i%128})`)
p5.circle(x,y,scale)
p5.fill( `rgb(${imageIS[i].colour},${~~(imageIS[i].colour*2)%255},${i%128})`)
x+=(p5.frameCount%1)*4
if (button%2) p5.rect(x,y,scale>>1)
}
}
})
canvas = {
const canvas = document.createElement("canvas");
canvas.width = dst.rows;
canvas.height = dst.cols;
canvas.id = 'canvas'
return canvas;
}
render = {
time; // whenever the time changes…
imageIS.length = 0 // reset image colour buffer
cap.read(src); // Video Capture, read frame into src
cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY, cv.CV_8UC1) // make gray scale
let aspect = dst.cols/dst.rows
let dsize = new cv.Size(128, 128);
cv.resize(dst, dst, dsize, 0, 0, cv.INTER_AREA);
let ksize = new cv.Size(3, 3);
let anchor = new cv.Point(-1, -1);
// // You can try more different parameters
cv.blur(dst, dst, ksize, anchor, cv.BORDER_DEFAULT);
// cv.adaptiveThreshold(dst, dst, 255, cv.ADAPTIVE_THRESH_GAUSSIAN_C, cv.THRESH_BINARY, 3, 1);
for (let row = 0; row < dst.rows; ++row) {
for (let col = 0; col < dst.cols; ++col) {
let pixel = dst.ucharPtr(row, col);
// let R = ;
// let R = pixel[0];
// let G = pixel[1];
// let B = pixel[2];
// let A = pixel[3];
imageIS.push({x:col,y:row,colour:pixel[0]})
}
}
cv.imshow(canvas, dst);
}
imageIS = []
scale = 6
function TimeObserver(video) {
return Generators.observe(notify => {
let time, frame;
if (video.requestVideoFrameCallback) {
function tick() {
if (time !== video.currentTime) notify(time = video.currentTime);
frame = video.requestVideoFrameCallback(tick);
}
if (video.paused) notify(video.currentTime);
frame = video.requestVideoFrameCallback(tick);
return () => video.cancelVideoFrameCallback(frame);
} else {
(function tick() {
if (time !== video.currentTime) notify(time = video.currentTime);
frame = requestAnimationFrame(tick);
})();
return () => cancelAnimationFrame(frame);
}
});
}
time = TimeObserver(video)
src = new cv.Mat(video.videoHeight, video.videoWidth, cv.CV_8UC4)
dst = new cv.Mat(video.videoHeight, video.videoWidth, cv.CV_8UC1) // the mask
small = new cv.Mat(255, 255, cv.CV_8UC1) // used to make mini image that is then read to make ascii image
cap = new cv.VideoCapture(video)
w = width*0.6
h = width*0.6
import { cv, handleError, registerFile } from "@mootari/opencv-js"
import {p5 as p5js} from "@tmcw/p5"
chroma = require('chroma-js@2.4.2/chroma.js')
<style>
.katex-display,p,ul,h1,h2,h3,h4,li
{
font-family: sans-serif;
}
@media (hover: hover) {
.katex-display,p,ul,h1,h2,h3,h4,li {
max-width: ${width}px;
min-width: ${width}px; }
}
</style>
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.
