diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..d25e6f3
Binary files /dev/null and b/.DS_Store differ
diff --git a/speak_colors/1.md b/speak_colors/1.md
new file mode 100644
index 0000000..e8661c9
--- /dev/null
+++ b/speak_colors/1.md
@@ -0,0 +1,3 @@
+**Type:** title slide
+
+**Title:** Speak Colors
diff --git a/speak_colors/10.md b/speak_colors/10.md
new file mode 100644
index 0000000..33b8347
--- /dev/null
+++ b/speak_colors/10.md
@@ -0,0 +1,31 @@
+**Type:** code centered
+
+**Title**: Changing the Color
+
+**Non-Code Textbox**:
+
+* We’re starting with the `speech.resultString`, which we used before.
+* To get the last word:
+ - We’ll do [`.split(' ')`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split), which converts the text into a [JavaScript array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of words: `'hello there friend'.split(' ')` is `['hello', 'there', 'friend']`
+ - `.pop()` then gets the last item from the array, which is the last word as a string
+* Finally, because we want all text on the site to be in all-caps, we’ll add `.toUpperCase()`
+* These function calls can all be chained next to each other!
+
+**Code Textbox**:
+
+```javascript
+// …
+function parseResult() {
+ if (speech.resultValue) {
+ alert(
+ speech.resultString
+ .split(' ')
+ .pop()
+ .toUpperCase()
+ )
+ }
+}
+```
+
+
+
diff --git a/speak_colors/11.md b/speak_colors/11.md
new file mode 100644
index 0000000..0f28e9b
--- /dev/null
+++ b/speak_colors/11.md
@@ -0,0 +1,35 @@
+**Type:** code centered
+
+**Title**: Changing the Color
+
+**Non-Code Textbox**:
+
+* Set the background color
+* Write onscreen.
+
+**Code Textbox**:
+
+```javascript
+// …
+function parseResult() {
+ if (speech.resultValue) {
+ const color = speech.resultString
+ .split(' ')
+ .pop()
+ .toUpperCase()
+ background(color)
+ text(color, width / 2, height / 2)
+ console.log(color)
+ }
+}
+```
+
+------
+
+**Speaker Notes**:
+
+* Mention the following
+ * Because we need to use the color name in multiple places, we’re setting it to a variable, so that we don’t have to do the whole split/pop/upperCase things multiple times.
+ * Setting the background is as simple as `background(color)`.
+ * Adding the text onscreen works just the way the instructions did. Because we want it centered horizontally & vertically, we set the x coordinate to `width / 2` (so the midpoint of the width of the canvas), & the y to `height / 2` (same for canvas height).
+ * The `console.log` line is totally optional, but it allows you to see what’s being transcribed in your [DevTools JavaScript console](https://developers.google.com/web/tools/chrome-devtools/console/log).
\ No newline at end of file
diff --git a/speak_colors/12.md b/speak_colors/12.md
new file mode 100644
index 0000000..e447825
--- /dev/null
+++ b/speak_colors/12.md
@@ -0,0 +1,45 @@
+**Type:** large code
+
+**Title**: Wrapping Up
+
+**Code Textbox**:
+
+```javascript
+const speech = new p5.SpeechRec('en-US', parseResult)
+speech.continuous = true
+speech.interimResults = false
+
+function setup() {
+ createCanvas(window.innerWidth, window.innerHeight)
+ background(255)
+ fill(25)
+
+ textSize(48)
+ textAlign(CENTER)
+ textStyle(BOLDITALIC)
+ textFont('"Avenir Next", system-ui, sans-serif')
+ text('SAY A COLOR', width / 2, height / 2)
+ speech.start()
+}
+
+function draw() {
+}
+
+function parseResult() {
+ if (speech.resultValue) {
+ const color = speech.resultString
+ .split(' ')
+ .pop()
+ .toUpperCase()
+ background(color)
+ text(color, width / 2, height / 2)
+ console.log(color)
+ }
+}
+```
+
+------
+
+**Speaker Notes**:
+
+* Mention that this is the whole `script.js` file
\ No newline at end of file
diff --git a/speak_colors/13.md b/speak_colors/13.md
new file mode 100644
index 0000000..e3d4422
--- /dev/null
+++ b/speak_colors/13.md
@@ -0,0 +1,16 @@
+**Type:** centered text
+
+**Title:** Possible Improvements
+
+**Content**:
+
+* Support multi-word color names.
+* As aforementioned, support your own colors 👀
+* Keep track of all the colors, maybe show them all simultaneously?
+
+------
+
+**Speaker Notes**:
+
+* For the first bullet point "Support multi-word color names" mention:
+ * Hint: instead of getting the last word, maybe figure out how to remove the spaces?
\ No newline at end of file
diff --git a/speak_colors/14.md b/speak_colors/14.md
new file mode 100644
index 0000000..122c531
--- /dev/null
+++ b/speak_colors/14.md
@@ -0,0 +1,36 @@
+**Type:** code centered
+
+**Title**: Multi-Word Color Names
+
+**Non-Code Textbox before code**:
+
+* We have to change our `parseResult()` function
+
+**Code Textbox**:
+
+```javascript
+function parseResult() {
+ if (speech.resultValue) {
+ const colorArray = speech.resultString.split(' ')
+ var color = ""
+ for (i = 0; i < colorArray.length; i++) {
+ color += (colorArray[i].toUpperCase())
+ }
+ background(color)
+ text(speech.resultString.toUpperCase(), width / 2, height / 2)
+ console.log(speech.resultString.toUpperCase())
+ }
+}
+```
+
+**Non-Code Textbox after code**:
+
+* `speech.resultString` is still split, but we do not pop to get last element
+* Instead, we loop through our array that came from the split and add it to the color string (all uppercase)
+* We output `speech.resultString` with all upper case letters
+* Now you can say more specific named colors as well! Try the following!
+ * Light Coral
+ * Dark Orange
+ * Spring Green
+* See https://html-color-codes.info/color-names/ for all the named colors
+
diff --git a/speak_colors/2.md b/speak_colors/2.md
new file mode 100644
index 0000000..662a872
--- /dev/null
+++ b/speak_colors/2.md
@@ -0,0 +1,12 @@
+**Type:** centered text
+
+**Title:** Basic Information
+
+**Content**:
+
+* *Note: this workshop requires Google Chrome or another browser [supporting the Web Speech API](https://caniuse.com/#feat=speech-recognition).*
+* We’ll be using [p5.js](https://p5js.org/) & the p5.speech library
+
+------
+
+**Speaker Notes**: Mention that we’ll be using [p5.js](https://p5js.org/) & the p5.speech library to make something fun with web speech recognition
\ No newline at end of file
diff --git a/speak_colors/3.md b/speak_colors/3.md
new file mode 100644
index 0000000..b6fea89
--- /dev/null
+++ b/speak_colors/3.md
@@ -0,0 +1,6 @@
+**Type:** Main Point
+
+**Content**:
+
+* [**Live demo**](https://speak-colors.glitch.me/)
+
diff --git a/speak_colors/4.md b/speak_colors/4.md
new file mode 100644
index 0000000..94ed352
--- /dev/null
+++ b/speak_colors/4.md
@@ -0,0 +1,45 @@
+**Type:** link + code
+
+**Title**: Setup
+
+**Link**:
+
+* https://repl.it/languages/html
+
+**Non-Code Textbox**:
+
+* Start an HTML project on [repl.it](https://repl.it/): [start one right here](https://repl.it/languages/html).
+* Import the p5 & p5.speech libraries
+
+**Code Textbox**:
+
+```html
+
+
+
+
+ Speak a Color
+
+
+
+
+
+
+
+```
+
+------
+
+**Speaker Notes**:
+
+* When you say "Import the p5 & p5.speech libraries", mention that "because these are long URLs, just replace the file with this" and then refer to code
+
+* Mention the following
+
+ * We’re initializing an HTML page
+ * We’re giving it a , which appears as the tab name in your browser
+ * We’re linking the two external libraries we need
+ * Finally, a link to the `script.js` file we’ll write our own JavaScript code in
+
+ * The rest of the code samples in this workshop will all be for `script.js`, where we write the p5 code.
+
diff --git a/speak_colors/5.md b/speak_colors/5.md
new file mode 100644
index 0000000..e6e564d
--- /dev/null
+++ b/speak_colors/5.md
@@ -0,0 +1,24 @@
+**Type:** code centered
+
+**Title**: Displaying Instructions
+
+**Non-Code Textbox before function**:
+
+* Setting up canvas with p5
+* Canvas should fill the screen (use `window.innerWidth` & `window.innerHeight`)
+* Function below fills the background with white, and makes the text color dark grey
+
+**Code Textbox**:
+
+```javascript
+function setup() {
+ createCanvas(window.innerWidth, window.innerHeight)
+ background(255)
+ fill(25)
+}
+```
+
+**Non-Code Textbox after function**:
+
+* Page still looks empty!
+
diff --git a/speak_colors/6.md b/speak_colors/6.md
new file mode 100644
index 0000000..40fef2f
--- /dev/null
+++ b/speak_colors/6.md
@@ -0,0 +1,33 @@
+**Type:** code centered
+
+**Title**: Displaying Instructions
+
+**Non-Code Textbox**:
+
+* Let’s add some initial instructions
+* `text()`
+
+**Code Textbox**:
+
+```javascript
+function setup() {
+ createCanvas(window.innerWidth, window.innerHeight)
+ background(255)
+ fill(25)
+
+ textSize(48)
+ textAlign(CENTER)
+ textStyle(BOLDITALIC)
+ textFont('"Avenir Next", system-ui, sans-serif')
+ text('SAY A COLOR', width / 2, height / 2)
+}
+```
+
+*
+
+------
+
+**Speaker Notes**:
+
+* Mention "You only need the `text()` line here—you can omit the `textSize`, `textAlign` etc—but these other lines make the text more fun-looking. Feel free to change the size or font"
+
diff --git a/speak_colors/7.md b/speak_colors/7.md
new file mode 100644
index 0000000..5ae6686
--- /dev/null
+++ b/speak_colors/7.md
@@ -0,0 +1,12 @@
+**Type:** link
+
+**Title:** Running Speech Recognition
+
+**Content**:
+
+* p5.speech library has [an example](https://github.com/IDMNYU/p5.js-speech/blob/master/examples/05continuousrecognition.html) of "continuous" speech recognition—that is, the mic stays active after you’ve said your first phrase, instead of being one-time.
+
+**Link**:
+
+* https://github.com/IDMNYU/p5.js-speech/blob/master/examples/05continuousrecognition.html
+
diff --git a/speak_colors/8.md b/speak_colors/8.md
new file mode 100644
index 0000000..93be149
--- /dev/null
+++ b/speak_colors/8.md
@@ -0,0 +1,35 @@
+**Type:** code centered
+
+**Title**: Running Speech Recognition
+
+**Non-Code Textbox**:
+
+* Set up continuous speech recognition
+* Display an alert when new speech is transcribed
+
+**Code Textbox**:
+
+```javascript
+const speech = new p5.SpeechRec('en-US', parseResult)
+speech.continuous = true
+speech.interimResults = false
+
+function setup() {
+ // …
+ text('SAY A COLOR', width / 2, height / 2)
+ speech.start()
+}
+
+function draw() {
+ // Where we’re going we don’t need drawing
+}
+
+function parseResult() {
+ if (speech.resultValue) {
+ alert(speech.resultString)
+ }
+}
+```
+
+
+
diff --git a/speak_colors/9.md b/speak_colors/9.md
new file mode 100644
index 0000000..61785a5
--- /dev/null
+++ b/speak_colors/9.md
@@ -0,0 +1,9 @@
+**Type:** centered text
+
+**Title:** Changing the Color
+
+**Content**:
+
+* HTML/CSS support a wide array of [named colors](https://html-color-codes.info/color-names/)
+* For the first iteration, we’re just supporting single-word colors, because it’s simplest.
+
diff --git a/speak_colors/README.md b/speak_colors/README.md
new file mode 100644
index 0000000..8d599e3
--- /dev/null
+++ b/speak_colors/README.md
@@ -0,0 +1,203 @@
+---
+name: Speak Colors
+description: Color your screen with your voice via speech recognition.
+author: '@lachlanjc'
+group: start
+order: 3
+---
+
+# Speak Colors
+
+_Note: this workshop requires Google Chrome or another browser [supporting the Web Speech API](https://caniuse.com/#feat=speech-recognition)._
+
+We’ll be using [p5.js](https://p5js.org) & the p5.speech library to make something fun with web speech recognition! Say a color name out loud, & the screen will fill with that color.
+
+[**Live demo**](https://speak-colors.glitch.me)
+
+## Setup
+
+First, let’s make a new HTML project on [repl.it](https://repl.it): [start one right here](https://repl.it/languages/html).
+
+Next, we need to import the p5 & p5.speech libraries. Because these are long URLs, just replace the file with this:
+
+```html
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <title>Speak a Color
+
+
+
+
+
+
+