Proximity Graphs with Gravity | Let's Build a Physics Simulation

Playing around with gravity, anti-gravity, and elastic forces!
Start with this: playcode.io/666098
Finished Product: playcode.io/658580
If you haven't seen the pong video, check it out here:
• Let’s Build a Physics ...
Visit MinuteLabs.io for more interactives and simulations!
minutelabs.io
----
Donate
If you get something out of the work I do, consider sponsoring me on either:
Github Sponsors: github.com/sponsors/wellcaffe...
Patreon: / minutelabsio
----
Contents
00:00 Introduction
01:52 Making a higher DPI canvas
04:43 Creating a bunch of nodes
15:40 Min-Max Normalization with lerp()
21:57 Connecting the dots (nodes)
27:12 Distance dependency (the proximity part)
29:54 Fun stuff to try
31:00 Colouring the connections with rescale()
36:14 Minimum distance threshold
37:09 Smoother animation with requestAnimationFrame()
41:16 Faster line drawing
43:54 Adding forces
48:15 Elastic forces
49:50 Gravity
53:32 Parting thoughts
---
Music
"Land of the RetroOnes" by RAGE
"Local Forecast - Elevator Music" by Kevin Macleod

[@Minutelabsio]

As usual post the codeplay links to your creations in the comments! I'll try to answer questions as best I can. Let me know if I should do a live stream where I play around with some stuff that didn't make it into the video!

[@GoldSkulltulaHunter]

I'm really enjoying this series of videos! Keep'em coming, please! THAT SAID, it's really annoying how easily and instantaneously you can spot the errors in your code. I wish I had that superpower (as opposed to just sit down and cry for 3 hours until I find the missing semicolon or whatnot). :D

[@Minutelabsio]

I've been doing this a long time :)... but there are still days like that. The best remedy is a walk and a refill of coffee.

[@PolineChan]

is this done in one take? the way you walk through the project is so smooth.

[@PolineChan]

i'd tune in to live stream if there's no conflict with my schedule. Adding particle collision would be cool

[@Minutelabsio]

Thanks! It was two recording sessions. I do it all at once but smooth things out in the editing process

[@user-cd4bx6uq1y]

2 arrays, each "iteration" change a binary variable that's used in an if check and copy data modified based on other data from on other data and yeah. Then display all that.

[@usama57926]

*Love the tutorial please make more projects like this*

[@chanokim]

Just wanted to leave a comment that I love your video and it was hugely helpful to me. I appreciate it. I am looking forward to next episode for a few months now.

[@Minutelabsio]

Glad you found it helpful!

[@usama57926]

*36:05** Its like quantum fluctuations in subatomic world*

[@bengriffiths9631]

How accurate do you think this is at simulating the many body problem? Also, I'm curious as to if you put relativistic effects in, could you simulate an event horizon beyond which nothing can escape?

[@nayoneva8695]

U r video's just get better and better

[@rusca8]

How do you make the "contents" thing mark itself on the progress bar?

[@rusca8]

oh, the first time must be 0:00

[@flamesdiamond]

47:00 nodes:ZOOM

[@chanokim]

Shouldn't we add/subtract velocity both to node1 and node2? Why add one and subtract the other?

[@Minutelabsio]

It's because to calculate the force we use a displacement (node2.position - node1.position). This points from node1 to node2. If that arrow "pushes" node2, it'll push it away from node1. If we let it push node1 in the same way, it would push node1 towards node2 so they'd go in the same direction. That's why we reverse it for the other node by doing subtract() instead of add()

[@joaquimmello6199]

why banana has potacio always wanted to know

[@Vixifusf-cy4rh]

Vim pelo video do Minuto da terra BRASIL :)

[@chuckinator0]

I’ve used Processing.org to do simulations like this before (e.g. www.khanacademy.org/computing/computer-programming/programming-natural-simulations), but it looks like playcode.io is the real deal when it comes to JavaScript, css, and html5. Processing is nice, but to do these simulations in an environment that is broadly used across the industry is really cool

[@61O_42]

am I the second here?