JSFiddle - React, Tailwind, and code Playground
by flek
HTML
<script src="https://unpkg.com/[email protected]/gl-matrix-min.js"></script>
<canvas id="canvas"></canvas>
JavaScript
// DOM 2D Camera
! function(e, n) {
"object" == typeof exports && "undefined" != typeof module ? module.exports = n(require("gl-matrix")) : "function" == typeof define && define.amd ? define(["gl-matrix"], n) : (e = e || self).createDom2dCamera = n(e.glMatrix)
}(this, (function(e) {
"use strict";
var n = function(n, t, o, i, r) {
void 0 === n && (n = [0, 0]), void 0 === t && (t = 1), void 0 === o && (o = 0), void 0 === i && (i = [0, 0]), void 0 === r && (r = [0, 1 / 0]);
var a = new Float32Array(16),
v = new Float32Array(16),
u = new Float32Array(16),
d = e.mat4.create(),
s = i.slice(0, 2).concat([0], [1]),
l = [].concat(r),
c = function() {
return e.mat4.getScaling(a, d)[0]
},
f = function(n, t, o) {
void 0 === n && (n = []);
var i = n[0];
void 0 === i && (i = 0);
var r = n[1];
void 0 === r && (r = 0), void 0 === t && (t = 1), void 0 === o && (o = 0), d = e.mat4.create(), m([-i, -r]), w(o), p(1 / t)
},
m = function(n) {
void 0 === n && (n = []);
var t = n[0];
void 0 === t && (t = 0);
var o = n[1];
void 0 === o && (o = 0), a[0] = t, a[1] = o, a[2] = 0;
var i = e.mat4.fromTranslation(v, a);
e.mat4.multiply(d, i, d)
},
p = function(n, t) {
if (!(n <= 0)) {
var o = c(),
i = o * n;
if (1 !== (n = Math.max(l[0], Math.min(i, l[1])) / o)) {
a[0] = n, a[1] = n, a[2] = 1;
var r = e.mat4.fromScaling(v, a),
f = t ? t.concat([0]) : s,
m = e.mat4.fromTranslation(a, f);
e.mat4.multiply(d, m, e.mat4.multiply(d, r, e.mat4.multiply(d, e.mat4.invert(u, m), d)))
}
}
},
w = function(n) {
var t = e.mat4.create();
e.mat4.fromRotation(t, n, [0, 0, 1]),...