Responsive Selfie Light

Roxanne Baril-Bédard and Max Lander

We set out to make a good selfie light changed with a color sensor.

Code

https://github.com/naxwell/Selfie-Light

Photographs

dscf9258

img_20171123_152414

img_20171123_152425

img_20171123_211013

24139229_10155852001609437_1164711792_o

selfie3

dscf9255

 

Schematic

featherwing

24139150_10155852474139437_1710695805_o

Design File

24007946_10155846721349437_1842661338_o

Video of the device being used

Process journal

In the beginning we had some trouble coming up with an idea we both wanted to go with, so we decided to look at the sensors and outputs and see what we both felt excited about using. Max was pretty into trying out one ot the featherwings since that seemed like an accessible way to get into something that otherwise might be a little more challenging. Roxanne was interested in working with the colour sensor (RGB Color Sensor with IR filter and White LED – TCS34725), so we decided to think about something that could use a colour sensor on one end and something that could use that colour information on the other end, settling on the neopixel featherwing.

Setting up the feather wing was quite simple since there is lots of support on adafruit for it.

Neopixel featherwing set up and info we used: https://learn.adafruit.com/adafruit-neopixel-featherwing/overview

Neopixel uberguide used to install the library and get it all sparkly:

https://learn.adafruit.com/adafruit-neopixel-uberguide

Copying over the relevant bits into one of the class examples used to connect to pubhub let us use the colorwipe function from the neopixel example as our light up animation. From there we set the other feather up to send three random values between 0 and 255 (together, giving us a random rgb value to output to the feather), so that we could be sure that the two feathers were speaking to one another.

We thought it would be rather painless to use the sensor. However, we noticed many of the colors were muddy. Going to Kate, she told us we had two options, which we both considered and tried to use – fudging/pumping the numbers on the receiving end or calibrating the sensor.

If we fudge the number on the receiving end instead of calibrating the color picker, we will lose a range in breadth of colors because they will be exaggerated and estimated. We tried to calibrate the sensor by resetting the max values for all of its colors: R G B and Clear, tho we are unsure still what clear is.

We found some forum post (https://forums.adafruit.com/viewtopic.php?f=19&t=72140&sid=a45c405777f4715b60ba78e4f388ac32 ) that went into trying to write a calibration code using the analog sensor calibrating example that come with the IDE.

We tried to read of the color (Red, Green, Blue) for calibration off a computer screen and it absolutely did not work so we resorted to printing a sheet with the colour. The printed colour were not that good either, so we bought some cardboard. Roxanne was really hung up on getting the perfect colours. We then put everything in boxes, the neopixels in a plastic ball (we found this at Michaels and it’s apparently used to make custom christmas ornaments, which Max finds to be a horrific thought), and for the colour reader end, we found an appropriately sized cardboard box. We had to colour the hole around the color reader with a marker so that it would be black, not the brown of the cardboard in order to get a correct colour reading. Since we already had the code set up to send and receive the three values, it was just a matter of plugging the colour reader values into the variables being sent to pubnub.

Project Context

LED lights used for photography are plentiful, but we thought it would be kind of neat to make something that could be portable and respond quickly to whatever environment it was was in, to have a light that could respond to the colour of someone’s shirt, or the wall you were standing on. Max thought it would be interesting as a potentially useful series of photos lights, as this very basic tech could be expanded to panels of whatever size and it would be very simple to add more lights to the network to create enough environment light to use as professional photo lights.

We also thought about making a software that can calculate complimentary or tertiary colors from one scanned color and to output them on different neopixels to make a more complete photography lighting environment which could be interesting.

As for the other projects this one is inspired from, a lot of the code and the figuring out how to use the colour sensor was found online, on the adafruit website and on arduino forums like mentioned earlier. https://learn.adafruit.com/adafruit-color-sensors/overview

Touch Your Knob – Max Lander

Touch Your Knob -Max Lander

Prototype Description

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.

Circuit Layout

potentiometer

Code

https://github.com/naxwell/peripheral/tree/master

Live site – https://webspace.ocad.ca/~2308971/peri/index.html

Supporting Visuals

https://www.thingiverse.com/maxwellander/designs

Process Journal

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?

3D printing

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 –

screen-shot-2017-11-05-at-10-48-21-pm

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.

Box – https://www.thingiverse.com/thing:2630410

Lid – https://www.thingiverse.com/thing:2630406

screen-shot-2017-11-06-at-10-00-50-pm screen-shot-2017-11-06-at-10-00-26-pm

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.

img_20171106_145625 img_20171107_114335

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.

img_20171109_141122

img_20171109_141154

img_20171109_141730

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!

Project Context

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.