Merge pull request #15 from xinemata/main

software that makes mistakes

Author: xinemata

_curriculum/03-01-Intro.md

@@ -2,14 +2,23 @@
 # This is the frontmatter
 
 title: "Mask Generator" # Title and Heading 1
-permalink: /maskGenerator-intro/ # Give your page a permalink
+permalink: /maskGenerator-intro/1 # Give your page a permalink
 published: true
 
 gallery: # Below is for including an image gallery
-  - url: /assets/images/thumbnails/unit2.png
-    image_path: /assets/images/thumbnails/unit2.png
-    alt: "Screenshot of a collage on books using the p5.js web editor"
-    title: "About Me Collage"
+  - url: https://www.mokafolio.de/works/Weird-Faces
+    image_path: https://www.mokafolio.de/thumbs/works/Weird-Faces/01-2400x1526.jpg
+    alt: "Weird Faces by Matthias Dörfelt"
+    title: "Weird Faces by Matthias Dörfelt"
+  - url: https://vimeo.com/257272785
+    image_path: https://deweyhagborg.com/media/pages/projects/stranger-visions/0677cc51bf-1643025593/sample6_face_web.jpg
+    alt: "Stranger Vision by Heather Dewey-Hagborg"
+    title: "Stranger Vision by Heather Dewey-Hagborg"
+  - url: https://harriskornstein.com/screen-queen-face-fail/
+    image_path: https://harriskornstein.com/wp-content/uploads/2024/11/Face-Fail-grid-white-bg-2048x1792.jpg
+    alt: "Screen Queen Face Fail"
+    title: "Screen Queen Face Fail"
+
 ---
 
 ![Create a digital collage with p5.js!]({{ "https://verse.works/image/w3840/static%2F1dbce05a-42de-4250-a1b7-4f22d3e61886.png@webp" | relative_url }})  
@@ -64,6 +73,14 @@ Build a simple generator that makes multiple variations of the same mask.
 
 - Iterative design
 
+## References & Artworks for Discussion
+
+{% include gallery%}
+
+- [Weird Faces](https://www.mokafolio.de/works/Weird-Faces), Matthias Dörfelt
+- [Stranger Vision](https://vimeo.com/257272785), Heather Dewey-Hagborg
+- [Screen Queen Face Fail](https://harriskornstein.com/screen-queen-face-fail/), Harris Kornstein
+
 ## Timeline
 
 This project will take approximately four 45-minute sessions:

_curriculum/03-02-Intro.md

@@ -0,0 +1,30 @@
+---
+# This is the frontmatter
+
+title: "Mask Generator" # Title and Heading 1
+permalink: /maskGenerator-intro/2 # Give your page a permalink
+published: true
+---
+
+## Software that Makes Mistakes
+
+ ![Sentiment analysis]({{ "/assets/images/curriculum/hito_s.webp" | relative_url }}) 
+ A detail of “Machine Readable Hito,” 2017. Trevor Paglen / Metro Pictures, New York
+
+How does the computer “see” if we’re happy, sad, or frustrated? Facial recognition is a computer program that captures our image, analyzes the geometry of our contour (the edges or outline of our face), and checks with a database that contains other people’s pictures to make a guess on who we are, and how we feel.
+
+In order to make this invisible algorithm visible, we made this [facial recognition example](https://editor.p5js.org/xinxin/sketches/-gbq9sNsC) in p5.js for you to try out. You will need to give permission to your browser to access your camera for this sketch to play.
+
+  ![Sentiment analysis]({{ "/assets/images/curriculum/face_rec_1.jpg" | relative_url }}) 
+
+  ![Sentiment analysis]({{ "/assets/images/curriculum/face_rec_2.png" | relative_url }}) 
+
+#### Sentiment (emotion or feeling) Analysis
+
+The facial recognition software traces our faces and assigns numbers to our contours as an attempt to understand our feelings. But how often does it get it right? We can test this out by picking one emotion from the [Wheel of Emotions](https://www.isu.edu/media/libraries/counseling-and-testing/documents/Wheel-of-Emotions-Handout-(3).pdf) and performing it in front of this [emotion recognition example](https://editor.p5js.org/jodiechifunyise/sketches/zdV2SqBiD).
+
+#### Let’s Discuss
+- Did you notice any differences between the emotion you chose from the wheel and the emotion deteced in the p5.js sketch? 
+- Reflect on the different people you have met throughout your life, do they express emotions like joy, fraustration, or vulnerability with the same facial expressions? 
+- What are some potential consequences when software misread human emotions?
+

_curriculum/06_01-Lessons.md

@@ -5,6 +5,31 @@ permalink: /walkInNeighborhood-lessons/ # Give your page a permalink
 published: true
 
 ---
+
+```jsx
+let x = 25;
+let h = 20;
+let y = 25;
+function setup() {
+  createCanvas(480, 120);
+}
+function draw() {
+  background(204);
+  rect(x, y, 300, h);        // Top
+  x = x + 100;
+  rect(x, y + h, 300, h);    // Middle
+  x = x - 250;
+  rect(x, y + h*2, 300, h);  // Bottom
+}
+```
+
+### Updating a value
+We can also update the value of a variable throughout our code. It can mean one value in a specific context, and then change its value in another.
+
+- Replacing the value of a variable
+    - Variables can update themselves with new information - ie. x = x+1; This means that x will keep updating to add 1 to itself.
+    - If using “let,” we can change the variable type. The same variable used for storing numbers can also update to be text or array of values.
+    
 # Lesson Plans & Technical Steps
 ## 1. Variables + Animation
 ![Animating with p5.js]({{ "/assets/images/curriculum/Unit-5_Sample-2.gif" | relative_url }})  

_data/navigation.yml

@@ -47,7 +47,9 @@ curriculum:
   - title: "Project 2: Mask Generator"
     children:
       - title: "Introduction"
-        url: /maskGenerator-intro/
+        url: /maskGenerator-intro/1
+      - title: "Software that Makes Mistakes"
+        url: /maskGenerator-intro/2
       - title: "Variables"
         url: /maskGenerator-lessons/1
       - title: "Randomness"