p5js experiments

Here I've got a few little experiments I've been working on using p5.js, the JavaScript counterpart to Processing.

Motion painting

The below sketch is my first endeavour into motion tracking, inspired heavily by Maya Man's beautiful paint me art pieces.

I determine which pixels have changed by looping through a downsized version of the previous frame and comparing the "distances" between the colours of each pixel. Pixels with larger distances are repainted with higher opacity so those that have not changed much stay trasparent and effectively invisible.

Edge detection

This sketch demonstrates a common method used for edge detection using the Sobel operator. I learned most of the theory behind this sketch from Dr Mike Pound's videos on Computerphile.

Put simply, the code looks at the surrounding 9 pixels of each pixel in the image and multiplies the left and right, and above and below pixels by 1 or -1 and adds all these values up to determine the level of change betin the horizontal and vertical directions. This is then mapped into a greyscale value and displayed on the screen.