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)

lineEquation.intersect(equation) ⇒ Point

Get intersection of two line equation

Kind: instance method of LineEquation

LineType

LineType ⏏

A faked ENUM for referencing line types.

Kind: Exported constant

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

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

Get the convergence point of two line equation

Kind: static method of MathHelper

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

Get the vertical convergence point from a X position

Kind: static method of MathHelper

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

Return line parameters

Kind: static method of MathHelper

MathHelper.getParallelLine(line, point) ⇒ Object

Get parallel line parameters

Kind: static method of MathHelper

MathHelper.getDistanceToLine(line, point) ⇒ number

Get the distance to a line parameters

Kind: static method of MathHelper

MathHelper.getProjectedPoint(line, point) ⇒ Point

Get a projected point

Kind: static method of MathHelper

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

Get the center of four points

Kind: static method of MathHelper

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.

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

Reset the corners (clockwise starting from top left)

Kind: instance method of PerspectiveGrid

perspectiveGrid.draw(context)

Draw the grid in the instance context

Kind: instance method of PerspectiveGrid

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

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

perspectiveGrid.drawLines(context)

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

Kind: instance method of PerspectiveGrid

perspectiveGrid.drawSquares(context)

Draw highlighted squares in the grid

Kind: instance method of PerspectiveGrid

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

Draw a single point in the grid useful for debug purpose

Kind: instance method of PerspectiveGrid

perspectiveGrid._getHorizon(vVanishing, hVanishing) ⇒ Object

Get a line parallel to the horizon

Kind: instance method of PerspectiveGrid

Point

• Point
  • Point ⏏
    • new Point(x, y)
    • .isInList(list) ⇒ Boolean

Point ⏏

An object that defines a Point

Kind: Exported class

new Point(x, y)

point.isInList(list) ⇒ Boolean

Check if a point is in a list of points

Kind: instance method of Point

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)

segment.intersect(segment) ⇒ Point

Get intersection of two segments

Kind: instance method of Segment

License

MIT. See license file.