Coding Challenge 183: Paper Marbling Algorithm
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
Other Videos By The Coding Train
2024-10-31 | Spooooooooky ml5.js! |
2024-10-29 | Hand Pose Detection with ml5.js |
2024-10-16 | Pose Estimation with ml5.js |
2024-10-08 | Image Classification with ml5.js |
2024-08-18 | Coding Challenge 185: Unfolding Fractals |
2024-07-31 | ml5.js 1.0 and Guest Conductor Patt Vira |
2024-07-30 | Use code CHOOCHOO for 25% off. Pre-ordering direct from me comes with a bonus bookmark and sticker! |
2024-07-13 | Collisions Without a Physics Library! (Coding Challenge 184) |
2024-07-01 | i like pink |
2024-05-16 | Marbling Ink Simulation #javascript #fluidsimulation |
2024-05-02 | Coding Challenge 183: Paper Marbling Algorithm |
2024-03-24 | Passenger Showcase and Building a Creative Coding AI Agent? |
2024-03-14 | Coding Challenge 182: Apollonian Gasket Fractal |
2024-02-22 | Coding Challenge 181: Weighted Voronoi Stippling |
2024-02-02 | I, Robot |
2024-01-22 | Coding Challenge 180: Falling Sand |
2024-01-20 | Flocking rule 4? #genuary19 |
2024-01-18 | #genuary18 Bauhaus |
2024-01-16 | #genuary16 10,000 snowflakes |
2024-01-15 | #genuary15 physics library! |
2024-01-14 | Lava Lamp #genuary #genuary12 |