# Creating Bounding box for different code generated shapes

###
Vijay Koushik, S. π¨π½βπ»
*Updated on *
γ»1 min read

Hello word,

I've been learning html5 game development for a few months and now I'm creating a *breakout game* in **vanilla JS** without any plugins for physics. And I'm also using assets generated through code. I'm doing this to learn basic game physics and to prove to myself that I can develop a game without 3rd party plugins or framework.

I'm using axis aligned bounding box (AABB) for collision detection. It was easy to implement it for the bricks, the paddle and the ball. Next, I wanted to add powerups. I thought about using shapes other than rectangles and circles for power drops like *stars* or *clouds* for powerups and *hearts* for extra lives. I managed to find the code to draw these shapes but, I can't figure out how to create a bounding box for these odd shapes.

I need guidance for programmatically creating bounding boxes for different shapes generated via code. I hope I'm clear with my question ππ€π½.

The software industry moves fast. But if you keep up, you can have an incredible career.

If there is an iteration process during the creation of the shape, keep a record of both the greatest and least values of your x/y coordinates. These will be the bottom left and top right corners of your bounding box.

Hi @nottesla ,

Thanks for your reply π. I think it's a good Idea to use the "greatest and least co-ordinates" for the problem. But, I still need to explore on this for shapes with curves like a

heartcuz, I don't know how to calculate the greatest and least co-ordinates for a curve yet. I'll update the post When I tryout your solution.Ah, I see the issue now... This resource might be useful for you pomax.github.io/bezierinfo/#boundi...

Hi @nottestla,

Thanks for your suggestionππ½, I've started reading the document and It has given me an idea to deal with the problem. And, I think I should refresh my high school maths to clearly understand the documentπ. Thanks again!

No problem, wish I could help you more. Good luck!

Maybe you could keep the largest/smallest x/y coordinates when drawing your shape? Then use those to calculate the width/height of your rectangle?

Hi @maxarias ,

Thanks for your reply π. as mentioned in a previous comment, It would be very easy to track the coordinates for a shape with vertices like a

staror arhombusbut I don't know how to calculate the largest and smallest coordinates for a shape with curves like aheartyet. Thanks πCan you share what you're using the draw the shapes? It might be easier to help you if we can see how you're doing it.

Hi @maxarias ,

I draw a triangle similar to this code:

Here it is easy to apply your method of finding the largest and smallest x, y co-ordinates to compute the bounding box. But, In case of a heart shape, cubic Bezier curves are used as in this code:

I don't know how to find out the highest and lowest x,y values to compute the bounding box. I've started reading the site suggested by @nottesla in their reply. It would be helpful to get your suggestion to this problem.