3d - cant understand raycasting math from tut code -

3d - cant understand raycasting math from tut code -

forgive me in advance ignorance in math . haven't found sources help me else wouldn't have opened topic

i want create simple ray-casting engine in javascript, handled tile scheme wasn't hard , had experience in past.

my sources http://www.permadi.com/tutorial/raycast/index.html , http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/

my problem understanding of math, understand of trig used (in sec link), dont undestand of implantation of raycasting.

like line: // on screen ray go through?

`var rayscreenpos = (-numrays/2 + i) * stripwidth;`

pos of what? xy cordinates? lins on screen?

castsingleray understand of math not slop or "vertical map/wall lines"he talking about.

what need larn understand it? topics in math or programing? books can download or online source?

the best way how understand basic raycasting reading that great article whole.

anyway, equation you're talking step 3 finding walls. part fov (field of view) explaning, result image might divided vertical parts (called strips in opera tutorial), might have different size in px (the opera tutorial uses 4px width).

then you're trying find out x coordinate on screen current stripe in px (the stripe utilize raycast calculations). that's rayscreenpos variable. might determine value (x position in px recall), taking left x axis boundary -numrays/2 (according viewer looking middle stripe, not left one!) plus current stripe i, multiplied size of strip in pixels stripwidth.

then can calculate viewers distance calculated stripe. you'll utilize pythagorean theorem , calculate rayviewdist.

edit

my first raytracer took me few weeks of implementation (so understand despair), after click place. viewer mean 'position of camera'. in opera dev tut fov = 60, stripesize = 4px, number of rays numberofstripesinimage = sizeofimage / sizeofsplice -> 320/4 -> 80 rays.. first rayscreenpos (-80/2 + 0) * 4 -> -160 x position relative screen center @ middle stripe (views looking in center of screen)

3d raycasting