3D in TypeScript using Ray Casting

Поділитися
Вставка
  • Опубліковано 25 лис 2024

КОМЕНТАРІ • 144

  • @atxorsatti
    @atxorsatti 5 місяців тому +203

    Can your C do that?

    • @SolathPrime
      @SolathPrime 5 місяців тому +18

      YES

    • @tafadzwamuzira1697
      @tafadzwamuzira1697 5 місяців тому

      Yes actually implemented it myself

    • @UnrealCatDev
      @UnrealCatDev 5 місяців тому +6

      Paper was in C...

    • @atxorsatti
      @atxorsatti 5 місяців тому +45

      It's true what they say about c programmers I guess, they really can't C a joke

    • @UnrealCatDev
      @UnrealCatDev 5 місяців тому +4

      @@atxorsatti or you can't make a joke ;3

  • @ValentinoFilipetto
    @ValentinoFilipetto 4 місяці тому +25

    To achieve the speed of thought of this man is my dream

  • @AyoubBenYedder-c4x
    @AyoubBenYedder-c4x 5 місяців тому +46

    You're the one responsible for making me enjoy programming and math, thank you so much

    • @rubyciide5542
      @rubyciide5542 5 місяців тому +8

      Oh really, he made me rethink my life's decision of being a programmer 💀

    • @me_12-vw1vi
      @me_12-vw1vi 3 місяці тому

      remember when they told us in uni that math is not very important for a programmer, they lied to us, math is everything. every single talented and good programmer knows what math to use and how to use it

    • @rubyciide5542
      @rubyciide5542 3 місяці тому

      @@me_12-vw1vi yes it is 😢

  • @houssembousmaha3615
    @houssembousmaha3615 5 місяців тому +93

    Watching mista azozin in a 13 hour bus trip

    • @Pyronimous
      @Pyronimous 5 місяців тому +10

      It's just 3 hours tho, better watch it at 0.25x to extend it for the whole trip

    • @astrixx
      @astrixx 5 місяців тому +18

      nah 1.75x and watch it 7 times

    • @hedlund
      @hedlund 5 місяців тому +3

      Did you survive?

  • @dfl0-
    @dfl0- 5 місяців тому +7

    Also not too sure if someone mentioned this already, I believe the problem you were having when trying to calculate the stripHeight was that you were assigning t = canvasHeight/perpWalldistance, and then multiplying that by the canvasHeight to get the stripHeight. However, you in fact calculated the stripHeight needed when calculating t, which looking at the values that are divided, is describing the direct proportion of the screen height to the perpendicular distance to the wall; aka. the larger the distance from the wall, the larger the value dividing the screen height so the smaller the strip.
    I very much like the solution you came up with as well with the dot products. I didn’t even think of that at first, but it is very elegant!

  • @Bflatful
    @Bflatful 24 дні тому

    Love so much when he is going to implement the raycasting algorithm and instead of following the explanations in the link he says: "nah too much text" and then comes up with an absolute handmade cracked version of the algorithm. Genius if you ask me.

  • @wagsman9999
    @wagsman9999 5 місяців тому +26

    The coding speed is uncanny. It would have taken me a month to figure this out. Lol. Cool stuff.

    • @TsodingDaily
      @TsodingDaily  5 місяців тому +29

      I actually already explored some of the implementation space of this problem on Twitch live up until the introduction of the snap() function. So it may look pretty fast at first because I roughly knew what I needed to implement, but later as I entered a more unfamiliar space (and also got noticeably tired) I started to slow down.

    • @wagsman9999
      @wagsman9999 5 місяців тому +12

      @@TsodingDaily Still, very impressive!

  • @omnicoinv2
    @omnicoinv2 5 місяців тому +12

    2:28:30 0.5 (the common factor) is being “factored out” with the distributive property of multiplication

  • @JohnWasinger
    @JohnWasinger 5 місяців тому +5

    Love your topic choices! Next up ray casting in the TI-84 calculator basic language.
    I actually wrote a hidden line horizontal 3D plot program for that calculator. 3D plotting was natively supported in the later TI calculator models.

  • @loic.bertrand
    @loic.bertrand 5 місяців тому +17

    29:02 You can also define an iterator on Vector2, so you can spread the object directly :
    class Vector2 {
    constructor(x, y) {
    this.x = x;
    this.y = y;
    }
    *[Symbol.iterator]() {
    yield this.x;
    yield this.y;
    }
    }
    const p1 = new Vector2(5, 9);
    doSomething(...p1);

    • @loic.bertrand
      @loic.bertrand 5 місяців тому +2

      Oops, I think there is no way to type this correctly in Typescript (to indicate the number of elements returned by a generator) :/

  • @SolathPrime
    @SolathPrime 5 місяців тому +29

    A mista azozin doing raytracing on an old soviet refrigerator next

    • @me_12-vw1vi
      @me_12-vw1vi 3 місяці тому

      pretty sure that’s possible with C

    • @SolathPrime
      @SolathPrime 3 місяці тому

      @@me_12-vw1vi
      C

  • @MenilekAlemseged
    @MenilekAlemseged 3 місяці тому +1

    first time being introduced to the topic
    taking notes baby
    tnx for all this man

  • @11WicToR11
    @11WicToR11 5 місяців тому +7

    2:47:30 ....that null check with assignment, this exact thing will be fixed in next version of typescript that already has RC. We had to wait for this just 10 years, so if you have some other issues wait for twenty-forties xD

  • @meanmole3212
    @meanmole3212 5 місяців тому +1

    TS + Canvas is actually pretty cool platform for old-school graphics programming. It is like a modern version of QBASIC where you can prototype graphics before doing implementations with more involved languages and environments.

  • @kamilogorek
    @kamilogorek 5 місяців тому +7

    That was impressive AF, not gonna lie. Well done!

  • @michabay2066
    @michabay2066 5 місяців тому +4

    (2:28:25) The opposite operation of distributing is called factoring.

  • @levvayner4509
    @levvayner4509 5 місяців тому +2

    Ray casting almost got me to give up on programming. It was one of the first books I acquired when first starting to learn C. I was like 14 and the book "Tricks of the Game Programming Gurus" was a really well written book aimed at someone with a few years of C development. I tackled ray casting much later in life, and it was still pretty hard.

  • @rubyciide5542
    @rubyciide5542 5 місяців тому +23

    Zozin OS wen?

  • @DivineDarknesss
    @DivineDarknesss 5 місяців тому

    thanks for the honesty toward the end of the video

  • @kirillvoloshin2065
    @kirillvoloshin2065 5 місяців тому +2

    Легенда! я как раз недавно считал дельты и арктангенсы для канваса)

  • @101abuse
    @101abuse 5 місяців тому +4

    Finally! Another video 😄
    You are my favourite coding channel, i always love to watch your videos they are my only content i watch here on UA-cam alongside with shorts haha ❤

  • @dfl0-
    @dfl0- 5 місяців тому +5

    Perhaps you were talking about the extension Tide for emacs rather than Tidy?

    • @TsodingDaily
      @TsodingDaily  5 місяців тому +5

      omg yes! Thank you so much! I'll add it to the description...

  • @bobtheoutbuilder8552
    @bobtheoutbuilder8552 2 місяці тому

    This is the beginning of a banger game :)

  • @Simon-kw6rq
    @Simon-kw6rq 4 місяці тому +1

    incredible video once again

  • @henrikholst7490
    @henrikholst7490 5 місяців тому

    You can use the implicit form ax + by + c = 0. (a,b) is a normal to the line. Finding an intersection beteen two lines becomes easy as solving a 2x2 system. No special case for k=0.

  • @snatvb
    @snatvb 4 місяці тому

    1:02:00, you know x,y and you can calculate this cell with col/row when you know cell size, when you know cell - you can get cell bounds, in fact, you can use an algorithm similar to line drawing here

  • @movization
    @movization 5 місяців тому +4

    Wow, a perfect bedtime story just in time!

    • @meanmole3212
      @meanmole3212 5 місяців тому +1

      That is a long ass bedtime story.

  • @Stroopwafe1
    @Stroopwafe1 5 місяців тому

    I definitely learned something from this stream. I always thought you needed matrix math to map 2D and 3D

    • @TsodingDaily
      @TsodingDaily  5 місяців тому +4

      I personally view matrices as just a compact way of encoding operations that you could've performed without them.

    • @itsmeagain1415
      @itsmeagain1415 5 місяців тому +2

      @@TsodingDaily brother, math from a computer science pov is just a collection of methods for encoding operations and arithmetic computations in unified frameworks like linear algebra or calculus or whatever field of math

  • @desertfish74
    @desertfish74 5 місяців тому +1

    Classic fish eye effect rears its ugly head again. It took me a long while to find the cosine solution for it in my raycaster code as well.

  • @bhaveshverma8629
    @bhaveshverma8629 5 місяців тому +2

    Very very impressive 🎉

  • @bigmiraclewhips
    @bigmiraclewhips 5 місяців тому +2

    another banger video

  • @tamantaman
    @tamantaman 5 місяців тому

    I can't stop come back to watch it again and again it's extraordinary with such a shitty language. It's really is a question of passion for programming. Hat's off sir /o.

  • @norm6096
    @norm6096 5 місяців тому

    I will try to implement the same with tweaks, thank you, for inspiration and awesome video good sir. :)

  • @acquite
    @acquite 5 місяців тому

    2:28:42 its called "factorisation" where you pull out a "factor" out of the expression

    • @RunningRay9
      @RunningRay9 5 місяців тому

      i would say "factoring out" is more apt

  • @royalzsoftware
    @royalzsoftware 5 місяців тому +3

    Great video ❤ Next up ray casting in terminal with escape codes?😂

  • @SuperKritical
    @SuperKritical 3 місяці тому

    someone needs to really tell me if this man isa too much of a genius or i suck too hard , i can even imagine being thsi fast at coding a RaYcAsTiNg program, oh my god !!

  • @hamiltonianpathondodecahed5236
    @hamiltonianpathondodecahed5236 5 місяців тому +14

    Are we not alive today ?

  • @gmjammin4367
    @gmjammin4367 5 місяців тому +4

    the DDA algorithm! Its a classic.

  • @halfsourlizard9319
    @halfsourlizard9319 5 місяців тому

    2:29:00 ish, ahhhh, yes, the perspective-warping problem! The best part of ray-casting wats ... Literally everyone who's done this from-scratch has facepalmed through this exact situation.

    • @halfsourlizard9319
      @halfsourlizard9319 5 місяців тому

      Interesting that you solved it with linear algebra (dot product) rather than trig (cos) ... Obv, your way is cheaper to compute!

  • @Organ3D
    @Organ3D 5 місяців тому +2

    I’ve only been watching you for 1 month, but I’m increasingly interested in what Linux distribution will you use?

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

    could you show the typed keys in the lives? so i learn emacs also, thx for your awesome and funny videos

  • @postmodernist1848
    @postmodernist1848 4 місяці тому

    1:14:35 why not just check if it's exactly equal to ceil/floor and if so, add 1. This way you can avoid the imprecision introduced by eps (what if p2 + eps is in entirely different cell)

  • @niceguy2097
    @niceguy2097 5 місяців тому

    just loved it

  • @ratherbyexploring4898
    @ratherbyexploring4898 5 місяців тому +1

    Mista azozin you gotta try Julia as a dynamic language. it's soo nice

  • @remrevo3944
    @remrevo3944 5 місяців тому

    I think the playlist is out of order.
    This should be the first entry, but is the second!

    • @TsodingDaily
      @TsodingDaily  5 місяців тому +1

      Thank you! Should be fixed.

    • @remrevo3944
      @remrevo3944 4 місяці тому

      @@TsodingDaily Thanks!

  • @hubstrangers3450
    @hubstrangers3450 5 місяців тому

    Thank you...

  • @lengors7327
    @lengors7327 4 місяці тому

    Any reason to define epsilon instead of using the builtin (into Number) one?

  • @danielcarloschavesboll5156
    @danielcarloschavesboll5156 5 місяців тому +3

    Zozin time!

  • @whatabhi
    @whatabhi 5 місяців тому +2

    TYPESCRIPT LETS GO!!

  • @RandomGeometryDashStuff
    @RandomGeometryDashStuff 5 місяців тому

    01:14:30 will
    if(Number.isInteger(x))return x+Math.sign(dx);
    work?

  • @domprivat3955
    @domprivat3955 5 місяців тому

    Great Vid!

  • @justfly1984
    @justfly1984 5 місяців тому

    That was interesting!

  • @rnoba1
    @rnoba1 4 місяці тому +1

    i had a hard time keeping up with the math :(. does anyone have any resources for me to study?

    • @pudou_
      @pudou_ Місяць тому +1

      It all starts with analytical geometry basics. I think it is the minimum requirement for videos like this. But the video goes deeper than that, for sure.

  • @Mozartenhimer
    @Mozartenhimer 5 місяців тому

    Didn't these things used to be implemented with interger steps?

  • @RenderDragon
    @RenderDragon 5 місяців тому +1

    May I ask, what happened, why these two streams got removed on twitch? Something was leaked or so?

    • @TheMelopeus
      @TheMelopeus 5 місяців тому +1

      They weren't very good quality so Zozin considered it's better to remove them in order to keep the quality of the vods high

    • @RenderDragon
      @RenderDragon 5 місяців тому

      ​@@TheMelopeusHuh, okay

  • @rogo7330
    @rogo7330 5 місяців тому +6

    "Pure C" sounds dumb. I propose C will be called "C" and C++ will be called "HereC".

    • @Kitulous
      @Kitulous 5 місяців тому +1

      as opposed to HolyC I presume?

    • @SolathPrime
      @SolathPrime 5 місяців тому +3

      I said that before and I'm not afraid to say it again
      "C is divine anything else is blasphemy"

    • @skilz8098
      @skilz8098 5 місяців тому

      @@SolathPrime Assembly: Hold my instructions can't you C I'm managing the stack!

    • @skilz8098
      @skilz8098 5 місяців тому

      @@SolathPrime Assembly: But I hold the keys to all of the pointers.

    • @skilz8098
      @skilz8098 5 місяців тому

      @@SolathPrime Assembly: When you pop from my stack frame through the kernel, Korn starts playing. "Life Is Peachy".

  • @bibliusz777
    @bibliusz777 3 місяці тому +1

    isn't this raymarching, not just raycasting?

  • @GevorgGepenyan
    @GevorgGepenyan 3 місяці тому

    Do we have a privacy to make an open source lib or something out of this? If you haven't done that yet.

  • @Gers217
    @Gers217 4 місяці тому

    I didn't know that duckduckgo had access to AI models

  • @luandkg
    @luandkg 5 місяців тому

    ZozinTime ✅

  • @mattshu
    @mattshu 5 місяців тому

    I like the new thumbnail ;)

  • @gempf
    @gempf 2 місяці тому

    7:50 thanks

  • @kotofyt
    @kotofyt 5 місяців тому

    The coolest thing is my app crashes when I have more than 10 instances in tlas in vulkan

  • @11WicToR11
    @11WicToR11 5 місяців тому +7

    isnt it amazing to have and actual editor that helps you? i mean, i use neovim i dont wanna sht on your emacs, its just that i dont understand why wouldnt you use lsp ...you are apparently liking it as well. So why not on other languages? I understand that compiler does the same thing, but i think its much harder to fix things you wrote minutes ago when editor can tell you instantly as you finished that line or even lets you jump through issues in a buffer

    • @TsodingDaily
      @TsodingDaily  5 місяців тому +8

      The only reason you are asking about lsp is because you are literally incapable of understand the rest of the video. Ponder upon this fact and consider doing something about it.

    • @11WicToR11
      @11WicToR11 5 місяців тому +11

      @@TsodingDaily ye, why wouldnt you insult me for asking question (even with a silly typo like that), and i am still watching ...i would forget to ask if i waited to the end of the video. Very low blow, sad to see you are like that

    • @TsodingDaily
      @TsodingDaily  5 місяців тому +15

      Sorry... It's just I spent a lot of time and effort trying to bring interesting and meaningful sessions only end up receiving lots of surface level questions about frameworks, editors and fonts which do not matter. A single question like that is ok, but over time this is a death by thousand cuts and I can't stand it anymore.

    • @11WicToR11
      @11WicToR11 5 місяців тому +7

      @@TsodingDaily taken, if you dont like answering some category of questions, then ...dont? I mean you are not obligated to do so. Its just that you approach to coding is very different from most of the tech youtubers and reason why you doing so is in some sense even more interesting than raycasting (for me), which I ve already seen ton of. But i understand how this instantly leads to whole "ricing your setup topic" which is taken waaaaaaay too serious for no reason, where most of it doesnt make a difference.

    • @TsodingDaily
      @TsodingDaily  5 місяців тому +16

      Thank you for understanding my friend. And sorry again for my reaction. 🫂

  • @catmium7974
    @catmium7974 5 місяців тому

    Cool

  • @enjoyit4273
    @enjoyit4273 5 місяців тому

    next video : porting doom to html canvas

  • @053radadiyanikunj4
    @053radadiyanikunj4 5 місяців тому

    Which text editor is it?

  • @josbexerra8115
    @josbexerra8115 5 місяців тому

    Excelente....se nota que eres un gran progamador

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

    your red t-shirt there is something wired about it i am not sure what it is, just be careful

  • @manucaouette
    @manucaouette 5 місяців тому

    2:09:41 voidf is coming 👀

  • @Blazing_Hotmagma
    @Blazing_Hotmagma 4 місяці тому

    1:50:00

  • @catmium7974
    @catmium7974 5 місяців тому

    Game Dev is one of the hardest shit I guess

  • @Marhaenism1930
    @Marhaenism1930 5 місяців тому +1

    let me in ...

  • @csgonoob9033
    @csgonoob9033 3 місяці тому

    كيف ليش

  • @atxorsatti
    @atxorsatti 5 місяців тому

    Seeing you program in js with you c voice is mind fucking

    • @TsodingDaily
      @TsodingDaily  5 місяців тому +6

      wtf is c voice? are you ok?

    • @atxorsatti
      @atxorsatti 5 місяців тому +2

      @@TsodingDaily listen this is wild
      I would have never thought I'd see you centering a div

    • @atxorsatti
      @atxorsatti 5 місяців тому

      ​@@TsodingDaily Also may I ask why you do ++x and not x++ in for loops?

    • @vk-hm6te
      @vk-hm6te 5 місяців тому

      @@atxorsatti ++x is more efficient (think about what ++x and x++ actually mean); of course, modern compilers optimize x++ and ++x to the same code, but its a good habit nonetheless

    • @atxorsatti
      @atxorsatti 5 місяців тому

      @@sirynka I see, makes sense, thanks for the explanation!

  • @justbill9293
    @justbill9293 5 місяців тому

    Im in history

  • @drsensor
    @drsensor 5 місяців тому

    i've conflicting feeling about typescript

    • @TsodingDaily
      @TsodingDaily  5 місяців тому +2

      It's an alright language given the substrate it has to work in.

    • @EMEKC
      @EMEKC 5 місяців тому

      Personally I've had a nicer experience in general with TS when using Deno, maybe that could help, but I can't guarantee anything 🙃

  • @elvis_gastelum
    @elvis_gastelum 5 місяців тому

    First