Patt Vira
Patt Vira
  • 148
  • 203 098
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 ✨
Переглядів: 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 | Binary Clock
Переглядів 4433 місяці тому
p5.js Coding Tutorial | Binary Clock
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 🎵

КОМЕНТАРІ

  • @julia__8035
    @julia__8035 17 годин тому

    great tutorial <3

  • @user-rm1dl5vc1p
    @user-rm1dl5vc1p 22 години тому

    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?

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

    💖💖💖💖

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

    This video is a gift, thankyou!

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

    Added this tot playlist for weekend

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

    💖💖💖💖

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

    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?

    • @SteveRowe
      @SteveRowe 22 години тому

      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.

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

    Why are Points insertion (into quadTree) and neighbor detection in the same loop? Should Points insertion be in a separate loop?

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

      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!

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

      @@pattvira I agree. In the video, you are querying the quadtree before it has been fully populated.

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

      Agree, should be separated. Visually makes no big difference as I didn’t estimated

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

    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

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

    i like you keep saying 'boids' ! interesting stuff!

  • @Vivek-qc8qo
    @Vivek-qc8qo День тому

    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 ?

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

    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.

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

    so nice! will try soon.

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

      Please do! This is one of my favorites.

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

    Nice video! As for new channel ideas: given your mechanical engineering background, maybe a little bit of kinetic art experimenting would be fun?

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

      Great idea! I'll put it on the list.

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

    Good video tutorial

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

    Thank you for this interview!

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

    Nice pillow shade😊

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

    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.

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

      Totally recommend! I also love Attorney Woo :)

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

    I explore hand craft hobbies as well, I believe it bring healthy balance for people work a lot in front of screen .

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

      Definitely! Need to limit screen time whenever possible.

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

    💚💚💚

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

    Thanks for sharing!!!

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

    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?

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

      Nice! Crocheting has been a lot of fun to learn. Currently working on content creation full-time!

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

    keep up the great work! Love your tutotials. Do you have a complete course to creative coding?

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

      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

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

    Good video

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

    Can you show us how the basics of game creation ; like displacement, intersection, firing, attacking, discharging etc !! like supoer Mario Bross !! thank youi !!

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

      Interesting idea! I'll put it on the list.

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

    Thank You Madam Great Content !!

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

    Love to see particles system in photo manipulation effects with WEBGL

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

      Interesting idea. Is there a specific piece you're referring to?

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

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

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

    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! 👏🎉😄

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

      I'm so glad! And thank you--it's been one heck of a year 😃

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

    Great video! Some nice extras that Dan didn't include in his original.

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

    This is very interesting, easy and fun to follow. Thank you very much.

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

      Glad you enjoyed it! Thanks for watching.

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

    Love the video!!! Thanks for taking a look at the suggestion!

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

      You're welcome!

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

    It can be interesting do photo video booths with similar concept

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

    Great channel! Keep going!

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

    0:53

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

    Thamk you !!

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

    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

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

    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.

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

      This could also be added by Patt Vira What is the code? it's more efficent?

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

      @@oscarbavi7886 Not sure yet. There's quite a burden to construct the tree every frame. Playing with the capacity helps a lot

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

    Excelente explicación, voy a adaptarlo a dart/flutter y me divertiré un buen rato. :) Saludos desde Colombia 👩‍🚀👨‍🚀🗺

  • @fa77y
    @fa77y 13 днів тому

    I had so much fun working on this with you, thank you so much!

  • @oscarbavi7886
    @oscarbavi7886 14 днів тому

    where and when we could use quadtree in generative art? can you show examples? thanks and congratulations

    • @pattvira
      @pattvira 14 днів тому

      @@oscarbavi7886 I’ll be doing just that in the next video with a flocking simulation as an example!

    • @oscarbavi7886
      @oscarbavi7886 13 днів тому

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

    • @pattvira
      @pattvira 13 днів тому

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

    • @Techne89
      @Techne89 12 днів тому

      Sounds exciting 🎉

  • @MarianaFerreira-vn8th
    @MarianaFerreira-vn8th 15 днів тому

    awesome!! thank you!

  • @MarianaFerreira-vn8th
    @MarianaFerreira-vn8th 15 днів тому

    I loved this interview!! thank you ❤

  • @JoBarbo
    @JoBarbo 15 днів тому

    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!

    • @pattvira
      @pattvira 14 днів тому

      @@JoBarbo Yes! Give it a try and lmk how it improves performance!

  • @per1sher
    @per1sher 15 днів тому

    Bravo!!

  • @The-Martian73
    @The-Martian73 15 днів тому

    Thanks, new subscriber

  • @frederichaudegond5922
    @frederichaudegond5922 15 днів тому

    You are always make discover and understand sooooo much things. 😮 Thank you, and please continue!

  • @JV_Arg
    @JV_Arg 15 днів тому

    WOW, I was looking for this!!!!. 🔥🔥 Thanks!!!!!

  • @okeeycai7549
    @okeeycai7549 17 днів тому

    Amazing tutorial! Finally I figure out how these flow fields work!

  • @leandroalmeida971
    @leandroalmeida971 18 днів тому

    Wow thanks so much! You have great tutorials! Greetings from brazil 🇧🇷

  • @pimath_314
    @pimath_314 18 днів тому

    I hope to create cool visuals for my music. This was eye opening! Will need to study hard. Thanks for the tutorials