3.0.2 • Published 2 years ago

perspective-grid

Licence

MIT

Version

3.0.2

Deps

Size

46 kB

Vulns

Weekly

Stars

Summary Dependency Versions

perspective-grid

Two point perspective grid on canvas.

Installation

npm install perspective-grid

Usage

import { PerspectiveGrid, Point } from "perspective-grid";
import canvasContext from "canvas-context";

const { context, canvas } = canvasContext("2d", {
  width: window.innerWidth,
  height: window.innerHeight,
});

// Alternatively pass [rows, columns] for a grid with different rows and column units
const grid = new PerspectiveGrid(10);

grid.init(
  new Point(300, 380),
  new Point(canvas.width - 300, 300),
  new Point(canvas.width, canvas.height),
  new Point(0, canvas.height)
);
grid.update();

// Operations on lines...
context.save();
grid.drawLines(context);
context.restore();

context.save();
grid.drawSquares(context);
context.restore();

// ...or simply draw
context.save();
grid.draw(context);
context.restore();

API

Modules

LineEquation LineType MathHelper PerspectiveGrid Point Segment

LineEquation

LineEquation
- LineEquation
  - new LineEquation(lineParams, x)
  - .intersect(equation) ⇒ Point

LineEquation

LineEquation defines a line equation or vertical

Kind: Exported class

new LineEquation(lineParams, x)

Param	Type	Description
lineParams	`LineParams`	Line parameters
x	`number`	X position

lineEquation.intersect(equation) ⇒ `Point`

Get intersection of two line equation

Kind: instance method of LineEquation

Param	Type
equation	`LineEquation`

LineType

A faked ENUM for referencing line types.

Kind: Exported constant

Param	Type
VERTICAL	`number`
HORIZONTAL	`number`

MathHelper

MathHelper
- .EPSILON : number
- .PI : number
- .TWO_PI : number
- .getDistance(point1, point2) ⇒ number
- .getConvergencePoint(m1, c1, m2, c2) ⇒ Point
- .getVerticalConvergence(x, m, c) ⇒ number
- .getLineParams(x1, y1, x2, y2) ⇒ Object
- .getParallelLine(line, point) ⇒ Object
- .getDistanceToLine(line, point) ⇒ number
- .getProjectedPoint(line, point) ⇒ Point
- .getMassCenter(p1, p2, p3, p4) ⇒ Point

MathHelper.EPSILON : `number`

Kind: static constant of MathHelper

MathHelper.PI : `number`

Kind: static constant of MathHelper

MathHelper.TWO_PI : `number`

Kind: static constant of MathHelper

MathHelper.getDistance(point1, point2) ⇒ `number`

Get the distance between two points

Kind: static method of MathHelper Returns: number - Distance between point1 and point2

Param	Type	Description
point1	`Object`	First point
point2	`Object`	Second point

MathHelper.getConvergencePoint(m1, c1, m2, c2) ⇒ `Point`

Get the convergence point of two line equation

Kind: static method of MathHelper

Param	Type
m1	`number`
c1	`number`
m2	`number`
c2	`number`

MathHelper.getVerticalConvergence(x, m, c) ⇒ `number`

Get the vertical convergence point from a X position

Kind: static method of MathHelper

Param	Type
x	`number`
m	`number`
c	`number`

MathHelper.getLineParams(x1, y1, x2, y2) ⇒ `Object`

Return line parameters

Kind: static method of MathHelper

Param	Type
x1	`number`
y1	`number`
x2	`number`
y2	`number`

MathHelper.getParallelLine(line, point) ⇒ `Object`

Get parallel line parameters

Kind: static method of MathHelper

Param	Type
line	`number`
point	`Point`

MathHelper.getDistanceToLine(line, point) ⇒ `number`

Get the distance to a line parameters

Kind: static method of MathHelper

Param	Type
line	`Object`
point	`Point`

MathHelper.getProjectedPoint(line, point) ⇒ `Point`

Get a projected point

Kind: static method of MathHelper

Param	Type
line	`Object`
point	`Point`

MathHelper.getMassCenter(p1, p2, p3, p4) ⇒ `Point`

Get the center of four points

Kind: static method of MathHelper

Param	Type
p1	`Point`
p2	`Point`
p3	`Point`
p4	`Point`

PerspectiveGrid

PerspectiveGrid
- PerspectiveGrid
  - new PerspectiveGrid(units, [squares])
  - .init(tl, tr, br, bl)
  - .draw(context)
  - .update()
  - .getQuadAt(column, row) ⇒ Array.<Point>
  - .getCenterAt(column, row) ⇒ Point
  - .drawLines(context)
  - .drawSquares(context)
  - .drawPoint(context, point, radius, color)
  - ._getHorizon(vVanishing, hVanishing) ⇒ Object

PerspectiveGrid

Two point perspective grid on canvas.

Note: Does not work correctly when there is only one vanishing point.

Kind: Exported class

new PerspectiveGrid(units, [squares])

Creates an instance of PerspectiveGrid.

Param	Type	Description
units	`number` \| `Array.<number>`	Number of rows and columns (unit or [rows, columns]).
[squares]	`Array.<Point>`	Highlighted squares in the grid

perspectiveGrid.init(tl, tr, br, bl)

Reset the corners (clockwise starting from top left)

Kind: instance method of PerspectiveGrid

Param	Type	Description
tl	`Point`	Top left corner
tr	`Point`	Top right corner
br	`Point`	Bottom right corner
bl	`Point`	Bottom left corner

perspectiveGrid.draw(context)

Draw the grid in the instance context

Kind: instance method of PerspectiveGrid

Param	Type	Description
context	`CanvasRenderingContext2D`	The context to draw the grid in

perspectiveGrid.update()

Update grid segments

Kind: instance method of PerspectiveGrid

perspectiveGrid.getQuadAt(column, row) ⇒ `Array.<Point>`

Get the four vertices of a point in grid

Kind: instance method of PerspectiveGrid

Param	Type
column	`number`
row	`number`

perspectiveGrid.getCenterAt(column, row) ⇒ `Point`

Get the center point from grid unit to pixel eg. (1, 1) is the first top left point

Kind: instance method of PerspectiveGrid

Param	Type
column	`number`
row	`number`

perspectiveGrid.drawLines(context)

Actually draw the lines (vertical and horizontal) in the context

Kind: instance method of PerspectiveGrid

Param	Type	Description
context	`CanvasRenderingContext2D`	The context to draw the grid in

perspectiveGrid.drawSquares(context)

Draw highlighted squares in the grid

Kind: instance method of PerspectiveGrid

Param	Type	Description
context	`CanvasRenderingContext2D`	The context to draw the grid in

perspectiveGrid.drawPoint(context, point, radius, color)

Draw a single point in the grid useful for debug purpose

Kind: instance method of PerspectiveGrid

Param	Type	Description
context	`CanvasRenderingContext2D`	The context to draw the grid in
point	`Point`
radius	`number`
color	`string`

perspectiveGrid._getHorizon(vVanishing, hVanishing) ⇒ `Object`

Get a line parallel to the horizon

Kind: instance method of PerspectiveGrid

Param	Type
vVanishing	`Point`
hVanishing	`Point`

Point

Point
- Point
  - new Point(x, y)
  - .isInList(list) ⇒ boolean

Point

An object that defines a Point

Kind: Exported class

new Point(x, y)

Param	Type	Description
x	`number`	x coordinate
y	`number`	y coordinate

point.isInList(list) ⇒ `boolean`

Check if a point is in a list of points

Kind: instance method of Point

Param	Type	Description
list	`Array.<Point>`	Array of Points

Segment

Segment
- Segment
  - new Segment(p1, p1)
  - .intersect(segment) ⇒ Point

Segment

An object with two points that defines a segment

Kind: Exported class

new Segment(p1, p1)

Param	Type	Description
p1	`Point`	First point
p1	`Point`	Second point

segment.intersect(segment) ⇒ `Point`

Get intersection of two segments

Kind: instance method of Segment

Param	Type
segment	`Segment`

License

MIT. See license file.

Keywords

canvas grid perspective