Video Filters

webcam

p5js

sketch

Published

November 5, 2018

Exploring filters applied to images captured from the webcam. Inspired by this coding train video.

This is done using the filter feature in p5.js which applies the filter to the entire canvas. Since I’m additively applying the filters - the upper left image will have all the filters applied, and the bottom right will only have erode applied.

    var img = capture.get()

    image(img, 0, 0, video_w, video_h);
    filter(THRESHOLD);

    image(img, video_w, 0, video_w, video_h);
    filter(GRAY);

    image(img, 0, video_h, video_w, video_h);
    filter(POSTERIZE, 3);

    image(img, video_w, video_h, video_w, video_h);
    filter(ERODE);