Uploaded May 2024 | Updated September 2026, 1 week ago
All aboard as I attempt to simulate the artistic process of paper marbling. The algorithm is based on the paper 'Mathematical Marbling' by S. Lu, A. Jaffer, X. Jin, H. Zhao, and X. Mao. The code is written in JavaScript using the p5.js library. Code: thecodingtrain.com/challenges/183-mathematical-marbling
π Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-coding-challenge-183-paper-marbling-simulation
p5.js Web Editor Sketches:
πΉοΈ Mathematical Marbling: editor.p5js.org/codingtrain/sketches/fsw-rJrpr
πΉοΈ Dodecahedron: editor.p5js.org/codingtrain/sketches/frIcGeI8l
πΉοΈ Marbling Phyllotaxis: editor.p5js.org/codingtrain/sketches/xoK1M7K3-
πΉοΈ Marbling Mouse: editor.p5js.org/codingtrain/sketches/GlQ8BqbZ2
πΉοΈ Marbling Color: editor.p5js.org/codingtrain/sketches/ONPlawNRq
πΉοΈ Marbling Combs: editor.p5js.org/codingtrain/sketches/kUPncgjvO
πΉοΈ Marbling Raster Pixels: editor.p5js.org/codingtrain/sketches/5b29Taght
πΉοΈ Marbling Raster Pixels - Image: editor.p5js.org/codingtrain/sketches/nb5hSYsgX
πΉοΈ Marbling Raster Pixels - Video: editor.p5js.org/codingtrain/sketches/kVyT302xf
πΉοΈ Marbling Color - animate ink: editor.p5js.org/codingtrain/sketches/HtEtm1vii
πΉοΈ handPose Marbling: editor.p5js.org/codingtrain/sketches/EwQhSqGK5
π₯ Previous: youtu.be/6UlGLB_jiCs?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
π₯ All: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
π Paper Marbling: en.wikipedia.org/wiki/Paper_marbling
π Tokutaro Yagi: suminagashi.com/meet-the-artisan-tokutaro-yagi
π Digital Marbling: blog.amandaghassaei.com/2022/10/25/digital-marbling
π Mathematical Marbling: doi.org/10.1109/MCG.2011.51
π Mathematical Marbling: https://people.csail.mit.edu/jaffer/Marbling/
Videos:
π₯ The Hydrodynamics of Marbling Art: gfm.aps.org/meetings/dfd-2023/649b3ad8199e4c137897831b
π₯ youtu.be/O5wjXoFrau4
Related Coding Challenges:
π youtu.be/OAcXnzRNiCY
π youtu.be/BZUdGqeOD0w
π youtu.be/alhpH6ECFvQ
π youtu.be/IxdGyqhppis
Timestamps:
0:00 Introduction
1:47 Mathematical Marbling
2:16 Explain approach
3:20 Start Coding
4:20 Dropping paint
7:03 Add the circle vertices using polar coordinates
10:57 Add a marble function
13:24 Refine the algorithm
16:45 Add a tine function
19:46 Circle detail
24:50 Generalize the tine function
29:43 Possible variations
31:45 Outro
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
π Website: thecodingtrain.com
πΎ Share Your Creation! thecodingtrain.com/guides/passenger-showcase-guide
π© Suggest Topics: github.com/CodingTrain/Suggestion-Box
π‘ GitHub: github.com/CodingTrain
π¬ Discord: thecodingtrain.com/discord
π Membership: youtube.com/thecodingtrain/join
π Store: standard.tv/codingtrain
ποΈ Twitter: twitter.com/thecodingtrain
πΈ Instagram: instagram.com/the.coding.train
π₯ youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
π₯ youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
π p5.js: p5js.org
π p5.js Web Editor: editor.p5js.org
π Processing: processing.org
π Code of Conduct: github.com/CodingTrain/Code-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecodingtrain.com/issues/new
#mathematicalmarbling #fluidsimulation #p5js #javascript
All aboard as I attempt to simulate the artistic process of paper marbling. The algorithm is based on the paper 'Mathematical Marbling' by S. Lu, A. Jaffer, X. Jin, H. Zhao, and X. Mao. The code is written in JavaScript using the p5.js library. Code: thecodingtrain.com/challenges/183-mathematical-marbling
π Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-coding-challenge-183-paper-marbling-simulation
p5.js Web Editor Sketches:
πΉοΈ Mathematical Marbling: editor.p5js.org/codingtrain/sketches/fsw-rJrpr
πΉοΈ Dodecahedron: editor.p5js.org/codingtrain/sketches/frIcGeI8l
πΉοΈ Marbling Phyllotaxis: editor.p5js.org/codingtrain/sketches/xoK1M7K3-
πΉοΈ Marbling Mouse: editor.p5js.org/codingtrain/sketches/GlQ8BqbZ2
πΉοΈ Marbling Color: editor.p5js.org/codingtrain/sketches/ONPlawNRq
πΉοΈ Marbling Combs: editor.p5js.org/codingtrain/sketches/kUPncgjvO
πΉοΈ Marbling Raster Pixels: editor.p5js.org/codingtrain/sketches/5b29Taght
πΉοΈ Marbling Raster Pixels - Image: editor.p5js.org/codingtrain/sketches/nb5hSYsgX
πΉοΈ Marbling Raster Pixels - Video: editor.p5js.org/codingtrain/sketches/kVyT302xf
πΉοΈ Marbling Color - animate ink: editor.p5js.org/codingtrain/sketches/HtEtm1vii
πΉοΈ handPose Marbling: editor.p5js.org/codingtrain/sketches/EwQhSqGK5
π₯ Previous: youtu.be/6UlGLB_jiCs?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
π₯ All: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
π Paper Marbling: en.wikipedia.org/wiki/Paper_marbling
π Tokutaro Yagi: suminagashi.com/meet-the-artisan-tokutaro-yagi
π Digital Marbling: blog.amandaghassaei.com/2022/10/25/digital-marbling
π Mathematical Marbling: doi.org/10.1109/MCG.2011.51
π Mathematical Marbling: https://people.csail.mit.edu/jaffer/Marbling/
Videos:
π₯ The Hydrodynamics of Marbling Art: gfm.aps.org/meetings/dfd-2023/649b3ad8199e4c137897831b
π₯ youtu.be/O5wjXoFrau4
Related Coding Challenges:
π youtu.be/OAcXnzRNiCY
π youtu.be/BZUdGqeOD0w
π youtu.be/alhpH6ECFvQ
π youtu.be/IxdGyqhppis
Timestamps:
0:00 Introduction
1:47 Mathematical Marbling
2:16 Explain approach
3:20 Start Coding
4:20 Dropping paint
7:03 Add the circle vertices using polar coordinates
10:57 Add a marble function
13:24 Refine the algorithm
16:45 Add a tine function
19:46 Circle detail
24:50 Generalize the tine function
29:43 Possible variations
31:45 Outro
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
π Website: thecodingtrain.com
πΎ Share Your Creation! thecodingtrain.com/guides/passenger-showcase-guide
π© Suggest Topics: github.com/CodingTrain/Suggestion-Box
π‘ GitHub: github.com/CodingTrain
π¬ Discord: thecodingtrain.com/discord
π Membership: youtube.com/thecodingtrain/join
π Store: standard.tv/codingtrain
ποΈ Twitter: twitter.com/thecodingtrain
πΈ Instagram: instagram.com/the.coding.train
π₯ youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
π₯ youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
π p5.js: p5js.org
π p5.js Web Editor: editor.p5js.org
π Processing: processing.org
π Code of Conduct: github.com/CodingTrain/Code-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecodingtrain.com/issues/new
#mathematicalmarbling #fluidsimulation #p5js #javascript










