Тёмный

Collision Detection Between Rotated Rectangles - HTML5 Canvas 

Qixotl LFC
Подписаться 1,7 тыс.
Просмотров 7 тыс.
50% 1

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: 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

Наука

Опубликовано:

 

15 июн 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 5   
@rtk2755
@rtk2755 16 дней назад
Thankyou so much for this! Makes so much sense after your explanation
@javiergarciafillol4454
@javiergarciafillol4454 Год назад
It's what I was looking for, also can be interesting in 3D collision objects
@unknown-bx8my
@unknown-bx8my Год назад
Wow, this is very useful. Can you make a video about calculating normal and depth of the collision?
@AroberPothe
@AroberPothe Год назад
can we get more video about dsa math in js Thanks
@llleoha
@llleoha Год назад
It only works for convex shapes not concave. You got this the other way around actually.
Далее
Et toi ? Joue-la comme Pavard ! 🤪#shorts
00:11
Просмотров 2,4 млн
HTML5 Canvas - How to Animate on A Bezier Curve
17:40
Convex Polygon Collisions #1
36:40
Просмотров 126 тыс.
Wall Collision Tile Map JavaScript
22:09
Просмотров 1,8 тыс.
Collision Detection Between Rectangles in JavaScript
5:53
Build Jumping Game - HTML Canvas | Infinite Runner
31:09
GJK Algorithm Explanation & Implementation
7:23
Просмотров 45 тыс.
ИГРОВОВЫЙ НОУТ ASUS ЗА 57 тысяч
25:33