Coding Challenge #20: 3D Cloth with toxiclibs

92,913
0
2016-06-09に共有
Boing! Using some particles and some springs with the Toxiclibs physics library, I create a 3D cloth simulation in Processing. Toxiclibs can now be downloaded from Processing's library manager. Code: thecodingtrain.com/challenges/20-3d-cloth-simulati…

🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/sketches/U6n24GfsD

🎥 Previous video:    • Coding Challenge #19: Superellipse  
🎥 Next video:    • Coding Challenge #21: Mandelbrot Set ...  
🎥 All videos:    • Coding Challenges  

References:
📝 Toxiclibs Physics Library: haptic-data.com/toxiclibsjs

Live Stream Archive:
🔴 Coding Train Live 42:    • Live Stream #42: Sound in p5.js + 3D ...  

Related Coding Challenges:
🚂 #62 Plinko with Matter.js:    • Coding Challenge #62.1: Plinko with M...  
🚂 #159 Simple Pendulum Simulation:    • Coding Challenge #159: Simple Pendulu...  
🚂 #160 Spring Forces:    • Coding Challenge #160: Spring Forces  

Timestamps:
0:00 Introduction
1:10 What is Verlet Physics?
1:54 Code! Create Particles
5:27 Add Physics to the Particles
6:17 Add Gravity
8:41 Create Springs between Particles
11:51 Lock Particles
13:26 How to make a Cloth?
14:06 Code! Create a Cloth
20:22 Add Gravity back in
21:30 Make it 3 dimensional
24:06 Pin the Cloth on 4 Corners
28:18 What you can do with Toxiclibs
28:40 Where missing some Springs

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: discord.gg/hPuGy2g
💖 Membership: youtube.com/thecodingtrain/join
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: twitter.com/thecodingtrain
📸 Instagram: www.instagram.com/the.coding.train/

🎥 Coding Challenges:    • Coding Challenges  
🎥 Intro to Programming:    • Start learning here!  

🔗 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/n…

#3d #cloth #physics #simulation #processing #toxiclibs

コメント (21)
  • I compleated this video in 2021 you need to here are all the fixes: - get toxiclibs inside software sketch>Import library>add library > type "Toxiclibs" - when he mentions the ambiguity you need to type 2D or 3D at the end of the words to fix every time. everything else should work exactly as he mentioned great tutorial cheers.
  • The last diagonal springs should not have a resting length of "w", but rather w*sqrt(2), otherwise they'll induce a "diagonal tension" to the whole thing, making this a weird hammock-like shape. You can easily add this in the Spring constructor you added. Thanks so much for the videos! It's really great to follow along and learn!
  • (TLDR;) Thanks so much for posting, and being passionate about coding, and for taking the time to share it around the web! I've started learning to cod because of you, and never thought this could be so cool! (The full story) I found the Purple Rain challenge completely by accident a few weeks ago. Google just put it there on my recommended pages god knows why. I've always wanted to learn to code, because it seemed like a nice skill to have, or just to have some fun, but everyone makes it look so BORING. And there's so much stuff out there about it, I was just completely lost. I learned a tiny bit of html when I was, I don't know, 13, but that's it. It was a bit of a disaster, in fact. After that I always thought "Blergh, maybe it's not for me, you know? I know shit about maths and stuff like that, anyway, and people say to code you need to know math or something?". But after watching that challenge you were so fun, and you made it all look so easy, even if I wasn't understanding sh*t of what you were saying. So I just kept watching. And before I knew I'd watched half the playlist of coding challenges and I was starting to understand a tiny bit of what you were doing. And then I looked up Processing, because why not, and I feel in love, a little bit. Now I'm following the playlists to learn how to code with it, and I'm so, so, so glad I've watched that first vid! Thanks for everything!
  • @041e71
    thank you so much for these entertaining videos. i usually watch while drinking my morning coffee and its always a good start for the day! plus i learn a lot of stuff !
  • @Jimanator
    i noticed the unconnected corner when you first did the springs in 2d, i'm glad you found the problem before the end of the video, even if it was very close.
  • @nmkloster
    I was literally waiting for 27:25 ever since 18:40 - "Yeah, yeah. This is gonna work." I fully acknowledge that this is a weird thing to get excited about :)
  • @Ardavan47
    Love you and your channel, PLEASE make a video about your daily work routine and how you can keep focus
  • I have never seen anyone so high on coding ;-) Keep up the good work, your tuts are excellent!
  • Every time you say "The Grid" I hear it as being spoken by Jeff Bridges in Tron
  • I love your Coding Challenges! They are so exciting! Me watching you code must be about the equivalent of normal people watching baseball :D
  • @xnick_uy
    I'd say toxiclibs has also added some damping force to the springs by default. Otherwise the "cloth" would keep bouncing forever.
  • The strange form of the "cloth" at the end does not come form forgetting the last row, but from the last diagonal spring you added: It now makes it harder for the square to change the shape along that diagonal, but not the second one.
  • Only 56 comments after almost 3 years. Apparently, no teacher forced their class to look at this video with as proof the request to click "like" and write a comment. This simulation looks surprisingly natural the way the cloth bounces and fold.
  • you make me love programming. I wonder how easily you creates things and make formulas to work... great work
  • If you get the error > Cannot find a class or type named "GravityBehavior" < change all instances of "GravityBehavior" to "GravityBehavior2D" and that should give you the green!
  • Amazing video, thanks for making a not so interesting topic for me so fun and interesting :D
  • by simply using the same code for the mousePressed, Dragged, and Released functions in the DraggableParticles example from the toxiclibs example library, you can actually drag the cloth around and have functioning code.. you will have to import a java-iterator library and initialize a few variables though..