diff --git a/content/pages/challenges/index.json b/content/pages/challenges/index.json index b9c63bb0f..dba9a3fc6 100644 --- a/content/pages/challenges/index.json +++ b/content/pages/challenges/index.json @@ -2,5 +2,5 @@ "title": "Challenges", "description": "Ready to apply what you’ve learned in the Tracks? Try a Challenge! These one-off project videos build off concepts introduced in Tracks and may have prerequisites (listed on the challenge page itself).", "featuredText": "Featured Challenge:", - "featuredChallenge": "184-elastic-collisions" + "featuredChallenge": "185-dragon-curve" } diff --git a/content/pages/homepage/index.json b/content/pages/homepage/index.json index 8b7769c47..0010c10f6 100644 --- a/content/pages/homepage/index.json +++ b/content/pages/homepage/index.json @@ -31,7 +31,7 @@ "title": "Challenges", "description": "Watch Dan take on Coding Challenges in p5.js and Processing. The challenge topics include algorithmic art, machine learning, simulation, generative poetry, and more.", "featured": [ - "184-elastic-collisions", + "185-dragon-curve", "64-kinematics", "125-fourier-series", "28-metaballs", diff --git a/content/videos/challenges/185-dragon-curve/images/img1.jpg b/content/videos/challenges/185-dragon-curve/images/img1.jpg new file mode 100644 index 000000000..4007eb706 Binary files /dev/null and b/content/videos/challenges/185-dragon-curve/images/img1.jpg differ diff --git a/content/videos/challenges/185-dragon-curve/images/img2.jpg b/content/videos/challenges/185-dragon-curve/images/img2.jpg new file mode 100644 index 000000000..b4c3f19df Binary files /dev/null and b/content/videos/challenges/185-dragon-curve/images/img2.jpg differ diff --git a/content/videos/challenges/185-dragon-curve/images/img3.jpg b/content/videos/challenges/185-dragon-curve/images/img3.jpg new file mode 100644 index 000000000..0d521d070 Binary files /dev/null and b/content/videos/challenges/185-dragon-curve/images/img3.jpg differ diff --git a/content/videos/challenges/185-dragon-curve/index.jpg b/content/videos/challenges/185-dragon-curve/index.jpg new file mode 100644 index 000000000..228e0eeaf Binary files /dev/null and b/content/videos/challenges/185-dragon-curve/index.jpg differ diff --git a/content/videos/challenges/185-dragon-curve/index.json b/content/videos/challenges/185-dragon-curve/index.json new file mode 100644 index 000000000..f3c7288d4 --- /dev/null +++ b/content/videos/challenges/185-dragon-curve/index.json @@ -0,0 +1,120 @@ +{ + "title": "Dragon Curve", + "videoNumber": "185", + "description": "The Dragon Curve fractal is created by repeatedly folding a strip of paper in half, then unfolding it to form a curve. In this challenge, I attempt to code an animation of the Dragon Curve forming with p5.js in JavaScript.", + "videoId": "MazpwQNdJYQ", + "nebulaSlug": "codingtrain-coding-challenge-184-dragon-curve", + "date": "2024-08-18", + "languages": ["p5.js", "JavaScript"], + "topics": ["fractals", "dragon curve", "Nature of Code"], + "canContribute": true, + "relatedChallenges": [ + "14-fractal-trees-recursive", + "16-l-system-fractal-trees", + "77-recursion", + "121-logo-interpreter", + "c3-hilbert-curve" + ], + "timestamps": [ + { "time": "00:00", "title": "Introduction" }, + { "time": "00:36", "title": "The Nature of Code book" }, + { "time": "01:43", "title": "Explain algorithm" }, + { "time": "03:38", "title": "Start coding" }, + { "time": "05:05", "title": "Write rotate function" }, + { "time": "07:05", "title": "Rotate all the segments" }, + { "time": "11:30", "title": "We have the dragon curve!" }, + { "time": "12:00", "title": "Add animation" }, + { "time": "16:31", "title": "Add the starting positions for a and b" }, + { "time": "21:43", "title": "Scale the lines" }, + { "time": "24:08", "title": "Add a nextGeneration() function" }, + { "time": "25:16", "title": "The reduction ratio" }, + { "time": "26:44", "title": "Target zoom" }, + { "time": "28:57", "title": "Challenge complete!" }, + { "time": "29:57", "title": "What can you do?" }, + { "time": "30:25", "title": "Outro" } + ], + "codeExamples": [ + { + "title": "Dragon curve animation", + "description": "Animation of the dragon curve.", + "image": "img1.jpg", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/LXDsoCSZs" + } + }, + { + "title": "Dragon curve color variation", + "description": "Dragon curve with color rendered with an L-system", + "image": "img2.jpg", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/7nNd-f7iY" + } + }, + { + "title": "Dragon curve noise variation", + "description": "Dragon curve with random noise", + "image": "img3.jpg", + "urls": { + "p5": "https://editor.p5js.org/codingtrain/sketches/7r7ZIE4dc" + } + } + ], + "groupLinks": [ + { + "title": "References", + "links": [ + { + "icon": "📕", + "title": "The Nature of Code", + "url": "https://natureofcode.com/", + "description": "The Nature of Code book (2024 p5.js edition)" + }, + { + "icon": "🛒", + "title": "Nature of Code shop", + "url": "https://store.natureofcode.com/products/the-nature-of-code", + "description": "The Nature of Code book (2024 p5.js edition) is now available for purchase!" + }, + { + "icon": "🔗", + "title": "Dragon Curve", + "url": "https://en.wikipedia.org/wiki/Dragon_curve", + "description": "Wikipedia page discussing the construction and properties of the Dragon curve." + }, + { + "icon": "🔗", + "title": "concat() function", + "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat", + "description": "Reference for the concat function." + } + ] + }, + { + "title": "Videos", + "links": [ + { + "icon": "🎥", + "title": "Unfolding the Dragon.", + "url": "https://youtu.be/UBuPWdSbyf8", + "description": "Dragon Curve unfolding animation rendered in Cinema 4D." + }, + { + "icon": "🎥", + "title": "Dragon Curve - Numberphile", + "url": "https://www.youtube.com/watch?v=wCyC-K_PnRY", + "description": "Beautiful Dragon Curves, Fractals and Jurassic Park. Featuring Rob Eastaway." + } + ] + } + ], + "credits": [ + { + "title": "Editing", + "name": "Mathieu Blanchette" + }, + { + "title": "Animations", + "name": "Jason Heglund" + } + ] +} diff --git a/content/videos/challenges/185-dragon-curve/showcase/contribution1.jpg b/content/videos/challenges/185-dragon-curve/showcase/contribution1.jpg new file mode 100644 index 000000000..1bb3528a3 Binary files /dev/null and b/content/videos/challenges/185-dragon-curve/showcase/contribution1.jpg differ diff --git a/content/videos/challenges/185-dragon-curve/showcase/contribution1.json b/content/videos/challenges/185-dragon-curve/showcase/contribution1.json new file mode 100644 index 000000000..9f1f2a0ef --- /dev/null +++ b/content/videos/challenges/185-dragon-curve/showcase/contribution1.json @@ -0,0 +1,9 @@ +{ + "title": "Dragon Heart", + "url": "https://editor.p5js.org/kfahn/sketches/bKx0DvTE7", + "author": { + "name": "Kathy McGuiness", + "url": "" + }, + "submittedOn": "2024-08-18" +}