3D in TypeScript using Ray Casting
HTML-код
- Опубликовано: 21 авг 2024
- Offline Session
More Episodes: • Raycasting in TypeScript
References:
- Lode's Computer Graphics Tutorial - Raycasting - lodev.org/cgtu...
- Tsoding - Raycasting in Typescript - github.com/tso...
- The Emacs extension I use - github.com/ana...
Support:
- BTC: bc1qj820dmeazpeq5pjn89mlh9lhws7ghs9v34x9v9
- Pay for my VPS: zap-hosting.co...
![[TF2] The Russian Bear Trap](http://i.ytimg.com/vi/YFNSwz2_rOA/mqdefault.jpg)
Can your C do that?
YES
Yes actually implemented it myself
Paper was in C...
It's true what they say about c programmers I guess, they really can't C a joke
@@atxorsatti or you can't make a joke ;3
To achieve the speed of thought of this man is my dream
You're the one responsible for making me enjoy programming and math, thank you so much
Oh really, he made me rethink my life's decision of being a programmer 💀
@@rubyciide5542 me too bruh, me too 💀
Watching mista azozin in a 13 hour bus trip
It's just 3 hours tho, better watch it at 0.25x to extend it for the whole trip
nah 1.75x and watch it 7 times
Did you survive?
2:28:30 0.5 (the common factor) is being “factored out” with the distributive property of multiplication
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);
Oops, I think there is no way to type this correctly in Typescript (to indicate the number of elements returned by a generator) :/
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!
A mista azozin doing raytracing on an old soviet refrigerator next
first time being introduced to the topic
taking notes baby
tnx for all this man
That was impressive AF, not gonna lie. Well done!
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.
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
The coding speed is uncanny. It would have taken me a month to figure this out. Lol. Cool stuff.
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.
@@TsodingDaily Still, very impressive!
@@TsodingDaily you are a GOD , a literral GOD
Zozin OS wen?
(2:28:25) The opposite operation of distributing is called factoring.
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 RUclips alongside with shorts haha ❤
incredible video once again
Wow, a perfect bedtime story just in time!
That is a long ass bedtime story.
another banger video
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.
Very very impressive 🎉
Легенда! я как раз недавно считал дельты и арктангенсы для канваса)
thanks for the honesty toward the end of the video
Are we not alive today ?
No
@@TsodingDaily rip zozin
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
I definitely learned something from this stream. I always thought you needed matrix math to map 2D and 3D
I personally view matrices as just a compact way of encoding operations that you could've performed without them.
@@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
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.
Great video ❤ Next up ray casting in terminal with escape codes?😂
Perhaps you were talking about the extension Tide for emacs rather than Tidy?
omg yes! Thank you so much! I'll add it to the description...
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.
the DDA algorithm! Its a classic.
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 !!
I’ve only been watching you for 1 month, but I’m increasingly interested in what Linux distribution will you use?
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.
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.
TYPESCRIPT LETS GO!!
2:28:42 its called "factorisation" where you pull out a "factor" out of the expression
i would say "factoring out" is more apt
Zozin time!
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)
I will try to implement the same with tweaks, thank you, for inspiration and awesome video good sir. :)
just loved it
"Pure C" sounds dumb. I propose C will be called "C" and C++ will be called "HereC".
as opposed to HolyC I presume?
I said that before and I'm not afraid to say it again
"C is divine anything else is blasphemy"
@@SolathPrime Assembly: Hold my instructions can't you C I'm managing the stack!
@@SolathPrime Assembly: But I hold the keys to all of the pointers.
@@SolathPrime Assembly: When you pop from my stack frame through the kernel, Korn starts playing. "Life Is Peachy".
I like the new thumbnail ;)
Great Vid!
I think the playlist is out of order.
This should be the first entry, but is the second!
Thank you! Should be fixed.
@@TsodingDaily Thanks!
That was interesting!
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.
Interesting that you solved it with linear algebra (dot product) rather than trig (cos) ... Obv, your way is cheaper to compute!
i had a hard time keeping up with the math :(. does anyone have any resources for me to study?
Do we have a privacy to make an open source lib or something out of this? If you haven't done that yet.
May I ask, what happened, why these two streams got removed on twitch? Something was leaked or so?
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
@@TheMelopeusHuh, okay
Any reason to define epsilon instead of using the builtin (into Number) one?
Didn't these things used to be implemented with interger steps?
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
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.
@@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
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.
@@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.
Thank you for understanding my friend. And sorry again for my reaction. 🫂
ZozinTime ✅
Thank you...
Mista azozin you gotta try Julia as a dynamic language. it's soo nice
2:09:41 voidf is coming 👀
I didn't know that duckduckgo had access to AI models
01:14:30 will
if(Number.isInteger(x))return x+Math.sign(dx);
work?
next video : porting doom to html canvas
Cool
Game Dev is one of the hardest shit I guess
let me in ...
The coolest thing is my app crashes when I have more than 10 instances in tlas in vulkan
isn't this raymarching, not just raycasting?
Im in history
1:50:00
I fear you Mr Azozin have Stockholm's syndrome for JavaScript/Typescript
Which text editor is it?
Emacs
كيف ليش
Seeing you program in js with you c voice is mind fucking
wtf is c voice? are you ok?
@@TsodingDaily listen this is wild
I would have never thought I'd see you centering a div
@@TsodingDaily Also may I ask why you do ++x and not x++ in for loops?
@@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
It basically boils down to the way x++ is computed when you're assigning it to a variable.
x = 0
a = x++
print(a, x) // 0, 1
To make it work like so you need to create a copy of x and return that copy, so when you are incrementing the actual value of x in ram, your 'a' won't change.
But it doesn't really matter in the for loop (as long as you're using x++ as the third param)
Note, if it's the second param, the behavior of loops would be different.
for(int i=-5; i++;) print(i); // 4, 3, 2, 1, 0
for(int i=-5; ++i;) print(i); // 4, 3, 2, 1
P. S. I've omitted minutes as was lazy to type them.
Hope I've not overcomplicated the explanation, and it does make some sense.
First
i've conflicting feeling about typescript
It's an alright language given the substrate it has to work in.
Personally I've had a nicer experience in general with TS when using Deno, maybe that could help, but I can't guarantee anything 🙃
ur ts goes in trash can together with ur c all that bloat ware, move towards real programming in python 👌
C bloatware?
@@freddie224 YESCISBLOATWARE. so what?
Excelente....se nota que eres un gran progamador