Coding Challenge 4: Purple Rain in Processing @TheCodingTrain

Updated September 2026, 1 week ago

Coding Challenge 4: Purple Rain in Processing

Marbling Ink Simulation #javascript #fluidsimulation

$Coding Challenge 185: Unfolding Fractals 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 variation: https://editor.p5js.org/codingtrain/sketches/7nNd-f7iY 🕹️ Dragon curve noise variation: https://editor.p5js.org/codingtrain/sketches/7r7ZIE4dc 🎥 Previous: https://youtu.be/dJNFPv9Mj-Y?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 📕 The Nature of Code: https://natureofcode.com/ 🛒 Nature of Code shop: https://store.natureofcode.com/products/the-nature-of-code 🔗 Dragon Curve: https://en.wikipedia.org/wiki/Dragon_curve 🔗 concat() function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat Videos: 🎥 https://youtu.be/UBuPWdSbyf8 🎥 https://www.youtube.com/watch?v=wCyC-K_PnRY Related Coding Challenges: 🚂 https://youtu.be/0jjeOYMjmDU 🚂 https://youtu.be/E1B4UoSQMFw 🚂 https://youtu.be/jPsZwrV9ld0 🚂 https://youtu.be/i-k04yzfMpw 🚂 https://youtu.be/dSK-MW-zuAc 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 🚂 Website: https://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide 🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://thecodingtrain.com/discord 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 🖋️ Twitter: https://twitter.com/thecodingtrain 📸 Instagram: https://www.instagram.com/the.coding.train/ 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: https://p5js.org 🔗 p5.js Web Editor: https://editor.p5js.org/ 🔗 Processing: https://processing.org 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #fractals #dragoncurve #natureofcode #p5js #javascript$

16.17: Inheritance in JavaScript - Topics of JavaScript/ES6

Coding Challenge #159: Simple Pendulum Simulation

$Coding Challenge 168: MandelBulb 3D Fractal Its the Mandelbulb! What happens when you take the original fractal (The Mandelbrot Set) and extend it into 3D space? And how do you visualize it in Processing (Java) as a point cloud? https://thecodingtrain.com/challenges/168-the-mandelbulb 🎥 Previous video: https://youtu.be/a35KWEjRvc0?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH Links discussed in this video: 🔗 The Unraveling of the Real 3D Mandelbulb 1: https://www.skytopia.com/project/fractal/mandelbulb.html 🔗 The Unraveling of the Real 3D Mandelbulb 2: https://www.skytopia.com/project/fractal/2mandelbulb.html 🔗 Processing: https://processing.org 🔗 MandelBulb wikipedia: https://en.wikipedia.org/wiki/Mandelbulb 🔗 PeasyCam: https://mrfeinberg.com/peasycam/ 🔗 Inigo Quilez website: https://iquilezles.org/ Other videos mentioned in this video: 🎥 Mandelbulb (raymarched SDF): https://youtu.be/eKUh4nkmQbc 🎥 Mandelbrot Set with p5.js: https://youtu.be/6z7GQewK-Ks 🎥 Spherical Geometry: https://youtu.be/RkuBWEkBrZA Timestamps: 0:00 Introducing Today’s Topic 1:31 The MandelBrot set explained 4:31 Triplex numbers 5:11 Voxels in Processing 6:36 Adding PeasyCam 7:19 Spherical coordinates 9:18 The power of triplex numbers 10:51 Implementing power formulas 15:26 Converting cartesian to Spherical 19:26 Setting up the MandelBulb 22:00 First MandelBulb 22:23 Optimising visualisation 24:47 Pointcloud MandelBulb 25:47 Variation ideas 27:04 The MandelBulb returns 27:31 See you next time! 🚂 Website: http://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/Guides/community-contribution-guide.html 🚩 Suggest Topics: https://github.com/CodingTrain/Rainbow-Topics 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://discord.gg/hPuGy2g 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 📚 Books: https://www.amazon.com/shop/thecodingtrain 🖋️ Twitter: https://twitter.com/thecodingtrain 📸 Instagram: https://www.instagram.com/the.coding.train/ 🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: https://p5js.org 🔗 p5.js Web Editor: https://editor.p5js.org/ 🔗 Processing: https://processing.org 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/website/issues/new$

3.4 Polar Coordinates - The Nature of Code