Author Archives: Tino Selic

04 Communication

Create a small project that does the following:

  • Read at least two sensor values using Arduino. You can use any sensor you want to but they should be some other sensors than the ones we used in the class examples this week. They can also be two channels from the same sensor such as the X and Y of the accelerometer.
  • Print out the values using the Serial port in a way that you can separate the different values.
  • Create a small sketch using Processing or p5.js (or some other programming environment) to read the sensor values from the serial port. You can use the examples on this page as a starting point.
  • Map the sensor values to some parameters in your sketch. You can simply visualize the data in some way or create something more interesting and meaningful that is more connected to the interaction. Do something else than the example we created today.

I chose to work with the rotary dial mechanism and the idle switch of Matti’s red example telephone, because it is relevant for my final project. The idle switch is triggered when the handset is lifted or placed back on the telephone – basically like a simple button. For this reason I chose Arduino pin 2 to read its signal and added a 10k resistor to prevent a short circuit. The rotary-dial on the other hand was harder to figure out. Matti explained to me that the dial returns a number of pulse signals depending on the number dialled. He knew which wires were the correct ones to read the signal of his telephone’s dial (red and blue). To be sure we tested the signal with the multimeter. With the knowledge gained I connected the dial’s wires with the breadboard and I chose Arduino pin 9 to read its signal.

This video helped me a lot to understand the mechanism in detail and how to set up the code:https://www.youtube.com/watch?v=cZ2rHqBXO1s&ab_channel=PlayfulTechnology

In this process I learned how to use the bounce library that helps to prevent signal noise. The main idea of the code is to swich between two states: idle and dial. Idle is the state when the handset is placed on the telephone. Dial is the state when the handset is lifted and the user can dial in a number. By placing the handset back on the telephone (or by simply pressing the switch) the user can confirm the last dialled number. This number will be printed out in the console. I then set up a code in processing that communicates with the Arduino and visualizes the dialled number as a bigger graphic.

I uploaded the first version of my code onto the Arduino but unfortunately nothing happened. I couldn’t fin the mistakes by myself, so I asked help from my fellow student Aditya (https://troublebydesign.com/). With his help I made changes of the order of things to happen in my Arduino code. Another try, another failure. Aditya then took a close look at my circuit and found that the idle switch was not properly connected. The red wire was supposed to be connected to the 5V power source coming from the Arduino, but instead I accidentally connected it to ground where I already had a connection – ergo: no current flow. After I fixed that, everything worked fine.

Arduino Code

// For handling software debouncing of mechanical switch contacts
#include <Bounce2.h>

// Pins
int idlePin = 2;  // Handset
int dialPin = 9;  // Rotary-dial

// States
int state = 0;

// How many pulses have been detected for the dialled digit
int pulseCount = 0;

// Bounce objects
Bounce idleSwitch = Bounce();
Bounce dialSwitch = Bounce();

void setup() {
  // Open the serial port
  Serial.begin(9600);
  // Declare pin inputs and attach debounce ojects
  pinMode(idlePin, INPUT);
  idleSwitch.attach(idlePin);
  idleSwitch.interval(5);
  pinMode(dialPin, INPUT);
  dialSwitch.attach(dialPin);
  dialSwitch.interval(5);
}

void loop() {
  // Read the current state of all switches
  idleSwitch.update();
  dialSwitch.update();

  switch (state) {
    // Idle
    case 0:
      if (idleSwitch.rose()) {
        state = 1;
      }
      break;

    // Dial
    case 1:
      if (dialSwitch.rose()) {
        pulseCount++;
        // The digit 0 has 10 pulses
        if (pulseCount == 10) {
          pulseCount = 0;
        }
      }
      break;
  }

  // If the handset is placed on the telephone, the telephone becomes idle (no matter when)
  if (idleSwitch.fell()) {
    Serial.println(pulseCount);
    state = 0;
    pulseCount = 0;
  }
}

Processing Code

import processing.serial.*;

Serial myPort;  // Create object from Serial class
String str;      // Data received from the serial port

void setup()
{
  size(500, 500);
  // Open whatever port is the one you're using.
  // Change the 0 in  Serial.list()[0] to the correct device
  printArray(Serial.list());
  String portName = Serial.list()[0];
  myPort = new Serial(this, portName, 9600);
}

void draw()
{
  if ( myPort.available() > 0) { // If data is available,
    str = myPort.readStringUntil('\n'); // read it and store it in str
    if (str != null) {
      println(str);
      myPort.clear();
      background(0);
      fill(255);
      textSize(400);
      textAlign(CENTER, CENTER);
      text(str, width/2, height);
    }
  }
}

02 Sensing the World

1. Find an interesting existing Alt+Ctrl Interface

Explore the archive from GDC, Shake That Button and beyond:

Find one interesting project/controller from there and write a short description of the project. Include a link to it and even embed a video to your site if there it is available. Why did you choose this? What caught your attention?

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

  • Explore at least one sensor in more detail.
  • Think of different interactions and/or gestures that could be detected with the sensor you picked.
  • Choose an existing video game that could be controlled using the interaction/interface enabled by this sensor. You can also come up with a completely new game/game mechanic.
  • You don’t need to make it work yet. Just come up with the idea/concept for your alternative controller.
  • Write about your idea on your site.
  • You can draw sketches or other ways to illustrate your idea.
  • You can also make a prototype if you can, but I am not requiring it.

1. FLUX

“FLUX is an alt.arcade reaction game, where players compete against one another to hit 5 buttons in the right order as quickly as possible.”

This project caught my attention because it seems simple but fun and it looks cool. Judging by the pictures this game could very well be placed at festivals or in bars/nightclubs as the surface seems sturdy and can act as a table for glasses etc. FLUX uses buttons and lights – the first components we started to work with in the beginning of this course.

wethrowswitches.com/flux

FLUX’s game design is based on the 80’s classic “Simon”, where the player has to memorize and repeat a pattern by hitting the correct buttons of the device. With every successful repetition, the game is getting harder.

2. LUX

Both FLUX and Simon use buttons as inputs and lights as outputs. Wouldn’t it be interesting if this mechanic could be somehow reversed? Replacing buttons with photoresistors turns light into an input.

This could be realized with a monitor made of multiple photoresistors arranged in a grid. A separate screen would display a specific pattern or shape for a limited time. The player would then have to memorize the image and recreate it by using a flashlight as a controller to “draw” on the light sensor monitor. Just like in Simon, this game would get harder with every successful repetition as the images would get more and more complex.

01 Introduction: Arduino Basics

Create a circuit and Arduino code that does the following

Circuit

  • Connect two LEDs to your Arduino using a breadboard
  • Connect one switch to your Arduino using a breadboard

Code

  1. Read a momentary switch being pressed
  2. When the program starts, both LEDs are off
  3. When the switch is pressed once, the first LED turns on
  4. When the switch is pressed the second time, the second LED turns on (the first one should also still be on)
  5. When the switch is pressed the third time, both LEDs turn off
  6. Repeat this same cycle of LEDs turning on and off in sequence (off, one LED, two LEDs, off…)
First attempt

With the knowledge I remembered from class, high school physics class and my first (unsuccessful) studies in electrical engineering, I started to draw a first circuit diagram. I then collected the parts I needed and built the circuit according to my drawing. I chose to work with digital pins 2 and 4, because they didn’t have the ~ symbol. I haven’t figured out what that symbol stands for, I’m guessing it’s alternating current (AC). Also, I didn’t know how to involve the connection to the Arduino in my circuit drawing at this point.

I pressed the button, but nothing happened. I checked the board and it turned out that the LEDs were pointing the wrong direction – a problem I still run into often. I fixed the problem and both LEDs turned on, when I pressed the button. A first small success, but not really the expected outcome of the assignment. When I opened up the Arduino programming software and tried to access LEDs and the button with the Arduino pins, I realized that I was missing a lot of theoretical understanding. Fortunately, Matti provided a clear and comprehensive tutorial on the course website, that provided all the information I needed to complete the assignment: https://learn.newmedia.dog/tutorials/arduino-and-electronics/arduino/

I learned how to set up the circuit properly, reading the signals from the LEDs and the button and storing signal changes as states. The final challenge for me was figuring out the correct syntax of my code. The key was understanding how to save the button state as pressed and released.

State 0
State 1
State 2

Arduino Code

// A button that first turns on one LED, then another, and then turns both LEDs off again
int btnPin = 2;
int ledPin1 = 9;
int ledPin2 = 11;
int btnState = false;
int prevBtnState = false;
int counter = 0;
void setup() {
  // Open the serial port
  Serial.begin(9600);
  // set the button pin to be an input
  pinMode(btnPin, INPUT);
  // set the LED pin to be an output
  pinMode(ledPin1, OUTPUT);
  pinMode(ledPin2, OUTPUT);
}
void loop() {
  // read the button pin
  btnState = digitalRead(btnPin);
  // State 0
  if (btnState != prevBtnState && counter == 0) {
    // button pressed down
    if (btnState == HIGH) {
      Serial.println("Light 1 on, Light 2 off");
      digitalWrite(ledPin1, HIGH);
      digitalWrite(ledPin2, LOW);
    }
    // button released
    if (btnState == LOW) {
      counter++;
      Serial.print("Count: ");
      Serial.println(counter);
    }
    prevBtnState = btnState;
  }
  // State 1
  if (btnState != prevBtnState && counter == 1) {
    // button pressed down
    if (btnState == HIGH) {
      Serial.println("Light 1 on, Light 2 on");
      digitalWrite(ledPin1, HIGH);
      digitalWrite(ledPin2, HIGH);
    }
    // button released
    if (btnState == LOW) {
      counter++;
      Serial.print("Count: ");
      Serial.println(counter);
    }
    prevBtnState = btnState;
  }
  // State 2
  if (btnState != prevBtnState && counter == 2) {
    // button pressed down
    if (btnState == HIGH) {
      Serial.println("Light 1 off, Light 2 off");
      digitalWrite(ledPin1, LOW);
      digitalWrite(ledPin2, LOW);
    }
    // button released
    if (btnState == LOW) {
      counter = 0;
      Serial.print("Count: ");
      Serial.println(counter);
    }
    prevBtnState = btnState;
  }
}