Experiment #3 – Digi-Doodler





The functionality of this “game”/peripheral is that it is essentially like an etch-a-sketch controller that produces the drawing digitally, alongside creative prompts, a timer, and a snapshot saving function.




Day One

I initially had the idea to create a peripheral that would help me access my eyes more effectively. I have been wearing glasses/contacts since I was in third grade and recently, I’ve begun looking at the possibility of laser eye surgery. To be a good candidate, your eyes’ prescription need to not have changed drastically in the past little while and I wanted to create a way to put me in an environment where this was possible. I have the habit of using my computer deep into the night and this effectively strains my eyes to a degree I would like to monitor. So my initial idea was to use a light sensor on the back of my computer that would adjust for various thresholds in my room at night. Once it detected the threshold for a dark environment, a stopwatch would be triggered on the webpage I created and then log the amount of time the sensor was within this threshold limit. On this day that I settled on the idea, I managed to hook up the light sensor, code for it with Arduino, and then get a log of the current time through p5.js.

Day Two

My next step with this light sensor idea was to: figure out how to create a stopwatch that logs and time stamps. I spoke to people in class and consulted the internet and kept coming up short. I was only getting resources on how to set a timer instead. At this point, I was getting nervous because I didn’t know if I should continue with this idea and make some compromises in the design or just start from scratch instead. I decided to approach the assignment again from the beginning and devise a new kind of peripheral that I need in my life. I was hoping I could settle on something that would incorporate elements of the first idea I had but I didn’t want to restrict myself so I let the ideas soar.

I began thinking about note talking and how much I love that pencil and paper contact. But in the past couple of months, I’ve been finding that these moments are fewer and fewer. This is in part to my binder being very heavy to bring alongside my laptop at school everyday. But the bigger reason is that nobody around me seems to be taking handwritten notes so it often made me feel like a bit of an outlier to be erasing and tugging on paper. So I tried out note taking on my laptop and lo and behold, it is easier and faster and more convenient, yes. But a part of me still misses paper and its affordances like…doodling! So I kept thinking in this direction and thought about etch-a-sketches, the most iconic and nostalgic doodler. I thought about its shape and how the knobs are basically two potentiometers. I thought that this was a very feasible and resourceful second idea, considering the time crunch and my building anxiety!

Day Three

I created my potentiometer breadboard and began looking into how I could create an interface similar to the etch-a-sketch drawing capabilities. I needed to figure out a continuous draw function. I looked in the book and eventually made sense of how to do it with an ‘If’ statement and a (mouseIsPressed) function that would then map a line with (pmouseX, pmouseY, mouseX, mouseY) that looked at both the X and Y axes but I was having difficulty adapting it to the two potentiometers I needed to use.

I found on GitHub some code that introduced me to Javascript’s splitting of a string as well as  parseInt(string, radix); as a way of creating the line extensions in the vein of etch-a-sketch. 

I had issues with the resulting webpage being quite glitchy and not very smooth but I tried to buffer those problems by adjusting the delay and the thickness of the line itself.

I then met up with Nick and was able to brainstorm some ways of taking this assignment further, as an etch-a-sketch is definitely a peripheral that I need but it is still something I have not inherently created. So I started thinking about adding creative prompts to make the experience like a ‘productive’ and ‘guided’ doodling session. Then I also was told that potentially adding a timer would aid the presentation. And this fit into my overall idea too, of having a doodling device that still lets you focus at your tasks at hand – and what better way than having time as a limitation/restrictor? Then I had the idea of adding a screenshot function so that you could keep a kind of log of all the different doodles you create – as you would have in your binders during class.

Then I also went up to speak with Reza about constructing a box for my controller. He laid out all my options and I decided using a ready-made box would suffice for my purposes. I used a Tupperware container and then spray painted in with a white primer and it yielded a nice little container! I fitted it with two pieces of blue foam on the inside so that I could slide in the breadboard and have it stay in a stable spot instead of potentially falling out at any point. This way, it was a compact box that remained with an open bottom and a hole on the side for the USB cable to fit in through.








Make: Getting Started with p5.js


Leave a Reply