# 2D Camera
[](https://www.npmjs.com/package/camera-2d-simple)
[](https://github.com/flekschas/camera-2d/actions?query=workflow%3Abuild)
[](https://bundlephobia.com/result?p=camera-2d-simple)
[](https://github.com/prettier/prettier)
[](https://flekschas.github.io/regl-scatterplot/)
> Simple camera built on top of gl-matrix for 2D scenes. Heavily inspired by [Mikola's Orbit Camera](https://github.com/mikolalysenko/orbit-camera).
Also see:
- [dom-2d-camera](https://github.com/flekschas/dom-2d-camera) for attaching the camera to a DOM object
- [regl-scatterplot](https://github.com/flekschas/regl-scatterplot) for an application
## Install
```
npm install camera-2d-simple gl-matrix
```
Note, `gl-matrix` is a required dependency but it's not prebundled!
## API
```javascript
import createCamera from 'camera-2d-simple';
```
### Constructor
# createCamera(target = [0,0], distance = 1, rotation = 0, viewCenter = [0,0], scaleBounds = [[0, Infinity], [0, Infinity]], translationBounds = [[-Infinity, Infinity], [-Infinity, Infinity]])
Creates a 2d camera looking at `target` from a certain `distance`.
- `target` is the 2d vector the camera is looking at.
- `distance` is the distance between the target and the camera.
- `rotation` is angle in radiance around the z axis with respect to the viewport center.
- `viewCenter` is the center point of the canvas w.r.t the view coordinates. When operating in normalized-device coordinates this must be `[0,0]` but the center can differ when operating in pixel coordinates.
- `scaleBounds` are the min and max allowed scalings in the x and y direction.
- `translationBounds` are the min and max allowed translation in the x and y direction.
**Returns** A new 2d camera object
### Properties
# camera.view
The current view matrix (`mat4`) of the camera.
# camera.viewCenter
The current view center.
# camera.translation
The camera translation needed to look at the `target`.
# camera.target
The camera center in normalized device coordinates. This is a shorthand for inverseOf(`camera.view`) \* `[0,0,0,1]`.
# camera.scaling
The camera scaling. Larger scaling means the camera is closer to the target. This is the inverse of [`distance`](#camera.distance), i.e., `1 / distance`.
# camera.scaleBounds
The scale limits.
# camera.distance
Distance of the camera to the target. This is the inverse of [`scaling`](#camera.scaling), i.e., `1 / scaling`.
# camera.rotation
Rotation in radians around the z axis.
### Methods
# camera.lookAt(target = [0,0], distance = 1, rotation = 0)
Move the camera center to `target` given the `distance` and `rotation`.
# camera.translate([x,y])
Moves the center of the camera by `x` and `y` pixel.
# camera.pan([x,y])
Same as [`camera.translate()`](#camera.translate)
# camera.scale(delta, scaleCenter)
Zooms in or out by `delta` with respect to `scaleCenter` in `[x,y]`. The new distance will be `distance * delta`.
For x and y specific scaling, you can specify a tuple as detla (`[xDelta, yDelta]`).
# camera.zoom(delta, scaleCenter)
Same as [`camera.scale()`](#camera.scale)
# camera.rotate(angle)
Rotate the camera by `angle` (in radians) around the z axis with respect to the viewport center.
# camera.setScaleBounds(bounds)
Set the scaling limits. Expects a tuple of the min and max allowed scale factors.
For x and y specific scale bound, you can specify a tuple of tuple (`[[xScaleMin, xScaleMax], [yScaleMin, yScaleMax]]`). Make sure to take special care when using `scale()` in this scenario as the scale can get out of sync.
# camera.setView(view)
Set the camera to the `view` matrix (`mat4`).
# camera.setViewCenter(viewCenter)
Set `viewCenter` w.r.t. the canvas.
# camera.reset()
Reset the camera to the initial `target`, `distance`, and `rotation`.