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

• 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

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.