Coding Challenge 183: Paper Marbling Algorithm

The Coding Train · Beginner ·🌐 Frontend Engineering ·2y ago

About this lesson

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

Original Description

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
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Related AI Lessons

Had my Frontend Developer interview with Capgemini (Application Developer) today, and I wanted to…
Prepare for a frontend developer interview with Capgemini by reviewing JavaScript fundamentals and practicing common interview questions
Medium · JavaScript
10 Frontend Developer Tools to Boost Productivity in 2026
Boost frontend productivity with 10 essential tools for modern web app development
Medium · Programming
10 Frontend Developer Tools to Boost Productivity in 2026
Boost frontend productivity with top 10 developer tools in 2026
Medium · JavaScript
The US Frontend Engineer Market in 2026: A Data-Driven Reality Check (and the Bias That Stops Us Seeing It)
US frontend engineer hiring demand peaked in 2022 and remains flat-depressed in 2026, contrary to common assumptions
Dev.to AI
Up next
The masks we wear | Zora Krstić | TEDxLuxembourgCity
TEDx Talks
Watch →