camera-2d-simple

2D Camera

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

Install

npm install camera-2d-simple gl-matrix

Note, gl-matrix is a required dependency but it's not prebundled!

API

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

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

Changelog

v3.0.0

• Add translation bounds: camera.setTranslationBounds([xTranslationBounds, yTranslationBounds])
• Add camera.minScaling, camera.maxScaling, camera.minDistance, and camera.maxDistance for convenience
• Update scaleBounds to support x and y scale bounds: camera.setScaleBounds([xScaleBounds, yScaleBounds])

Breaking Change:

• camera.scaling is now a tuple: [xScaling, yScaling]
• camera.distance is now a tuple: [xDistance, yDistance]