Merge pull request #1162 from dipamsen/more-p5

Add videos to p5 tips and tricks
CodingTrain · Aug 28, 2023 · 7311417 · 7311417
2 parents 4e68f91 + 4023295
commit 7311417
Show file tree

Hide file tree

Showing 14 changed files with 135 additions and 11 deletions.
diff --git a/content/tracks/side-tracks/p5-tips-and-tricks/index.json b/content/tracks/side-tracks/p5-tips-and-tricks/index.json
@@ -1,5 +1,5 @@
 {
   "title": "p5 Tips & Tricks",
   "description": "A collection of tips and tricks that might come in handy when working in p5.",
-  "videos": ["more-p5/local-storage", "more-p5/github-pages-hosting", "more-p5/pixel-array"]
+  "videos": ["more-p5/local-storage", "more-p5/github-pages-hosting", "more-p5/pixel-array", "more-p5/custom-shapes", "more-p5/2d-arrays"]
 }
diff --git a/content/videos/challenges/116-lissajous-curve-table/index.json b/content/videos/challenges/116-lissajous-curve-table/index.json
@@ -113,8 +113,8 @@
         {
           "icon": "🎥",
           "title": "2D Arrays in JavaScript",
-          "url": "https://www.youtube.com/watch?v=OTNpiLUSiB4",
-          "description": "In this JavaScript Tutorial, I cover two-dimensional (2D) arrays in JavaScript.  I demonstrate how to create, initialize, and use the arrays with nested for loops."
+          "url": "/tracks/p5-tips-and-tricks/more-p5/2d-arrays",
+          "description": "In this JavaScript tutorial, I cover two-dimensional (2D) arrays in JavaScript.  I demonstrate how to create, initialize, and use the arrays with nested for loops."
         },
         {
           "icon": "🔴",

diff --git a/content/videos/challenges/137-4d-opensimplex-noise-loop/index.json b/content/videos/challenges/137-4d-opensimplex-noise-loop/index.json
@@ -59,7 +59,7 @@
         {
           "icon": "🚂",
           "title": "What is OpenSimplex Noise?",
-          "url": "https://youtu.be/Lv9gyZZJPE0",
+          "url": "/tracks/noise/noise/open-simplex-noise",
           "description": "Discussion on OpenSimplex noise in Processing (NOC 2)"
         },
         {

diff --git a/content/videos/challenges/147-chrome-dinosaur-game/index.json b/content/videos/challenges/147-chrome-dinosaur-game/index.json
@@ -61,7 +61,7 @@
         {
           "icon": "🎥",
           "title": "ml5.js Sound Classification",
-          "url": "https://youtu.be/cO4UP2dX944",
+          "url": "/tracks/ml5js-beginners-guide/ml5/10-sound-classification/1-sound-classification",
           "description": "This video examines the new ml5.soundClassifier() function in the ml5.js library."
         },
         {

diff --git a/content/videos/challenges/48-white-house-social-media-data-visualization/index.json b/content/videos/challenges/48-white-house-social-media-data-visualization/index.json
@@ -92,7 +92,7 @@
         {
           "icon": "🚂",
           "title": "TF-IDF",
-          "url": "https://youtu.be/RPMYV-eb6lI",
+          "url": "/challenges/40-word-counter",
           "description": "In part 3 of the Word Counting Coding Challenge, I implement an algorithm known as TF-IDF (Term Frequency – Inverse Document Frequency)."
         },
         {

diff --git a/content/videos/challenges/71-minesweeper/index.json b/content/videos/challenges/71-minesweeper/index.json
@@ -82,7 +82,7 @@
         {
           "icon": "🎥",
           "title": "2D Arrays in Javascript",
-          "url": "https://youtu.be/OTNpiLUSiB4",
+          "url": "/tracks/p5-tips-and-tricks/more-p5/2d-arrays",
           "description": "In this JavaScript Tutorial, I cover two-dimensional (2D) arrays in JavaScript."
         },
         {

diff --git a/content/videos/challenges/85-the-game-of-life/index.json b/content/videos/challenges/85-the-game-of-life/index.json
@@ -59,7 +59,7 @@
         {
           "icon": "🚂",
           "title": "2D Arrays in JavaScript",
-          "url": "https://www.youtube.com/watch?v=OTNpiLUSiB4",
+          "url": "/tracks/p5-tips-and-tricks/more-p5/2d-arrays",
           "description": "In this video, I demonstrate how to create, initialize, and use the 2D arrays in JavaScript with nested for loops."
         },
         {

diff --git a/content/videos/challenges/90-dithering/index.json b/content/videos/challenges/90-dithering/index.json
@@ -84,7 +84,7 @@
         {
           "icon": "🚂",
           "title": "My Video on 2D Arrays",
-          "url": "https://www.youtube.com/watch?v=OTNpiLUSiB4",
+          "url": "/tracks/p5-tips-and-tricks/more-p5/2d-arrays",
           "description": "In this video, I demonstrate how to create, initialize, and use the arrays with nested for loops."
         },
         {

diff --git a/content/videos/challenges/c5-marching-squares/index.json b/content/videos/challenges/c5-marching-squares/index.json
@@ -144,7 +144,7 @@
         {
           "icon": "🎥",
           "title": "What is OpenSimplex Noise?",
-          "url": "https://www.youtube.com/watch?v=Lv9gyZZJPE0",
+          "url": "/tracks/noise/noise/open-simplex-noise",
           "description": "Discussion of open simplex noise in processing."
         },
         {

diff --git a/content/videos/more-p5/2d-arrays/images/2d-arrays.png b/content/videos/more-p5/2d-arrays/images/2d-arrays.png
diff --git a/content/videos/more-p5/2d-arrays/index.json b/content/videos/more-p5/2d-arrays/index.json
@@ -0,0 +1,50 @@
+{
+  "title": "2D Arrays in JavaScript",
+  "description": "In this JavaScript tutorial, I cover two-dimensional (2D) arrays in JavaScript. I demonstrate how to create, initialize, and use the arrays with nested for loops.",
+  "videoId": "OTNpiLUSiB4",
+  "date": "2016-07-18",
+  "languages": ["JavaScript", "p5.js"],
+  "topics": ["2d arrays", "array", "for loop"],
+  "canContribute": true,
+  "timestamps": [
+    { "time": "0:00", "title": "Introduction" },
+    { "time": "0:54", "title": "What is a 2D Array?" },
+    { "time": "3:39", "title": "Code example" },
+    { "time": "4:59", "title": "2D Arrays in JavaScript" },
+    { "time": "7:13", "title": "How to create a 2D Array?" },
+    { "time": "12:02", "title": "Suggestions" }
+  ],
+  "codeExamples": [
+    {
+      "title": "2D Arrays",
+      "description": "Demonstration of using 2D arrays",
+      "image": "2d-arrays.png",
+      "urls": {
+        "p5": "https://editor.p5js.org/codingtrain/sketches/cOPZYGNSx"
+      }
+    }
+  ],
+  "groupLinks": [
+    {
+      "title": "References",
+      "links": [
+        {
+          "icon": "🔗",
+          "title": "2D Array in Processing",
+          "url": "https://www.processing.org/tutorials/2darray/",
+          "description": "Dan's 2D Array in Processing tutorial"
+        }
+      ]
+    }
+  ],
+  "credits": [
+    {
+      "title": "Editing",
+      "name": "Mathieu Blanchette"
+    },
+    {
+      "title": "Animations",
+      "name": "Jason Heglund"
+    }
+  ]
+}
diff --git a/content/videos/more-p5/custom-shapes/images/custom-shapes.png b/content/videos/more-p5/custom-shapes/images/custom-shapes.png
diff --git a/content/videos/more-p5/custom-shapes/index.json b/content/videos/more-p5/custom-shapes/index.json
@@ -0,0 +1,74 @@
+{
+  "title": "Custom Shapes",
+  "description": "In this video, I look at how to draw \"custom\" shapes in p5.js, using, `beginShape()`, `endShape()`, `vertex()` and `curveVertex()`. Special thanks to Rune Madsen's Programming Design Systems!",
+  "videoId": "76fiD5DvzeQ",
+  "date": "2017-09-27",
+  "languages": ["JavaScript", "p5.js"],
+  "topics": ["custom shapes", "beginShape", "endShape", "vertex", "curveVertex"],
+  "canContribute": true,
+  "relatedChallenges": ["36-blobby"],
+  "timestamps": [
+    { "time": "0:00", "title": "Introduction" },
+    { "time": "0:57", "title": "What is a custom shape?" },
+    { "time": "3:01", "title": "Code example" },
+    { "time": "5:29", "title": "Using an algorithm to choose the vertices" },
+    { "time": "9:37", "title": "Drawing custom curves" },
+    { "time": "16:57", "title": "Recap" }
+  ],
+  "codeExamples": [
+    {
+      "title": "Custom Shapes",
+      "description": "Demonstration of drawing custom shapes",
+      "image": "custom-shapes.png",
+      "urls": {
+        "p5": "https://editor.p5js.org/codingtrain/sketches/vE4Flwxh5"
+      }
+    }
+  ],
+  "groupLinks": [
+    {
+      "title": "References",
+      "links": [
+        {
+          "icon": "🔗",
+          "title": "Catmull-Rom spline",
+          "url": "https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline",
+          "description": "Catmull-Rom on Wikipedia"
+        },
+        {
+          "icon": "🎨",
+          "title": "Programming Design Systems",
+          "url": "https://programmingdesignsystems.com/introduction/",
+          "description": "Rune Madsen's Programming Design Systems"
+        },
+        {
+          "icon": "☁️",
+          "title": "Community Clouds",
+          "url": "https://github.com/CodingTrain/CommunityClouds",
+          "description": "Cloud Designs by the Coding Train Community"
+        }
+      ]
+    },
+    {
+      "title": "Videos",
+      "links": [
+        {
+          "icon": "🚂",
+          "title": "Polar to Cartesian Coordinates",
+          "url": "/tracks/the-nature-of-code-2/noc/3-angles/4-polar-coordinates",
+          "description": "This video takes a look at polar and cartesian coordinates."
+        }
+      ]
+    }
+  ],
+  "credits": [
+    {
+      "title": "Editing",
+      "name": "Mathieu Blanchette"
+    },
+    {
+      "title": "Animations",
+      "name": "Jason Heglund"
+    }
+  ]
+}
diff --git a/content/videos/webgl/8-3d-custom-shapes/index.json b/content/videos/webgl/8-3d-custom-shapes/index.json
@@ -53,7 +53,7 @@
           "icon": "🚂",
           "title": "Custom Shapes in p5.js",
           "description": "In this video, I look at how to draw \"custom\" shapes in p5.js, using beginShape(), endShape(), vertex(), and curveVertex().",
-          "url": "https://www.youtube.com/watch?v=76fiD5DvzeQ"
+          "url": "/tracks/p5-tips-and-tricks/more-p5/custom-shapes"
         }
       ]
     }