2D camera for WebGL
npm install camera-2d-simple




> Simple camera built on top of gl-matrix for 2D scenes. Heavily inspired by Mikola's Orbit Camera.
Also see:
- dom-2d-camera for attaching the camera to a DOM object
- regl-scatterplot for an application
```
npm install camera-2d-simple gl-matrix
Note, gl-matrix is a required dependency but it's not prebundled!
`javascript`
import createCamera from 'camera-2d-simple';
# 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
# 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, i.e., 1 / distance.
# camera.scaleBounds
The scale limits.
# camera.distance
Distance of the camera to the target. This is the inverse of scaling, i.e., 1 / scaling.
# camera.rotation
Rotation in radians around the z axis.
# 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.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.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`.