TEACHABLE MACHINES

course interaction design IA3 winter-term 2020/2021

Andreas Muxel, University of Applied Sciences Augsburg, Faculty of Design

• Block I (EXPLORE)

• Block II (UNDERSTAND)

• Block III (PHYSICAL)

Editor

Download and install Visual Studio Code (free), https://code.visualstudio.com

Extensions for Visual Studio Code

In Visual Studio Code click the Button with the 4 squares "Extensions", search for and "Install" the extension.

• p5js Snippets
• JSON Tools
• Live Server
• Beautify
• Only if REALLY needed: German Language Pack for Visual Studio Code

Tutorial on Extensions: https://www.youtube.com/watch?v=PmdbndOoKq4

P5.js

• P5.js, https://p5js.org
• P5.js VS Processing, https://github.com/processing/p5.js/wiki/Processing-transition
• Libraries, https://p5js.org/libraries/
• Learn, https://p5js.org/learn/

ML5.js

• ML5.js, https://ml5js.org/
• ML5.js Reference, https://learn.ml5js.org/#/reference/index
• ML5.js tutorials via Coding Train, https://thecodingtrain.com/learning/ml5/
• ML5.js Community, https://ml5js.org/community
• ML5.js Examples (Andreas Refsgaard), https://ml5-fellowship-2020.github.io/examples/

Browser

Use Google Chrome, https://www.google.com/chrome/

How to set Chrome as your default browser for Live Server in Visual Studio Code:

• Install extension 'Live Server' (see instructions above)
• On Windows Go to File > Preferences > Settings
• On Mac Go to Code > Preferences > Settings
• Search for "browser"
• In settings "Live Server > Settings: Custom Browser" choose "Chrome"

Code Repository

There will be a bunch of examples coming the next weeks. There is an update of this repository from time to time to correct bugs or add new examples. There are two ways to get all these files.

1. PREFERRED: In Visual Studio Code click the "Files" Icon, then "Clone Repository", paste the Repository URL https://github.com/HybridThingsLab/course-teachable-machines, hit Enter, create a folder for our files and select it as download location.
2. Fallback: Download the repository from the GitHub Website (https://github.com/HybridThingsLab/course-teachable-machines/archive/master.zip). Use button "Clone or Download" on the top right side of the page, download the ZIP and extract it.

Whenever there is an update to the repository, you can pull those changes to your local folder structure:

• Click the "Source Control" icon
• Click the three little dots above the file list
• Click "pull"

Make it your code!

Please create your own code folder somewhere outside our code folder and copy one of the example folders over. You should not chage anythinig inside our code structure because it may interfere with future updates that we may do on the code if you use GIT (Collisions)