Collision Detection Between Rotated Rectangles – HTML5 Canvas

Published: 16 June 2021
on channel: Qixotl LFC
7,733
195

In this video you will learn to how to detect for collisions between rotated rectangles using the Separating Axis Theorem.

In actuality this algorithm will be able to detect for collisions between all polygons providing that they are convex and not conclave. It is just that the demonstration at hand is between two rectangles that can be rotated and moved about in any kind of way, it does not matter how, the collision detection works just the same either way.

📚 Materials/References:
-The finished projects Code Pen page: https://codepen.io/LFCProductions/pen...

🧠 Concepts Covered:
What the separating axis theorem is and how it works.
How to construct a new polygon that reflects another polygon that is rotated.
Rotate a vertex / node around a centre point.

💻 Technologies used:
HTML5 and the canvas API
JavaScript (No jQuery)
CSS (No Bootstrap)

If you enjoyed this video then please consider liking 👍 and subscribing. You would be doing me a huge favour if you did this and it would be greatly appreciated ❤️ by me. Likewise, if you have any queries or comments that you want answered. Then please, don’t hesitate post them down into the comments box below. I would love to hear back from you and will answer all of your questions to the best of my ability.

Stay awesome guys. ❤️

#SeperatingAxisTheorem#ComputerScience#CollisionDetection#HTML5#HTMLCanvas#JavaScript#GameDev#WebDev


Watch video Collision Detection Between Rotated Rectangles – HTML5 Canvas online without registration, duration hours minute second in high quality. This video was added by user Qixotl LFC 16 June 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 7,733 once and liked it 195 people.