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

API

import createCamera from "camera-2d-simple";

const camera = createCamera(target = [0,0], distance = 1, rotation = 0)

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.

Returns A new 2d camera object

camera.lookAt(target = [0,0], distance = 1, rotation = 0)

Move the camera to look at .

camera.pan([x,y]) or camera.translate([x,y])

Moves the center of the camera by x and y pixel.

camera.zoom(delta, scaleCenter) or camera.scale(delta, scaleCenter)

Zooms in or out by delta with respect to scaleCenter in [x,y]. The new distance will be distance * delta.

camera.rotate(angle)

Rotate the camera by angle (in radians) around the z axis with respect to the viewport center.

camera.set(view)

Set the camera to the view matrix (mat4).

camera.reset()

Reset the camera to the initial target, distance, and rotation.

camera.view

The current view matrix (mat4) of the camera.

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

Changelog

v2.0.1

• Micro change in how glMatrix is imported