Coding Challenge 185: Unfolding Fractals

Channel:

The Coding Train

Subscribers:

1,740,000

Published on August 18, 2024 1:57:10 PM ● Video Link: https://www.youtube.com/watch?v=MazpwQNdJYQ

Duration: 0:00

49,821 views

2,168

25% off The Nature of Code book with code CHOOCHOO at https://natureofcode.com/ (comes with exclusive sticker+bookmark).

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. Code: https://thecodingtrain.com/challenges/185-dragon-curve

🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-coding-challenge-184-dragon-curve

p5.js Web Editor Sketches:
🕹 ️ Dragon curve animation:https://editor.p5js.org/codingtrain/sketches/LXDsoCSZs.
🕹 ️ Dragon curve color variationhttps://editor.p5js.org/codingtrain/sketches/7nNd-f7iY..
🕹 ️ Dragon curve noise variatiohttps://editor.p5js.org/codingtrain/sketches/7r7ZIE4dc...

🎥 Previous:    • Collisions Without a Physics Library!...  
🎥 All:    • Coding Challenges  

References:
📕 The Nature of Codhttps://natureofcode.com/om/
🛒 Nature of Code shop..
🔗 Dragon Curvehttps://en.wikipedia.org/wiki/Dragon_curve..
🔗 concat() functionhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat..

Videos:
🎥    • Unfolding The Dragon | Fractal Curve |  
🎥    • Dragon Curve - Numberphile  

Related Coding Challenges:
🚂    • Coding Challenge #14: Fractal Trees -...  
🚂    • Coding Challenge #16: L-System Fracta...  
🚂    • Coding Challenge #77: Recursion  
🚂    • Coding Challenge #121: Logo Interpreter  
🚂    • Coding the Hilbert Curve  

Timestamps:
00:00 Introduction
00:36 The Nature of Code book
01:43 Explain algorithm
03:38 Start coding
05:05 Write rotate function
07:05 Rotate all the segments
11:30 We have the dragon curve!
12:00 Add animation
16:31 Add the starting positions for a and b
21:43 Scale the lines
24:08 Add a nextGeneration() function
25:16 The reduction ratio
26:44 Target zoom
28:57 Challenge complete!
29:57 What can you do?
30:25 Outro

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Websitehttps://thecodingtrain.com/m/
👾 Share Your Creationhttps://thecodingtrain.com/guides/passenger-showcase-guide..
🚩 Suggest Topicshttps://github.com/CodingTrain/Suggestion-Box..
💡 GitHubhttps://github.com/CodingTrainin
💬 Discordhttps://thecodingtrain.com/discordrd
💖 Membershipin
🛒 Store:https://standard.tv/codingtrainn
🖋 ️ Twitterhttps://twitter.com/thecodingtrain  
📸 Instagramhttps://www.instagram.com/the.coding.train/  

🎥    • Coding Challenges  
🎥    • Start learning here!  

🔗 p5.jshttps://p5js.org/rg
🔗 p5.js Web Editorhttps://editor.p5js.org/g/
🔗 Processinghttps://processing.org/rg

📄 Code of Conducthttps://github.com/CodingTrain/Code-of-Conduct..

This description was auto-generated. If you see a problem, please open an issuehttps://github.com/CodingTrain/thecodingtrain.com/issues/new..

#fractals #dragoncurve #natureofcode #p5js #javascript