Touch Your Knob -Max Lander
Touch Your Knob is a computer peripheral designed to make interaction with sequential images and video clips, specifically of the pornographic variety, super silly and fun! Turning the large knob either advances or reverses the clip frames. The farther the turn the faster the frames will run. It allows a kind of turntable like experience for the video frames on screen, allowing the user to repeat, reverse, slow and loop it.
When thinking about potential projects for this experiment, I was instantly drawn to the issues my classmates were having around gif images and p5. I was thinking about how gifs (and videos) are just a series of frames in a sequence and how that should be quite easy for p5 to accomplish. I knew I wanted to do something with a series of images.
Originally I thought it would be quite fun to do something silly around the idea of “working for it” in that I liked the idea that people have to put in effort in order for the computer to play a video they wanted to see. This, obviously, would be most hilarious in a pornographic context, so I thought maybe I would make something where the user has to shake something (phallic shaped) to advance a video. In trying to assess the technical difficulty of this idea I realized that in order to make that the way I wanted, I would have to learn how to embed electrontics into a silicon molded object, which felt a little outside of the scope of this project. I still wanted to play around with this gif idea though, so I tried to think of a different way to interface with sequential image files.
I like knobs. I like gifs. I was pretty sure I could make something that makes gifs with knobs. So that was the goal.
The first step was to get the code that moves, sequentially, through a folder of images. This wasn’t very difficult since I had already written something similar for the last project. The internet let me know how to manipulate a number within a file name, which was the only problem I encountered, in that there is a different number of zeros before the numbers in the files ending in 1 – 9 than there are in 10 – 99. Once that was corrected for with a simple if statement, and the keypress p5 reference was consulted it all worked as planned! And was super fun to play with, even without a knob. (proof of fun – https://gif-click.glitch.me/)
From there I wanted to see if I could get it working with a potentiometer. Using the in class example code, hooking the potentiometer up was relatively easy. I remapped the values coming out of it to 0 through 10 so it would be an easier range to work through. This also helped create quite a wide range for each number so it was easy to get the images to stop changing by setting the movement to above or below 5.
Trials with the Rotary Encoder
At this point I wanted to see if it would be better to use a knob that could continuously go around, so I picked up a rotary encoder from Creatron (this one – https://www.creatroninc.com/product/illuminated-rotary-encoder-with-breakout-board/?search_query=rotary+encoder&results=5).
I used this walk through to get it up and running – http://www.hobbytronics.co.uk/arduino-tutorial6-rotary-encoder.
Since the above code has statements for clockwise and counterclockwise, I added in a variable that could be sent to p5 as an indicator of direction. This got a similar effect to the potentiometer except for one crucial difference – there was no off. It also chugged a whole lot and generally felt quite a bit less satisfying than the potentiometer. I think this is because the potentiometer returns a numerical value that is easier (for me, at least) to work with to make smooth. It seemed like the encoder was slower and after trying to figure out the alternate ways to send the signal through with little success I decided to go back to the pot. Part of this decision was based in the fun of the piece being the back and forth movement of the images so the continual motion was less necessary.
*I do miss the LED though, so cute.
Failure the Second
The next goal I wanted to accomplish was to make it possible to record the screen and download a gif of it. P5 will grab individual frames or record video from the webcam but doesn’t have any screen record functions. It turns out that the way this used to happen is no longer possible because of some chrome upgrades and I couldn’t get the library recommended by the p5 reference (https://github.com/spite/ccapture.js/) to work (even the examples were not fully functional) – it seems this may have been because was not using webGL animations and to me it looks like they require each other?
Since I had decided on the final circuit it was time to work on an enclosure. Having never 3d printed anything before I figured this was the perfect time to try it out! A friend recommended TinkerCAD (www.tinkercad.com) and gave me a short little demo. It was quite easy to mock something up –
My initial mock up was not sized correctly so after some new measurements and some chatting with Reza in the Maker Lab I had two print ready files.
AND THEN IT PRINTED.
Initially the box was going to be printed on the lulzbot, but the speed was turned way down and after 2 hours it was only 2% of the way through, so we stopped it and switched to the makerbot replicator 2, which went much faster (about 2 and half hours total for the box and lid). I also learned an important lesson about hair spray and the makerbot bed when the first attempt at printing the lid lifted of the bed and got real messy. Hair. Spray.
Enthusiastically close to a semi finished project, I soldered, assembled and apparently killed my potentiometer… So I soldered and assembled again with a new one.
A couple notes about assembly –
The original hole in the lid was the smallest bit too small so I had to drill it out a bit
The potentiometer has a small notch for fitting it into something, so I dug out a little hole in the back of the lid for it to slip into.
At this point, I wanted to spend some time focussing on polishing the experience of the video/frames. I was live testing it thought glitch, but that put a limit on the amount of images of 100 and I wanted to see if what the limit was for number of images, as 100 frames is only 4 seconds of video. I selected a second of the film and exported to frames and ended up with 896, which I assumed would chug because of load time, but runs just as smooth as the 100, even after changing it to display the images fullscreen.
The last piece I wanted to implement, since it was simpler than I had originally hoped, was to make the speed of the frames relative to how far from center the knob was turned. Originally, I did this by manually setting the frame rate based on a couple ranges – >3, 3-5, 5-7, <7. I realized quickly that, while this worked, it would be way smoother if I could use the input directly from the potentiometer. This was accomplished by remapping the inData to values between 1 and 5 in each direction from center and then multiplying that number by 10 to set the framerate.
It’s all quite simple but ultimately creates a super silly interaction with the video that is quite enjoyable!
In my most recent work, inside and outside of this program, I have been quite interested in interactive video and screen based media. Most likely due to my interest in creating cinematic VR, but also in relation to smaller scale and simpler interactions as well, something I think piece is quite successful at. It is quite a good technological and theoretical stepping stone between my history with porn (including my pornographic video game, PornGame the Game) and my hopeful future with interactive cinematic VR. As an aside it’s done a very good job of making me think about the impact a custom physical interface could have on VR experiences.
Next up – embedding electronics in silicone… for reasons.