The source code: http://www.tigrisgames.com/src
This is JavaScript collision detection tutorial part 1, the intro to the free course consisting of about 10 tutorials on various collision detection cases including points and rectangles, line intersection, circle (or sphere) against lines and other circles and convex and concave polygons.
In my previous tutorials, the JavaScript sprite engine was nearly completed. But, the game engine is still not capable of collision detection, an important element if you’re planning on making any interesting games that go beyond chess or something where nothing collides with anything.
The rest of the series will follow, but this is an introduction. I hope this helps someone out there.
Original source
23 responses to “Collision Detection JavaScript Tutorial Part 1”
bro thanks for making the videos on js ….. plz make more videos and teach us the new concept…
That odd-even stuff for polygons is genius. Some of these I've pieced together after learning some others, but that one would have taken me weeks of fiddling with. Thanks for the idea.
awesome
Thank you
THE INTRO IS THE WHOLE VIDEO
Nice Job
here is how i remember that even crossings = outside, odd crossings = inside. at every crossing you change from either inside->outside or outside->inside, so 4 crossings would be, inside->outside->inside->outside
Excellent! A physics engine tutorial. I've been working on my own about a week ago. I'll be watching your series as well. Subbed +1
Literally doing the exact same thing. Game/physics engine from Js to C++
Thanks a lot, the visualization of your different collision types is very graphic! 🙂
Great video!
Some links of your sources would have been great though 🙂
OK, so let's say a polygon happens to end up sitting wherever it is you start your line from for the point in polygon test, and it would result in zero intersections. This could count a miss, just like if the point were far enough away that the line never intersected at all, since zero is even. How do we determine a starting point for the line that guarantees at least one intersection between its starting point and the point being tested?
your description of convex/concave is flawed. convex means that no (interior) angle is greater than 180 degrees.
at 13:25 you're pointing at an angle that has nothing to do with the shape being convex/concave.
other than that, great introduction!
What if a point describe line witch intersect a corner? It just counts as intersection for each one lines which makes this corner?
Where can I grab the music in the background?
Note, this is not physics engine. Just the starting point of one in JavaScript. I already have the code, but you can grab the source code for this starting point here. Eventually I'll update it with 2d phys library: http://www.tigrisgames.com/src
Awesome 🙂
What solver are you using?
Nice. Thank you very much.
I enjoy the subject matter, but I feel you could do it more justice if you work on your script a bit more. A quarter of the way through the video all you've really conveyed is that you wrote a JS engine, ported it to C, and it was a lot of work; all things you repeated multiple times. These are not very complex concepts, so you can be fairly sure that most of the people watching will understand them the first time.
In the same period you briefly mentioned an overview of what you want to present, without elaborating on it, and discussed some technical details of the 3d collision detection. I would have really liked to hear more elaboration of what the tutorial is about, and how you will be covering the topic. I think you also missed many chances to refer to things in the video. Most of the time what's being shown has very little to do with what's being discussed.
Have you dissected #box2d ?
very nice!
I just stumbled across your tutorial series for Javascript HTML games, and I'm really glad I found them! And now this pops up, great!
EDIT: Do you know when you'lll be uploading the source code section of this tutorial?