Coding Challenge 183: Paper Marbling Algorithm

Подписаться 1,7 млн

Просмотров 68 тыс.

50% 1

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: ru-vid.comjoin
🛒 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

Опубликовано:

5 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 123

@samuelgunter 2 месяца назад

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" 😅

@maxwellhunt3732 2 месяца назад

Some things never change

@watchnarutoshippuden3228 Месяц назад

Haha I came here to comment exactly this

@djtomoy 2 месяца назад

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. 😢

@lbgstzockt8493 2 месяца назад

This video is a great example for why single-letter variable names are a bad idea.

@lowellrindler9454 2 месяца назад

You’ll never take my garbage variable names from me!

@WhateverOwO 2 месяца назад

as long as they work and you put a comment besides it it'll be fine lol

@qwerty_qwerty 2 месяца назад

@@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!

@jeanlasalle2351 2 месяца назад

@@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.

@krccmsitp2884 2 месяца назад

@@WhateverOwO With self-explanatory names you don't need extra comments

@AryehS1989 2 месяца назад

some of the best content on YT!

@ManishFrenchStudio 20 дней назад

An absolute triumph! 🌟🎥 This video is a triumph of content creation, seamlessly blending knowledge and entertainment. The presentation is flawless, and the visuals are nothing short of spectacular. I was entranced from the first moment and left with a deep appreciation for the subject matter. It's evident that the creators poured their creativity and expertise into this project, and the result is nothing short of exceptional. I'll be singing the praises of this video for a long time. Bravo! 👏🚀2.8k

@justinfahland1225 2 месяца назад

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

@RedHair651 Месяц назад

What's your equivalent of P5.js?

@sontapaa11jokulainen94 Месяц назад

@@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.

@ForrestLowe-ez6is 2 месяца назад

Coding Bob Ross

@pompus9068 Месяц назад

I am currently 8 years in the past, learning about PVectors, and I clicked on your channel to see if you're still alive. Not disappointed and looking forward to catching up. Looks like you're not as nervous in front of a camera any more haha. Maturity'll do that to ya :D Anyway just wanted to say, heartfelt thank you SO MUCH for these videos and I love you to death

@jasonoconner7863 Месяц назад

That historical artistic context at the start is gold. Great video!

@jaydeep-p 2 месяца назад

Hands down, you're the best coding channel!

@motbus3 2 месяца назад

This still is the best channel about programming ever. You gotta love Dan ❤

@RicoGalassi 2 месяца назад

This has got to be the coolest coding train videos yet!! Awesome Dan!

@vavassor 2 месяца назад

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

@TheCodingTrain 2 месяца назад

I hope you do!

@user-hy4he4cq2d 17 дней назад

Whilst watching the coding train, thought he was coding a game. His maths was sound, the topic profound. He taught me something again.

@HeadmostCantaloupe 2 месяца назад

You gotta love the new editing style with distinctive intros and all of that fancy stuff

@MauroGrizia 2 месяца назад

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.

@Apchenail 2 месяца назад

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.

@aniketmehendale Месяц назад

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

@fabiomartins1218 2 месяца назад

You have no idea how many times I tried to do this, Daniel. Thank you oh-so-much!

@onkelhoy1 2 месяца назад

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

@tunaroll3957 2 месяца назад

This is so genuis and showcases how much P5 can accomplish, combined w math!

@theminivann 2 месяца назад

Oh snap this is my first coding train video that I'm catching on release day, HI DAN THANK YOU FOR BEING AWESOME

@realcygnus 2 месяца назад

Back on the scene with ordinary old school challenges ! 💪

@BarneyCodes 2 месяца назад

Amazing video as always! This one was so much fun!

@clearwavepro100 Месяц назад

Excellent explanation of the formula! Super accessible :)

@forgey9211 2 месяца назад

I'm here for you 😊 Another beautiful video

@TiferetJackson Месяц назад

That's amazing at first I thought it impossible yet you made it look so easy! 😮

@HansMilling 2 месяца назад

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.

@elmeromero8761 2 месяца назад

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!!!

@TheCodingTrain 2 месяца назад

I believe in you!

@AndersonChristianPurigringo Месяц назад

Cara, vc é fera demais. gosto muito dos seus conteudo e a sua forma alegre de compartilha.

@artistpw Месяц назад

It's an absolute blast to do marbling. You just need a thickener for water and some pigments that will float. I made fabric and that's how I got on ebay to sell the fabric. I truly like to sculpt and paint.

@mmilerngruppe 2 месяца назад

that's really an awesome video! thank you a lot.

@umitsn Месяц назад

Great example, thanks so much 🙏🏻

@andreestermeneses5615 2 месяца назад

You are the best!

@mrkjsmt 2 месяца назад

Thanks so much!! I'd love more of these oldskool graphics challenges, please, please!!

@wlockuz4467 Месяц назад

The Bob Ross of coding.

@esphix 2 месяца назад

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.

@reid_makes_art 2 месяца назад

Great aesthetic!

@leonardopotenza7379 2 месяца назад

u are the best Dan

@matcha69420 2 месяца назад

yay just in time for my bus commute!

@raulAlbiyol 2 месяца назад

Why Are you so Awesome? Keeping making such videos.. Love from INDIA❤

@marcospaulolima642 2 месяца назад

Damn, insane video! ❤

@tedhinklater3203 2 месяца назад

I don't even code but your enthusiasm is pretty infectious and I do love the art

@TheCatull Месяц назад

Danke!

@DipamSen 2 месяца назад

Very cool video!! PS: After having watched many OOP tutorials, at 2:31 i totally expected the two "properties" to be "centre" and "radius" 😅

@yousifmobark6981 2 месяца назад

i love this channel

@ZerofeverOfficial 2 месяца назад

immiscible, my new favorite word

@xotmatrix 2 месяца назад

Super interesting.

@SimpleCarGuy 2 месяца назад

Can you do a tutorial on how to always be happy, enthusiastic and so positive!? Love the videos!

@jaybee2530 2 месяца назад

This is fantastic, great work! This also makes me feel very dumb. 😅

@zylascope 2 месяца назад

Cool!

@chichongc 2 месяца назад

Oh! I found I really like this algo~

@farazk9729 25 дней назад

In a nod to Camus's the Fall: "Monsieur", why are most coding teachers so boring? I find myself watching 30 minutes of C# and then head straight back to your videos for some fresh air... not everything is the content, after all... the form matters, too. Thanks for being different... for not taking all of this too seriously... for being colorful in this big white world... . Cheers from the land down under,

@NoVIcE_Source 2 месяца назад

lovely

@ethanhermsey 2 месяца назад

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

@limboreversible Месяц назад

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

@WinterSolsticeGaming 2 месяца назад

Cool Vid

@sangwookim5551 2 месяца назад

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? :)

@DivineIntervention-12 Месяц назад

2.5 thousand likes and 0 dislikes is incredibly uncommon XD keep it up

@HarDarkable 2 месяца назад

Long time since This dot Song!

@gutzimmumdo4910 Месяц назад

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.

@ampleman602 26 дней назад

Just found this channel. Wow

@at-2974 2 месяца назад

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?

@egebayraktar6620 Месяц назад

adamsın kralsın

@nguyenlevlog4586 2 месяца назад

good

@subinaypanda9936 2 месяца назад

We can have a relation between the radius and the circleDetails like higher the radius, higher will be circleDetails.

@TheCodingTrain 2 месяца назад

Yes, this is a great idea!

@grimm2376 22 дня назад

СУПЕР ТОПОВЫЙ КАНАЛ, жаль что я нашел этот канал только недавно. чууух чууух

@youtubeonly3770 9 дней назад

It's sad to see the p5 guy growing OLD. I am following your content from when I was in high school.

@StayMotivate-or7rf Месяц назад

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😊.

@flashbond 2 месяца назад

That's a Turkish art called "Ebru". I guess the English phonetic will be Abrou

@dhairyashah3104 Месяц назад

make a video on queuing theory please

@outside8312 2 месяца назад

Kinda want to try water marbling my nails again now... But it will probably end badly 😅💅

@paultapping9510 2 месяца назад

that would totally work! enamel is hydrophobic, so as long as you masked your fingers off you could use hydrodipping.

@TheCodingTrain 2 месяца назад

Please share if you do!

@bluegamemc1403 2 месяца назад

no clue what this means but I still clicked right away

@farazk9729 22 дня назад

When the book comes out, please let us know. I think it'll be in September, right?

@TheCodingTrain 21 день назад

September 3rd. Check natureofcode.com for preorder info and updates!

@farazk9729 21 день назад

@TheCodingTrain will do. Thanks, and congrats.

@000aleph 2 месяца назад

So do we have incompressibility?

@RajJaiswal538 2 месяца назад

Any idea how the smoother version of it would work? Should I just interpolate it from older position to newer position with time?

@TheCodingTrain 2 месяца назад

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.

@RajJaiswal538 2 месяца назад

@@TheCodingTrain thanks! Will check them

@RandomEG1234 2 месяца назад

please help, my variable will not save, and i need it to stay the same when i re run it

@SMVK 21 день назад

Next, make this algorithm in raster (each individual's pixels)🌚

@daviddawkins 2 месяца назад

I watched this at x1.25 by mistake and now I don't think I can sleep

@TheCodingTrain 2 месяца назад

if you watch it backwards at 0.75x it'll cure you

@daviddawkins 2 месяца назад

@@TheCodingTrain I forgot to add that I loved the video.

@user-dp7ub3sz7s Месяц назад

Teacher:3

@SquareRootOfNegativeOne 2 месяца назад

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....

@SquareRootOfNegativeOne 2 месяца назад

never mind. figured it out - learned a couple things too!!

@TheCodingTrain 2 месяца назад

I haven't been keeping up with porting the examples, but you are welcome to add to github.com/CodingTrain/Coding-Challenges/

@SquareRootOfNegativeOne 2 месяца назад

@@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...

@bobweiram6321 2 месяца назад

Imagine applying this in real time to reality through Apple's Vision Pro Goggles.

@pierremarcotte6299 Месяц назад

Dumb guy here... what part in the code guarantees that the area of a drop is always equal?

@jthawken123 2 месяца назад

Ah yes, the inside cover page of the hymnal.

@geoffwagner4935 Месяц назад

holy cowsay , I actually got magSq();

@alvarobyrne 2 месяца назад

Kwel!

@planktonfun1 Месяц назад

its not fluid enough

@user-gs7vk6sw9y 2 месяца назад

its nearly impossible to follow your video if you are always zooming in for now reason.

@gsestream 2 месяца назад

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.