CrossBrowdy API documentation

Namespace: CB_Collisions

CB_Collisions

Static class to manage collisions. It will return itself if it is tried to be instantiated.

Source:
To Do:
  • Finish many functions for many more kinds of collisions.
  • Add triangles, polygons, arcs, etc.
  • Add support to more dimensions (at least to 3D).
  • Add lacking "touching" functions, equivalent to the "over" ones.
  • Add a boolean parameter and a border parameter to detect collision just when it hits the border (not when it is inside of the object without touching the border), for "hollow" shapes.
  • Think about adding function aliases with reversed names (for example, "isElementOverPoint" that points to "isPointOverElement", etc.). Think about whether the aliases should or not have some parameters in reversed order.

Methods

<static> getDistancePoints(x, y, x2, y2) → {number|null}

Tells the distance between two points.

Parameters:
Name Type Description
x number

The "X" coordinate of the first point.
y number

The "Y" coordinate of the first point.
x2 number

The "X" coordinate of the second point.
y2 number

The "Y" coordinate of the second point.
Source:
Returns:

Returns the distance between the two points. In the case that it could not be calculated, returns null.

Type
number | null

<static> isCircleOverCircle(centreX, centreY, radius, centreX2, centreY2, radius2) → {boolean}

Tells whether a circle is over another circle.

Parameters:
Name Type Description
centreX number

The "X" coordinate of the center of the first circle.
centreY number

The "Y" coordinate of the center of the first circle.
radius number

The radius of the first circle.
centreX2 number

The "X" coordinate of the center of the second circle.
centreY2 number

The "Y" coordinate of the center of the second circle.
radius2 number

The radius of the second circle.
Source:
Returns:

Returns whether the circle is over the other circle.

Type
boolean

<static> isCircleTouchingCircle(centreX, centreY, radius, centreX2, centreY2, radius2) → {boolean}

Tells whether a circle is touching (maybe over) another circle. This will also return true if they are adjacent (next to each other).

Parameters:
Name Type Description
centreX number

The "X" coordinate of the center of the first circle.
centreY number

The "Y" coordinate of the center of the first circle.
radius number

The radius of the first circle.
centreX2 number

The "X" coordinate of the center of the second circle.
centreY2 number

The "Y" coordinate of the center of the second circle.
radius2 number

The radius of the second circle.
Source:
Returns:

Returns whether the circle is touching (maybe over) the other circle. This will also return true if they are adjacent (next to each other).

Type
boolean

<static> isElementOverElement(element, element2) → {boolean}

Tells whether two given DOM elements are over each other (they will be considered a rectangle).

Parameters:
Name Type Description
element Element

The first DOM element that we want to check (it will be considered a rectangle).
element2 Element

The second DOM element that we want to check (it will be considered a rectangle).
Source:
Returns:

Returns whether the two given DOM elements are over each other (they will be considered a rectangle).

Type
boolean

<static> isElementTouchingElement(element, element2) → {boolean}

Tells whether two given DOM elements are touching each other, maybe over each other (they will be considered a rectangle). This will also return true if they are adjacent (next to each other).

Parameters:
Name Type Description
element Element

The first DOM element that we want to check (it will be considered a rectangle).
element2 Element

The second DOM element that we want to check (it will be considered a rectangle).
Source:
Returns:

Returns whether the two given DOM elements are touching each other, maybe over each other (they will be considered a rectangle). This will also return true if they are adjacent (next to each other).

Type
boolean

<static> isLineOverCircle(lineX1, lineY1, lineX2, lineY2, centreX, centreY, radius) → {boolean}

Tells whether a line (infinite) is over a given circle.

Parameters:
Name Type Description
lineX1 number

The "X" coordinate of a first point of the line.
lineY1 number

The "Y" coordinate of a first point of the line.
lineX2 number

The "X" coordinate of a second point of the line.
lineY2 number

The "Y" coordinate of a second point of the line.
centreX number

The "X" coordinate of the center of the first circle.
centreY number

The "Y" coordinate of the center of the first circle.
radius number

The radius of the first circle.
Source:
Returns:

Returns whether the line (infinite) is over the circle.

Type
boolean

<static> isLineTouchingCircle(lineX1, lineY1, lineX2, lineY2, centreX, centreY, radius) → {boolean}

Tells whether a line (infinite) is touching (maybe over) a given circle.

Parameters:
Name Type Description
lineX1 number

The "X" coordinate of a first point of the line.
lineY1 number

The "Y" coordinate of a first point of the line.
lineX2 number

The "X" coordinate of a second point of the line.
lineY2 number

The "Y" coordinate of a second point of the line.
centreX number

The "X" coordinate of the center of the first circle.
centreY number

The "Y" coordinate of the center of the first circle.
radius number

The radius of the first circle.
Source:
Returns:

Returns whether the line (infinite) is touching (maybe over) the circle.

Type
boolean

<static> isPointOverCircle(x, y, centreX, centreY, radius) → {boolean}

Tells whether a point is over a circle.

Parameters:
Name Type Description
x number

The "X" coordinate of the point.
y number

The "Y" coordinate of the point.
centreX number

The "X" coordinate of the center of the circle.
centreY number

The "Y" coordinate of the center of the circle.
radius number

The radius of the circle.
Source:
Returns:

Returns whether the point is over the circle.

Type
boolean

<static> isPointOverElement(x, y, element) → {boolean}

Tells whether a given point is over a given DOM element (it will be considered a rectangle).

Parameters:
Name Type Description
x number

The "X" coordinate of the point.
y number

The "Y" coordinate of the point.
element Element

The DOM element that we want to check (it will be considered a rectangle).
Source:
Returns:

Returns whether the point is over the given DOM element (it will be considered a rectangle).

Type
boolean

<static> isPointOverEllipse(x, y, centreX, centreY, radiusX, radiusY [, rotation] [, rotationUseDegrees]) → {boolean}

Tells whether a point is over an ellipse.

Parameters:
Name Type Argument Default Description
x number

The "X" coordinate of the point.
y number

The "Y" coordinate of the point.
centreX number

The "X" coordinate of the center of the ellipse.
centreY number

The "Y" coordinate of the center of the ellipse.
radiusX number

The X (horizontal) radius of the ellipse.
radiusY number

The Y (vertical) radius of the ellipse.
rotation number <optional>
 0

The ellipse rotation. The value given will be considered either degrees or radians depending on the given "rotationUseDegrees" parameter (by default, it is considered radians). Not implemented yet!
rotationUseDegrees boolean <optional>
 false

Defines whether the "rotation" given should be considered degrees or not (radians). Not implemented yet!
Source:
To Do:
  • Make the "rotation" parameter work (check https://math.stackexchange.com/questions/426150/what-is-the-general-equation-of-the-ellipse-that-is-not-in-the-origin-and-rotate).
Returns:

Returns whether the point is over the ellipse.

Type
boolean

<static> isPointOverLine(x, y, lineX1, lineY1, lineX2, lineY2 [, tolerance]) → {boolean}

Tells whether a point is over a line (infinite).

Parameters:
Name Type Argument Default Description
x number

The "X" coordinate of the point.
y number

The "Y" coordinate of the point.
lineX1 number

The "X" coordinate of a first point of the line.
lineY1 number

The "Y" coordinate of a first point of the line.
lineX2 number

The "X" coordinate of a second point of the line.
lineY2 number

The "Y" coordinate of a second point of the line.
tolerance number <optional>
 0.001

The amount of loss of precision we can tolerate to consider a collision.
Source:
To Do:
  • Think about using a "width" parameter (apart from the "tolerance" parameter).
  • Create a CB_Collisions.isPointTouchingLine function.
Returns:

Returns whether the point is over the line (infinite).

Type
boolean

<static> isPointOverRectangle(x, y, rectangleX, rectangleY, rectangleWidth, rectangleHeight) → {boolean}

Tells whether a point is over a rectangle.

Parameters:
Name Type Description
x number

The "X" coordinate of the point.
y number

The "Y" coordinate of the point.
rectangleX number

The "X" coordinate of the upper left corner of the rectangle.
rectangleY number

The "Y" coordinate of the upper left corner of the rectangle.
rectangleWidth number

The width of the rectangle.
rectangleHeight number

The height of the rectangle.
Source:
To Do:
  • Think about using a "rotation" parameter to accept rotated rectangles.
Returns:

Returns whether the point is over the rectangle.

Type
boolean

<static> isPointOverSegment(x, y, segmentX1, segmentY1, segmentX2, segmentY2 [, tolerance]) → {boolean}

Tells whether a point is over a line segment.

Parameters:
Name Type Argument Default Description
x number

The "X" coordinate of the point.
y number

The "Y" coordinate of the point.
segmentX1 number

The "X" coordinate of the beginning point of the line.
segmentY1 number

The "Y" coordinate of the beginning point of the line.
segmentX2 number

The "X" coordinate of the end point of the line.
segmentY2 number

The "Y" coordinate of the end point of the line.
tolerance number <optional>
 0.001

The amount of loss of precision we can tolerate to consider a collision.
Source:
To Do:
  • Think about using a "width" parameter (apart from the "tolerance" parameter).
  • Create a CB_Collisions.isPointTouchingSegment function.
Returns:

Returns whether the point is over the line segment.

Type
boolean

<static> isPointTouchingCircle(x, y, centreX, centreY, radius) → {boolean}

Tells whether a point is touching (maybe over) a circle. This will also return true if they are adjacent (next to each other).

Parameters:
Name Type Description
x number

The "X" coordinate of the point.
y number

The "Y" coordinate of the point.
centreX number

The "X" coordinate of the center of the circle.
centreY number

The "Y" coordinate of the center of the circle.
radius number

The radius of the circle.
Source:
Returns:

Returns whether the point is touching (maybe over) the circle. This will also return true if they are adjacent (next to each other).

Type
boolean

<static> isPointTouchingElement(x, y, element) → {boolean}

Tells whether a given point is touching (maybe over) a given DOM element (it will be considered a rectangle). This will also return true if they are adjacent (next to each other).

Parameters:
Name Type Description
x number

The "X" coordinate of the point.
y number

The "Y" coordinate of the point.
element Element

The DOM element that we want to check (it will be considered a rectangle).
Source:
Returns:

Returns whether the point is touching (maybe over) the given DOM element (it will be considered a rectangle). This will also return true if they are adjacent (next to each other).

Type
boolean

<static> isPointTouchingEllipse(x, y, centreX, centreY, radiusX, radiusY [, rotation] [, rotationUseDegrees]) → {boolean}

Tells whether a point is touching (maybe over) a ellipse. This will also return true if they are adjacent (next to each other).

Parameters:
Name Type Argument Default Description
x number

The "X" coordinate of the point.
y number

The "Y" coordinate of the point.
centreX number

The "X" coordinate of the center of the ellipse.
centreY number

The "Y" coordinate of the center of the ellipse.
radiusX number

The X (horizontal) radius of the ellipse.
radiusY number

The Y (vertical) radius of the ellipse.
rotation number <optional>
 0

The ellipse rotation. The value given will be considered either degrees or radians depending on the given "rotationUseDegrees" parameter (by default, it is considered radians). Not implemented yet!
rotationUseDegrees boolean <optional>
 false

Defines whether the "rotation" given should be considered degrees or not (radians). Not implemented yet!
Source:
To Do:
  • Make the "rotation" parameter work (check https://math.stackexchange.com/questions/426150/what-is-the-general-equation-of-the-ellipse-that-is-not-in-the-origin-and-rotate).
Returns:

Returns whether the point is touching (maybe over) the ellipse. This will also return true if they are adjacent (next to each other).

Type
boolean

<static> isPointTouchingRectangle(x, y, rectangleX, rectangleY, rectangleWidth, rectangleHeight) → {boolean}

Tells whether a point is touching (maybe over) a rectangle. This will also return true if they are adjacent (next to each other).

Parameters:
Name Type Description
x number

The "X" coordinate of the point.
y number

The "Y" coordinate of the point.
rectangleX number

The "X" coordinate of the upper left corner of the rectangle.
rectangleY number

The "Y" coordinate of the upper left corner of the rectangle.
rectangleWidth number

The width of the rectangle.
rectangleHeight number

The height of the rectangle.
Source:
To Do:
  • Think about using a "rotation" parameter to accept rotated rectangles.
Returns:

Returns whether the point is touching (maybe over) the rectangle. This will also return true if they are adjacent (next to each other).

Type
boolean

<static> isRectangleOverCircle(centreX, centreY, radius, rectangleX, rectangleY, rectangleWidth, rectangleHeight) → {boolean}

Tells whether a circle is over a given rectangle.

Parameters:
Name Type Description
centreX number

The "X" coordinate of the center of the first circle.
centreY number

The "Y" coordinate of the center of the first circle.
radius number

The radius of the first circle.
rectangleX number

The "X" coordinate of the upper left corner of the first rectangle.
rectangleY number

The "Y" coordinate of the upper left corner of the first rectangle.
rectangleWidth number

The width of the first rectangle.
rectangleHeight number

The height of the first rectangle.
Source:
To Do:
  • Think about using a "rotation" parameter to accept rotated rectangles.
Returns:

Returns whether the circle is over the rectangle.

Type
boolean

<static> isRectangleOverElement(rectangleX, rectangleY, rectangleWidth, rectangleHeight, element) → {boolean}

Tells whether a rectangle is over a given DOM element (it will be considered a rectangle).

Parameters:
Name Type Description
rectangleX number

The "X" coordinate of the upper left corner of the first rectangle.
rectangleY number

The "Y" coordinate of the upper left corner of the first rectangle.
rectangleWidth number

The width of the first rectangle.
rectangleHeight number

The height of the first rectangle.
element Element

The DOM element that we want to check (it will be considered a rectangle).
Source:
To Do:
  • Think about using a "rotation" parameter to accept rotated rectangles.
Returns:

Returns whether the rectangle is over the given DOM element (it will be considered a rectangle).

Type
boolean

<static> isRectangleOverRectangle(rectangleX, rectangleY, rectangleWidth, rectangleHeight, rectangleX2, rectangleY2, rectangleWidth2, rectangleHeight2) → {boolean}

Tells whether a rectangle is over another rectangle.

Parameters:
Name Type Description
rectangleX number

The "X" coordinate of the upper left corner of the first rectangle.
rectangleY number

The "Y" coordinate of the upper left corner of the first rectangle.
rectangleWidth number

The width of the first rectangle.
rectangleHeight number

The height of the first rectangle.
rectangleX2 number

The "X" coordinate of the upper left corner of the second rectangle.
rectangleY2 number

The "Y" coordinate of the upper left corner of the second rectangle.
rectangleWidth2 number

The width of the second rectangle.
rectangleHeight2 number

The height of the second rectangle.
Source:
To Do:
  • Think about using "rotation" and "rotation2" parameters to accept rotated rectangles.
Returns:

Returns whether the rectangle is over the other rectangle.

Type
boolean

<static> isRectangleTouchingCircle(rectangleX, rectangleY, rectangleWidth, rectangleHeight, centreX, centreY, radius) → {boolean}

Tells whether a circle is touching (maybe over) a given rectangle.

Parameters:
Name Type Description
rectangleX number

The "X" coordinate of the upper left corner of the first rectangle.
rectangleY number

The "Y" coordinate of the upper left corner of the first rectangle.
rectangleWidth number

The width of the first rectangle.
rectangleHeight number

The height of the first rectangle.
centreX number

The "X" coordinate of the center of the first circle.
centreY number

The "Y" coordinate of the center of the first circle.
radius number

The radius of the first circle.
Source:
To Do:
  • Think about using a "rotation" parameter to accept rotated rectangles. //* Source (modified): markE at https://stackoverflow.com/questions/21089959/detecting-collision-of-rectangle-with-circle
Returns:

Returns whether the circle is touching (maybe over) the rectangle. This will also return true if they are adjacent (next to each other).

Type
boolean

<static> isRectangleTouchingElement(rectangleX, rectangleY, rectangleWidth, rectangleHeight, element) → {boolean}

Tells whether a rectangle is touching (maybe over) a given DOM element (it will be considered a rectangle). This will also return true if they are adjacent (next to each other).

Parameters:
Name Type Description
rectangleX number

The "X" coordinate of the upper left corner of the first rectangle.
rectangleY number

The "Y" coordinate of the upper left corner of the first rectangle.
rectangleWidth number

The width of the first rectangle.
rectangleHeight number

The height of the first rectangle.
element Element

The DOM element that we want to check (it will be considered a rectangle).
Source:
To Do:
  • Think about using a "rotation" parameter to accept rotated rectangles.
Returns:

Returns whether the rectangle is touching (maybe over) the given DOM element (it will be considered a rectangle). This will also return true if they are adjacent (next to each other).

Type
boolean

<static> isRectangleTouchingRectangle(rectangleX, rectangleY, rectangleWidth, rectangleHeight, rectangleX2, rectangleY2, rectangleWidth2, rectangleHeight2) → {boolean}

Tells whether a rectangle is touching (maybe over) another rectangle. This will also return true if they are adjacent (next to each other).

Parameters:
Name Type Description
rectangleX number

The "X" coordinate of the upper left corner of the first rectangle.
rectangleY number

The "Y" coordinate of the upper left corner of the first rectangle.
rectangleWidth number

The width of the first rectangle.
rectangleHeight number

The height of the first rectangle.
rectangleX2 number

The "X" coordinate of the upper left corner of the second rectangle.
rectangleY2 number

The "Y" coordinate of the upper left corner of the second rectangle.
rectangleWidth2 number

The width of the second rectangle.
rectangleHeight2 number

The height of the second rectangle.
Source:
To Do:
  • Think about using "rotation" and "rotation2" parameters to accept rotated rectangles.
Returns:

Returns whether the rectangle is touching (maybe over) the other rectangle. This will also return true if they are adjacent (next to each other).

Type
boolean