Project1: Paint Strokes of Privacy

Project1: Paint Strokes of Privacy

1. Project Brief

“Do you have a technology-dependent creative project in your head that you want to build? Do you look at a particular kind of work by other interactive designers/artists and think "I wish I knew how to make that!" In this project, we're dropping you in at the deep end. We want you to propose a creative technology project, and we're going to try to help you build it. Or, more accurately, we're going to help you identify and kludge together a small critical piece of it.”

2. Inspirations

My Little Piece of Privacy, 2010, Niklas Roy

Project Link: https://www.niklasroy.com/project/88/my-little-piece-of-privacy

Designer Niklas Roy’s studio situates on the ground floor with a giant window facing the street. He was constantly disturbed by curious gaze from pedestrians passing by, but a thick curtain will not only block the unwanted attention, but also keep him away from the view. Therefore, a fun solution he came up was to design an automatic, mechanical curtain that can track and follow people’s position in real time: wherever a person goes, the curtain will follow them, hence preventing them from staring into the studio.

This project makes use of a webcam that sends footage in real time to a laptop with a computer vision program, and a DIY motorized curtain.

I quite like the sense of humor in this small, creative technology project, because although such a device does seem to solve the problem on the surface, in reality it attracts more attention than before.

3. Design Process

I started with the intention to duplicate Niklas’ project at a smaller scale. I created a system diagram of Niklas’ project as a method of analysis:

Project1_SystemDiagram_ver1

Then, I thought about how to move this project to a smaller scale, one that is more manageable by me, and hence this second system diagram mapping my project:

Project1_SystemDiagram_ver2

However, it took quite a few days for the physical computing components to arrive. After considering the limited timeframe of this project, I decided to switch everything digital – to use p5.js instead.

The next question popped up in the process of digitization: what would I keep and change when moving the project digital?

After some initial research into what p5.js can do, I decided to play with the process of blocking one’s view using methods unique to digital programming. I found a video footage f a private garden from https://www.window-swap.com, which was shot from the point of view of a window. This represents the idea of privacy in Niklas’ project. By looking at this video, the viewers become pedestrians trying to peep into Niklas’ window. Moreover, instead of hanging an image of a curtain, I could distort the video so that nobody can see what’s going on. This does not stop people from staring but in some way invite them to do so, but it is effective in not allowing them to see the inside (or content) clearly.

Thus, I made a third and final system diagram as follows:

Project1_SystemDiagram_ver3

The next step was to write the code on p5.js. I based my code on an open-source machine learning model called “PoseNet” from ml5 which can estimate human pose in real time. I used it to detect and store people’s nose position, which was then translated to a respective position on the frame. Curves would be generated around that position according to my code.

With the help of many online tutorials, I got this:

I experimented with different sets of parameters to see what would appear:

Iterations of Code:

Iteration 1
Iteration 2
Iteration 3
Iteration 4
Iteration 5

4. Final Design

To create the effect of blocking people’s view, I overlay the video footage on top of camera frame. The final effect looks like this:

Final Project Code
Youtube Link: https://youtu.be/fjs75I18Q70