Arduino Button to Touch Designer

I am very new to touchdesigner and have no idea what I am doing, and is basically following blindly on tutorials online at this stage, but I am stuck. I am doing a personal project with two other friends and we’re trying to connect arduino with touch designer. I have some background knowledge on Arduino and was tasked to link Arduino to touchdesigner, while they were in charge of doing the visuals on touchdesigner. On our Arduino, we have 3 buttons that will be used to collect input. In this case, we name each button ‘condensed’, ‘malt’ and ‘plum’ respectively. When a button is pressed, for example button ‘condensed’, we would like visuals that is created on touchdesigner for ‘condensed’ to appear. Similarly, visuals for ‘malt’ for ‘malt’ button and visuals for ‘plum’ for ‘plum’ button.

Secondly, the button works in a way where if two bottons is pressed one after another, we have a combination of two visuals.This means:

  1. Button ‘condensed’ pressed (on arduino) → condensed visuals shown
  2. Button ‘Plum’ pressed (on arduino) → plum visual shown
    -delay-
  3. condensedplum(on arduino) ->condensedplum visual shown
    4.reset loop (on arduino)

In total, 6 visuals will be made in touch designer and I’ll have to link each input to a visual respectively.
This is my code used in arduino:

// declare and init pins and variables
const int button0 = 2;
const int button1 = 4;
const int button2 = 7;

const int NUM_BUTTONS = 3;
int buttonPin[] = { 2, 4, 7 };
int buttonState[] = { 0, 0, 0 };
String words[] = { "condensed", "malt", "plum" };
int selected[] = { -1, -1 };
int clickCount = 0;
boolean debug = false;

void setup() {
  Serial.begin(9600);
  // configure pin modes
  pinMode(button0, INPUT_PULLUP);
  pinMode(button1, INPUT_PULLUP);
  pinMode(button2, INPUT_PULLUP);
}

void loop() {

  for (int i = 0; i < NUM_BUTTONS; i++) {

    int stateNew = digitalRead(buttonPin[i]) ? 0 : 1;

    if (buttonState[i] != stateNew) {
      buttonState[i] = stateNew;
      if (buttonState[i] == 1) {
        selected[clickCount] = i;
        
        Serial.println(words[i]);

        if (clickCount == 1) {
          delay(1000);

          for (int j = 0; j < 2; j++) {
            if (selected[j] != -1) {
              Serial.print(words[selected[j]]);
            }
          }
          
          Serial.println();
          // Serial.println("reset");
        }
        

        clickCount++;
        if (clickCount == 2) {
          selected[0] = -1;
          selected[1] = -1;
          clickCount = 0;
        }
      }
      if (debug) {
        Serial.print(i);
        Serial.print(" ");
        Serial.println(buttonState[i]);
        for (int i = 0; i < NUM_BUTTONS; i++) {
          Serial.print(buttonState[i]);
          Serial.print(" ");
        }
        Serial.println();
      }
    }
  }
  delay(20);
}

and this is what I have on touchdesigner currently that was followed blindly with whatever video tutorial I could find on arduino and touchdesigner.

I am collecting the data through serial and have them reorder so that new input data is displayed from the top. 3 separate screens shows the first, second and third row respectively (not sure if this step is even necessary). And from here on, I have no idea what all those means. I am using the defult visuals from touchdesigner to try linking my input.

Basically from my point of view, if this explanation helps, I’d like to give a value to each visual that is done(condensed, plum, malt, condensedplum, condensedmalt, plummalt). When touchdesigner received the input from my arduino(which i guess is displayed from my ‘select’ panel), the visuals that corresponds to each text would appear.

Note that I am extremely foreign to touchdesigner and I tried understanding it but still dont quite get it so I hope that explanations would be done in a simplified manner. Thank you!!!

Hey @bryanemerson,

a lot of things in TouchDesigner work with a number reference. For example the Switch TOP has a parameter called “index” which controls what input is passed through - not unlike a gate of sorts. If “index” equals 0, the first input is passed through, if “index” equals 1, the second input is passed through and so on…
Hence I think it might make sense not to pass strings from the Arduino but rather integers uniquely identifying each state:

  • 0: condensed
  • 1: malt
  • 2: plum
  • 3: condensedmalt
  • 4: …

I guess this would give you 6? different options. Now you can also use the Serial CHOP directly instead of the Serial DAT. This might make things a bit easier as you are not dealing with having to parse the messages coming from the Arduino in the Serial DAT but get direct access to the value in the CHOP.
As you are starting with TouchDesigner, I would recommend creating 3 Text TOPs with the text showing your state. For the combined states, use one of the Composite TOP’s functions. Now feed all in the right order into a switch and export or reference the number received from the Arduino as you already did.

Once you have this working, you can start switching out the Text TOPs for your real content and eventually switch your system over to something like the SceneChanger which is available in the Palette>Tools section.

Btw. there is also a Firmata component in the Palette>Tools if you want to skip the Arduino programming part and try your hand in doing all of it in TouchDesigner :slight_smile:

Hope this helps a bit
Best
Markus