camera-2d-simple - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

CHANGELOG.md

@@ -0,1 +1,6 @@
+**v1.2.0**
+
+- Rotate around the viewport center
+- Switch to [prettier](https://github.com/prettier/prettier)
+
 **v1.1.0**
@@ -2,0 +7,0 @@

dist/camera-2d.js

@@ -7,4 +7,2 @@ (function (global, factory) {
 
-  // const ang2Rad = angle => angle * (Math.PI / 180);
-
   var createCamera = function (ref) {
@@ -19,2 +17,3 @@ if ( ref === void 0 ) ref = {};
     var scratch1 = new Float32Array(16);
+    var scratch2 = new Float32Array(16);
 
@@ -44,14 +43,28 @@ var target = initTarget;
 
-    var view = function (out) {
-      if (!out) { out = glMatrix.mat4.create(); } // eslint-disable-line no-param-reassign
+    var view = function (v) {
+      if (!v) { v = glMatrix.mat4.create(); } // eslint-disable-line no-param-reassign
 
-      scratch1[0] = 1 / distance;
-      scratch1[1] = scratch1[0]; // eslint-disable-line prefer-destructuring
-      scratch1[2] = 1.0;
+      scratch0[0] = 1 / distance;
+      scratch0[1] = scratch0[0]; // eslint-disable-line prefer-destructuring
+      scratch0[2] = 1.0;
 
-      glMatrix.mat4.fromScaling(out, scratch1);
-      glMatrix.mat4.translate(out, out, center);
-      glMatrix.mat4.rotateZ(out, out, rotation);
+      // View matrix. First scale, then translate
+      glMatrix.mat4.fromScaling(v, scratch0);
+      glMatrix.mat4.translate(v, v, center);
 
-      return out;
+      // Auxilliary frame around which we rotate
+      // I.e., the center of the viewport
+      var a = glMatrix.mat4.create();
+      glMatrix.mat4.fromTranslation(a, glMatrix.vec3.negate(scratch1, center));
+
+      // Rotation matrix
+      var r = glMatrix.mat4.create();
+      glMatrix.mat4.fromRotation(r, rotation, [0, 0, 1]);
+
+      // Finally, we rotate `v` around `a` (the viewport center) by `r`
+      return glMatrix.mat4.multiply(
+        v,
+        a,
+        glMatrix.mat4.multiply(v, r, glMatrix.mat4.multiply(v, glMatrix.mat4.invert(scratch2, a), v))
+      );
     };
@@ -83,6 +96,7 @@
 
-      scratch0[0] = x * -distance;
-      scratch0[1] = y * distance;
-      scratch0[2] = 0;
-      glMatrix.vec3.sub(center, center, scratch0);
+      center[0] += x * distance;
+      center[1] -= y * distance;
+
+      target[0] -= x * distance;
+      target[1] += y * distance;
     };
@@ -95,3 +109,3 @@
     var rotate = function (rad) {
-      rotation += rad * distance;
+      rotation += rad;
     };
@@ -107,7 +121,17 @@
     return {
-      get target() { return getTarget(); },
-      get distance() { return getDistance(); },
-      set distance(d) { setDistance(d); },
-      get position() { return getPosition(); },
-      get transformation() { return transformation(); },
+      get target() {
+        return getTarget();
+      },
+      get distance() {
+        return getDistance();
+      },
+      set distance(d) {
+        setDistance(d);
+      },
+      get position() {
+        return getPosition();
+      },
+      get transformation() {
+        return transformation();
+      },
       view: view,
@@ -118,3 +142,3 @@ lookAt: lookAt,
       zoom: zoom,
-      reset: reset,
+      reset: reset
     };
@@ -121,0 +145,0 @@ };

dist/camera-2d.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("gl-matrix")):"function"==typeof define&&define.amd?define(["gl-matrix"],e):t.createCamera2d=e(t.glMatrix)}(this,function(t){"use strict";return function(e){void 0===e&&(e={});var r=e.target;void 0===r&&(r=[0,0]);var n=e.distance;void 0===n&&(n=1);var a=e.rotation;void 0===a&&(a=0);var o=new Float32Array(16),i=new Float32Array(16),u=r,c=n,f=a,d=t.vec3.create(),v=function(t){(c=t)<0&&(c=0)},m=function(){return d.slice(0,2).map(function(t){return-1*t})},s=function(t,e,r){void 0===t&&(t=[]);var n=t[0],a=t[1];+n&&+a&&(d=[(u=[-1*+n||0,-1*+a||0])[0],u[1],0]),+e>=0&&(c=e),+r&&(f=r)};return s(u,c),{get target(){return m()},get distance(){return c},set distance(t){v(t)},get position(){return[d[0],d[1],c]},get transformation(){return e=t.mat3.create(),t.mat3.fromTranslation(e,m()),t.mat3.scale(e,e,[c,c]),e;var e},view:function(e){return e||(e=t.mat4.create()),i[0]=1/c,i[1]=i[0],i[2]=1,t.mat4.fromScaling(e,i),t.mat4.translate(e,e,d),t.mat4.rotateZ(e,e,f),e},lookAt:s,pan:function(e){void 0===e&&(e=[]);var r=e[0];void 0===r&&(r=0);var n=e[1];void 0===n&&(n=0),o[0]=r*-c,o[1]=n*c,o[2]=0,t.vec3.sub(d,d,o)},rotate:function(t){f+=t*c},zoom:function(t){v(c*t)},reset:function(){s(r,n)}}}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("gl-matrix")):"function"==typeof define&&define.amd?define(["gl-matrix"],e):t.createCamera2d=e(t.glMatrix)}(this,function(t){"use strict";return function(e){void 0===e&&(e={});var r=e.target;void 0===r&&(r=[0,0]);var a=e.distance;void 0===a&&(a=1);var n=e.rotation;void 0===n&&(n=0);var o=new Float32Array(16),i=new Float32Array(16),m=new Float32Array(16),u=r,c=a,f=n,v=t.vec3.create(),l=function(t){(c=t)<0&&(c=0)},d=function(){return v.slice(0,2).map(function(t){return-1*t})},s=function(t,e,r){void 0===t&&(t=[]);var a=t[0],n=t[1];+a&&+n&&(v=[(u=[-1*+a||0,-1*+n||0])[0],u[1],0]),+e>=0&&(c=e),+r&&(f=r)};return s(u,c),{get target(){return d()},get distance(){return c},set distance(t){l(t)},get position(){return[v[0],v[1],c]},get transformation(){return e=t.mat3.create(),t.mat3.fromTranslation(e,d()),t.mat3.scale(e,e,[c,c]),e;var e},view:function(e){e||(e=t.mat4.create()),o[0]=1/c,o[1]=o[0],o[2]=1,t.mat4.fromScaling(e,o),t.mat4.translate(e,e,v);var r=t.mat4.create();t.mat4.fromTranslation(r,t.vec3.negate(i,v));var a=t.mat4.create();return t.mat4.fromRotation(a,f,[0,0,1]),t.mat4.multiply(e,r,t.mat4.multiply(e,a,t.mat4.multiply(e,t.mat4.invert(m,r),e)))},lookAt:s,pan:function(t){void 0===t&&(t=[]);var e=t[0];void 0===e&&(e=0);var r=t[1];void 0===r&&(r=0),v[0]+=e*c,v[1]-=r*c,u[0]-=e*c,u[1]+=r*c},rotate:function(t){f+=t},zoom:function(t){l(c*t)},reset:function(){s(r,a)}}}});

package.json

 {
   "name": "camera-2d-simple",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "2D camera for WebGL",
@@ -14,2 +14,4 @@ "author": "Fritz Lekschas",
   "module": "src/index.js",
+  "unpkg": "dist/camera-2d.min.js",
+  "jsdelivr": "dist/camera-2d.min.js",
   "files": [
@@ -20,3 +22,2 @@ "src/index.js",
   ],
-  "unpkg": "dist/camera-2d.min.js",
   "dependencies": {
@@ -30,7 +31,6 @@ "gl-matrix": "^2.7.0"
     "eslint": "^5.4.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-react": "^7.11.1",
-    "esm": "^3.0.74",
+    "eslint-config-prettier": "^v3.1.0",
+    "husky": "^1.1.2",
+    "prettier": "1.14.3",
+    "pretty-quick": "^1.7.0",
     "rollup": "^0.64.1",
@@ -42,3 +42,4 @@ "rollup-plugin-buble": "^0.19.2",
     "build": "rollup -c",
-    "lint": "eslint src/index.js rollup.config.js",
+    "lint": "eslint src rollup.config.js",
+    "precommit": "pretty-quick --staged",
     "prepublishOnly": "npm run lint",
@@ -45,0 +46,0 @@ "prerelease": "rm -rf dist/*; npm run build; zip -r dist.zip dist",

README.md

 # 2D Camera
 
-[![Build Status](https://travis-ci.org/flekschas/camera-2d.svg?branch=master)](https://travis-ci.org/flekschas/camera-2d)
+[![npm version](https://img.shields.io/npm/v/camera-2d-simple.svg)](https://www.npmjs.com/package/camera-2d-simple)
+[![stability experimental](https://img.shields.io/badge/stability-experimental-orange.svg)](https://nodejs.org/api/documentation.html#documentation_stability_index)
+[![build status](https://travis-ci.org/flekschas/camera-2d.svg?branch=master)](https://travis-ci.org/flekschas/camera-2d)
+[![gzipped size](https://img.shields.io/badge/gzipped%20size-0.9%20KB-6ae3c7.svg)](https://unpkg.com/camera-2d-simple)
+[![code style prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+[![demo](https://img.shields.io/badge/demo-online-6ae3c7.svg)](https://flekschas.github.io/regl-scatterplot/)
 
@@ -9,4 +14,4 @@ > Simple camera built on top of gl-matrix for 2D scenes. Heavily inspired by [Mikola's Orbit Camera](https://github.com/mikolalysenko/orbit-camera).
 
-* [canvas-camera-2d](https://github.com/flekschas/canvas-camera-2d) for attaching the camera to a canvas object
-* [webgl-scatterplot](https://github.com/flekschas/webgl-scatterplot) for an application
+- [canvas-camera-2d](https://github.com/flekschas/canvas-camera-2d) for attaching the camera to a canvas object
+- [webgl-scatterplot](https://github.com/flekschas/webgl-scatterplot) for an application
 
@@ -22,10 +27,11 @@ ## Install
 ```javascript
-import createCamera from 'camera-2d-simple';
+import createCamera from "camera-2d-simple";
 ```
 
 ### `const camera = createCamera(target = [0, 0], distance = 1)`
+
 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.
+- `target` is the 2d vector the camera is looking at.
+- `distance` is the distance between the target and the camera.
 
@@ -35,17 +41,23 @@ **Returns** A new 2d camera object
 ### `camera.lookAt(target = [0, 0], distance = 1)`
+
 Move the camera to look at the new position.
 
 ### `camera.pan(translation)`
-Moves the center of the camera by `translation`.  Note that translation must be an array of length 2.
 
+Moves the center of the camera by `translation`. Note that translation must be an array of length 2.
+
 ### `camera.zoom(delta)`
+
 Zooms in or out by some amount. I.e., the new distance is defined as `distance * delta`.
 
 ### `camera.view([out])`
+
 Returns the current view matrix associated to the camera.
 
 ### `camera.position`
+
 Is an array of length 3 comprised of the target (x, y) and distance (z) of the camera.
 
 ### `camera.transformation`
+
 Is the current transformation `mat3` associated to the camera.

src/index.js

@@ -1,11 +0,7 @@
-import {
-  mat3, mat4, vec3,
-} from 'gl-matrix';
+import { mat3, mat4, vec3 } from "gl-matrix";
 
-// const ang2Rad = angle => angle * (Math.PI / 180);
-
 const createCamera = ({
   target: initTarget = [0, 0],
   distance: initDistance = 1.0,
-  rotation: initRotation = 0,
+  rotation: initRotation = 0
 } = {}) => {
@@ -15,2 +11,3 @@ // Scratch variables
   const scratch1 = new Float32Array(16);
+  const scratch2 = new Float32Array(16);
 
@@ -24,3 +21,3 @@ let target = initTarget;
   const getDistance = () => distance;
-  const setDistance = (d) => {
+  const setDistance = d => {
     distance = d;
@@ -41,14 +38,28 @@ if (distance < 0.0) distance = 0.0;
 
-  const view = (out) => {
-    if (!out) out = mat4.create(); // eslint-disable-line no-param-reassign
+  const view = v => {
+    if (!v) v = mat4.create(); // eslint-disable-line no-param-reassign
 
-    scratch1[0] = 1 / distance;
-    scratch1[1] = scratch1[0]; // eslint-disable-line prefer-destructuring
-    scratch1[2] = 1.0;
+    scratch0[0] = 1 / distance;
+    scratch0[1] = scratch0[0]; // eslint-disable-line prefer-destructuring
+    scratch0[2] = 1.0;
 
-    mat4.fromScaling(out, scratch1);
-    mat4.translate(out, out, center);
-    mat4.rotateZ(out, out, rotation);
+    // View matrix. First scale, then translate
+    mat4.fromScaling(v, scratch0);
+    mat4.translate(v, v, center);
 
-    return out;
+    // Auxilliary frame around which we rotate
+    // I.e., the center of the viewport
+    const a = mat4.create();
+    mat4.fromTranslation(a, vec3.negate(scratch1, center));
+
+    // Rotation matrix
+    const r = mat4.create();
+    mat4.fromRotation(r, rotation, [0, 0, 1]);
+
+    // Finally, we rotate `v` around `a` (the viewport center) by `r`
+    return mat4.multiply(
+      v,
+      a,
+      mat4.multiply(v, r, mat4.multiply(v, mat4.invert(scratch2, a), v))
+    );
   };
@@ -72,14 +83,15 @@
   const pan = ([x = 0, y = 0] = []) => {
-    scratch0[0] = x * -distance;
-    scratch0[1] = y * distance;
-    scratch0[2] = 0;
-    vec3.sub(center, center, scratch0);
+    center[0] += x * distance;
+    center[1] -= y * distance;
+
+    target[0] -= x * distance;
+    target[1] += y * distance;
   };
 
-  const zoom = (d) => {
+  const zoom = d => {
     setDistance(distance * d);
   };
 
-  const rotate = (rad) => {
-    rotation += rad * distance;
+  const rotate = rad => {
+    rotation += rad;
   };
@@ -95,7 +107,17 @@
   return {
-    get target() { return getTarget(); },
-    get distance() { return getDistance(); },
-    set distance(d) { setDistance(d); },
-    get position() { return getPosition(); },
-    get transformation() { return transformation(); },
+    get target() {
+      return getTarget();
+    },
+    get distance() {
+      return getDistance();
+    },
+    set distance(d) {
+      setDistance(d);
+    },
+    get position() {
+      return getPosition();
+    },
+    get transformation() {
+      return transformation();
+    },
     view,
@@ -106,3 +128,3 @@ lookAt,
     zoom,
-    reset,
+    reset
   };
@@ -109,0 +131,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13151

increased by17.98%

Dev dependency count

8

decreased by-11.11%

Lines of code

223

increased by23.89%

Number of lines in readme file

61

increased by24.49%

No dependency changes