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!

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

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

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

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

[@MasterHigure]

4:45 RIP youtube compression algorithm.

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

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

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

[@effzee73]

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

[@iritesh]

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

[@adrian5b]

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

[@ersinmisto81]

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

[@MijeshDeuja]

The quality on these videos are are getting amazing.

[@calebsherman886]

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

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

[@yourteacher4353]

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

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

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

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

[@chefbennyj]

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

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

[@iminni3459]

Nice editing for this video. :-)

[@PilatusAnon]

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

[@Madmadfr]

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

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

this is a good topic, thank you Dan!

[@morphman86]

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

[@RAWRCoding]

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

[@zonetwelve5881]

Oh ya!, I love to see that again.

[@finnk2551]

thank you for making such a great video! love it

[@iradnuriel9087]

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

[@muradeliyev6291]

this guy deserves a medal

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

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

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

[@user-og2lt8ou8i]

_Thanks for having English captions Or subtitles_

[@mattiarecchi4024]

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

[@QuiqueFlowers]

I luv JS and your explanation

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

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

😂

[@mralextacy]

simply amazing

[@lazyyw4081]

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

[@jamriissam5825]

Keep going you do awesome work ;)

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

[@thedankatheist3466]

I love this video 3000

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

[@samueleb.6739]

I WAS WAITING THIS SO BAD

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

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

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

[@Red_Skies]

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

[@TheZenytram]

the sync, pleasures my OCD

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

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

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

[@tezza48]

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

[@FakeFakovick]

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

[@SimonSozzi7258]

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

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

[@matusjakuboc9623]

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

[@johaneric1400]

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

[@EnfermeiroPensador]

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

[@antiphlex]

Light travels at the speed of itself.

[@vidaroni]

Aren't we all, though? 🤔

[@robertlister5192]

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

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

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

[@enverko]

5:36 Black holes are flat confirmed!

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

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

[@brunoharari6454]

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

[@XKCDism]

ace stuff

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

[@programmingwiththotho4641]

nice

[@KaizenCodes]

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

[@rastislavsvoboda4363]

Ďakujeme.

[@TheCodingTrain]

Thank you for the support!

[@ch3ragCS]

why did you divide deltaTheta by (1 - 2GM)/(rc^2)?

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

[@soma7891]

Can you make a video about the wave pattern of an audio?

[@meeshoot3850]

Wouaahhh

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

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

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

[@mina86]

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

[@TheCodingTrain]

Oh, yes, thanks for the tip!

[@olma97]

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

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

[@johnzhang1821]

Now ima going to try to do this in python

[@rutikwankhade337]

What apps you use to edit your videos. Like a video in video background

[@tinylittleanj2]

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

[@jakubkurdziel2407]

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

[@02Inam]

could you do a video to show your setup

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

[@morphman86]

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

[@hamadaag5659]

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”?

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

[@plshalpme173]

i have a serious problem at 3:48 i stop the video, turn on the song and don't come back for a week. please help me

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