How to pixelise video capture combining "Video Pixel" and "Video Capture"?

cklkaren

Hello all,

I am very green on p5.js and I would like to pixelise a video capture with the examples given in the website below respectively: Video Pixel Video Capture

I have tried to code them but it doesn't work. Can anyone give me some advice please? Below is the code I have got:

var capture; var circles;

function setup() { createCanvas(390, 240); capture = createCapture(VIDEO); capture.size(320, 240); circles = createVideo(capture); circles.loop(); circles.hide(); /* capture.hide(); */ }

function draw() { background(255); image(capture, 0, 0, 320, 240); filter('INVERT');
circles.loadPixels(); for (var i=0; i<circles.pixels.length/2; i++) { circles.pixels[i] = random(255); } circles.updatePixels(); image(circles, 0, 0, 320, 240); }

Cheers!

camille86

I was working on figuring out the same thing for a while. I used createGraphics() to make a separate graphics buffer, which is a tactic that I somehow have overlooked forever! I placed the image of the video capture there instead of straight into the canvas, and then went about manipulating pixels as normal, but the pixels of the graphics buffer. Then when that's done, update the buffer's pixels, and place the buffer in as an image.

This is how I changed the Video Capture example from the p5.js site. All I did was give every 4th entry in graph.pixels (the data for the red channel) a value of 255, so the video is red-tinted, just as a simple experiment.

var capture;
var graph;

function setup() {
  createCanvas(390, 240);
  capture = createCapture(VIDEO);
  capture.size(320, 240);
  //capture.hide();
  graph = createGraphics(320, 240);
}

function draw() {
  background(255);
  graph.background(255);
  graph.image(capture, 0, 0, 320, 240);
  graph.loadPixels();

  for (var i = 0; i < graph.pixels.length; i += 4) {
    graph.pixels[i] = 255;
  }
  graph.updatePixels();
  image(graph, 0, 0);
}