Creating Bounding box for different code generated shapes

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 🙂🤞🏽.

Comments

[Maximiliano Arias]

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?

[Vijay Koushik, S. 👨🏽‍💻]

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 star or a rhombus but I don't know how to calculate the largest and smallest coordinates for a shape with curves like a heart yet. Thanks 🙂

[Maximiliano Arias]

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.

[Vijay Koushik, S. 👨🏽‍💻]

Hi @maxarias ,
I draw a triangle similar to this code:

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);//Vertex 1
    ctx.lineTo(100, 75);// Vertex 2
    ctx.lineTo(100, 25);// Vertex 3
    ctx.fill();
  }
}

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:

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    // Cubic curves example
    ctx.beginPath();
    ctx.moveTo(75, 40);
    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
    ctx.fill();
  }
}

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.

[NotTesla]

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.

[Vijay Koushik, S. 👨🏽‍💻]

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 heart cuz, 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.

[NotTesla]

Ah, I see the issue now... This resource might be useful for you pomax.github.io/bezierinfo/#boundi...

[Vijay Koushik, S. 👨🏽‍💻]

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!

[NotTesla]

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