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:

• canvas-camera-2d for attaching the camera to a canvas object
• webgl-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.0

• Add tests
• Add camera.translate() and camera.scale() as synonyms for camera.pan() and camera.zoom()
• Add camera.set(view) to directly set specific view matrix
• Fixed rotation
• Cleaned up code
• Changed camera.view() to camera.view
• Removed camera.position and camera.transformation as both are unnecessary.
• Update to glMatrix v3
• Release as ESM