![Patt Vira](/img/default-banner.jpg)
- 148
- 203 098
Patt Vira
Thailand
Приєднався 24 бер 2020
✨✨ Experimenting with Code ✨✨
p5.js Coding Tutorial | Flocking Simulation with Quadtree 🐤🐤🐤
🌴 Watch this first if you have no idea what a quadtree is: ua-cam.com/video/7pxyIC_ZEwA/v-deo.html
--
CODE UPDATE:
🖋️ Inside sketch.js - draw() function:
- Created two for loops, instead of one, to separate inserting and querying points in the quadtree. With just one for loop, all the boids did not have the chance to interact with a fully updated quadtree.
🖋️ Inside boid.js - Boid's class & update() method:
- Switched the order of this.velocity.add(this.acceleration) and this.position.add(this.velocity). Velocity should be updated first, then apply to the position vector.
LET'S CONNECT
✨ Sign up for my newsletter at www.pattvira.com
✨ Instagram: pattvira
✨ Twitter: pattvira
--
Links:
🔗 p5.js editor: editor.p5js.org/
🔗 Quadtree (Part 2 of 2) Code: editor.p5js.org/pattvira/sketches/v_tmN-BC5
🔗 Introduction to Creative Coding Playlist: ua-cam.com/play/PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn.html&si=XhvQaojd6cIrxvdn
References:
🔗 Boids by Craig Reynolds: red3d.com/cwr/boids/
🔗 Nature of Code - Chapter 5: Autonomous Agents: natureofcode.com/autonomous-agents/
Credits:
🔗 Thumbnail: raw.githack.com/mrdoob/three.js/dev/examples/webgpu_compute_birds.html
Timestamps:
0:00 Intro
0:23 Quadtree quick recap
0:51 What is a flocking simulation?
02:20 Agenda and approach
05:05 Create a Boid class
16:16 Write an Alignment method
24:39 Write a Cohesion method
32:37 Write a Separation method
40:30 Change from p5.js. to p5.min.js to improve performance
41:59 Create a QuadTree class
45:55 This is where the magic happens ✨
--
CODE UPDATE:
🖋️ Inside sketch.js - draw() function:
- Created two for loops, instead of one, to separate inserting and querying points in the quadtree. With just one for loop, all the boids did not have the chance to interact with a fully updated quadtree.
🖋️ Inside boid.js - Boid's class & update() method:
- Switched the order of this.velocity.add(this.acceleration) and this.position.add(this.velocity). Velocity should be updated first, then apply to the position vector.
LET'S CONNECT
✨ Sign up for my newsletter at www.pattvira.com
✨ Instagram: pattvira
✨ Twitter: pattvira
--
Links:
🔗 p5.js editor: editor.p5js.org/
🔗 Quadtree (Part 2 of 2) Code: editor.p5js.org/pattvira/sketches/v_tmN-BC5
🔗 Introduction to Creative Coding Playlist: ua-cam.com/play/PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn.html&si=XhvQaojd6cIrxvdn
References:
🔗 Boids by Craig Reynolds: red3d.com/cwr/boids/
🔗 Nature of Code - Chapter 5: Autonomous Agents: natureofcode.com/autonomous-agents/
Credits:
🔗 Thumbnail: raw.githack.com/mrdoob/three.js/dev/examples/webgpu_compute_birds.html
Timestamps:
0:00 Intro
0:23 Quadtree quick recap
0:51 What is a flocking simulation?
02:20 Agenda and approach
05:05 Create a Boid class
16:16 Write an Alignment method
24:39 Write a Cohesion method
32:37 Write a Separation method
40:30 Change from p5.js. to p5.min.js to improve performance
41:59 Create a QuadTree class
45:55 This is where the magic happens ✨
Переглядів: 1 255
Відео
First Q&A 👩🎓🚀 programming background, career journey, favorites
Переглядів 80512 годин тому
😊 FYI this is a re-upload LET'S CONNECT ✨ Sign up for my newsletter at www.pattvira.com ✨ Instagram: pattvira ✨ Twitter: pattvira Timestamps: 0:00 Intro 0:40 What is your programming background? 1:55 What has your career looked like so far? 4:28 What was the turning point in your life that made you start posting videos? 6:33 Where are you trying to take it? 8:08 How do...
p5.js Coding Tutorial | Spiral Betty
Переглядів 81719 годин тому
💛 Suggest an Idea: www.pattvira.com/ideas LET'S CONNECT ✨ Sign up for my newsletter at www.pattvira.com ✨ Instagram: pattvira ✨ Twitter: pattvira Links: 🔗 p5.js editor: editor.p5js.org/ 🔗 Spiral Betty Code: editor.p5js.org/pattvira/sketches/-VoHCBGmx 🔗 Introduction to Creative Coding Playlist: ua-cam.com/play/PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn.html&si=XhvQaojd6cIrxvdn ...
p5.js Coding Tutorial | Quadtree 🌴 (how not to crash your program w +1,000 colliding particles!)
Переглядів 2,1 тис.14 днів тому
LET'S CONNECT ✨ Sign up for my newsletter at www.pattvira.com ✨ Instagram: pattvira ✨ Twitter: pattvira Links: 🔗 p5.js editor: editor.p5js.org/ 🔗 Quadtree (Part 1 of 2) Code: editor.p5js.org/pattvira/sketches/ga_GjOZps 🔗 Introduction to Creative Coding Playlist: ua-cam.com/play/PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn.html&si=XhvQaojd6cIrxvdn What to watch next! 🔗 Quadtree -...
1 Hour Code with Me - Quadtree ☁️ ☕️ | real time, lofi hip-hop beats
Переглядів 1,1 тис.14 днів тому
Hi friends! ☁️ ☕️ Welcome to my very first code with me video as I worked through the code for the upcoming quadtree tutorial from start to finish. I struggled quite a bit (- _-") so you will really get to see the super raw behind the scene of how I figured out each of the bugs. Let me know if you like this kind of video and have a productive coding session! LET'S CONNECT ✨ Sign up for my newsl...
p5.js Coding Tutorial | Interactive Vinyl Cover (Image Masking)
Переглядів 1,2 тис.21 день тому
LET'S CONNECT ✨ Sign up for my newsletter at www.pattvira.com ✨ Instagram: pattvira ✨ Twitter: pattvira Links: 🔗 p5.js editor: editor.p5js.org/ 🔗 Interactive Vinyl Cover Code: editor.p5js.org/pattvira/sketches/-GpMFZTic 🔗 Introduction to Creative Coding Playlist: ua-cam.com/play/PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn.html&si=XhvQaojd6cIrxvdn References: 🔗 p5.js mask functi...
p5.js Coding Tutorial | Collage (Image Manipulation)
Переглядів 1,2 тис.28 днів тому
LET'S CONNECT ✨ Sign up for my newsletter at www.pattvira.com ✨ Instagram: pattvira ✨ Twitter: pattvira Links: 🔗 p5.js editor: editor.p5js.org/ 🔗 Collage: 🔗 Vertical Strips: editor.p5js.org/pattvira/sketches/0B3-goH19 🔗 Grid: editor.p5js.org/pattvira/sketches/jTFI1P8Y1 🔗 Grid (Truly Randomized): editor.p5js.org/pattvira/sketches/-hUmZSlcX 🔗 Introduction to Creative Cod...
First Year on Youtube & What's Next!
Переглядів 1,1 тис.Місяць тому
Sharing my reflection on being on youtube for a full year and my plans for the upcoming months! Also, I am doing my very first Q&A so submit your questions either in the comment section or DM me on Instagram @pattvira References: 🔗 My Interview with Daniel Shiffman: ua-cam.com/video/X4XMhpRFKvU/v-deo.html 🔗 @SebastianLague Coding Adventure: Simulating Fluids: ua-cam.com/video/rSKMYc1CQHE/v-deo....
Why Daniel Shiffman is the Funniest Coding Youtuber You'll Meet
Переглядів 7 тис.Місяць тому
Daniel Shiffman. You probably know him from his popular UA-cam channel, the Coding Train @TheCodingTrain , where his infectious enthusiasm and passion for teaching shine through in every video. In this conversation, we discussed Dan's journey into the world of coding, art, and teaching, from his background in math and theater to attending and now teaching at NYU’s Interactive Telecommunications...
p5.js Coding Tutorial | Interactive Fridge Magnets (with ml5.js)
Переглядів 1,3 тис.Місяць тому
LET'S CONNECT ✨ Sign up for my newsletter at www.pattvira.com ✨ Instagram: pattvira ✨ Twitter: pattvira Links: 🔗 p5.js editor: editor.p5js.org/ 🔗 Interactive Fridge Magnets Code: editor.p5js.org/pattvira/sketches/f3nZuIPZi 🔗 Introduction to Creative Coding Playlist: ua-cam.com/play/PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn.html&si=XhvQaojd6cIrxvdn Credits: 🔗 Magnet Poetry by ...
p5.js Coding Tutorial | ASCII Text Images and Videos!
Переглядів 1,5 тис.Місяць тому
LET'S CONNECT ✨ Sign up for my newsletter at www.pattvira.com ✨ Instagram: pattvira ✨ Twitter: pattvira Links: 🔗 p5.js editor: editor.p5js.org/ 🔗 ASCII Art Code: 🔗 With Image: editor.p5js.org/pattvira/sketches/aT8iNvJV1 🔗 With Webcam: editor.p5js.org/pattvira/sketches/pdK2ZxNSe 🔗 With Video: editor.p5js.org/pattvira/sketches/bP1VKw84T 🔗 Introduction to Creative Coding ...
p5.js Coding Tutorial | Falling Letters w Secret Message
Переглядів 669Місяць тому
LET'S CONNECT ✨ Sign up for my newsletter at www.pattvira.com ✨ Instagram: pattvira ✨ Twitter: pattvira Links: 🔗 p5.js editor: editor.p5js.org/ 🔗 Falling Letters w Secret Message Code: editor.p5js.org/pattvira/sketches/3Z_YM-zUx 🔗 Introduction to Creative Coding Playlist: ua-cam.com/play/PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn.html&si=XhvQaojd6cIrxvdn References: 🔗 Wolfram ...
p5.js Coding Tutorial | Album Cover - Unknown Pleasures by Joy Division
Переглядів 1,2 тис.Місяць тому
p5.js Coding Tutorial | Album Cover - Unknown Pleasures by Joy Division
p5.js Coding Tutorial | Music Visualization with FFT 🎵
Переглядів 1,3 тис.Місяць тому
p5.js Coding Tutorial | Music Visualization with FFT 🎵
p5.js Coding Tutorial | Bouncing Wave Typography
Переглядів 9113 місяці тому
p5.js Coding Tutorial | Bouncing Wave Typography
Sound Mini Series | EPISODE 4 - p5. AudioIn
Переглядів 6703 місяці тому
Sound Mini Series | EPISODE 4 - p5. AudioIn
p5.js Coding Tutorial | Rotating Typography
Переглядів 2 тис.3 місяці тому
p5.js Coding Tutorial | Rotating Typography
p5.js Coding Tutorial | Binary Piano 🎵
Переглядів 5463 місяці тому
p5.js Coding Tutorial | Binary Piano 🎵
Sound Mini Series | EPISODE 3 - p5. Envelope
Переглядів 4533 місяці тому
Sound Mini Series | EPISODE 3 - p5. Envelope
Sound Mini Series | EPISODE 2 - Bubbly Keyboard 🎹
Переглядів 7063 місяці тому
Sound Mini Series | EPISODE 2 - Bubbly Keyboard 🎹
Sound Mini Series | EPISODE 1 - p5.Oscillator
Переглядів 1,1 тис.3 місяці тому
Sound Mini Series | EPISODE 1 - p5.Oscillator
5 Lessons I Learned From Making 100 Coding Tutorials
Переглядів 2,2 тис.4 місяці тому
5 Lessons I Learned From Making 100 Coding Tutorials
p5.js Coding Tutorial | Rainbow Pendulum Waves
Переглядів 8084 місяці тому
p5.js Coding Tutorial | Rainbow Pendulum Waves
p5.js Coding Tutorial | Synchronized Rotating Arcs
Переглядів 7144 місяці тому
p5.js Coding Tutorial | Synchronized Rotating Arcs
p5.js Coding Tutorial | Robot Meets Oscillating Waves 🤖🎵
Переглядів 6624 місяці тому
p5.js Coding Tutorial | Robot Meets Oscillating Waves 🤖🎵
p5.js Coding Tutorial | Starfield Effect (Particle Systems 3D)
Переглядів 7204 місяці тому
p5.js Coding Tutorial | Starfield Effect (Particle Systems 3D)
p5.js Coding Tutorial | Fireworks (Particle Systems)
Переглядів 1,1 тис.4 місяці тому
p5.js Coding Tutorial | Fireworks (Particle Systems)
p5.js Coding Tutorial | Basics of Particle Systems
Переглядів 2,7 тис.4 місяці тому
p5.js Coding Tutorial | Basics of Particle Systems
p5.js Coding Tutorial | Pendulum Waves 🎵
Переглядів 1,1 тис.4 місяці тому
p5.js Coding Tutorial | Pendulum Waves 🎵
great tutorial <3
What is the delta time used when you update position with speed? It is fixed or variable? Same with acceleration. Why did you decide to update first position and then velocity instead of first velocity and then speed? How did you checked if those terms work in pixels per second, what test did you perform?
💖💖💖💖
This video is a gift, thankyou!
Added this tot playlist for weekend
💖💖💖💖
This is great! One thing I've recently realised is that a Boid or Particle doesn't *have* a position; it *is* a position. In java this means the Boid class *extends* the PVector class, rather than including an object of that class. Hope this is a useful insight?
No, I don't think that's right. A Boid HAS properties such as position and velocity and maybe color. A Boid IS an Object that represents a bird in a simulation. The position vector is no more the defining property of a Boid than its velocity vector. That is one way that you can tell not to use inheritance here. Another is that PVector has a lot of methods that are not appropriate to call on a Boid, but those methods are exposed if you extend PVector. This is tangential, but in my experience composition (has-a) is almost always easier to implement and maintain than inheritance (is-a). I hope this helps.
Why are Points insertion (into quadTree) and neighbor detection in the same loop? Should Points insertion be in a separate loop?
I think you're right. I thought it was okay to put in the same loop when the visual result gave the same look (one vs two loops), but now realized that inserting and querying points in the same loop meant that not all boids had the chance to interact with a fully updated quadtree. I've updated the code to use a separate loop. Thanks for the catch!
@@pattvira I agree. In the video, you are querying the quadtree before it has been fully populated.
Agree, should be separated. Visually makes no big difference as I didn’t estimated
Hello, I love your channel I've been off programming for a while do you have a video recommendation to get back into it ? Thanks
i like you keep saying 'boids' ! interesting stuff!
how is quad tree better than normal grid storage system ? grid storage also takes O(n) time to store and O(1) fetch time , so how is quad tree better ?
Nice work. I had never heard of Spiral Betty before. I think this would be cool to see what this looks like using a Hilbert curve. Maybe I will do that some time next year.
so nice! will try soon.
Please do! This is one of my favorites.
Nice video! As for new channel ideas: given your mechanical engineering background, maybe a little bit of kinetic art experimenting would be fun?
Great idea! I'll put it on the list.
Good video tutorial
Thank you for this interview!
Nice pillow shade😊
I"m really psyched for Pachinko book recommendation, I finished attorney Woo on netflix a while back and in the 12th episode a character shares a poem by Ahn Do-hyun and even though it was translated to english, I found it profound and it made me want to read more.
Totally recommend! I also love Attorney Woo :)
I explore hand craft hobbies as well, I believe it bring healthy balance for people work a lot in front of screen .
Definitely! Need to limit screen time whenever possible.
💚💚💚
Thanks for sharing!!!
I also recently started crocheting as a hobby! 😄🧶 I also wanted to ask if you do any work other than UA-cam at the moment?
Nice! Crocheting has been a lot of fun to learn. Currently working on content creation full-time!
keep up the great work! Love your tutotials. Do you have a complete course to creative coding?
I'm working on something right now! Hopefully can share soon. You can also check out the Intro to Creative Coding playlist here: ua-cam.com/play/PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn.html&si=BFhAIB42LJ7kCIHv
Good video
Can you show us how the basics of game creation ; like displacement, intersection, firing, attacking, discharging etc !! like supoer Mario Bross !! thank youi !!
Interesting idea! I'll put it on the list.
Thank You Madam Great Content !!
Love to see particles system in photo manipulation effects with WEBGL
Interesting idea. Is there a specific piece you're referring to?
@pattvira no, but any photos that can be viewed in 3d particles. I wish to show the world to the tiniest particles items in 3d close up rendering, I have got something in mind to do; but only in my imagination at a moment.🙂
Your channel has helped me so much. You explain things so clearly! I can’t believe you’ve only been doing this for a year! Keep up the great work! 👏🎉😄
I'm so glad! And thank you--it's been one heck of a year 😃
Great video! Some nice extras that Dan didn't include in his original.
This is very interesting, easy and fun to follow. Thank you very much.
Glad you enjoyed it! Thanks for watching.
Love the video!!! Thanks for taking a look at the suggestion!
You're welcome!
It can be interesting do photo video booths with similar concept
Great channel! Keep going!
0:53
Thamk you !!
Did you get new camera and microphone? :o cause u look even more beautiful in this one ^_^ (i mean in the most platonic way). and really thank you for another great tutorial :D
That was great, thanks! After getting it working, it seems there's lots of unused squares, so I've also implemented a Binary Space Filling Tree. It divides only into two branches, either horizontally or vertically depending on the shape of the boundary. I wonder if that would be even better for optimising my particle system.
This could also be added by Patt Vira What is the code? it's more efficent?
@@oscarbavi7886 Not sure yet. There's quite a burden to construct the tree every frame. Playing with the capacity helps a lot
Excelente explicación, voy a adaptarlo a dart/flutter y me divertiré un buen rato. :) Saludos desde Colombia 👩🚀👨🚀🗺
I had so much fun working on this with you, thank you so much!
where and when we could use quadtree in generative art? can you show examples? thanks and congratulations
@@oscarbavi7886 I’ll be doing just that in the next video with a flocking simulation as an example!
@@pattvira Ok, I'll wait for the next video, but maybe this type of algorithm has more application in generative art in motion, right? I don't know if it could be applied in static generative art like paintings (generating something using this algorithm) to see the result later, I don't know if I'm explaining myself. thanks
@@oscarbavi7886 Ah yes you’re right. The specific application that I’ll be showing is to improve speed performance, so it will help if your piece is dynamic.
Sounds exciting 🎉
awesome!! thank you!
I loved this interview!! thank you ❤
As an artist who works with 50k + particles this is definitely interesting! Haven't had the time to dive in yet but can't wait!
@@JoBarbo Yes! Give it a try and lmk how it improves performance!
Bravo!!
Thanks, new subscriber
You are always make discover and understand sooooo much things. 😮 Thank you, and please continue!
WOW, I was looking for this!!!!. 🔥🔥 Thanks!!!!!
Amazing tutorial! Finally I figure out how these flow fields work!
Wow thanks so much! You have great tutorials! Greetings from brazil 🇧🇷
I hope to create cool visuals for my music. This was eye opening! Will need to study hard. Thanks for the tutorials