Skip to content

Commit

Permalink
Add PointInside to Shapes - Polygon and Ellipse (#48)
Browse files Browse the repository at this point in the history
  • Loading branch information
jthomperoo authored Mar 5, 2020
1 parent 90584d2 commit 256ce7d
Show file tree
Hide file tree
Showing 10 changed files with 302 additions and 9 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added
- Added `FullscreenSystem` to handle fullscreen events and pointer lock.
- `PointerSystem` supports pointer lock through the `FullscreenSystem`.
- `PointInside` function for shapes (`Polygon` and `Ellipse`), determines if a point is inside the polygon.
### Changed
- `KeyboardSystem` messages emitted use JS `KeyboardEvent.code` (physical keyboard) rather than `KeyboardEvent.key` (input character).
- `System` to store `SystemEntities` as a map rather than as an array, for easier random access.
Expand Down
21 changes: 19 additions & 2 deletions docs/reference/classes/ellipse.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ Ellipse is the representation of a 2D Ellipse shape. Can be used for collision d
### Methods

* [FarthestPointInDirection](ellipse.md#farthestpointindirection)
* [PointInside](ellipse.md#pointinside)
* [Transform](ellipse.md#transform)
* [Circle](ellipse.md#static-circle)

Expand All @@ -41,7 +42,7 @@ Name | Type | Default |
------ | ------ | ------ |
`dimensions` | [Vector](vector.md) | - |
`orientation` | number | 0 |
`center` | [Vector](vector.md) | new Vector(0,0) |
`center` | [Vector](vector.md) | new Vector(0, 0) |

**Returns:** *[Ellipse](ellipse.md)*

Expand Down Expand Up @@ -81,6 +82,22 @@ Name | Type |

___

### PointInside

**PointInside**(`point`: [Vector](vector.md)): *boolean*

*Implementation of [IShape](../interfaces/ishape.md)*

**Parameters:**

Name | Type |
------ | ------ |
`point` | [Vector](vector.md) |

**Returns:** *boolean*

___

### Transform

**Transform**(`transform`: [Transform](transform.md)): *[IShape](../interfaces/ishape.md)*
Expand Down Expand Up @@ -108,6 +125,6 @@ Circle returns a new Ellipse in the shape of a circle.
Name | Type | Default | Description |
------ | ------ | ------ | ------ |
`radius` | number | - | Radius of the circle |
`center` | [Vector](vector.md) | new Vector(0,0) | Centre of the circle |
`center` | [Vector](vector.md) | new Vector(0, 0) | Centre of the circle |

**Returns:** *[Ellipse](ellipse.md)*
17 changes: 17 additions & 0 deletions docs/reference/classes/polygon.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ Can be used in collision detection and rendering.
* [FarthestPointInDirection](polygon.md#farthestpointindirection)
* [GetArray](polygon.md#getarray)
* [GetFloat32Array](polygon.md#getfloat32array)
* [PointInside](polygon.md#pointinside)
* [Transform](polygon.md#transform)
* [Rectangle](polygon.md#static-rectangle)

Expand Down Expand Up @@ -92,6 +93,22 @@ The array representation of the polygon

___

### PointInside

**PointInside**(`point`: [Vector](vector.md)): *boolean*

*Implementation of [IShape](../interfaces/ishape.md)*

**Parameters:**

Name | Type |
------ | ------ |
`point` | [Vector](vector.md) |

**Returns:** *boolean*

___

### Transform

**Transform**(`transform`: [Transform](transform.md)): *[Polygon](polygon.md)*
Expand Down
19 changes: 19 additions & 0 deletions docs/reference/interfaces/ishape.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ for the shape to be used with collision detection.
### Methods

* [FarthestPointInDirection](ishape.md#farthestpointindirection)
* [PointInside](ishape.md#pointinside)
* [Transform](ishape.md#transform)

## Methods
Expand All @@ -41,6 +42,24 @@ The farthest point in the direction provided

___

### PointInside

**PointInside**(`point`: [Vector](../classes/vector.md)): *boolean*

PointInside determines if a point provided is within the shape or not.

**Parameters:**

Name | Type | Description |
------ | ------ | ------ |
`point` | [Vector](../classes/vector.md) | The point to check if it is inside the shape |

**Returns:** *boolean*

If the point is inside the shape, true = inside, false = outside

___

### Transform

**Transform**(`transform`: [Transform](../classes/transform.md)): *[IShape](ishape.md)*
Expand Down
37 changes: 37 additions & 0 deletions docs/standard/shapes.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
# Shapes

Shapes are fundamental to the game engine, used in rendering sprites, determining collisions, and more. All shapes implement the `IShape` interface, which provides some useful functions:

## IShape

```typescript
Transform(transform: Transform): IShape;
FarthestPointInDirection(direction: Vector): Vector;
PointInside(point: Vector): boolean;
```

- `Transform` takes a transform and applies it to shape; translating, rotating and scaling a shape.
- `FarthestPointInDirection` returns the point that is farthest in the direction provided. Used in the GJK algorithm for collision detection.
- `PointInside` determines if a point provided is within the shape or not.

See the [API reference for more details](../../reference/interfaces/ishape).

## Polygon

The `Polygon` is a series of arbitrary points that make up a shape. It can be declared by passing an array of points to the constructor. For example:
```typescript
const triangle = new Polygon([
new Vector(-1, -1),
new Vector(1, -1),
new Vector(0, 1)
]);
```
See the [API reference for more details](../../reference/classes/polygon).

## Ellipse

The `Ellipse` is an elliptical representation of a shape, for example an oval or a circle. It is represented by a center position, dimensions, and a rotation. For example:
```typescript
const oval = new Ellipse(new Vector(4, 2), Math.PI / 4, new Vector(2, 2));
```
See the [API reference for more details](../../reference/classes/ellipse).
131 changes: 131 additions & 0 deletions src/standard/shape/ellipse.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
/*
Copyright 2020 JamJar Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import Vector from "../../geometry/vector";
import Ellipse from "./ellipse";
import Transform from "../transform/transform";

describe("Ellise - FarthestPointInDirection", () => {
type TestTuple = [string, Vector, Ellipse, Vector];
test.each<TestTuple>([
[
"Circle, most upwards point",
new Vector(0, 1),
new Ellipse(new Vector(1, 1), 0, new Vector(0, 0)),
new Vector(0, 1)
],
[
"Circle, top right point",
new Vector(0.7071067811865476, 0.7071067811865475),
new Ellipse(new Vector(1, 1), 0, new Vector(0, 0)),
new Vector(1, 1)
],
[
"Oval, right point",
new Vector(4, 0),
new Ellipse(new Vector(4, 2), 0, new Vector(0, 0)),
new Vector(1, 0)
],
[
"Oval, rotated 45 degrees, right point",
new Vector(1.4142135623730954, 0),
new Ellipse(new Vector(4, 2), Math.PI / 4, new Vector(0, 0)),
new Vector(1, 0)
],
])("%p", (description: string, expected: Vector, ellipse: Ellipse, direction: Vector) => {
const result = ellipse.FarthestPointInDirection(direction);
expect(result.x).toBeCloseTo(expected.x, 5);
expect(result.y).toBeCloseTo(expected.y, 5);
});
});

describe("Ellipse - Transform", () => {
type TestTuple = [string, Ellipse, Ellipse, Transform];
test.each<TestTuple>([
[
"Scale circle by 5",
new Ellipse(new Vector(10, 10), 0, new Vector(0, 0)),
new Ellipse(new Vector(2, 2), 0, new Vector(0, 0)),
new Transform(new Vector(0, 0), new Vector(5, 5))
],
[
"Translate circle up 3, left 2",
new Ellipse(new Vector(2, 2), 0, new Vector(3, -2)),
new Ellipse(new Vector(2, 2), 0, new Vector(0, 0)),
new Transform(new Vector(3, -2), new Vector(1, 1))
],
[
"Rotate oval by 45 degrees",
new Ellipse(new Vector(2, 4), Math.PI / 4, new Vector(0, 0)),
new Ellipse(new Vector(2, 4), 0, new Vector(0, 0)),
new Transform(new Vector(0, 0), new Vector(1, 1), Math.PI / 4)
],
[
"Scale, Translate and Rotate oval by (2,3), (-3,10), and 45 degrees",
new Ellipse(new Vector(4, 12), Math.PI / 4, new Vector(8.31370849898476, 7.171572875253811)),
new Ellipse(new Vector(2, 4), 0, new Vector(5, 2)),
new Transform(new Vector(-3, 10), new Vector(2, 3), Math.PI / 4)
],
])("%p", (description: string, expected: Ellipse, ellipse: Ellipse, transform: Transform) => {
expect(ellipse.Transform(transform)).toEqual(expected)
});
});

describe("Ellipse - PointInside", () => {
type TestTuple = [string, boolean, Ellipse, Vector];
test.each<TestTuple>([
[
"Circle around origin, point inside",
true,
new Ellipse(new Vector(1, 1), 0, new Vector(0, 0)),
new Vector(0.2,0.2)
],
[
"Circle around origin, point outside",
false,
new Ellipse(new Vector(1, 1), 0, new Vector(0, 0)),
new Vector(1.2,0.2)
],
[
"Circle around arbitrary point, point inside",
true,
new Ellipse(new Vector(1, 1), 0, new Vector(3, 2)),
new Vector(2.9,2.3)
],
[
"Circle around arbitrary point, point outside",
false,
new Ellipse(new Vector(1, 1), 0, new Vector(5, 2)),
new Vector(3,5)
],
])("%p", (description: string, expected: boolean, ellipse: Ellipse, point: Vector) => {
expect(ellipse.PointInside(point)).toEqual(expected)
});
});


describe("Polygon - Circle", () => {
type TestTuple = [string, Ellipse, Ellipse];
test.each<TestTuple>([
[
"2r circle around origin",
new Ellipse(new Vector(2, 2), 0, new Vector(0, 0)),
Ellipse.Circle(2, new Vector(0, 0))
],
])("%p", (description: string, expected: Ellipse, ellipse: Ellipse) => {
expect(ellipse).toEqual(expected)
});
});
15 changes: 10 additions & 5 deletions src/standard/shape/ellipse.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
Copyright 2019 JamJar Authors
Copyright 2020 JamJar Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
Expand All @@ -26,13 +26,13 @@ class Ellipse implements IShape {
public dimensions: Vector;
public orientation: number;

constructor(dimensions: Vector, orientation = 0, center: Vector = new Vector(0,0)) {
constructor(dimensions: Vector, orientation = 0, center: Vector = new Vector(0, 0)) {
this.center = center;
this.dimensions = dimensions;
this.orientation = orientation;
}

Transform(transform: Transform): IShape {
public Transform(transform: Transform): IShape {
const matrix = transform.Matrix3D();
return new Ellipse(
this.dimensions.Multiply(transform.scale),
Expand All @@ -41,9 +41,14 @@ class Ellipse implements IShape {
);
}

public PointInside(point: Vector): boolean {
return Math.pow(point.x - this.center.x, 2) / Math.pow(this.dimensions.x, 2) +
Math.pow(point.y - this.center.y, 2) / Math.pow(this.dimensions.y, 2) <= 1;
}

public FarthestPointInDirection(direction: Vector): Vector {
const angle = Math.atan2(direction.y, direction.x);
const angledDimensions = this.dimensions.Rotate(new Vector(0,0), this.orientation);
const angledDimensions = this.dimensions.Rotate(new Vector(0, 0), this.orientation);
return new Vector(
this.center.x + (angledDimensions.x * Math.cos(angle)),
this.center.y + (angledDimensions.y * Math.sin(angle))
Expand All @@ -55,7 +60,7 @@ class Ellipse implements IShape {
* @param {number} radius Radius of the circle
* @param {Vector} center Centre of the circle
*/
public static Circle(radius: number, center: Vector = new Vector(0,0)): Ellipse {
public static Circle(radius: number, center: Vector = new Vector(0, 0)): Ellipse {
return new Ellipse(new Vector(radius, radius), 0, center);
}

Expand Down
8 changes: 7 additions & 1 deletion src/standard/shape/ishape.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
Copyright 2019 JamJar Authors
Copyright 2020 JamJar Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
Expand Down Expand Up @@ -35,6 +35,12 @@ interface IShape {
* @returns {Vector} The farthest point in the direction provided
*/
FarthestPointInDirection(direction: Vector): Vector;
/**
* PointInside determines if a point provided is within the shape or not.
* @param point The point to check if it is inside the shape
* @returns {boolean} If the point is inside the shape, true = inside, false = outside
*/
PointInside(point: Vector): boolean;
}

export default IShape;
Loading

0 comments on commit 256ce7d

Please sign in to comment.