Coding Challenge 144: 2D Black Hole Visualization
ฝัง
- เผยแพร่เมื่อ 29 พ.ค. 2024
- Inspired by the recent image of the Powehi m87 black hole from the Event Horizon Telescope, I visualize the behavior or light (photons) following the path of spacetime around the black hole in p5.js. Code: thecodingtrain.com/challenges...
p5.js Web Editor Sketches:
🕹️ Black Hole Visualization - Newtonian Granvitational Attraction: editor.p5js.org/codingtrain/s...
🕹️ Black Hole Visualization - Code with Relativistic Corrections: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #143:...
🎥 Next video: • Coding Challenge #145:...
🎥 All videos: • Coding Challenges
References:
📓 Simulating a Black Hole!: www.asc.ohio-state.edu/orban....
🖌 How to draw a Black Hole: rantonels.github.io/starless/
📰 Astronomers Capture First Image of a Black Hole: eventhorizontelescope.org/
📓 Image of a Spherical Black Hole with Thin Accretion Disk: articles.adsabs.harvard.edu/cg...
Videos:
🎥 How to Understand the Image of a Black Hole: • How to Understand What...
🎥 Slingshot with Gravity!: • Slingshot with Gravity...
🔴 Coding Train Live 176: • Coding Train Live 176:...
Related Coding Challenges:
🚂 #7 Solar System (2D): • Coding Challenge #7: S...
🚂 #8 Solar System (3D): • Coding Challenge #8: S...
Timestamps:
0:00 Introducing today's topic: a black hole visualization
3:25 The elements in the black hole visualization
5:06 The event horizon
6:35 The accretion disk
8:35 What happens when light is traveling towards a black hole?
9:43 The theory of relativity
12:03 Let's Code!
13:52 Make a black hole object
16:57 Draw the accretion disk
18:49 Draw an unstable photon orbit
20:22 Create a photon class
23:25 Add velocity to the photons
25:46 Apply Newtonian gravitational attraction
31:36 Add a trail to the photon
38:17 Corrections to the code
40:14 Add the angle of velocity for the photon
0:00 Conclusion and suggestions for variations
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: th-cam.com/users/thecodingtrainjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / 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-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#blackholevisualization #eventhorizon #accretiondisk #javascript #p5js
Dan, your videos have helped me evolve from knowing basically nothing about Javascript to being offered a full time job in the space of one year. Thank you dude.
This is great but scary. I mean all the fors, and ifs, and vars, and scope pollution...
@@badunius_code can't forget the "this dot"
It's Friday night; wanted to relax and watch a movie, and ended up watching this :D Thank you for the video - you are one of the best!!!
I wish I could relate man, I so so wish!
One way to boost performance could be removing `background(255)` from `draw()` function and `history` from `Photon` class, so that there's no need to redraw the photon trails...
No one
Engineers: c=30 and G=6
Don Grille super great
What are you talking about c = 299752458 m/s *SQUARED*
@@user-or2gl9sq5d r/woooosh
@@johnheikens Speaking of reddit, is there a dedicaated subreddit for Processsing or coding challenges?
I mean those coding challenges that The Coding Train does.
@@user-or2gl9sq5d Actually it's 299792458.
4:45 RIP youtube compression algorithm.
0:25 that synched-up hand gesture looks almost intentional
Luca Felicetti Lmao facts
Was gonna write this comment :D
Oh wow
Whoa, I did not notice this!
The other hand is the same syncing on the other side of the black hole 😆
Wow....You are really a Prodigy in JavaScript....Love your Enthusiasm and Teaching Style.
I'm learning Python atm but his style makes me want to learn JS instead.
Welp I'm still watching his videos and enjoying it so much.
@@Trekfolie l did python for 5 years before I decided to come to JS. I still use python for ML and data stuff and scripting, but Node and P5 are on next level for web and Graphics stuff.
Not sure if anyone has pointed this out yet, but one reason all of your photons may be getting sucked into black hole is that you're not accounting for the timestep when updating velocity, only position. This means that the "force" being exerted on all of your photons is much larger than it should be.
We know what the speed of light is. Now, at 24:04, we know what the sound of light is, too!
That sound he made was so funny, mostly because in his position i'd do exactly the same. That nice smooth animation, just asks for that sound
You could maybe write a ray tracer which does all of that stuff but from the front (send photons out from the "pixel layer" into the third dimension and see where they hit your pixel layer again) to render a picture
This deserves more likes
My new favorite channel on TH-cam. Your stuff's brilliant so glad I found this channel
From a dull drawing to a crazy good simulation, this is what programming is!
The physicist inside me screamed you to set c=1
shoehaze and also g=1 😭
Then you're not really that much of a physicist. We often set c=1 in what's called Natural Units.
well theoretical physicists actually use natural units where c=hbar=1
I love this guy so much, makes JS so joyful.
c=30
G=6
All my engineering teachers are crying...
But i love your videos
I would rather take one constant and make everything else in percentage about the first one
@@williampecoraro653 Yes, that's a great suggestion!
Isn't it like 9.8m/s sQuaREd?
Xnoob Speakable That would be lowercase g, the acceleration of gravity. Uppercase G is the gravitational constant, which doesn’t really directly apply to anything we see, but it is a vital value in calculating most gravitational interactions in the universe. But don’t take my word for it; I don’t know much about it at all.
The quality on these videos are are getting amazing.
"Then, I calculate the change in angle based on the relativistic curvature of space time" -Dan 👏 using JavaScript. 😀 😆 Man I love this channel.
I just wanna say thank you a lot for adding subtitles for hard of hearing. Please do so in the future
Thanks to you, Dan, I was able to understand Derek's video. When I first watched it, I didn't understand it very much
How he is doing the same movement with his hand at 0:24 xD
Lol
ffs i just wanted to stay that
lol what?
I am speechless. You, sir, are a living legend.
YES, I've always wanted to see this! Thank you!
You're the best, bro! Just got the book "The Nature of Code" and I'm enjoying it.
Watched the whole thing, You're a wonderful teacher!
While doing this coding challenge myself I named my class Blackhole and then created a Blackhole object saying, “let bhole;” “bhole = new Blackhole;” I did this for quite a while before my fiancé pointed out that maybe b-hole isn’t the best name for my Blackhole.
Great Video! I used to love making these types of projects in university!
Love those long videos so much!!!!!!!!!!!
Very good video(I actually learned a lot from this video!!)
Nice editing for this video. :-)
10:40 - And hence one of the most terribly drawn whatever-those-squiggly-things-are-called-anyways-because-they're-probably-not-called-curly-brackets-when-they're-drawn-like-that-but-I-might-be-wrong was created!
Atleast he tried
@@satyampandey2222 Tru, tru
😂
Awesome as always, thank you very much for this :)
I love how Veritasium's video on the black hole image was the 5th recommended video in my sidebar
thank you for making such a great video! love it
this is a good topic, thank you Dan!
Oh ya!, I love to see that again.
This was relatively interesting. Here, have a thumbs up!
Can you combine "rendering raycasting" with this? Would be awesome 😍
I'd rather learn physics from you
I would learn anything from my professors if they had 1/3 of the amount of enthusiasm and heart he puts into his videos.
But you couldn't. He doesn't knoe much about physics.
Why is your channel doesn't get millions of views? It's such a good and quality content herw
cus the most people like to do easy things
I watched you do this live - but I'm watching this just to see how you edited all your mistakes and corrections together XD
Edit: Ah, you just refilmed the intro... Well played, Shiffman.
Yeah, I like leaving coding mistakes in, but if I'm getting actual science wrong it's too painful to watch!
this guy deserves a medal
_Thanks for having English captions Or subtitles_
I was about to go and sleep but a coding train notification popped up
I luv JS and your explanation
simply amazing
You are pretty cool man. I don’t use java script but I really like watching your videos and see how you work though the problem. I’m doing some of your challenges in python in tkinter.
I noticed that you said something like "30 pixels per frame.. thats pretty slow for movement". But thats 900 pixels travelled a second, already past the screen!
"I don't play a physicist on youtube" is that a loose Scott Manley reference? :D
Daniel. You are the BEST most annoying teacher I've ever seen. Thank you.
Keep going you do awesome work ;)
So, just for your information, when scientists run simulations of the caliber you want to do they run it on super computers and it takes days to months. My research advisor is doing gamma-ray burst jet simulations and he said it takes several minutes to generate just a few nanoseconds of simulation data. And that generation time will only increase as the jets expand outwards (getting exponentially larger).
Of course a 2 dimensional version with simplified visuals of a "simpler" system (like a black hole) would be much "easier" to generate, but I imagine the level of difficulty scales down about the same amount as the loss in computational power does. So it would still take a long time to generate the data.
Thanks for this feedback and additional info!
Still starting to watch, but i'm sure the challenge will be awesome!
What did you think?
Was very interesting, i think the newtonian physics simulation actually yielded pretty accurate results
Gravitational constant is determined by unit m3 x kg-1 x s-2 or N x m2 x kg-2
hey one thing I do know is the movie interstellar they used allot of data to recreate the black hole. They scaled it up for visual aesthetics but supposedly was pretty accurate. They have a book on that movie and stuff that has it labeled speculative and factual or data driven ect. Their minds would be a good one to pick in how they rendered that prob love your videos!
One way to doing this more fun, is maybe by considering the time dilatation, and with this the photon will slow down and never go inside a certain circle, and with this you litteraly create a Black Hole =)
Owh yeah....i love this when u talk about science and javascript..........😍😍😍😍😍😍😍
I love this video 3000
I think you had it right at 35:40. It just feels right!
you'd probably get a significant performance increase if you did not add to one end of the array an then delete from the other every frame. Instead, keep an index and just replace the item at that index. The way it is now causes you to have to shift every element of the array over every frame after you delete that first element. I'd also preallocate all the memory needed for that array rather than just add to it on demand. That way you won't need to keep reallocating memory for the buffer and copying the items to the new memory location when it grows.
To piggyback off that, you should also be constantly updating the history so it represents a path of vertices using the least number of vertices needed. For example, those lines are straight for a long while so they really only need 2 vertices, whereas you have hundreds all in that straight line.
I WAS WAITING THIS SO BAD
Nice simulation. This is in essence a classical simulation of objects with mass moving towards a body in space, since you used newtonian physics to calculate the dynamics of each object. To calculate how photons would move one would use formulas from General Relativity. The simulation captures the photonring however which is nice to see.
I don't know you, i can't program for shit, would like to change that, and i would like to see a more serious simulation of a black hole, but none of that matters because you're so entertaining and make all this so interesting to watch, i'm amazed!
I think, is possible to use ray marching on top of that to create some kind of shader?
0:25 I like how he does the same arm gesture in both vids
the sync, pleasures my OCD
Did you ever multiply the added gravitational force with your delta time? I feel like you will get different results depending on your time scale (dt) with this solution, since it affects the photons speed but not its attraction to the black hole. I know I'm three years late to this but if I'm wrong I'd be happy to hear an explanation :)
I think is photon should be point not line so we can have batter imagination to the horizon and the photons should came from screen top right and down right to improve the some relation is really work...
And thanks to the tutorial
Hats off to matthieu ;) :D
Is it possible to create a space-bend effect like on this picture:
physicsworld.com/wp-content/uploads/2006/09/LLOYDblack-hole.jpg
So this JS blackhole would warp a background image like this.
I'm pretty sure almost anything is possible to code, if you are a good enough programmer... Could i do it? saddly no, do i believe a good programmer could do that space-bend effect? I am pretty sure they could
5:36 Black holes are flat confirmed!
I have an idea for a coding challenge: Code an animation of the dijkstra algorithm. It should show how the algorithm works, so eventually it looks like some ants walking from one knot to another and they remember how long they need.
Hi I have a question on your 7.6 object intersection how would it work with a square and a circle intersecting?
Amazing, love your vids, I used to do python but you inspired me to try JS and I've been looking it so far!
Only thing I can't figure out is how to copy a variable without them being linked?
Primitive types get copied by value, objects (arrays) are copied by reference ("linked").
There are methods to deep copy arrays or objects but you don't need them that often. Modifying an array data structure usually happens with `.map` or `.reduce`.
If one would use the exact solution of Newtonian gravity (Kepler orbits), so do not compensate that the "photons" speeds up while faling towards the black hole, it can be shown that a particle would just graze the Schwarzschild radius (rs) if it start at sqrt(3)*rs≈1.73*rs. Coincidentally these particles also speed up at rs to a speed of sqrt(3) times the speed of light.
Light travels at the speed of itself.
Aren't we all, though? 🤔
You wouldn't really notice entering inside black hole of that size, except that the starry sky becomes tiny hole above you and then disappears. You could live pretty comfortable for hours, maybe even days, assuming you had space suit that protected you from the radiation. Well, at least according to the current best guess of what inside of black hole is like.
Thanks for this video, May i know which soft wear used for light rings around a black hole, Is this possible on Mathematica tool. Please tell me.
Broooo.... My own task of my p5 chalange was make a black hole model, but u also does it😮
I tried to code the gravitationnal lensing to put random photos of cats as sources. However, the way you find out the geodesique is just some fancy wizzard stuff.
You have to try to make it 3D that is gonna be cool!
nice
Can you make a video about the wave pattern of an audio?
12:25 - 6.67e-11. No need for pow plus using e is likely more precise.
Oh, yes, thanks for the tip!
29:28
Did that one photon just make an oberon maneuver using a black hole as its slingshot centre?
why did you divide deltaTheta by (1 - 2GM)/(rc^2)?
Wouaahhh
ace stuff
13:40 okay, that one actually killed me 🤣
Funny thing, if you could get close enough to the black hole, within the event horizon, you would see something. Nobody knows what, but you would see something.
The light is not fast enough to escape the event horizon, but it can still bounce up a bit before it is sucked back down.
Because we don't know how the light behaves inside the event horizon, we're not really sure how to visualise it, or calculate its behaviour.
What apps you use to edit your videos. Like a video in video background
RUTIK WANKHADE the second video is from his live streams (the long videos). Watch almost any of those and he almost always goes over the set up :)
One question I have, is if OOP is good or bad for CPU performance?
I mean, the program needs to jump around, call methods in methods in methods, get models...
Thank you for an answer :)
that's hard to answer the question because every programming language is different. but some algorithmic optimizations are prevented in OOPs due to encapsulation, and the synergy between 2 particular algorithms that work together is lost behind OO interfaces.
But it might also depend whether the language is compiled or interpreted
Ďakujeme.
Thank you for the support!
Now ima going to try to do this in python
The reason it doesn't work is because in general relativity you have an extra cubed term in the attractive "force" you have to simulate, which results in some really unintuitive orbits very close to the black hole. I really really recommend this amazing interactive applet that simulates the actual equations. www.fourmilab.ch/gravitation/orbits/
In a way those crazy orbits are always possible but hidden because you can't go so close to the centre of mass of say the Earth. Black holes just make it possible to get close enough for those extra terms to start causing rosettes and photon spheres and other weird orbits.
Anyway I'm not a physicist but I went down the rabbit hole trying to simulate this in a shader a while back and I can't remember all of the details, but I found some articles that managed to make me understand what's different.
how can i blur my strokes with p5js?
If you want to keep a trail without a performance hit, couldnt you get rid of the background in the draw loop and instead put it in setup? That way each photon line update is permanent? All you need to do is connect the most recent step to the second most recent. So your history would be maxed at 1 instead of 500 or whatever. In many applications this could make a messy mess but in something like this I see no downside.
Yes, this is a good idea! Using createGraphics() for the photon trails would be a great solution.
In JS you can write numbers like 100_000_000 it means the same as 100000000 but its very better to read
Hi I wonder, where do you get the width and height thing in sketch.js? Because I don’t think I see you declare their value?
This is from the p5.js library, for more: p5js.org.
would be interesting to see this used in a raycaster
te amo
Hi, How can i use P5.js in visual studio code?
I have a question, people always say that objects bend the spacetime mesh but is the spacetime mesh a 2d mesh or a 3d mesh? And if it’s a 3d mesh how does it “bend”?