Coding Challenge 183: Paper Marbling Algorithm
ฝัง
- เผยแพร่เมื่อ 16 พ.ค. 2024
- 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...
🚀 Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-...
p5.js Web Editor Sketches:
🕹️ Mathematical Marbling: editor.p5js.org/codingtrain/s...
🕹️ Dodecahedron: editor.p5js.org/codingtrain/s...
🕹️ Marbling Phyllotaxis: editor.p5js.org/codingtrain/s...
🕹️ Marbling Mouse: editor.p5js.org/codingtrain/s...
🕹️ Marbling Color: editor.p5js.org/codingtrain/s...
🕹️ Marbling Combs: editor.p5js.org/codingtrain/s...
🕹️ Marbling Raster Pixels: editor.p5js.org/codingtrain/s...
🕹️ Marbling Raster Pixels - Image: editor.p5js.org/codingtrain/s...
🕹️ Marbling Raster Pixels - Video: editor.p5js.org/codingtrain/s...
🕹️ Marbling Color - animate ink: editor.p5js.org/codingtrain/s...
🕹️ handPose Marbling: editor.p5js.org/codingtrain/s...
🎥 Previous: • Coding Challenge 182: ...
🎥 All: • Coding Challenges
References:
🔗 Paper Marbling: en.wikipedia.org/wiki/Paper_m...
🔗 Tokutaro Yagi: suminagashi.com/meet-the-arti...
🔗 Digital Marbling: blog.amandaghassaei.com/2022/...
📄 Mathematical Marbling: doi.org/10.1109/MCG.2011.51
🔗 Mathematical Marbling: people.csail.mit.edu/jaffer/M...
Videos:
🎥 The Hydrodynamics of Marbling Art: gfm.aps.org/meetings/dfd-2023...
🎥 • 3.4 Polar Coordinates ...
Related Coding Challenges:
🚂 • Coding Challenge #56: ...
🚂 • Coding Challenge 102: ...
🚂 • Coding Challenge #132:...
🚂 • Coding Challenge 177: ...
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/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: th-cam.com/users/thecodingtrainjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 • Coding Challenges
🎥 • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#mathematicalmarbling #fluidsimulation #p5js #javascript
I've been subscribed since watching the snake coding challenge back in 2016 riding home from school, and now I'm at a university, I see we're still forgetting the "this dots" 😅
Some things never change
Haha I came here to comment exactly this
This video is a great example for why single-letter variable names are a bad idea.
You’ll never take my garbage variable names from me!
as long as they work and you put a comment besides it it'll be fine lol
@@WhateverOwO God, please do not suggest that to anyone. Ever. It's okay if it's a solo project with old code that you don't want to touch, but don't _suggest_ it to people!
@@WhateverOwOWhy put a comment saying what it is instead of naming it?
Have fun with "int a; //smoothing factor"
And adding insult to injury intellisense will be worthless when you call your function which is accepting a variable of type int named a.
@@WhateverOwO With self-explanatory names you don't need extra comments
some of the best content on YT!
Every time I watch the intro to one of these videos it feels like you have access to a different version of the internet than me, one filled with wonder, creativity and beauty. 😢
This still is the best channel about programming ever. You gotta love Dan ❤
Hands down, you're the best coding channel!
programming alongside you and trying to work out these challenges in python has reinvigorated my motivation for programming as a hobby again. Its really exciting recreating the things you make in your videos and I'm finally finding programming fun again, keep up the good work
What's your equivalent of P5.js?
@@RedHair651 I am not the one you originally asked, but I myself use pythons turtle library to draw this stuff. You need to implement some stuff yourself, which exists as a builtin in p5js (for example in python you need to program the main drawing loop yourself), but it is quite good still in my opinion.
This has got to be the coolest coding train videos yet!! Awesome Dan!
You gotta love the new editing style with distinctive intros and all of that fancy stuff
First video I look at since many years (of the "purple rain coding challenge generation"). The pacing of your video is much more dynamic now, I am sure the young brains are even more attracted by it.
i used to watch your channel when i was in college, i came across this video randomly. glad to see youre still at it, ah the nostalgia
This is so genuis and showcases how much P5 can accomplish, combined w math!
I'm sometimes absolutely marveled at the amount of science that's being put into art to create this amazing patterns.
I just saw a minute of this video and I already made up my mind. I'm soooo following this tutorial.
Back on the scene with ordinary old school challenges ! 💪
You have no idea how many times I tried to do this, Daniel. Thank you oh-so-much!
I'm here for you 😊 Another beautiful video
Dan as always, thank you for your video, I love listen, watch you struggle in whatever the exciting task you take open yourself meanwhile I struggle on my own work/projects etc
immiscible, my new favorite word
Excellent explanation of the formula! Super accessible :)
Years ago I tried to make a fluid sim for marbling. I had a flow sim and was trying to make things more incompressible by reducing diffusion using "back and forth error correction and compensation". Which helped the ink not mix together into grey/brown as quickly. But didn't have that thick ink look. Using vector shapes looks fantastic! And the raster method is cool too. Now I wanna revisit this idea
I hope you do!
Oh snap this is my first coding train video that I'm catching on release day, HI DAN THANK YOU FOR BEING AWESOME
That's amazing at first I thought it impossible yet you made it look so easy! 😮
Amazing video as always! This one was so much fun!
Great example, thanks so much 🙏🏻
yay just in time for my bus commute!
Cara, vc é fera demais. gosto muito dos seus conteudo e a sua forma alegre de compartilha.
I just started studying Computer Engineering on College and it has been kinda rough, a lot of stress and there has been times that I've thought about droping out. But then I found your videos and my love for programming came back. I just wanted to say thank you for making programming seem so fun and interesting to me again!!!
I believe in you!
You are the best!
Thanks so much!! I'd love more of these oldskool graphics challenges, please, please!!
that's really an awesome video! thank you a lot.
Danke!
Damn, insane video! ❤
Long time follower. This reminds me so much of making graphics demos on my Amiga and later PC. It was all about creating cool effects.
Great aesthetic!
u are the best Dan
I don't even code but your enthusiasm is pretty infectious and I do love the art
The reason for the magSq function being better to use is because it is just the dot product of a vector with itself. This is due to the magnitude being computed using the Pythagorean theorem which uses a square root, which is an expensive operation. By immediately calling the magnitude squared function you remove the need to compute the sqrt.
Coding Bob Ross
Why Are you so Awesome? Keeping making such videos.. Love from INDIA❤
Oh! I found I really like this algo~
Cool!
lovely
i love this channel
Super interesting.
This is fantastic, great work! This also makes me feel very dumb. 😅
Very cool video!!
PS: After having watched many OOP tutorials, at 2:31 i totally expected the two "properties" to be "centre" and "radius" 😅
Can you do a tutorial on how to always be happy, enthusiastic and so positive!?
Love the videos!
Ooh this is really cool! I've unsuccesfully been trying to get something like the immiscible drops, definitely trying this out :)
hhmm.. tine lines from flowfields
2.5 thousand likes and 0 dislikes is incredibly uncommon XD keep it up
adamsın kralsın
Cool Vid
Hi, this is amazing.
Is there a version in processing code of this coding challenge ? I'm totally Stuck with the marble function:-( Thanks again Mr. Schifman for your continuous inspiration
Long time since This dot Song!
no clue what this means but I still clicked right away
Could a generalized tine line still function effectively without relying on the dot product? Instead, could it exclusively use vertical tine line, achieved by rotating shapes to align the vertical tine line at the desired location, and then rotating the shapes back to their original angles?
Hi Daniel! I am a huge fan of your works and even made my own generative art NFTs using p5.js following your tutorials! Just wondering though, what are your thoughts on AI art, and how it may impact the value of human-made art in the coming years? Do you think the current art(including generative art) will retain its value when AI could make them just as good, if not better? :)
We can have a relation between the radius and the circleDetails like higher the radius, higher will be circleDetails.
Yes, this is a great idea!
good
hi coding train, i saw a cool pattern and i was wondering if u could program such a thing, is called "cohomology fractals", seems quite cool of a visual but also kinda complex maybe.
Kinda want to try water marbling my nails again now... But it will probably end badly 😅💅
that would totally work! enamel is hydrophobic, so as long as you masked your fingers off you could use hydrodipping.
Please share if you do!
Any idea how the smoother version of it would work? Should I just interpolate it from older position to newer position with time?
That's an interesting idea to try! I did it by adding multiple smaller blobs of the same color slowly, it's not efficient or optimal but seems to work. Maybe removing blobs that are fully enclosed would help? You can see all the example and variations on the webpage linked in the description.
@@TheCodingTrain thanks! Will check them
please help, my variable will not save, and i need it to stay the same when i re run it
I watched this at x1.25 by mistake and now I don't think I can sleep
if you watch it backwards at 0.75x it'll cure you
@@TheCodingTrain I forgot to add that I loved the video.
So do we have incompressibility?
That's a Turkish art called "Ebru". I guess the English phonetic will be Abrou
Hello sir you are doing great work for our community,but I have a humble request please make video on maths learning topics which are important to become AI and ml engineer with proper guidance and free learning resources and full roadmap of learning mathematics please sir ! 🙏🙏 But thanks for your hardwork😊.
Ah yes, the inside cover page of the hymnal.
make a video on queuing theory please
Does the java code exist for Processing? I tried converting it myself and I can't get it to work. Probably because I don't know what I'm doing....
never mind. figured it out - learned a couple things too!!
I haven't been keeping up with porting the examples, but you are welcome to add to github.com/CodingTrain/Coding-Challenges/
@@TheCodingTrain I put up what I got but I can't help but feel like I shouldn't be the one doing it - I'm self taught and there may be errors. It would be amazing though if I could get some feedback though...
Imagine applying this in real time to reality through Apple's Vision Pro Goggles.
holy cowsay , I actually got magSq();
Dumb guy here... what part in the code guarantees that the area of a drop is always equal?
Kwel!
its nearly impossible to follow your video if you are always zooming in for now reason.
less is more you know. one is enough. do you be lacking marbles. God be your only marble. of great worth. dont sell it to anyone. localized intersection fluid sim is not expensive. you can either do a octree space division or just 3d range sorting intersection algorithm. or just the falling sand simulation but using liquid/gas pressure local small steps simulation. just like life simulator. nothing is a problem. all pre-solved. even those that you have not solved. honor to God. not to knowledge. even if God knows everything. you say you are miscible. you said "I am miscible". who do you mix with in the pot. fluid sim is like neutral net drift training by evolutionary algorithm. it will settle in some balance after simple optimization steps. minimum (proton) sized dots self-arranging neural fluid matrix. the fluid dots approximate the whole fluid in the mass. you can also derive your own fluid pixel algorithm of other type. physical or not. well if each pixel/cell can hold only hold one fluid unit then you have the algorithm working principles. the more and smaller the simulated drop cells are, the better and heavier (gpu) the simulation is. graphically making the drops overlap makes a continuous fluid in all places necessary, using smaller area for sphere/circle drop collision. there are no other drops. you dropped your marbles. time will tell. lol only a bit insane. stay sane dr. so you make a gpu object of circle shape and push it around. hmh. deformation. not dot simulation at low scale. instead of using the deformation graphics function directly, maybe do the low level simulation yourself. also interesting. the underlying tech code I mean. seems like deformation math lib is being used heavily. oh you actually do the small drops simulation. my bad. drink drink. coffee makes depressed drops. wow dude. nice trip bro. photoshop finger tool for paint drops. maf. the paint must be a leaner. paint water foundation simulator. no sell.
its not fluid enough
watch this at 0.25 speed, thank me later.
You are the best!