DRAW ME!
Group 3:
Enna Kim 3154828
Mika Hirata 3154546
Vivian Wong 3158686
DIGF-2004 Atlier 1
Prof. Kate Hartman
DRAW ME is a unique game controller that integrates pressure sensitive fabric, two capacitive sensors, and a DIY location sensor, allowing the user to interact with an image on a screen by imitating the drawing motion with their finger and a piece of fabric. The game allows users to control and interact with certain objects shown on screen by touching and applying pressure to a pillow-like controller sensors.
CONTEXT
Draw Me deviates from the conventions of playing digital games using hard, plastic game controllers, keyboards, mice, and trackpads. It explores how we can convert these commonly used items into one that incorporates a soft, comfortable, and organic/natural feeling through a variety of interactions.
EXPLORATION: We have experimented with fabric sensors originally because of its unique relationship with touch and immediate gratification with the result, but was not compatible with the conductive thread pattern we were intending to use. We started our project from checking the pressure sensitive fabric in a voltage divider circuit. The picture below is a semi-successful example using stretch fabric, a laptop trackpad, a breadboard, and Processing software. Here, the darker colours corresponds to a greater amount of pressure that the fabric is experiencing. The line is determined by the path drawn on the laptop trackpad. This is an early demo of our prototype.
We began exploring different options. In order for the screen to capture a live drawing, our medium required a location sensor.
Copper tape and canvas was one of our options. We fabricated our own location sensor by taping copper strips for the x and y axis. We learned that the conductive materials cannot touch one another, so we used separate sheets for each axis.
We then realized copper tape and pressure sensitive fabric was a better solution for the effect we were aiming to reach. Also, alligator clips are a mess!
We found that canvas was a structurally sound material to absorb the conductive thread and the user’s touch.
We decided to use the capacitive sensor because of its direct interaction with touch. Once it is touched, there is a light that blinks on the sensor. This is what we found satisfying and worth exploring about the material.
CHALLENGES: We created our own location sensor with canvas and conductive thread. We explored different conductive materials like copper tape, but found it difficult to find a secure connection to the capacitive sensor. Conductive thread is a strong material that acts as an effective medium to work as a DIY location sensor. Pictured below is a prototype of winding the thread around the jumper wire.
Finding the right materials to layer the controller with and incorporate our location and pressure-sensitive sensor was our next step. We needed to strategically layer the different components in a way that would not compromise the functionality of the pressure and touch mechanics. We needed non-conductive materials to seal the sensors, as well as the cotton stuffing.
Through research, we devised a plan in which cotton stuffing, used to enhance pressure sensitivity, was sandwiched between velostat and pressure sensitive material. In order to prevent the pressure sensitive fabric from activating the capacitive sensors through the conductive thread sewn into the canvas, we put an extra layer of non-conductive canvas between the top of the pressure sensor and bottom of the touchpad grid textile. Finally, we used neoprene-like material to cover the entire controller.
After we discovered that our hand sewn capacitive sensor grid worked with a pressure sensor underneath, we decided to use both digital and analog pins for our prototype.
CONNECTIONS:
The capacitive sensor input pins are connected to its appropriate conductive thread gridline. Processing could not successfully read the digital value of pins 0 and 1. Consequently, the capacitive sensor output pins are connected to digital pins 2 to 11, and for loops are written correspondingly. The pressure sensitive textile is connected to a 10K ohm resistor which is connected to analog pin 2 as input. We soldered the 10K ohm resistor to copper tape on pressure sensitive fabric for a more secure connection and to eliminate the use of alligator clips.
Unfortunately, the capacitive sensor Y’s pin 4 did not work correctly due to an unknown technical error. Pin 4’s capacitive sensing worked appropriately when the output pin was not connected to the Arduino. However, when it was connected, the output light immediately turned on.
Initially, we attempted to first code from the Arduino IDE in order to figure out how certain examples worked. Unfortunately, our limited understanding of arrays in Arduinos prevented us from achieving any successes. Luckily, transferring from Arduino to Processing solved most of our problems. Our group had a much better understanding of how arrays, index values, and for loops worked in Processing. We had to work through several trial and error processes in order to calibrate certain values such as the fill colour which depended on the pressure sensor’s analog values. Due to the massive content of code required to produce this prototype, we had to code different mechanics separately before combining them together. In chronological order, we developed the pressure colour-changing mechanic, capacitive sensor grid, conversion of textile location to on-screen position, and finally the interactive visuals.
We first started off using a full-sized breadboard and half-sized breadboard for our controller. However, that ended up taking too much space. As a result, we made several attempts to make our controller smaller and more compact. Jumper wires were replaced with our own custom cut wires and sewn to a canvas placemat. All components were connected to one half-sized breadboard sitting next to an Arduino Uno.
CIRCUIT LAYOUT:
PROCESS:
The design of our custom location sensor was determined by the number of pins of our capacitive sensor. 5×5 grid made up of conductive thread, canvas, cotton and rubber to close the entire contents.
CODE:
Draw Me – Final Technical CodeA:https://gist.github.com/anonymous/f9f636a74cd0e5aeb02d5d44bf84f364
Draw Me – Final Technical CodeB: https://gist.github.com/anonymous/93a98d7928f526ad3483c18b5ff4ae00
Draw Me – Final Visual Code: https://gist.github.com/anonymous/224555508aec9c5953b567156cbc0c89
Draw Me – Combined: https://gist.github.com/anonymous/7e001586b0204260649a38ad1f04497c
REFERENCES:
https://processing.org/reference/map_.html
https://processing.org/examples/map.html
http://playground.arduino.cc/Interfacing/Processing
https://processing.org/examples/mousepress.html
http://processingjs.org/reference/for_/
http://resistor.cherryjourney.pt/ used to identify the resistance of resistors
https://github.com/plusea/CODE/tree/master/EXAMPLE%20CODE/Resistive%20Sensors/LOCATION
https://www.youtube.com/watch?v=PAViBKCWrlg the guy talking about the matrix on the fabric
http://www.instructables.com/id/Analog-Fabric-Joypad/ analog fabric joypad (our first insipration)
https://www.youtube.com/watch?v=vuu3XORygbY grid made with conductive thread
https://www.youtube.com/watch?v=oecwY5hkXzw grid made with conductive tape(copper tape)