Vijay Koushik, S. 👨🏽‍💻

Posted on Oct 22, 2018 • Updated on Feb 24, 2019

Creating Bounding box for different code generated shapes

#help #gamedev #javascript #aabbcollision

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

Top comments (9)

NotTesla • Oct 22 '18

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. 👨🏽‍💻 • Oct 23 '18

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 • Oct 23 '18

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

Vijay Koushik, S. 👨🏽‍💻 • Oct 26 '18

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 • Oct 26 '18

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

Maximiliano Arias • Oct 22 '18

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. 👨🏽‍💻 • Oct 23 '18

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 • Oct 23 '18

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. 👨🏽‍💻 • Oct 26 '18

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.

DEV Community

Creating Bounding box for different code generated shapes

Top comments (9)

Read next

Latio Team: A community for tech hackers building together

JavaScript’s Fun Twists and How TypeScript Makes It Better

A Guide for Securing Your Node.js Application

Understanding Nested Objects in JavaScript