The Coding Train
The Coding Train
  • 1 254
  • 125 148 018
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: thecodingtrain.com/challenges/183-mathematical-marbling
🚀 Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-coding-challenge-183-paper-marbling-simulation
p5.js Web Editor Sketches:
🕹️ Mathematical Marbling: editor.p5js.org/codingtrain/sketches/fsw-rJrpr
🕹️ Dodecahedron: editor.p5js.org/codingtrain/sketches/frIcGeI8l
🕹️ Marbling Phyllotaxis: editor.p5js.org/codingtrain/sketches/xoK1M7K3-
🕹️ Marbling Mouse: editor.p5js.org/codingtrain/sketches/GlQ8BqbZ2
🕹️ Marbling Color: editor.p5js.org/codingtrain/sketches/ONPlawNRq
🕹️ Marbling Combs: editor.p5js.org/codingtrain/sketches/kUPncgjvO
🕹️ Marbling Raster Pixels: editor.p5js.org/codingtrain/sketches/5b29Taght
🕹️ Marbling Raster Pixels - Image: editor.p5js.org/codingtrain/sketches/nb5hSYsgX
🕹️ Marbling Raster Pixels - Video: editor.p5js.org/codingtrain/sketches/kVyT302xf
🕹️ Marbling Color - animate ink: editor.p5js.org/codingtrain/sketches/HtEtm1vii
🕹️ handPose Marbling: editor.p5js.org/codingtrain/sketches/EwQhSqGK5
🎥 Previous: ua-cam.com/video/6UlGLB_jiCs/v-deo.html
🎥 All: ua-cam.com/play/PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH.html
References:
🔗 Paper Marbling: en.wikipedia.org/wiki/Paper_marbling
🔗 Tokutaro Yagi: suminagashi.com/meet-the-artisan-tokutaro-yagi/
🔗 Digital Marbling: blog.amandaghassaei.com/2022/10/25/digital-marbling/
📄 Mathematical Marbling: doi.org/10.1109/MCG.2011.51
🔗 Mathematical Marbling: people.csail.mit.edu/jaffer/Marbling/
Videos:
🎥 The Hydrodynamics of Marbling Art: gfm.aps.org/meetings/dfd-2023/649b3ad8199e4c137897831b
🎥 ua-cam.com/video/O5wjXoFrau4/v-deo.html
Related Coding Challenges:
🚂 ua-cam.com/video/OAcXnzRNiCY/v-deo.html
🚂 ua-cam.com/video/BZUdGqeOD0w/v-deo.html
🚂 ua-cam.com/video/alhpH6ECFvQ/v-deo.html
🚂 ua-cam.com/video/IxdGyqhppis/v-deo.html
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/passenger-showcase-guide
🚩 Suggest Topics: github.com/CodingTrain/Suggestion-Box
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: ua-cam.com/users/thecodingtrainjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: thecodingtrain
📸 Instagram: the.coding.train
🎥 ua-cam.com/play/PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH.html
🎥 ua-cam.com/play/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA.html
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecodingtrain.com/issues/new
#mathematicalmarbling #fluidsimulation #p5js #javascript
Переглядів: 63 610

Відео

Coding Challenge 182: Apollonian Gasket Fractal
Переглядів 77 тис.3 місяці тому
Happy Pi Day 2024! In this video, I attempt to create an Apollonian Gasket using the Descartes Circle Theorem and complex numbers. So many circles! Code: thecodingtrain.com/challenges/182-apollonian-gasket 🚀 Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-coding-challenge-182-apollonian-gasket p5.js Web Editor Sketches: 🕹️ Apollonian Gasket: editor.p5js.org/codingtrain/sketches/...
Coding Challenge 181: Weighted Voronoi Stippling
Переглядів 153 тис.3 місяці тому
Stippling is an artistic technique that uses numerous dots to craft an image. In this coding challenge I attempt to implement a weighted Voronoi stippling algorithm with p5.js along with the Delaunay triangulation package from d3.js. Code: thecodingtrain.com/challenges/181-image-stippling 🚀 Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-coding-challenge-181-weighted-voronoi-sti...
Coding Challenge 180: Falling Sand
Переглядів 760 тис.4 місяці тому
It's Genuary 2024! Watch as I attempt to build a falling sand simulation in p5.js using a grid of pixels and simple rules. Code: thecodingtrain.com/challenges/180-falling-sand 🚀 Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-coding-challenge-180-falling-sand p5.js Web Editor Sketches: 🕹️ Falling Sand: editor.p5js.org/codingtrain/sketches/AoH40T6fV 🕹️ Falling Sand with Gravity: ...
Coding Challenge 179: Elementary Cellular Automata
Переглядів 143 тис.5 місяців тому
How is nature hidden in a pile of 0s and 1s? Let's find out by coding a p5.js visualization of the Wolfram Elementary Cellular Automaton! Code: thecodingtrain.com/challenges/179-wolfram-ca 🚀 Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-wolfram-elementary-ca p5.js Web Editor Sketches: 🕹️ Wolfram Cellular Automata: editor.p5js.org/codingtrain/sketches/IE77UYZ-G 🕹️ Wolfram CA wi...
I made a Discord Bot that says Choo Choo
Переглядів 39 тис.7 місяців тому
I made a Discord Bot that says Choo Choo
How to Set Up a Node.js Project
Переглядів 62 тис.7 місяців тому
How to Set Up a Node.js Project
Workflow: Terminal, Shell, Node.js, VSCode
Переглядів 71 тис.7 місяців тому
Workflow: Terminal, Shell, Node.js, VSCode
Creative Coding for Beginners - Full Course!
Переглядів 163 тис.8 місяців тому
Creative Coding for Beginners - Full Course!
All aboard the new Coding Train website!
Переглядів 35 тис.Рік тому
All aboard the new Coding Train website!
Coding Challenge 178: Climate Spiral
Переглядів 85 тис.Рік тому
Coding Challenge 178: Climate Spiral
Coding Challenge 177: Soft Body Physics
Переглядів 149 тис.Рік тому
Coding Challenge 177: Soft Body Physics
Coding Challenge 176: Buffon's Needle
Переглядів 97 тис.Рік тому
Coding Challenge 176: Buffon's Needle
Coding Challenge: 3D on Apple II
Переглядів 321 тис.Рік тому
Coding Challenge: 3D on Apple II
Apple ][ Coding Challenge: Fractal Tree
Переглядів 368 тис.Рік тому
Apple ][ Coding Challenge: Fractal Tree
What was Coding like 40 years ago?
Переглядів 1,7 млнРік тому
What was Coding like 40 years ago?
Coding Challenge 172: Horizontal Directional Drilling
Переглядів 118 тис.Рік тому
Coding Challenge 172: Horizontal Directional Drilling
Coding Challenge 171: Wave Function Collapse
Переглядів 526 тис.Рік тому
Coding Challenge 171: Wave Function Collapse
Coding Challenge 170: The Monty Hall Problem
Переглядів 157 тис.2 роки тому
Coding Challenge 170: The Monty Hall Problem
Local Storage in JavaScript with p5.js
Переглядів 37 тис.2 роки тому
Local Storage in JavaScript with p5.js
The Anal Retentive Coder
Переглядів 42 тис.2 роки тому
The Anal Retentive Coder
2.6 Mutual Attraction - The Nature of Code
Переглядів 113 тис.2 роки тому
2.6 Mutual Attraction - The Nature of Code
Coding Challenge 169: Pi in the Sky Game
Переглядів 86 тис.2 роки тому
Coding Challenge 169: Pi in the Sky Game
Coding Challenge 168: MandelBulb 3D Fractal
Переглядів 366 тис.2 роки тому
Coding Challenge 168: MandelBulb 3D Fractal
Beginner's Guide to Machine Learning in JavaScript with ml5.js
Переглядів 129 тис.2 роки тому
Beginner's Guide to Machine Learning in JavaScript with ml5.js
Coding Challenge 167: Ulam Spiral of Prime Numbers
Переглядів 750 тис.2 роки тому
Coding Challenge 167: Ulam Spiral of Prime Numbers
Coding Challenge 166: ASCII Text Images
Переглядів 1,1 млн2 роки тому
Coding Challenge 166: ASCII Text Images
Coding Challenge 165: Slide Puzzle
Переглядів 164 тис.2 роки тому
Coding Challenge 165: Slide Puzzle
Coding Challenge 164: Bending Time Slitscan
Переглядів 99 тис.2 роки тому
Coding Challenge 164: Bending Time Slitscan
5.7 Path Following (Steering) - Nature of Code
Переглядів 106 тис.2 роки тому
5.7 Path Following (Steering) - Nature of Code

КОМЕНТАРІ

  • @yvanpearson7024
    @yvanpearson7024 23 години тому

    maybe contains function should be called is_within?

  • @KECHENGLIU-oz777
    @KECHENGLIU-oz777 День тому

    This is the third time I watch this video

  • @TomLeg
    @TomLeg День тому

    Butterfly wing might cause a storm, at least in theory, but that's not the sort of thing that causes a volcano eruption.

  • @Churagawa
    @Churagawa День тому

    impossible to watch.

  • @Jilinhall
    @Jilinhall День тому

    this is actually such a smart way to generate a random but smooth-ish curve!

  • @gauravjain183
    @gauravjain183 День тому

    love this!! :)

  • @ManishFrenchStudio
    @ManishFrenchStudio 2 дні тому

    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

  •  2 дні тому

    It seems like your quadtree example doesn't have any improvement over non quadtree approach.

  • @dkyeboah1
    @dkyeboah1 2 дні тому

    Great video as always. Question: If I want to be able to click on an object and drag that same one object to a new location, how do I achieve this?

  • @SMVK
    @SMVK 3 дні тому

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

  • @Muffin--Man
    @Muffin--Man 3 дні тому

    let m=0; function setup() { createCanvas(400, 400); background(0); } function draw() { noStroke(); if(mouseIsPressed) ellipse(mouseX,mouseY,m); } function mousePressed(){ fill(random(255),random(255),random(255),100); m=random(20,50); }

    • @Muffin--Man
      @Muffin--Man 3 дні тому

      let m=0; function setup() { createCanvas(400, 400); background(0); } function draw() { noStroke(); if(mouseIsPressed){ fill(random(255),random(255),random(255),100); ellipse(mouseX,mouseY,random(50)); } } /* function mousePressed(){ fill(random(255),random(255),random(255),100); m=random(20,50); }*/

    • @Muffin--Man
      @Muffin--Man 2 дні тому

      //Each individual ellipse has its own color let balls=[]; function setup() { createCanvas(windowWidth, windowHeight); } function draw() { background(220); for(let t of balls){ fill(random(100,255),random(100,255),random(100,255),200); t.show(); } } function mouseDragged(){ let d=new ball(mouseX,mouseY, random(20,50)); balls.push(d); } class ball{ constructor(x,y,d){ this.x=x; this.y=y; this.d=d; } show(){ // noStroke(); ellipse(this.x,this.y,this.d); } }

  • @ZyPPy_
    @ZyPPy_ 3 дні тому

    why do you need a seperate function for this? its same as just col=(255/600)*mouseX in the case of ranges starting from random values, u can just add the difference

  • @zsoltm2119
    @zsoltm2119 3 дні тому

    Fun video! This channel has a lot of these simulation and math type coding problems, but unfortunately using java or JS isn't the right tool or language. Also as others have said, this particular way of calculating PI is best done with a dense scan of the rectangle, not random points. Lastly, we shouldn't need to use the prior knowledge of Pi ti calculate PI. We can compare the calculated PI at the end of the calculation, it just cannot be part of the calculation. Imagine, I can generate random numbers between 0 and 4 and compare them to the real PI, picking the closest one - this is not an actual algorithm to compute PI. So let's do this correctly. Written in C (not C++ which has complex syntax), which not only is significantly faster than Java but has a cleaner syntax and more options to use long double type for more precision. I've ran the code below for a few minutes to calculate PI to the 9th digit: Calculated PI: 3.1415926525707500000482441659954702117830 Real PI : 3.1415926535897932384626433832795028841971 main() { long long circle = 0; long long r = 2000000; long long r2 = r * r; for (long long y = -r; y < r; y++) { for (long long x = -r; x < r; x++) { if ((x * x + y * y) <= r2) circle++; } } long long total = 4 * r * r; printf("Calculated PI: %.40Lf ", 4.0L * (long double)circle / (long double)total); printf("Real PI : 3.1415926535897932384626433832795028841971 "); } compiled with: gcc main.c -w -O3 -mavx2 Really simple code, right? And for those who don't like C pointers, just use the array notation. Please, these tutorials would be so much better and faster in C. I've seen a lot of videos on this channel, where the resolution was dropped to get performance to be decent or there was a lot of waiting required to get the computed result - The Mandelbrot based PI (at 0.25, 0 location) was a perfect example where using a native language like C would have made it significantly faster.

  • @spongebobseyelashes8548
    @spongebobseyelashes8548 3 дні тому

    I remember using grammars and lexers/parsers in Ocaml last year for college, was great to see it visualized like this!

  • @rodrigoqteixeira
    @rodrigoqteixeira 3 дні тому

    21:37 ✅ "fd": function() {turtle.forward()} ❌ "fd": turtle.forward

  • @spongebobseyelashes8548
    @spongebobseyelashes8548 3 дні тому

    8 years later frameRate() works when you put it in setup but still breaks when I try to use it in draw()

  • @pietroantenucci6415
    @pietroantenucci6415 3 дні тому

    That’s amazing

  • @rodrigoqteixeira
    @rodrigoqteixeira 3 дні тому

    13:40 Why did bro put a POST increment insead of an PRE increment. That returns the OLD value, not the NEW INCREMENTED one.

  • @jehree9850
    @jehree9850 4 дні тому

    The continue keyword is a joke to this man

  • @grimm2376
    @grimm2376 4 дні тому

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

  • @endunry
    @endunry 4 дні тому

    I stopped watching yt and thus also stopped watching your vids in the past years. But i just saw that you still create These amazing vids. You probably wont see this. But your videos where the first contact i had to computer science and it got me hooked on. Since the starfield challenge i Watched and Code every Challenge you posted and learned to Code. Because of this Joy now have a finished cs degree and a job as a software Developer. And i think withou your Videos and without the joy and passion you put into educating others i wont be where i am today... Im really grateful of what you do and i hope that you inspire a lot of people like me in the future. Thank you sir

    • @TheCodingTrain
      @TheCodingTrain 3 дні тому

      This makes me so happy to hear thank you for sharing!

  • @stickmasterlukeRBX
    @stickmasterlukeRBX 4 дні тому

    When we consider each circle filled in, does the Apollonian Gasket have any free space? Also, if I wanted to roll one of the circles, would it lockup or all start spinning?

  • @AegisPupus
    @AegisPupus 4 дні тому

    It would be interesting to use this as a random generator for games, defining the shooting frequency of a run in a boss fight, for example.

  • @farazk9729
    @farazk9729 4 дні тому

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

    • @TheCodingTrain
      @TheCodingTrain 3 дні тому

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

    • @farazk9729
      @farazk9729 3 дні тому

      @TheCodingTrain will do. Thanks, and congrats.

  • @copperhun
    @copperhun 5 днів тому

    holy shit

  • @nkheart4
    @nkheart4 5 днів тому

    My first goal is to learn what you teach, but I also enjoy seeing your reactions when you start coding. I see myself in you, so I love your channel because I feel the same joy you get when coding graphics like this.

  • @cbbcbb6803
    @cbbcbb6803 5 днів тому

    Anyone not interested would not have listened for five minutes. I'm interested, so I'll keep listening. However, I must say, you are a little talkative. Whew. Finally, after the 14+ minutes point, we start getting somewhere and start doing something.

    • @TheCodingTrain
      @TheCodingTrain 5 днів тому

      Feel free to check the time codes to skip around!

  • @evealahin7483
    @evealahin7483 6 днів тому

    Wow!! You're really good at what you do. Actually I learnt about your channel from ChatGPT when I asked it for a good youtube channel for learning coding. And I'm glad I landed here!!!

  • @m-d-nabeel
    @m-d-nabeel 6 днів тому

    I had no idea I was watching this in 2x just thought he was going too fast 🙂

  • @matrixgeg
    @matrixgeg 6 днів тому

    nice

  • @atxmaps
    @atxmaps 6 днів тому

    I can't get past the redirects for Oauth2. I can't even see what you have for that on your screen you go right past it.

    • @TheCodingTrain
      @TheCodingTrain 5 днів тому

      Check the description for a link to the discord where you can get help with this!!

    • @atxmaps
      @atxmaps 5 днів тому

      @@TheCodingTrain it was my fault. I figured it out. Thx!

  • @PorkDude2013
    @PorkDude2013 7 днів тому

    and thank you for making AWESOME videos

  • @Dragondrew5181
    @Dragondrew5181 7 днів тому

    Keep up the good work

  • @makebreakrepeat
    @makebreakrepeat 7 днів тому

    PEMDAS intensifies!!!!

  • @farazk9729
    @farazk9729 7 днів тому

    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,

  • @creatorsremose
    @creatorsremose 7 днів тому

    Coding on Cocaine with Train

  • @killercarrot1029
    @killercarrot1029 7 днів тому

    me making this in python and finding increasingly stupid ways to misspell self. first, slef, and just now, welf :O

  • @otoS97
    @otoS97 7 днів тому

    Amount of time this man lost because Java Script syntax :D

  • @muriithijpeg
    @muriithijpeg 8 днів тому

    i'm getting a "ReferenceError: rect is not defined" what could be the issue lol

    • @Dragondrew5181
      @Dragondrew5181 7 днів тому

      uh share your code link here ill send the prob

  • @ampleman602
    @ampleman602 8 днів тому

    Just found this channel. Wow

  • @Chess_Is_Life_1998
    @Chess_Is_Life_1998 9 днів тому

    Wow, even though this video is 8 years old, it's still incredibly helpful! I've been diving into Unity for about a year and a half now, struggling to grasp game physics, and stumbling upon this channel has been a game-changer. Thank you for creating such valuable content, and making it so visually engaging and easy to follow!

  • @Jeetizded-
    @Jeetizded- 10 днів тому

    let x = 0; let y = 0; let d = 10; function setup() { createCanvas(500, 500); background(230); } function draw() { noStroke(); fill(x, y, 150, 200); circle(x, y, d); x = x + 5; y = y + 5; d = d + 2; } function mousePressed() { x = 0; y = 0; d = 10; background(230); }

  • @PersianUnityCommunity
    @PersianUnityCommunity 10 днів тому

    gooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooood Video

  • @Halleluyah83
    @Halleluyah83 10 днів тому

    Листинг очень быстро идёт)) Больше Эппл-2 ни а что не годен. В топку!)

  • @Solmead
    @Solmead 10 днів тому

    On my Apple Iic I remember double hi res, and how difficult drawing was especially using direct memory access to set the pixels. Then of course there is the entire reason different colors were showing up with your white lines (every 2 pixels together controlled what color they appeared as, with a hidden bit controlling color set one or two for the pixels in that byte. It’s how woz squeezed the color hi res display into 2k of memory.

  • @NeerajGupta-ot9eq
    @NeerajGupta-ot9eq 10 днів тому

    I made this on a rect-grid few years ago and was absolutely in awe of the random patterns it would generate🔥

  • @Halleluyah83
    @Halleluyah83 10 днів тому

    Falling Sand Simulator (FSS) ua-cam.com/video/VLZjd_Y1gJ8/v-deo.htmlsi=2gAKi82gT1BN8Cjv

  • @user-oy8bs9xx3b
    @user-oy8bs9xx3b 10 днів тому

    Goodness this finally makes sense, I have been bouncing off regular expressions for ages. Thank you!

  • @stavros222
    @stavros222 11 днів тому

    I tried this on javascript. On z rotation with only 4 vertices the first dot is not spinning and the entire dots are spinning towards this point. Same with other rotations but with two dots being the center. Why does this happen

  • @nikhileshmarella2687
    @nikhileshmarella2687 11 днів тому

    what is the use of shift in update function what is happening there can anyone explain