Speak colors

speak_colors/1.md

@@ -0,0 +1,3 @@
+**Type:** title slide
+
+**Title:** Speak Colors

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()
+    )
+  }
+}
+```
+
+
+

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).

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

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?

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
+

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

speak_colors/3.md

@@ -0,0 +1,6 @@
+**Type:** Main Point
+
+**Content**: 
+
+* [**Live demo**](https://speak-colors.glitch.me/)
+

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
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Speak a Color</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
+    <script src="https://rawcdn.githack.com/IDMNYU/p5.js-speech/e7ae007d61f048fc2379971b0de7d5db8abb7eee/lib/p5.speech.js"></script>
+  </head>
+  <body>
+    <script src="script.js"></script>
+  </body>
+</html>
+```
+
+------
+
+**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 <title>, 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.
+

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!
+

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"
+

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
+

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)
+  }
+}
+```
+
+
+

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.
+