https://github.com/dmnsgn/perspective-grid

Two point perspective grid on canvas
https://github.com/dmnsgn/perspective-grid
canvas grid perspective
Last synced: 8 months ago
JSON representation
Two point perspective grid on canvas
Host: GitHub
URL: https://github.com/dmnsgn/perspective-grid
Owner: dmnsgn
License: mit
Created: 2015-10-20T17:09:38.000Z (over 10 years ago)
Default Branch: main
Last Pushed: 2024-07-07T14:33:35.000Z (almost 2 years ago)
Last Synced: 2025-10-06T21:57:45.634Z (9 months ago)
Topics: canvas, grid, perspective
Language: JavaScript
Homepage: http://dmnsgn.github.io/perspective-grid/
Size: 1.26 MB
Stars: 8
Watchers: 2
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project

README

          # perspective-grid

[![npm version](https://img.shields.io/npm/v/perspective-grid)](https://www.npmjs.com/package/perspective-grid)

[![stability-stable](https://img.shields.io/badge/stability-stable-green.svg)](https://www.npmjs.com/package/perspective-grid)

[![npm minzipped size](https://img.shields.io/bundlephobia/minzip/perspective-grid)](https://bundlephobia.com/package/perspective-grid)

[![dependencies](https://img.shields.io/librariesio/release/npm/perspective-grid)](https://github.com/dmnsgn/perspective-grid/blob/main/package.json)

[![types](https://img.shields.io/npm/types/perspective-grid)](https://github.com/microsoft/TypeScript)

[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-fa6673.svg)](https://conventionalcommits.org)

[![styled with prettier](https://img.shields.io/badge/styled_with-Prettier-f8bc45.svg?logo=prettier)](https://github.com/prettier/prettier)

[![linted with eslint](https://img.shields.io/badge/linted_with-ES_Lint-4B32C3.svg?logo=eslint)](https://github.com/eslint/eslint)

[![license](https://img.shields.io/github/license/dmnsgn/perspective-grid)](https://github.com/dmnsgn/perspective-grid/blob/main/LICENSE.md)

Two point perspective grid on canvas.

[![paypal](https://img.shields.io/badge/donate-paypal-informational?logo=paypal)](https://paypal.me/dmnsgn)

[![coinbase](https://img.shields.io/badge/donate-coinbase-informational?logo=coinbase)](https://commerce.coinbase.com/checkout/56cbdf28-e323-48d8-9c98-7019e72c97f3)

[![twitter](https://img.shields.io/twitter/follow/dmnsgn?style=social)](https://twitter.com/dmnsgn)

![](https://raw.githubusercontent.com/dmnsgn/perspective-grid/main/screenshot.gif)

## Installation

```bash

npm install perspective-grid

```

## Usage

```js

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](#module_LineEquation)

  - [LineEquation](#exp_module_LineEquation--LineEquation) ⏏

    - [new LineEquation(lineParams, x)](#new_module_LineEquation--LineEquation_new)

    - [.intersect(equation)](#module_LineEquation--LineEquation+intersect) ⇒ 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](#exp_module_LineEquation--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](#module_MathHelper)

  - [.EPSILON](#module_MathHelper.EPSILON) : number

  - [.PI](#module_MathHelper.PI) : number

  - [.TWO_PI](#module_MathHelper.TWO_PI) : number

  - [.getDistance(point1, point2)](#module_MathHelper.getDistance) ⇒ number

  - [.getConvergencePoint(m1, c1, m2, c2)](#module_MathHelper.getConvergencePoint) ⇒ Point

  - [.getVerticalConvergence(x, m, c)](#module_MathHelper.getVerticalConvergence) ⇒ number

  - [.getLineParams(x1, y1, x2, y2)](#module_MathHelper.getLineParams) ⇒ Object

  - [.getParallelLine(line, point)](#module_MathHelper.getParallelLine) ⇒ Object

  - [.getDistanceToLine(line, point)](#module_MathHelper.getDistanceToLine) ⇒ number

  - [.getProjectedPoint(line, point)](#module_MathHelper.getProjectedPoint) ⇒ Point

  - [.getMassCenter(p1, p2, p3, p4)](#module_MathHelper.getMassCenter) ⇒ Point



### MathHelper.EPSILON : number

**Kind**: static constant of [MathHelper](#module_MathHelper)



### MathHelper.PI : number

**Kind**: static constant of [MathHelper](#module_MathHelper)



### MathHelper.TWO_PI : number

**Kind**: static constant of [MathHelper](#module_MathHelper)



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

Get the distance between two points

**Kind**: static method of [MathHelper](#module_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](#module_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](#module_MathHelper)

| Param | Type                |

| ----- | ------------------- |

| x     | number |

| m     | number |

| c     | number |



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

Return line parameters

**Kind**: static method of [MathHelper](#module_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](#module_MathHelper)

| Param | Type                |

| ----- | ------------------- |

| line  | number |

| point | Point  |



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

Get the distance to a line parameters

**Kind**: static method of [MathHelper](#module_MathHelper)

| Param | Type                |

| ----- | ------------------- |

| line  | Object |

| point | Point  |



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

Get a projected point

**Kind**: static method of [MathHelper](#module_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](#module_MathHelper)

| Param | Type               |

| ----- | ------------------ |

| p1    | Point |

| p2    | Point |

| p3    | Point |

| p4    | Point |



## PerspectiveGrid

- [PerspectiveGrid](#module_PerspectiveGrid)

  - [PerspectiveGrid](#exp_module_PerspectiveGrid--PerspectiveGrid) ⏏

    - [new PerspectiveGrid(units, [squares])](#new_module_PerspectiveGrid--PerspectiveGrid_new)

    - [.init(tl, tr, br, bl)](#module_PerspectiveGrid--PerspectiveGrid+init)

    - [.draw(context)](#module_PerspectiveGrid--PerspectiveGrid+draw)

    - [.update()](#module_PerspectiveGrid--PerspectiveGrid+update)

    - [.getQuadAt(column, row)](#module_PerspectiveGrid--PerspectiveGrid+getQuadAt) ⇒ Array.<Point>

    - [.getCenterAt(column, row)](#module_PerspectiveGrid--PerspectiveGrid+getCenterAt) ⇒ Point

    - [.drawLines(context)](#module_PerspectiveGrid--PerspectiveGrid+drawLines)

    - [.drawSquares(context)](#module_PerspectiveGrid--PerspectiveGrid+drawSquares)

    - [.drawPoint(context, point, radius, color)](#module_PerspectiveGrid--PerspectiveGrid+drawPoint)

    - [.\_getHorizon(vVanishing, hVanishing)](#module_PerspectiveGrid--PerspectiveGrid+_getHorizon) ⇒ 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](#exp_module_PerspectiveGrid--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](#exp_module_PerspectiveGrid--PerspectiveGrid)

| Param   | Type                                  | Description                     |

| ------- | ------------------------------------- | ------------------------------- |

| context | CanvasRenderingContext2D | The context to draw the grid in |



#### perspectiveGrid.update()

Update grid segments

**Kind**: instance method of [PerspectiveGrid](#exp_module_PerspectiveGrid--PerspectiveGrid)



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

Get the four vertices of a point in grid

**Kind**: instance method of [PerspectiveGrid](#exp_module_PerspectiveGrid--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](#exp_module_PerspectiveGrid--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](#exp_module_PerspectiveGrid--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](#exp_module_PerspectiveGrid--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](#exp_module_PerspectiveGrid--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](#exp_module_PerspectiveGrid--PerspectiveGrid)

| Param      | Type               |

| ---------- | ------------------ |

| vVanishing | Point |

| hVanishing | Point |



## Point

- [Point](#module_Point)

  - [Point](#exp_module_Point--Point) ⏏

    - [new Point(x, y)](#new_module_Point--Point_new)

    - [.isInList(list)](#module_Point--Point+isInList) ⇒ 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](#exp_module_Point--Point)

| Param | Type                             | Description     |

| ----- | -------------------------------- | --------------- |

| list  | Array.<Point> | Array of Points |



## Segment

- [Segment](#module_Segment)

  - [Segment](#exp_module_Segment--Segment) ⏏

    - [new Segment(p1, p1)](#new_module_Segment--Segment_new)

    - [.intersect(segment)](#module_Segment--Segment+intersect) ⇒ 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](#exp_module_Segment--Segment)

| Param   | Type                 |

| ------- | -------------------- |

| segment | Segment |

## License

MIT. See [license file](https://github.com/dmnsgn/perspective-grid/blob/main/LICENSE.md).
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/dmnsgn/perspective-grid

Awesome Lists containing this project

README
