Merge branch 'main' into PR/improve-content-tests

fturmel · web-flow · commit 935340fff3c7 · 2023-10-27T23:47:55.000-04:00
diff --git a/content/tracks/index.json b/content/tracks/index.json
@@ -10,21 +10,21 @@
     "algorithmic-botany",
     "coding-in-the-cabana",
     "coding-together-apple-ii",
-    "games",
     "mastodon",
     "neural-networks",
     "noise",
     "p5-tips-and-tricks",
     "physics-libraries",
     "pi-day",
+    "pixels",
     "snowflakes",
     "sound",
     "supershapes",
     "teachable-machine",
     "topics-in-native-javascript",
     "transformations-in-p5",
+    "games",
     "web-sockets-and-p5js",
-    "webgl",
-    "pixels"
+    "webgl"
   ]
 }
diff --git a/content/tracks/side-tracks/pixels/index.jpg b/content/tracks/side-tracks/pixels/index.jpg
diff --git a/content/tracks/side-tracks/pixels/index.json b/content/tracks/side-tracks/pixels/index.json
@@ -1,12 +1,16 @@
 {
   "title": "pixels",
-  "description": "A collection of videos working with pixels in p5.js and Processing.",
+  "description": "Take a ride along the Pixels track and explore pixels with p5.js and Processing. In this track, I demonstrate how to work with real-time live video, using tint() to change colors and copy() to takes snapshots. I also explore how the pixel array works. I create examples of \"software\" mirrors that draw pixels as shapes or use DOM elements. I demonstrate how to create a \"painting\" with particles smearing colors from pixels, and build a slitscan effect.",
   "videos": [
     "pixels/createCapture",
     "pixels/video-photobooth",
     "more-p5/pixel-array",
     "pixels/brightness-mirror",
     "pixels/checkbox-mirror",
-    "pixels/painting-with-pixels"
+    "pixels/painting-with-pixels",
+    "pixels/slit-scan",
+    "challenges/47-pixel-sorting-in-processing",
+    "challenges/102-2d-water-ripple",
+    "challenges/103-fire-effect"
   ]
 }
diff --git a/content/videos/challenges/102-2d-water-ripple/index.json b/content/videos/challenges/102-2d-water-ripple/index.json
@@ -5,7 +5,7 @@
   "videoId": "BZUdGqeOD0w",
   "date": "2018-05-07",
   "languages": ["Processing"],
-  "topics": ["2D water ripple", "cellular automaton"],
+  "topics": ["2D water ripple", "cellular automaton", "pixels"],
   "canContribute": true,
   "relatedChallenges": ["24-perlin-noise-flow-field", "85-the-game-of-life", "103-fire-effect"],
   "timestamps": [
diff --git a/content/videos/challenges/103-fire-effect/index.json b/content/videos/challenges/103-fire-effect/index.json
@@ -5,7 +5,7 @@
   "videoId": "X0kjv0MozuY",
   "date": "2018-05-14",
   "languages": ["Processing", "p5.js"],
-  "topics": ["fire simulation", "Perlin noise"],
+  "topics": ["fire simulation", "Perlin noise", "pixels"],
   "canContribute": true,
   "relatedChallenges": ["102-2d-water-ripple", "132-fluid-simulation"],
   "timestamps": [
diff --git a/content/videos/challenges/132-fluid-simulation/index.json b/content/videos/challenges/132-fluid-simulation/index.json
@@ -5,7 +5,7 @@
   "videoId": "alhpH6ECFvQ",
   "date": "2019-02-12",
   "languages": ["Processing"],
-  "topics": ["fluid simulation", "turbulent fluid flow"],
+  "topics": ["fluid simulation", "turbulent fluid flow", "pixels"],
   "canContribute": true,
   "relatedChallenges": ["24-perlin-noise-flow-field", "102-2d-water-ripple", "103-fire-effect"],
   "timestamps": [
diff --git a/content/videos/challenges/47-pixel-sorting-in-processing/index.json b/content/videos/challenges/47-pixel-sorting-in-processing/index.json
@@ -6,7 +6,7 @@
   "nebulaSlug": "the-coding-train-47-pixel-sorting-in-processing",
   "date": "2016-12-21",
   "languages": ["Processing", "Java"],
-  "topics": ["pixel sorting", "selection sort"],
+  "topics": ["pixel sorting", "selection sort", "pixels"],
   "canContribute": true,
   "relatedChallenges": ["114-bubble-sort-visualization"],
   "timestamps": [
diff --git a/content/videos/challenges/49-photo-mosaic-with-white-house-social-media-images/index.json b/content/videos/challenges/49-photo-mosaic-with-white-house-social-media-images/index.json
@@ -5,7 +5,7 @@
   "videoId": "nnlAH1zDBDE",
   "date": "2017-01-06",
   "languages": ["Java", "Processing"],
-  "topics": ["pixel array", "image processing"],
+  "topics": ["pixel array", "image processing", "pixels"],
   "canContribute": true,
   "relatedChallenges": ["47-pixel-sorting-in-processing", "50-animated-circle-packing", "90-dithering"],
   "timestamps": [
diff --git a/content/videos/challenges/50-animated-circle-packing/index.json b/content/videos/challenges/50-animated-circle-packing/index.json
@@ -5,7 +5,7 @@
   "videoId": "",
   "date": "2017-01-09",
   "languages": ["Processing"],
-  "topics": ["load pixels", "circle packing", "processing pixels"],
+  "topics": ["circle packing", "pixels"],
   "canContribute": true,
   "relatedChallenges": ["47-pixel-sorting-in-processing", "49-photo-mosaic-with-white-house-social-media-images"],
   "timestamps": [],
diff --git a/content/videos/noc/3-angles/7-additive-waves/showcase/contribution-1698291255.jpg b/content/videos/noc/3-angles/7-additive-waves/showcase/contribution-1698291255.jpg
diff --git a/content/videos/noc/3-angles/7-additive-waves/showcase/contribution-1698291255.json b/content/videos/noc/3-angles/7-additive-waves/showcase/contribution-1698291255.json
@@ -0,0 +1,9 @@
+{
+  "title": "Additive Sin Waves with color change on click",
+  "author": {
+    "name": "Safak Onol",
+    "twitter": "https://twitter.com/Safak_Onol"
+  },
+  "url": "https://editor.p5js.org/SafakOnol/sketches/PiQY6lnii",
+  "submittedOn": "2023-10-26T03:34:15.332Z"
+}
diff --git a/content/videos/pixels/brightness-mirror/index.json b/content/videos/pixels/brightness-mirror/index.json
@@ -5,10 +5,47 @@
   "nebulaSlug": "",
   "date": "2016-03-31",
   "languages": ["JavaScript"],
-  "topics": ["p5.js", "pixel array"],
+  "topics": ["p5.js", "pixel array", "pixels"],
   "canContribute": true,
   "relatedChallenges": ["47-pixel-sorting-in-processing", "102-2d-water-ripple"],
-  "timestamps": [],
+  "timestamps": [
+    {
+      "time": "0:00",
+      "title": "Introduction"
+    },
+    {
+      "time": "1:23",
+      "title": "Loading the video's pixels"
+    },
+    {
+      "time": "3:35",
+      "title": "Brightness value of the pixels"
+    },
+    {
+      "time": "4:25",
+      "title": "Discuss performance issues"
+    },
+    {
+      "time": "6:04",
+      "title": "Add a vScale variable"
+    },
+    {
+      "time": "7:16",
+      "title": "Draw a rectangle for every pixel"
+    },
+    {
+      "time": "10:00",
+      "title": "Map pixel size to the video brightness"
+    },
+    {
+      "time": "12:26",
+      "title": "Mirror the video image"
+    },
+    {
+      "time": "13:39",
+      "title": "Outro"
+    }
+  ],
   "codeExamples": [
     {
       "title": "Brightness Mirror",
@@ -34,6 +71,17 @@
           "description": "p5 reference entry on the updatePixels() function"
         }
       ]
+    },
+    {
+      "title": "Videos",
+      "links": [
+        {
+          "icon": "🎥",
+          "title": "map()",
+          "url": "/tracks/code-programming-with-p5-js/code/2-variables/5-map",
+          "description": "This video covers the map() function in p5.js -- how to take a value from a given range and map it to a new range."
+        }
+      ]
     }
   ],
   "credits": [
diff --git a/content/videos/pixels/checkbox-mirror/index.json b/content/videos/pixels/checkbox-mirror/index.json
@@ -5,10 +5,67 @@
   "nebulaSlug": "",
   "date": "2016-03-31",
   "languages": ["JavaScript"],
-  "topics": ["p5.js", "pixel array"],
+  "topics": ["p5.js", "pixel array", "dom", "pixels"],
   "canContribute": true,
   "relatedChallenges": ["47-pixel-sorting-in-processing", "102-2d-water-ripple"],
-  "timestamps": [],
+  "timestamps": [
+    {
+      "time": "0:00",
+      "title": "Introduction"
+    },
+    {
+      "time": "1:03",
+      "title": "Thresholds"
+    },
+    {
+      "time": "2:39",
+      "title": "Add a slider"
+    },
+    {
+      "time": "3:12",
+      "title": "Assign the value of the slider to the threshold"
+    },
+    {
+      "time": "4:49",
+      "title": "Add checkboxes"
+    },
+    {
+      "time": "6:35",
+      "title": "Hard code the video size"
+    },
+    {
+      "time": "8:18",
+      "title": "Add the checkboxes to a div"
+    },
+    {
+      "time": "8:53",
+      "title": "Edit the html"
+    },
+    {
+      "time": "10:00",
+      "title": "Add styling to the div"
+    },
+    {
+      "time": "11:03",
+      "title": "Add linebreaks"
+    },
+    {
+      "time": "13:31",
+      "title": "Add an array to keep track of checkboxes"
+    },
+    {
+      "time": "14:31",
+      "title": "Use the threshold to check/uncheck the boxes"
+    },
+    {
+      "time": "15:22",
+      "title": "Create an index for the checked boxes"
+    },
+    {
+      "time": "17:20",
+      "title": "Outro"
+    }
+  ],
   "codeExamples": [
     {
       "title": "Checkbox Mirror",
@@ -23,6 +80,11 @@
     {
       "title": "References",
       "links": [
+        {
+          "title": "createCheckbox",
+          "url": "https://p5js.org/reference/#/p5/createCheckbox",
+          "description": "p5 reference entry on the createCheckbox() function"
+        },
         {
           "title": "loadPixels",
           "url": "https://p5js.org/reference/#/p5/loadPixels",
diff --git a/content/videos/pixels/createCapture/index.json b/content/videos/pixels/createCapture/index.json
@@ -5,9 +5,9 @@
   "nebulaSlug": "",
   "date": "2016-03-31",
   "languages": ["JavaScript"],
-  "topics": ["p5.js", "video"],
+  "topics": ["p5.js", "video", "createCapture", "pixels"],
   "canContribute": true,
-  "relatedChallenges": ["47-pixel-sorting-in-processing", "102-2d-water-ripple"],
+  "relatedChallenges": ["47-pixel-sorting-in-processing", "102-2d-water-ripple", "166-image-to-ascii"],
   "timestamps": [
     {
       "time": "0:00",
@@ -64,6 +64,11 @@
           "title": "image()",
           "url": "https://p5js.org/reference/#/p5/image",
           "description": "p5 reference entry on the image()"
+        },
+        {
+          "title": "createCapture()",
+          "url": "https://p5js.org/reference/#/p5/createCapture",
+          "description": "p5 reference entry on the createCapture() function"
         }
       ]
     },
diff --git a/content/videos/pixels/painting-with-pixels/index.json b/content/videos/pixels/painting-with-pixels/index.json
@@ -5,11 +5,53 @@
   "nebulaSlug": "",
   "date": "2016-04-06",
   "languages": ["JavaScript"],
-  "topics": ["p5.js", "pixel array"],
+  "topics": ["p5.js", "pixel array", "pixels"],
   "canContribute": true,
-  "relatedChallenges": ["47-pixel-sorting-in-processing", "102-2d-water-ripple"],
+  "relatedChallenges": [
+    "52-random-walker",
+    "50-animated-circle-packing",
+    "78-simple-particle-system",
+    "90-dithering",
+    "102-2d-water-ripple",
+    "132-fluid-simulation"
+  ],
   "timestamps": [
-   
+    {
+      "time": "0:00",
+      "title": "Introduction"
+    },
+    {
+      "time": "1:31",
+      "title": "Add a random particle moving around the canvas"
+    },
+    {
+      "time": "2:51",
+      "title": "Get the particle color from the video"
+    },
+    {
+      "time": "3:45",
+      "title": "Scale down the pixel values"
+    },
+    {
+      "time": "6:25",
+      "title": "Color the pixel with R, G, B values from the video"
+    },
+    {
+      "time": "7:05",
+      "title": "Add more particles"
+    },
+    {
+      "time": "8:16",
+      "title": "Improvements"
+    },
+    {
+      "time": "10:51",
+      "title": "Additional things you could try"
+    },
+    {
+      "time": "13:20",
+      "title": "Outro"
+    }
   ],
   "codeExamples": [
     {
@@ -34,6 +76,16 @@
           "title": "updatePixels",
           "url": "https://p5js.org/reference/#/p5/updatePixels",
           "description": "p5 reference entry on the updatePixels() function"
+        },
+        {
+          "title": "lerpColor",
+          "url": "https://p5js.org/reference/#/p5/lerpColor",
+          "description": "p5 reference entry on the lerpColor() function"
+        },
+        {
+          "title": "Swarm",
+          "url": "https://history.siggraph.org/experience/swarm-by-shiffman/",
+          "description": "Link to overview of my video installation."
         }
       ]
     }
diff --git a/content/videos/pixels/slit-scan/images/image1.png b/content/videos/pixels/slit-scan/images/image1.png
diff --git a/content/videos/pixels/slit-scan/index.json b/content/videos/pixels/slit-scan/index.json
diff --git a/content/videos/pixels/video-photobooth/index.json b/content/videos/pixels/video-photobooth/index.json

Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,16 @@`
`1`	`1`	`{`
`2`	`2`	`"title": "pixels",`
`3`		`- "description": "A collection of videos working with pixels in p5.js and Processing.",`
	`3`	`+ "description": "Take a ride along the Pixels track and explore pixels with p5.js and Processing. In this track, I demonstrate how to work with real-time live video, using tint() to change colors and copy() to takes snapshots. I also explore how the pixel array works. I create examples of \"software\" mirrors that draw pixels as shapes or use DOM elements. I demonstrate how to create a \"painting\" with particles smearing colors from pixels, and build a slitscan effect.",`
`4`	`4`	`"videos": [`
`5`	`5`	`"pixels/createCapture",`
`6`	`6`	`"pixels/video-photobooth",`
`7`	`7`	`"more-p5/pixel-array",`
`8`	`8`	`"pixels/brightness-mirror",`
`9`	`9`	`"pixels/checkbox-mirror",`
`10`		`- "pixels/painting-with-pixels"`
	`10`	`+ "pixels/painting-with-pixels",`
	`11`	`+ "pixels/slit-scan",`
	`12`	`+ "challenges/47-pixel-sorting-in-processing",`
	`13`	`+ "challenges/102-2d-water-ripple",`
	`14`	`+ "challenges/103-fire-effect"`
`11`	`15`	`]`
`12`	`16`	`}`