1 of 28

Building Interactive Installations 3:

Video Manipulation Using Sensors

​

Instructors: Mirabelle Jones & Cathy Laughlin

Presented by: Codame Art & Tech

Photo: TeamLab Mori Museum

2 of 28

Course Files:

Mirabellejones.com/codame

​

Link to this slideshow, github, course hub and more!

​

Go here now and download the files!

​

​

3 of 28

Circuit

Playground

Express

4 of 28

Circuit

Playground

Express

5 of 28

Getting

Set Up

Do this before class!!!

6 of 28

Install Arduino

​

Download Arduino software at:

Arduino.cc

​

7 of 28

Install Driver

​

8 of 28

Install Circuit Playground Library

​

In Arduino go to Tools >

Manage Libraries

​

In Library Manager type “Circuit Playground” into search bar >

Click “Install” on

“Adafruit Circuit

Playground”

9 of 28

Install FastLED Library

​

In Arduino go to Tools >

Manage Libraries

​

In Library Manager type “FastLED” into search bar >

Click “Install” on

“FastLED”

10 of 28

Install Board

​

In Arduino go to Tools >

​

​

In Boards Manager type “SAMD Boards” into search bar >

Click “Install” on latest version. If it asks you to install ALL click YES.

11 of 28

Plug in Circuit Playground.

In Arduino:

  • Go to Tools > Board > Select Circuit Playground Express

If you do not see this listed as an option, you have to install SAMD boards! Go back a few slides and try re-installing then re-starting Arduino.

12 of 28

Select Correct Port:

  • Go to Tools > Board > Port > select the one that has (Circuit Playground) or (Mac) dev.cu.usbmodem### or (Windows) COM#

If you do not see this listed as an option, you have to install SAMD boards! Go back a few slides and try re-installing then re-starting Arduino.

13 of 28

Install TouchDesigner

​

Download TouchDesigner at:

https://derivative.ca/download

​

You will have to sign up for a free license in order to use the software.

�Please do this ahead of class!

​

14 of 28

Github

  1. Go to CODE >>

​

  • Select “Download As Zip”

​

  • Unzip!

​

  • Open “Hello_Blink.ino”

15 of 28

Optional

We’re going to be using videos in the next couple classes.

​

If you don’t already have short videos you want to use, you can download royalty free videos at the following sites: MazWai, Pexels, Coverr, Videvo, Mixkit, Pixabay, Videezy.

​

You can also download this stash of videos I will be using from my Drive. (The link is also on MirabelleJones.com/Codame)

16 of 28

Also Optional

TouchDesigner is easiest to use with a mouse that has a scroll wheel as shown here:

​

If you don’t have one, you can still zoom in and zoom out using Ctrl +/- on Windows and Cmd+/- on macOS

To middle mouse click use alt+Right-Click.

17 of 28

End Setup

If you’ve gotten this far, you should have everything up and running and be ready to start the course on Sunday! Please test your setup by uploading some sketches in the examples folder under File -> Examples -> Circuit Playground or a blank sketch to make sure you can use your controller without errors! See you Sunday!

18 of 28

Intro to TouchDesigner

19 of 28

CHOPS: Channel Operators (Audio, Channels)

​

TOPS: Texture Operators (Video)

​

SOPS: Surface Operators (Geometry)

​

DATS: Data Operators (Tables, Serial, Scripting)

​

MATS: Material Operators (Shaders, PBR, GLSL)

​

COMPS: Components

20 of 28

TouchDesigner Shortcuts

​

TAB: Brings up operator create window.

P: Hide / show operator details

H: Home the window (return to center)

​

Left click + drag: Pan network

Right click + drag: Select multiple

Left click: Select node

Right click: Bring up menu

​

21 of 28

TouchDesigner Tutorials

22 of 28

Video in TouchDesigner

Use the .toe files 3_TD_SimpleComposite and 3_TD_SimpleComposite_EdgeLevel to play around with manipulating video!

​

Try replacing the videos with your own video files, then adjusting edge, level, and adding other TOPs to manipulate the final video!

23 of 28

Arduino in TouchDesigner

24 of 28

More TouchDesigner & Arduino

25 of 28

Simple Sensor

From the Circuit Playground library OR the course files, open up Hello_LightSensor or LightSensor_td.ino

26 of 28

Simple Sensor

From course files, open up 3_LightSensor_TD.ino

​

From course files, open up 3_LightSensor_TD.toe

​

Try changing the playback speed by hovering your hand over or covering the sensor.

27 of 28

Accelerometer

From course files, open up 3_Accelerometer_Simple.ino

​

From course files open up 3_TD_Accelerometer_ChannelMix.toe in TouchDesigner

​

Rotate the sensor to change RGB channel mix.

28 of 28

Accelerometer

From course files open up 3_TD_Accelerometer_Playground.toe in TouchDesigner

​

Use the Switch to select different video mixing processes. Drag the channels into different parameters to experiment! Mix your own video and record using the Movie File Out TOP.