loading...
Cover image for Creating Bounding box for different code generated shapes

Creating Bounding box for different code generated shapes

svijaykoushik profile image 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 πŸ™‚πŸ€žπŸ½.

Discussion

pic
Editor guide
Collapse
nottesla profile image
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.

Collapse
svijaykoushik profile image
Vijay Koushik, S. πŸ‘¨πŸ½β€πŸ’» Author

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.

Collapse
nottesla profile image
NotTesla

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

Thread Thread
svijaykoushik profile image
Vijay Koushik, S. πŸ‘¨πŸ½β€πŸ’» Author

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!

Thread Thread
nottesla profile image
NotTesla

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

Collapse
maxarias profile image
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?

Collapse
svijaykoushik profile image
Vijay Koushik, S. πŸ‘¨πŸ½β€πŸ’» Author

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 πŸ™‚

Collapse
maxarias profile image
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.

Thread Thread
svijaykoushik profile image
Vijay Koushik, S. πŸ‘¨πŸ½β€πŸ’» Author

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.