3D in TypeScript using Ray Casting
ฝัง
- เผยแพร่เมื่อ 18 มิ.ย. 2024
- Offline Session
More Episodes: • Raycasting in TypeScript
References:
- Lode's Computer Graphics Tutorial - Raycasting - lodev.org/cgtutor/raycasting....
- Tsoding - Raycasting in Typescript - github.com/tsoding/raycasting
- The Emacs extension I use - github.com/ananthakumaran/tide
Support:
- BTC: bc1qj820dmeazpeq5pjn89mlh9lhws7ghs9v34x9v9
- Pay for my VPS: zap-hosting.com/en/shop/donat... - วิทยาศาสตร์และเทคโนโลยี
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
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?
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 💀
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!
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!
A mista azozin doing raytracing on an old soviet refrigerator next
2:28:30 0.5 (the common factor) is being “factored out” with the distributive property of multiplication
Zozin OS wen?
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) :/
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.
To achieve the speed of thought of this man is my dream
thanks for the honesty toward the end of the video
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
Very very impressive 🎉
Wow, a perfect bedtime story just in time!
That is a long ass bedtime story.
another banger video
I will try to implement the same with tweaks, thank you, for inspiration and awesome video good sir. :)
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 TH-cam alongside with shorts haha ❤
Легенда! я как раз недавно считал дельты и арктангенсы для канваса)
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
just loved it
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.
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
(2:28:25) The opposite operation of distributing is called factoring.
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.
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...
Great video ❤ Next up ray casting in terminal with escape codes?😂
That was interesting!
Excelente....se nota que eres un gran progamador
Great Vid!
Thank you...
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!!
I like the new thumbnail ;)
ZozinTime ✅
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.
I’ve only been watching you for 1 month, but I’m increasingly interested in what Linux distribution will you use?
the DDA algorithm! Its a classic.
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.
2:28:42 its called "factorisation" where you pull out a "factor" out of the expression
i would say "factoring out" is more apt
Are we not alive today ?
No
@@TsodingDaily rip zozin
Zozin time!
Any reason to define epsilon instead of using the builtin (into Number) one?
Cool
i had a hard time keeping up with the math :(. does anyone have any resources for me to study?
01:14:30 will
if(Number.isInteger(x))return x+Math.sign(dx);
work?
Mista azozin you gotta try Julia as a dynamic language. it's soo nice
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!
Didn't these things used to be implemented with interger steps?
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
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!
I didn't know that duckduckgo had access to AI models
Im in history
2:09:41 voidf is coming 👀
The coolest thing is my app crashes when I have more than 10 instances in tlas in vulkan
Which text editor is it?
Emacs
let me in ...
next video : porting doom to html canvas
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. 🫂
Game Dev is one of the hardest shit I guess
I fear you Mr Azozin have Stockholm's syndrome for JavaScript/Typescript
"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".
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?