Coding Challenge 183: Paper Marbling Algorithm

Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=p7IGZTjC008



Duration: 32:10
81,407 views
3,418


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: https://thecodingtrain.com/challenges/183-mathematical-marbling

๐Ÿš€ Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-coding-challenge-183-paper-marbling-simulation

p5.js Web Editor Sketches:
๐Ÿ•น๏ธ Mathematical Marbling: https://editor.p5js.org/codingtrain/sketches/fsw-rJrpr
๐Ÿ•น๏ธ Dodecahedron: https://editor.p5js.org/codingtrain/sketches/frIcGeI8l
๐Ÿ•น๏ธ Marbling Phyllotaxis: https://editor.p5js.org/codingtrain/sketches/xoK1M7K3-
๐Ÿ•น๏ธ Marbling Mouse: https://editor.p5js.org/codingtrain/sketches/GlQ8BqbZ2
๐Ÿ•น๏ธ Marbling Color: https://editor.p5js.org/codingtrain/sketches/ONPlawNRq
๐Ÿ•น๏ธ Marbling Combs: https://editor.p5js.org/codingtrain/sketches/kUPncgjvO
๐Ÿ•น๏ธ Marbling Raster Pixels: https://editor.p5js.org/codingtrain/sketches/5b29Taght
๐Ÿ•น๏ธ Marbling Raster Pixels - Image: https://editor.p5js.org/codingtrain/sketches/nb5hSYsgX
๐Ÿ•น๏ธ Marbling Raster Pixels - Video: https://editor.p5js.org/codingtrain/sketches/kVyT302xf
๐Ÿ•น๏ธ Marbling Color - animate ink: https://editor.p5js.org/codingtrain/sketches/HtEtm1vii
๐Ÿ•น๏ธ handPose Marbling: https://editor.p5js.org/codingtrain/sketches/EwQhSqGK5

๐ŸŽฅ Previous: https://youtu.be/6UlGLB_jiCs?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
๐ŸŽฅ All: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
๐Ÿ”— Paper Marbling: https://en.wikipedia.org/wiki/Paper_marbling
๐Ÿ”— Tokutaro Yagi: https://suminagashi.com/meet-the-artisan-tokutaro-yagi/
๐Ÿ”— Digital Marbling: https://blog.amandaghassaei.com/2022/10/25/digital-marbling/
๐Ÿ“„ Mathematical Marbling: https://doi.org/10.1109/MCG.2011.51
๐Ÿ”— Mathematical Marbling: https://people.csail.mit.edu/jaffer/Marbling/

Videos:
๐ŸŽฅ The Hydrodynamics of Marbling Art: https://gfm.aps.org/meetings/dfd-2023/649b3ad8199e4c137897831b
๐ŸŽฅ https://youtu.be/O5wjXoFrau4

Related Coding Challenges:
๐Ÿš‚ https://youtu.be/OAcXnzRNiCY
๐Ÿš‚ https://youtu.be/BZUdGqeOD0w
๐Ÿš‚ https://youtu.be/alhpH6ECFvQ
๐Ÿš‚ https://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: 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

#mathematicalmarbling #fluidsimulation #p5js #javascript