Video Pixels
Load a video, manipulate its pixels and draw to canvas. To run this example locally, you will need a running local server.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let fingers;
function setup() {
createCanvas(320, 240);
// specify multiple formats for different browsers
fingers = createVideo(['assets/fingers.mov', 'assets/fingers.webm']);
fingers.loop();
fingers.hide();
noStroke();
fill(0);
}
function draw() {
background(255);
fingers.loadPixels();
const stepSize = round(constrain(mouseX / 8, 6, 32));
for (let y = 0; y < height; y += stepSize) {
for (let x = 0; x < width; x += stepSize) {
const i = y * width + x;
const darkness = (255 - fingers.pixels[i * 4]) / 255;
const radius = stepSize * darkness;
ellipse(x, y, radius, radius);
}
}
}
