perspective-grid

npm version stability-stable npm minzipped size dependencies types Conventional Commits styled with prettier linted with eslint license

Two point perspective grid on canvas.

paypal coinbase twitter

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 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

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 ⏏

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 ⏏

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 ⏏

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.