’ 1. Find an interesting existing Alt+Ctrl Interface

From among the 2020 selected controllers in the GDC alt.ctrl archive, ’Our Sutured City’ best aligns with my earlier interest in E-Textiles. In this example, the graphic elements of the tapestry taken together ¥depict a town map, providing the basis for an adventure game. Elements of the tapestry are embedded with conductive patches linked to capacitive sensors which respond to human touch. For instance, a graphic of a piano keyboard is actually playable. In all, 64 graphic-sound interactions are possible across the entire tapestry. At the time of the video referenced here, game dynamics had not been finalized.

Our Sutured City, an Interactive Tapestry {{https://youtu.be/Ra3yWLsSGGA?si=YdMP0PR9E-4eUklV}}

Detail image

  1. Come up with a concept for your own Alt+Ctrl Interface

For inspiration I also looked to examples from ’Shake That Button’. In particular ’O’ and ’GridMaster’ piqued my interest as 2-player games which incorporate a rythmic element.

Detail image

Initially I came up with two game ideas, a one player and a 2(+) player game which reminded me or these classics from my childhood where response time and an ever escalating pace play key roles. These are ’Maniac’ and ’Simon’.

Detail image

My two game concepts are as follows. Of the these two I developed ’SyncUp8’ a bit further.

Detail image

Descrmiption of SyncUp8

Opponents attempt to fill a loop of two bars in 4/4 by touching conductive patches on the E-textile gameboard. Turns alternate. The player who selects a note which overlaps or coincides with previous notes in the loop loses. Notes are half notes, quarter notes and eighth notes.

Detail image

Things to consider

Placeholders. Initially I envisioned blocks to be placed on the e-textile in order to select a note, but after consideration touch seemed a more simple and intuitive option. However, blocks of some kind, representing notes may serve as a place holder for players to map their opponent’s selection during the game.

A partition is not an elegant choice. Perhaps the textile can sit upon an angled surface. This would in turn cause place holder blocks to slide.

A gradually increasing speed could serve to intensify the game experience.

A reverse loop option could also be considered.

Detail image


A capacitive sensor such as the Trill Craft might be appropriate for use in the design of an e-textile gameboard where human touch controls selection. Sensors such as the Trill Craft support multiple inputs via conductive patches which can be woven into the textile. For further context in incorporating capacitive sensors into textiles I explored the following videos.

Tutorial (Flexible PCB/KiCad) {{https://youtu.be/gIRUQSaB3e0?si=sdJqT81jRDVfranY}}

E-Textile Tutorial {{https://youtu.be/ClBYyYEFkF0?si=6zzf0Z6spR8xhaBG}}



Detail image

Detail image

Detail image

Detail image

Detail image

Detail image


You can add code inside the code fences. The letter c after the three backticks means that the syntax highlighting will use the programming language c as the rules on how different parts of the text should be highlighted.


Vimeo or YouTube

If you want to include a video from Vimeo or YouTube, you can use these shortcodes. The numbers/characters is the ID of the video.

{{<vimeo id="84880475" class="video">}}

If you are reading the .md file, the line below is the actual way you use it your page. If you are reading the website, you should see a video player below this.


If you are reading the .md file, the line below is the actual way you use it your page. If you are reading the website, you should see a video player below this.

Video file in the repository

You can add video files also directly to your site. The recommended way to do this is to use the hugo-video component that we have installed on the site.

Keep in mind a couple of rules:

  • The video needs to be in a folder called video inside the folder where your index.md file is.
  • Your video file needs to be very small so that it fits into the GitLab repository. Maximum size is 50MB, but ideally it should be even much smaller (under 10 MB). You can use the free tool HandBrake to convert your video to a smaller size.
  • Use .mp4 as the file format

Once you have your file ready and placed correctly, you can use the following code snippet to display your video:

<video controls width=100%>
  <source src ="./video/example-video.mp4" type="video/mp4">
  Your browser does not support the video tag.

Just update the filename to be correct. Here is the result: