Coding Challenge 144: 2D Black Hole Visualization

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: kzbin.infojoin
🛒 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

[@visualeyescollective8193]

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.

[@badunius_code]

This is great but scary. I mean all the fors, and ifs, and vars, and scope pollution...

[@Crazyclay78YT]

@@badunius_code can't forget the "this dot"

[@luyuan0]

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

[@rajnishgupta8988]

I wish I could relate man, I so so wish!

[@TheMultifun]

No one Engineers: c=30 and G=6

[@francoissaab374]

Don Grille super great

[@user-or2gl9sq5d]

What are you talking about c = 299752458 m/s *SQUARED*

[@johnheikens]

​@@user-or2gl9sq5d r/woooosh

[@bartekm3878]

@@johnheikens Speaking of reddit, is there a dedicaated subreddit for Processsing or coding challenges? I mean those coding challenges that The Coding Train does.

[@simonmaracine4721]

@@user-or2gl9sq5d Actually it's 299792458.

[@lucafelicetti9605]

0:25 that synched-up hand gesture looks almost intentional

[@jhoan7189]

Luca Felicetti Lmao facts

[@mihajlonesic]

Was gonna write this comment :D

[@muranki1293]

Oh wow

[@TheCodingTrain]

Whoa, I did not notice this!

[@user-qt6ju1hc9x]

The other hand is the same syncing on the other side of the black hole 😆

[@MasterHigure]

4:45 RIP youtube compression algorithm.

[@melvinlijiabraham4165]

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

[@mockingbird3809]

Wow....You are really a Prodigy in JavaScript....Love your Enthusiasm and Teaching Style.

[@Trekfolie]

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.

[@sortof3337]

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

[@effzee73]

My new favorite channel on KZbin. Your stuff's brilliant so glad I found this channel

[@domninin]

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

[@thomasmclean9406]

This deserves more likes

[@kevnar]

We know what the speed of light is. Now, at 24:04, we know what the sound of light is, too!

[@thockinity]

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

[@SirPhysics]

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.

[@MijeshDeuja]

The quality on these videos are are getting amazing.

[@adrian5b]

I love this guy so much, makes JS so joyful.

[@iritesh]

From a dull drawing to a crazy good simulation, this is what programming is!

[@ersinmisto81]

I just wanna say thank you a lot for adding subtitles for hard of hearing. Please do so in the future

[@calebsherman886]

YES, I've always wanted to see this! Thank you!

[@yourteacher4353]

I am speechless. You, sir, are a living legend.

[@Helios.vfx.]

You're the best, bro! Just got the book "The Nature of Code" and I'm enjoying it.

[@cap.blue-97sama99]

Watched the whole thing, You're a wonderful teacher!

[@avi12]

Thanks to you, Dan, I was able to understand Derek's video. When I first watched it, I didn't understand it very much

[@PilatusAnon]

I love how Veritasium's video on the black hole image was the 5th recommended video in my sidebar

[@williampecoraro653]

c=30 G=6 All my engineering teachers are crying... But i love your videos

[@williampecoraro653]

I would rather take one constant and make everything else in percentage about the first one

[@TheCodingTrain]

@@williampecoraro653 Yes, that's a great suggestion!

[@Xnoob545]

Isn't it like 9.8m/s sQuaREd?

[@halusinjackbow8043]

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.

[@muradeliyev6291]

this guy deserves a medal

[@iradnuriel9087]

Love those long videos so much!!!!!!!!!!! Very good video(I actually learned a lot from this video!!)

[@SotamiesTrolli]

The physicist inside me screamed you to set c=1

[@luisangelpantojaarredondo4460]

shoehaze and also g=1 😭

[@thechrisgrice]

Then you're not really that much of a physicist. We often set c=1 in what's called Natural Units.

[@kr4301]

well theoretical physicists actually use natural units where c=hbar=1

[@iminni3459]

Nice editing for this video. :-)

this is a good topic, thank you Dan!

[@finnk2551]

thank you for making such a great video! love it

[@RAWRCoding]

Great Video! I used to love making these types of projects in university!

[@morphman86]

This was relatively interesting. Here, have a thumbs up!

[@Madmadfr]

Awesome as always, thank you very much for this :)

[@chefbennyj]

"Then, I calculate the change in angle based on the relativistic curvature of space time" -Dan 👏 using JavaScript. 😀 😆 Man I love this channel.

[@zonetwelve5881]

Oh ya!, I love to see that again.

[@JonathanChute]

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.

[@TheCodingTrain]

Yeah, I like leaving coding mistakes in, but if I'm getting actual science wrong it's too painful to watch!

[@user-og2lt8ou8i]

_Thanks for having English captions Or subtitles_

[@user-tj4ut8ox9r]

Why is your channel doesn't get millions of views? It's such a good and quality content herw

[@ammarkamel6324]

cus the most people like to do easy things

[@QuiqueFlowers]

I luv JS and your explanation

[@mralextacy]

simply amazing

[@samueleb.6739]

I WAS WAITING THIS SO BAD

[@venido8308]

How he is doing the same movement with his hand at 0:24 xD

[@danieldochev6019]

Lol

[@lthoedt]

ffs i just wanted to stay that

[@Kazutas]

lol what?

[@hrishikeshpatil7901]

I'd rather learn physics from you

[@army6669990101]

I would learn anything from my professors if they had 1/3 of the amount of enthusiasm and heart he puts into his videos.

[@zoltankurti]

But you couldn't. He doesn't knoe much about physics.

[@lazyyw4081]

I was about to go and sleep but a coding train notification popped up

[@thedankatheist3466]

I love this video 3000

[@jamriissam5825]

Keep going you do awesome work ;)

[@zacharymcarthur9013]

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.

[@connorclub6244]

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!

[@guyr989]

Daniel. You are the BEST most annoying teacher I've ever seen. Thank you.

[@Cowboy8625]

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.

[@mattiarecchi4024]

Can you combine "rendering raycasting" with this? Would be awesome 😍

[@ethanhermsey]

Hats off to matthieu ;) :D

[@Saurastus]

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.

[@NobleMarcos]

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!

[@luismiguelgallegogomez8000]

Still starting to watch, but i'm sure the challenge will be awesome!

[@TheCodingTrain]

What did you think?

[@luismiguelgallegogomez8000]

Was very interesting, i think the newtonian physics simulation actually yielded pretty accurate results

[@OrangeC7]

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!

[@satyampandey2222]

Atleast he tried

[@OrangeC7]

@@satyampandey2222 Tru, tru

[@best_beans1732]

😂

[@FakeFakovick]

Broooo.... My own task of my p5 chalange was make a black hole model, but u also does it😮

[@johaneric1400]

Owh yeah....i love this when u talk about science and javascript..........😍😍😍😍😍😍😍

[@tezza48]

"I don't play a physicist on youtube" is that a loose Scott Manley reference? :D

[@BrainKlar]

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!

[@rastislavsvoboda4363]

Ďakujeme.

[@TheCodingTrain]

Thank you for the support!

[@SimonSozzi7258]

I think you had it right at 35:40. It just feels right!

[@XKCDism]

ace stuff

[@Red_Skies]

0:25 I like how he does the same arm gesture in both vids

[@TheZenytram]

the sync, pleasures my OCD

[@JohnPatchesMicallef]

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

[@JohnPatchesMicallef]

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.

[@TheCodingTrain]

Thanks for this feedback and additional info!

[@antiphlex]

Light travels at the speed of itself.

[@vidaroni]

Aren't we all, though? 🤔

[@programmingwiththotho4641]

nice

[@imporbis345]

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.

[@meeshoot3850]

Wouaahhh

[@lellow4188]

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 =)

[@matusjakuboc9623]

Gravitational constant is determined by unit m3 x kg-1 x s-2 or N x m2 x kg-2

[@pyrommph]

I genuinly love the 'let's neglect the generalrelativicity effect of... those photons orbiting the BH. The visuals, however, are really encouraging !! I really like the style of the channel!

[@jingato]

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.

[@jut2357]

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 :)

[@goodclover]

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?

[@A1rPun]

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

[@brunoharari6454]

You have to try to make it 3D that is gonna be cool!

[@gJonii]

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.

[@badunius_code]

13:40 okay, that one actually killed me 🤣

[@enverko]

5:36 Black holes are flat confirmed!

[@M.MaX1]

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

[@kwinvdv]

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.

[@ffggddss]

You include units for c = 299,792,458 m/s, but (even though they're pretty crazy!) you keep neglecting the units for G = 6.67·10⁻¹¹ m³/kg·s². And when you ask us to calculate R_s for M87*, you give M in solar masses, 1.6·10⁹ M⊙, but you also need to give us M⊙ = 1.99·10³⁰ kg. But this is something of a trivium. The main point is, this is a wonderful coding playground! Thanks for all you do, and just keep doing it! PS: The units for G can be verified by noting how, when plugged into that formula, all the units cancel down to just leaving meters behind. Which is correct for a radius. Fred

[@johnzhang1821]

Now ima going to try to do this in python

[@morphman86]

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.

[@jakubkurdziel2407]

In JS you can write numbers like 100_000_000 it means the same as 100000000 but its very better to read

[@GabrelaAmarela]

te amo

[@EnfermeiroPensador]

I think, is possible to use ray marching on top of that to create some kind of shader?

[@argore9709]

would be interesting to see this used in a raycaster

[@arthurs5099]

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.

[@muhammadisraraslam2487]

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.

[@robertlister5192]

Hi I have a question on your 7.6 object intersection how would it work with a square and a circle intersecting?

[@mina86]

12:25 - 6.67e-11. No need for pow plus using e is likely more precise.

[@TheCodingTrain]

Oh, yes, thanks for the tip!

[@boggo3848]

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.

[@ThankYouESM]

Request: Colliding Galaxies

[@kernelpanic2887]

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 :)

[@experimentators8699]

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

[@sil9427]

It would be cool if you could add photons with your mouse

[@42Hz]

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.

[@thockinity]

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

[@olma97]

Could you do this and actually solve the field equations in js? Personally I would do it as a reverse ray-trace

[@morphman86]

29:28 Did that one photon just make an oberon maneuver using a black hole as its slingshot centre?

[@KaizenCodes]

If we didn’t have blackholes, what were we supposed to do with all this light?

[@Melthornal]

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.

[@TheCodingTrain]

Yes, this is a good idea! Using createGraphics() for the photon trails would be a great solution.

[@KhrisnaGunanasurya]

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?

[@TheCodingTrain]

This is from the p5.js library, for more: p5js.org.