|
| 1 | +{ |
| 2 | + "title": "Mathematical Marbling", |
| 3 | + "videoNumber": "183", |
| 4 | + "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.", |
| 5 | + "videoId": "p7IGZTjC008", |
| 6 | + "nebulaSlug": "codingtrain-coding-challenge-183-paper-marbling-simulation", |
| 7 | + "date": "2024-05-02", |
| 8 | + "languages": ["p5.js", "JavaScript"], |
| 9 | + "topics": ["mathematical marbling", "fluid simulation"], |
| 10 | + "canContribute": true, |
| 11 | + "relatedChallenges": ["56-attraction-and-repulsion-forces", "102-2d-water-ripple", "132-fluid-simulation", "177-soft-body-character"], |
| 12 | + "timestamps": [ |
| 13 | + { "time": "0:00", "title": "Introduction" }, |
| 14 | + { "time": "1:47", "title": "Mathematical Marbling" }, |
| 15 | + { "time": "2:16", "title": "Explain approach" }, |
| 16 | + { "time": "3:20", "title": "Start Coding" }, |
| 17 | + { "time": "4:20", "title": "Dropping paint" }, |
| 18 | + { "time": "7:03", "title": "Add the circle vertices using polar coordinates" }, |
| 19 | + { "time": "10:57", "title": "Add a marble function" }, |
| 20 | + { "time": "13:24", "title": "Refine the algorithm" }, |
| 21 | + { "time": "16:45", "title": "Add a tine function" }, |
| 22 | + { "time": "19:46", "title": "Circle detail" }, |
| 23 | + { "time": "24:50", "title": "Generalize the tine function" }, |
| 24 | + { "time": "29:43", "title": "Possible variations" }, |
| 25 | + { "time": "31:45", "title": "Outro" } |
| 26 | + ], |
| 27 | + "codeExamples": [ |
| 28 | + { |
| 29 | + "title": "Mathematical Marbling", |
| 30 | + "description": "Implementation of mathematical marbling", |
| 31 | + "image": "marble.jpg", |
| 32 | + "urls": { |
| 33 | + "p5": "https://editor.p5js.org/codingtrain/sketches/fsw-rJrpr" |
| 34 | + } |
| 35 | + }, |
| 36 | + { |
| 37 | + "title": "Dodecahedron", |
| 38 | + "description": "Code example for rendering a dodecahedron.", |
| 39 | + "image": "dodecahedron.jpg", |
| 40 | + "urls": { |
| 41 | + "p5": "https://editor.p5js.org/codingtrain/sketches/frIcGeI8l" |
| 42 | + } |
| 43 | + }, |
| 44 | + { |
| 45 | + "title": "Marbling Phyllotaxis", |
| 46 | + "description": "Adding ink drops using phyllotaxis.", |
| 47 | + "image": "phyllotaxis.jpg", |
| 48 | + "urls": { |
| 49 | + "p5": "https://editor.p5js.org/codingtrain/sketches/xoK1M7K3-" |
| 50 | + } |
| 51 | + }, |
| 52 | + { |
| 53 | + "title": "Marbling Mouse", |
| 54 | + "description": "This example demonstrates interactivity adding the ink.", |
| 55 | + "image": "mouse.jpg", |
| 56 | + "urls": { |
| 57 | + "p5": "https://editor.p5js.org/codingtrain/sketches/GlQ8BqbZ2" |
| 58 | + } |
| 59 | + }, |
| 60 | + { |
| 61 | + "title": "Marbling Color", |
| 62 | + "description": "This example demonstrates adding a color palette.", |
| 63 | + "image": "palette.jpg", |
| 64 | + "urls": { |
| 65 | + "p5": "https://editor.p5js.org/codingtrain/sketches/ONPlawNRq" |
| 66 | + } |
| 67 | + }, |
| 68 | + { |
| 69 | + "title": "Marbling Combs", |
| 70 | + "description": "This example demonstrates adding tine lines.", |
| 71 | + "image": "tines.jpg", |
| 72 | + "urls": { |
| 73 | + "p5": "https://editor.p5js.org/codingtrain/sketches/kUPncgjvO" |
| 74 | + } |
| 75 | + }, |
| 76 | + { |
| 77 | + "title": "Marbling Raster Pixels", |
| 78 | + "description": "This example demonstrates marbling by raster-rendering the pixels.", |
| 79 | + "image": "raster.jpg", |
| 80 | + "urls": { |
| 81 | + "p5": "https://editor.p5js.org/codingtrain/sketches/5b29Taght" |
| 82 | + } |
| 83 | + }, |
| 84 | + { |
| 85 | + "title": "Marbling Raster Pixels - Image", |
| 86 | + "description": "This example demonstrates marbling the pixels of an image.", |
| 87 | + "image": "image.jpg", |
| 88 | + "urls": { |
| 89 | + "p5": "https://editor.p5js.org/codingtrain/sketches/nb5hSYsgX" |
| 90 | + } |
| 91 | + }, |
| 92 | + { |
| 93 | + "title": "Marbling Raster Pixels - Video", |
| 94 | + "description": "This example demonstrates marbling the pixels of a video.", |
| 95 | + "image": "video.jpg", |
| 96 | + "urls": { |
| 97 | + "p5": "https://editor.p5js.org/codingtrain/sketches/kVyT302xf" |
| 98 | + } |
| 99 | + }, |
| 100 | + { |
| 101 | + "title": "Marbling Color - animate ink", |
| 102 | + "description": "This example demonstrates animating the addition of ink drops", |
| 103 | + "image": "animate.jpg", |
| 104 | + "urls": { |
| 105 | + "p5": "https://editor.p5js.org/codingtrain/sketches/HtEtm1vii" |
| 106 | + } |
| 107 | + }, |
| 108 | + { |
| 109 | + "title": "handPose Marbling", |
| 110 | + "description": "This example demonstrates adding ink drops using ml5.handPose.", |
| 111 | + "image": "handPose.jpg", |
| 112 | + "urls": { |
| 113 | + "p5": "https://editor.p5js.org/codingtrain/sketches/EwQhSqGK5" |
| 114 | + } |
| 115 | + } |
| 116 | + ], |
| 117 | + "groupLinks": [ |
| 118 | + { |
| 119 | + "title": "References", |
| 120 | + "links": [ |
| 121 | + { |
| 122 | + "icon": "🔗", |
| 123 | + "title": "Paper Marbling", |
| 124 | + "url": "https://en.wikipedia.org/wiki/Paper_marbling", |
| 125 | + "description": "Wikipedia article discussing the history and process of paper marbling." |
| 126 | + }, |
| 127 | + { |
| 128 | + "icon": "🔗", |
| 129 | + "title": "Tokutaro Yagi", |
| 130 | + "url": "https://suminagashi.com/meet-the-artisan-tokutaro-yagi/", |
| 131 | + "description": "Article about Suminagashi master Tokutaro Yagi." |
| 132 | + }, |
| 133 | + { |
| 134 | + "icon": "🔗", |
| 135 | + "title": "Digital Marbling", |
| 136 | + "url": "https://blog.amandaghassaei.com/2022/10/25/digital-marbling/", |
| 137 | + "description": "Blog post about digital marbling by Amanda Ghassaei." |
| 138 | + }, |
| 139 | + { |
| 140 | + "icon": "📄", |
| 141 | + "title": "Mathematical Marbling", |
| 142 | + "url": "https://doi.org/10.1109/MCG.2011.51", |
| 143 | + "description": "S. Lu, A. Jaffer, X. Jin, H. Zhao and X. Mao, in IEEE Computer Graphics and Applications, vol. 32, no. 6, pp. 26-35, Nov.-Dec. 2012" |
| 144 | + }, |
| 145 | + { |
| 146 | + "icon": "🔗", |
| 147 | + "title": "Mathematical Marbling", |
| 148 | + "url": "https://people.csail.mit.edu/jaffer/Marbling/", |
| 149 | + "description": "Posts that cover algorithms and mathematics of simulating paper marbling." |
| 150 | + } |
| 151 | + ] |
| 152 | + }, |
| 153 | + { |
| 154 | + "title": "Videos", |
| 155 | + "links": [ |
| 156 | + { |
| 157 | + "icon": "🎥", |
| 158 | + "title": "The Hydrodynamics of Marbling Art", |
| 159 | + "url": "https://gfm.aps.org/meetings/dfd-2023/649b3ad8199e4c137897831b", |
| 160 | + "description": "Y. Sun, J. W. M. Bush, S. E. Spagnolie, and C. H. Rycroft, APS Division of Fluid Dynamics Gallery of Fluid Motion, V0002 (2023). (doi:10.1103/APS.DFD.2023.GFM.V0002)" |
| 161 | + }, |
| 162 | + { |
| 163 | + "icon": "🎥", |
| 164 | + "title": "Polar Coordinates - p5.js Tutorial", |
| 165 | + "url": "/tracks/the-nature-of-code-2/noc/3-angles/4-polar-coordinates", |
| 166 | + "description": "A dive into the trigonometric functions—sine, cosine, and tangent." |
| 167 | + } |
| 168 | + ] |
| 169 | + } |
| 170 | + ], |
| 171 | + "credits": [ |
| 172 | + { |
| 173 | + "title": "Editing", |
| 174 | + "name": "Mathieu Blanchette" |
| 175 | + }, |
| 176 | + { |
| 177 | + "title": "Animations", |
| 178 | + "name": "Jason Heglund" |
| 179 | + } |
| 180 | + ] |
| 181 | +} |
0 commit comments