xxxxxxxxxx
45
let capture, pos;
function setup() {
createCanvas(640,480);
//createCanvas(window.innerWidth/2, window.innerWidth/2 * (3/4));
capture = createCapture({
video: {
facingMode: "environment",
maxWidth: width,
maxHeight: height
},
});
capture.size(width, height);
videoBuffer = createGraphics(capture.width, capture.height); // a second canvas to read our video pixels from without using the main canvas
capture.hide(); // comment this out to see live video feed
background(0,0,0,255);
}
function draw() {
videoBuffer.image(capture, 0, 0, width, width * capture.height / capture.width);
videoBuffer.loadPixels();
loadPixels();
// this could be made more efficient, perhaps?:
for (let y = 0; y < height; y+=1) {
for (let x = 0; x < width; x+=1) {
pos = (width*y+x)*4;
pixels[pos+0] = (videoBuffer.pixels[pos+0] > pixels[pos+0]) ? videoBuffer.pixels[pos+0] : pixels[pos+0];
pixels[pos+1] = (videoBuffer.pixels[pos+1] > pixels[pos+1]) ? videoBuffer.pixels[pos+1] : pixels[pos+1];
pixels[pos+2] = (videoBuffer.pixels[pos+2] > pixels[pos+2]) ? videoBuffer.pixels[pos+2] : pixels[pos+2];
}
}
updatePixels();
}
function mousePressed(){
save("lightpainter.png");
}
// based on glowdoodle.com (http://scripts.mit.edu/~eric_r/glowdoodle/)
// code implementation based on https://p5js.org/examples/dom-video-capture.html
// and https://github.com/processing/p5.js/issues/1496
// and https://github.com/jywarren/thermographer/blob/master/thermographer-website/public/javascripts/capture.js#L106
// and https://github.com/jywarren/growpoodle/blob/master/growpoodle.pde
// backed up at https://gist.github.com/jywarren/75203a7a054f8c96072bbc2b66714dff