CLS workshop

CLS Workshop: Tangible and Playful Connected Learning

Annie Kelly

When we talk about tangible and playful learning, it is often discussed in the context of children. In this workshop I would like to discuss the application of these concepts for amateur and professional artists and musicians. This is part of a project we call Weird Code Club. We are focused on empowering indie artists to incorporate computing practices and interactive technologies into their live acts.
​We will be constructing and programming tangible interfaces that can scrub through a YouTube video. This is an example of VJing (Visual Jockeying) which is a common artistic practice used in live audiovisual performance.

Author using a touch button to seek to a particular point in a music video.

A few examples of constructed tangible controls: slide potentiometer (top left), potentiometer/knob (bottom left), pressure activated button (right). This post will describe the differences between the three and how to go about constructing and programming them using craft materials and a micro:bit.

micro:bit

This tutorial will be using the micro:bit, if you are unfamiliar with the micro:bit please see their Getting Started page. This is not a micro:bit tutorial.
In the programming examples you will notice the use of some serial blocks. This is because the micro:bit is sending information over the serial port to my laptop, which then is used to control the YouTube video. In order to interface with the YouTube scrubbing API you have to use the write line to serial block with the following strings:
play (plays video)
pause (pauses video)
stop (stops video)
seek:58 (seeks to 00:58 in video)
rewind:30 (rewinds video by 30 seconds)
fastforward:25 (fastforward video by 30 seconds)
speed:2 (set playback rate to 2x the speed)
id:mZxxhxjgnC0 (set the YouTube video using the id)
volume:76 (sets volume to 76)
mute:1 (mutes video)

Button

This is an example of constructing a pressure activated button to seek to 00:58 in a YouTube video.  The button itself is quite simple to construct and a brief step by step process can be found here. Basically, there are two pieces of foil: one is connected to power, and one is connected to a digital data pin. We the pieces of foil are not touching, the reading is 0. When the pieces of foil touch, the reading is 1​. This allows us to use it as a button or a switch.

The below example code demonstrates how to read the state of the button. When it is 1 (i.e. pressed) we seek to 00:58 in the video, otherwise when the button is 0 (i.e. released) we do nothing. However, you might want to use your button differently than this. For example you can program an event to occur when the button is released, or you can have an event occur repeatedly while​ the button is pressed down. 
In this program we are reading the value from digital pin 1, so make sure your button is attached to the same pin that is chosen in the code.

Slider

This is an example of constructing a slide potentiometer that controls the playback rate of a YouTube video. Instead of foil like in the button example, here we are using graphite from a pencil as a conductor. This provides a nice level of resistance to get varying readings along the slide potentiometer. In the video below, as I move the green pin away from the red pin at the top, the voltage reading is lower. As I move the pin closer to the top, the voltage reading is higher.

In the example code below note the use of the map function. This is reading the value of our slide potentiometer and transforming it into its corresponding video speed within a certain range. In other words, when the potentiometer is at its lowest point, the video playback will also be set to its lowest speed.

Knob

This is an example of constructing a knob, or potentiometer, that controls the volume of a YouTube video. This works similarly to the last example with the slide potentiometer. Here we are again using graphite as a conductor, but we have the data pin attached to a piece of foil that we can rotate along a pivot. As it rotates the foil either moves closer or further from the power source, thus changes the voltage readings.