Welcome to:
Textile Game Controllers
Session Leaders:
Izzie Colpitts-Campbell, Olivia Prior, Kate Hartman
During today’s session:
Things we are going to cover:
About the Project
e-textiles
alternative game controllers
Textile Game Controllers
About the Project
About the Team
Kate Hartman
Yiyi Shao
Chris Luginbuhl
Olivia Prior
Manisha Laroia
Izzie Colpitts-Campbell
Jennie
Robinson Faber
Emma Westecott
About the Workshops
Intro to Textile Game Controllers, November 14, 2018
Body-Centric Game Controllers, March 27, 2019
Wearable Game Controllers, October 30, 2019
Stitch and Stuff
November 26, 2019
Fun with Felting
January 15, 2020
About the Game Jam
Saturday, May 29th & Saturday, June 6th
The Textile Game Controller Jam was meant to explore and study how electronic textile (e-textile) techniques can be used to create bespoke, alternative game controllers.
This game jam serves as a research creation activity that produces processes and prototypes that can inform and inspire future game makers, e-textile practitioners, and researchers about the potential opportunities that may exist in the intersection of these two practices.
Conductive vs. Non-conductive vs. Resistive
Conductive = able to conduct electricity
Non-conductive = not able to conduct electricity. Can provide insulation between conductive materials.
Resistive = can conduct some electricity but the amount varies, in this case by how much pressure is applied to the material.
Sensing Techniques
Construction Techniques
The Kits
2. Live Circuit Demo
3. Examples from Game Jam
4. Links to Resources
Resources
5. Resource Slides
Materials
Materials
Fabric
Felt
Embroidery hoop
Regular thread
Conductive thread
Embroidery floss
Needles
and threader
Circuit Playground Classic
Materials
Wool fibre
Conductive fabric
(iron-on adhesive)
Velostat
Resistors
Conductive fibre
Conductive fabric
(no adhesive)
Materials
Alligator clips
Stickers
Finger protectors
for felting
Felting needles and sponge
Thick felt
Design templates
Concepts
Conductive vs. Non-conductive vs. Resistive
Conductive = able to conduct electricity
Non-conductive = not able to conduct electricity. Can provide insulation between conductive materials.
Resistive = can conduct some electricity but the amount varies, in this case by how much pressure is applied to the material.
Digital vs Analog
VS.
Sensing Techniques
Three sensing techniques
These sensors can be created with different conductive materials (fabric, thread, fibre) and different crafting and/or assembly methods (sewing, gluing, felting, etc.).
Digital Switches: Conductive Fabric
Connect
to Ground
Connect
to Pin
Use a conductive fabric/material to place over the gap & close the switch to activate it.
Connect
to Pin
Connect
to Ground
Digital Switches: Video Tutorial
Digital Switches: Circuits
to Ground
to Pin
* as per the Digital switches code on Github
Analog Sensors: Conductive Fabric & Velostat
Exploded View
Circuit Connections
Assembled Sensor
to Ground
to 3.3V
to Pin
Felt Cover
Conductive Fabric
Flap fold
Velostat
Conductive Fabric
Felt Cover
10K ohm
Analog Sensors: Cross-section View
Cross-section View
squishy non-conductive material (neoprene or felt)
* yellow indicates glue side of fabric
Velostat
Conductive Fabric
squishy non-conductive material (neoprene or felt)
Conductive Fabric
Analog Sensors: Pieces
Felt/Neoprene 1
Conductive Fabric 1
Velostat
Conductive Fabric 2
Felt/Neoprene 2
Analog Sensors: Assembly
Stack the pieces together sandwiching the Velostat between the conductive fabric and Felt on either side.
Use glue or stitches along the perimeter to hold the pieces together. If stitching, be careful not to stitch too tight. If gluing make sure to only do it around the edges.
Felt/Neoprene 1
Conductive Fabric 1
Velostat
Conductive Fabric 2
Felt/Neoprene 2
Analog Sensors: Video Tutorial
Capacitive Sensors: Conductive Fabric
(the sensor could take any shape you prefer. Here it is circular for simplicity.)
Tracing shape & cutting it out of conductive fabric.
Stitch the cut piece with conductive thread to the Adafruit board.
Conductive Thread
Capacitive Sensors: Conductive Fabric Video Tutorial
Capacitive Sensors: Felted
Capacitive Sensors: Felting Video Tutorial
Capacitive Sensors: Embroidered with conductive thread
Capacitive Sensors: Embroidery Video Tutorial
Circuit Diagrams
Digital Circuit Diagram
Another piece of conductive material/ a design is needed that allows for the two sections to touch i.e. bridge the switch.
Switch is activated!
Ground
Digital Pin
Analog Circuit Diagram
A stitched circuit with conductive thread used for the connections.
(*10k ohm resistor)
*10k Ω
Analog
sensor
Ground
3.3V
Digital Pin
Capacitive Circuit Diagram
A stitched circuit with conductive thread connecting the sensor to the capacitive pin.
What sensing method should I use?
Digital Switch
Activation | Surface Area | Sensitivity | Fabrication | Best suited materials |
Is activated by bridging the gap between the positive and ground using any type of conductive material. | Works very well with a variety of surface areas. | Digital switches are either activated or they are not. The sensitivity relies on the material that is connecting the power and the ground - is it sizeable enough to consistently connect the two sides when using? I | Very simple - requires any conductive material. Requires conductive thread to attach the sensing pad to the Circuit Playground | Any conductive material + conductive thread. |
Analog Sensor
Activation | Surface Area | Sensitivity | Fabrication | Best suited materials |
Is activated by pressure. | Works best on a smaller surface area. | Larger surface areas have a lower sensitivity. Smaller surface areas give a more precise input value. The input values may not be consistent between sensors. | This sensor works in a variable resistor circuit. Assembly requires multiple steps. Requires conductive thread to attach the sensing pad to the Circuit Playground | Conductive fabric Velostat Conductive Thread 10k Ohm Resistor Felt |
Capacitive Sensing
Activation | Surface Area | Sensitivity | Fabrication | Best suited materials |
Is activated by skin or another conductive material. | Works well with a variety of surface areas. | The sensitivity varies depending on how far the sensing pad is placed from the pin. Can not place capacitive sensing pad too close to another one because they may trigger each other. | Very simple - requires any conductive material. Requires conductive thread to attach the sensing pad to the Circuit Playground | Any conductive material + conductive thread. |
How do we use this stuff to control GAMES?
(Reading & Responding to Sensor Values)
Circuit Playground can act as a keyboard!
Testing Your Board as a Keyboard: Video Demo
Pre-Programmed Code
Every board is pre-programmed with a sample code containing 4 capacitive sensors, 2 digital switches, and 1 analog sensor.
The code is uploaded on GitHub Here
Screenshot of the code on Arduino
Adafruit Circuit Playground
*note this is for the Adafruit Circuit Playground Classic
Coding Concepts
Thresholds
threshold
True
False
Sensor Value
Time
High/ Low
Input (e.g. buttons)
Output (e.g. LEDs)
High
Low
High
Low
Key press
Keyboard.press()
It functions as if a key was pressed and held on your keyboard.
Keyboard.write()
This is similar to pressing and releasing a key on your keyboard.
*Both are necessary to call Keyboard.begin() before using.
Connecting to the Circuit Playground
Pinouts
Pinouts are the available connections you can make to your board.
Different types of Pinouts include:
Each of these open spaces are
Pinouts
Pinouts: Power and Ground
Each pinout has a label.
This image highlights both
Power and Ground connections.
Ground = GND
Power = 3.3V
Battery Voltage= VBATT
Pinouts: Inputs
Pins can take in multiple types of inputs.
Input types are
Pins:
3, 2, 0, 1, 10, 9, 6, 12 are Capacitive & Digital
Pinouts: Analog Inputs
Analog inputs are not directly labelled on the board.
#10 = A10
#9 = A9
#6 = A7
#12 = A11
** The “A” beside the number just indicates that the pin is analog. When using this pin in Arduino, simply use the “11” instead of A11 or 12. **
Pin Outs in the example code
All of your boards are pre-programmed with this sample code.
(If you haven’t uploaded new code!) These are the following pins that you can test:
Capacitive Touch = 3, 10, 9, 6
Digital Switch = 0, 1, GND
Analog Sensor = 12
How to Program the Circuit Playground Classic
Step 3
How to Program the Circuit Playground Classic
Step 4
Alligator Clips are an easy and quick way to test your code before assembling your controller.
Clip them onto the pins to test your connections.
Testing: No thread!
An analog sensor connected to the Circuit Playground using alligator clips
Pins used: 3, 10, 6, 9
Items used: your finger
Other items that can be used: an alligator clip or another other conductive material
To test:
Testing: Capactive Touch
A video demonstrating how to test a capacitive sensor without any hard connections
Pins used: 0, 1, GND
Items used: 3 x alligator clips
To test:
Testing: Digital Switch
A video demonstrating how to test a digital switch without any hard connections
Pins used: 3.3V, 12, GND
Items used: 4 x alligator clips, 1 x analog sensor, 1 x 10k Ohm resistor
To test:
Testing: Analog Sensor
A video demonstrating how to test an analog sensor without any hard connections
Pins used: 1, GND
Items used: conductive fabric & conductive thread
To test:
Example Code: Digital Switch
Image of the prototype made in the digital switch tutorial video
Pins used: 3.3V, 12, GND
Items used: conductive fabric, conductive thread, velostat, felt, 10k Ohm resistor
To test:
Example Code: Analog Sensor
Image of the prototype made in the analog sensor tutorial video
Pins used: 0
Items used to test: finger or alligator clip or conductive material
To test:
Example Code: Capacitive Touch
Image of the prototype made in the capacitive touch sensor tutorial video
Pins used: 6, 9
Items used to test: finger or alligator clip or conductive material
To test:
Example Code: Capacitive Touch (Felt)
Image of the prototype made in the capacitive touch sensor tutorial video
Pins used: 2, 9
Items used to test: finger or alligator clip or conductive material
To test:
Example Code: Capacitive Touch (Embroidery)
Image of the prototype made in the capacitive touch sensor tutorial video
Designing Your Controller
Using the pre-programmed code to design a controller using all the pinouts in the example code
Making a design based off of new code