diff --git a/content/tracks/side-tracks/p5-tips-and-tricks/index.json b/content/tracks/side-tracks/p5-tips-and-tricks/index.json index ec36128a0..8fd078361 100644 --- 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 index 8d00020ce..706257885 100644 --- 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 index f8c1f2b61..a56f1083a 100644 --- 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 index 631c46b6a..a6f4dc714 100644 --- 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 index 28dfe5c5a..4ca5992ad 100644 --- 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 index cb1e1d9f8..95d826e17 100644 --- 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 index 26096b481..2f7bdfc62 100644 --- 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 index 6d18f0125..9d4ad2e3a 100644 --- 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 index af59f23d1..fa722389a 100644 --- 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 new file mode 100644 index 000000000..f074c98df Binary files /dev/null and b/content/videos/more-p5/2d-arrays/images/2d-arrays.png differ diff --git a/content/videos/more-p5/2d-arrays/index.json b/content/videos/more-p5/2d-arrays/index.json new file mode 100644 index 000000000..030023d09 --- /dev/null +++ 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 new file mode 100644 index 000000000..c289a33d7 Binary files /dev/null and b/content/videos/more-p5/custom-shapes/images/custom-shapes.png differ diff --git a/content/videos/more-p5/custom-shapes/index.json b/content/videos/more-p5/custom-shapes/index.json new file mode 100644 index 000000000..3cef7ba12 --- /dev/null +++ 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 index cd58d9867..0dacec48a 100644 --- 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" } ] }