Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Circle<CustomDataType>

Class representing a Circle.

example

Without custom data (JS/TS):

const circle = new Circle({ 
x: 100,
y: 100,
r: 32,
});
example

With custom data (JS/TS):

const circle = new Circle({ 
x: 100,
y: 100,
r: 32,
data: {
name: 'Jane',
health: 100,
},
});
example

With custom data (TS):

interface ObjectData {
name: string
health: number
}
const entity: ObjectData = {
name: 'Jane',
health: 100,
};

// Typescript will infer the type of the data property
const circle1 = new Circle({
x: 100,
y: 100,
r: 32,
data: entity,
});

// You can also pass in a generic type for the data property
const circle2 = new Circle<ObjectData>({
x: 100,
y: 100,
r: 32,
});
circle2.data = entity;
example

With custom class extending Circle (implements CircleGeometry (x, y, r)):

// extending inherits the qtIndex method
class Bomb extends Circle {

constructor(props) {
// call super to set x, y, r (and data, if given)
super(props);
this.countdown = props.countdown;
}
}

const bomb = new Bomb({
countdown: 5,
x: 10,
y: 20,
r: 30,
});
example

With custom class and mapping CircleGeometry:

// no need to extend if you don't implement CircleGeometry
class Bomb {

constructor(countdown) {
this.countdown = countdown;
this.position = [10, 20];
this.radius = 30;
}

// add a qtIndex method to your class
qtIndex(node) {
// map your properties to CircleGeometry
return Circle.prototype.qtIndex.call({
x: this.position[0],
y: this.position[1],
r: this.radius,
}, node);
}
}

const bomb = new Bomb(5);
example

With custom object that implements CircleGeometry:

const player = {
name: 'Jane',
health: 100,
x: 10,
y: 20,
r: 30,
qtIndex: Circle.prototype.qtIndex,
});
example

With custom object and mapping CircleGeometry:

// Note: this is not recommended but possible. 
// Using this technique, each object would have it's own qtIndex method.
// Rather add qtIndex to your prototype, e.g. by using classes like shown above.
const player = {
name: 'Jane',
health: 100,
position: [10, 20],
radius: 30,
qtIndex: function(node) {
return Circle.prototype.qtIndex.call({
x: this.position[0],
y: this.position[1],
r: this.radius,
}, node);
},
});

Type parameters

  • CustomDataType = void

    Type of the custom data property (optional, inferred automatically).

Hierarchy

  • Circle

Implements

Index

Constructors

Properties

Methods

Constructors

constructor

  • new Circle<CustomDataType>(props: CircleProps<CustomDataType>): Circle<CustomDataType>
  • Circle Constructor

    Type parameters

    • CustomDataType = void

      Type of the custom data property (optional, inferred automatically).

    Parameters

    Returns Circle<CustomDataType>

Properties

Optional data

data?: CustomDataType

Custom data.

r

r: number

Radius of the circle.

x

x: number

X center of the circle.

y

y: number

Y center of the circle.

Methods

qtIndex

  • Determine which quadrant this circle belongs to.

    Parameters

    Returns number[]

    Array containing indexes of intersecting subnodes (0-3 = top-right, top-left, bottom-left, bottom-right)

Static intersectRect

  • intersectRect(x: number, y: number, r: number, minX: number, minY: number, maxX: number, maxY: number): boolean
  • Check if a circle intersects an axis aligned rectangle.

    beta
    see

    https://yal.cc/rectangle-circle-intersection-test/

    example

    Check if a circle intersects a rectangle:

    const circ = { x: 10, y: 20, r: 30 };
    const rect = { x: 40, y: 50, width: 60, height: 70 };
    const intersect = Circle.intersectRect(
    circ.x,
    circ.y,
    circ.r,
    rect.x,
    rect.y,
    rect.x + rect.width,
    rect.y + rect.height,
    );
    console.log(circle, rect, 'intersect?', intersect);

    Parameters

    • x: number

      circle center X

    • y: number

      circle center Y

    • r: number

      circle radius

    • minX: number

      rectangle start X

    • minY: number

      rectangle start Y

    • maxX: number

      rectangle end X

    • maxY: number

      rectangle end Y

    Returns boolean

    true if circle intersects rectangle

Generated using TypeDoc