Well, Cam

Project Brief

I had to design and create an experimental camera with a specific purpose and usage in mind. The camera should inspire the user to capture images in new and surprising ways. We were expected to interact with the DOM, and use createGraphics() and / or loadPixels() in your camera design.

Design Process

For this project, I was interested in combing some motion detection with the camera to make it responsive to the environment. The camera filter makes the image increasingly blurred and when the mouse moves on the screen, it snaps back to the focussed video.

Perfecting the filter took a couple of iterations to figure out. I played with the parameters and used random() and opacity to create a ‘watercolour’ feel. Overall, I’m quite pleased with how the filter looks mimicking a bokeh effect.

Another challenge to figure out was ensuring that the speed with which the screen fills up with rectangles is quite slow. I couldn’t simply use frameRate, cause I wanted all the other functions to run at a faster rate. Using setInterval() helped me fix this issue.

Additionally, the save button lets a person save the current frame and the sliders lets user control the r, g, b values of the video.

Reflection

Since this was my first time working with video and pixel manipulation, there was a learning curve to overcome, after which I began to enjoy the process. Overall, I’m quite pleased with the filter. If I were to revisit this project, I would enhance the motion detection to recognise when there was movement on the screen.

Reference

  • Working with video by Allison Parrish
  • Instagram Filters with p5.js