2b:null 2c:["$","title",null,{"children":"Wrapper for glMatrix | Kjerand Pedersen | Observable"}] 31:T4a4,# Wrapper for glMatrix The purpose of this notebook is to wrap [glMatrix](https://glmatrix.net/) functions with a simpler to use interface (sacrifice performance for a bit of syntactic sugar or a better developer experience). The objects in glMatrix (```vec2, vec3, vec4, mat2, mat2d, mat3, mat4, quat and quat2```) are turned into creator functions with the corresponding glMatrix properties added to it. Meaning you can create a new 3 dimensional vector by typing: ```vec3(1, 2, 3)```, while still accessing (most) of the functions from glMatrix, like: ```vec3.cross(...)```, but in a slightly modified way; most of the functions in glMatrix require you to specify an _out_ argument (or target) as the first parameter. This has been moved to now be the _last_ parameter and also made optional, where a new default object will be created if not specified. This allow for writing ```mat4.identity()```, which will create a new instance of the Matrix4 class available in this notebook. These classes, matching the glMatrix objects, are extensions of the current array type (```Array, Float32Array or Float64Array```) with some added features, accessors and methods for your convenience. 32:T445,By default, the instances created will be _immutable_, meaning adding a vector to another will not modify either of the vectors: ```js const u = vec3(2, 1, 4); const v = vec3(1, 0, -2); const w = u.add(v); // u = [2, 1, 4], v = [1, 0, -2], w = [3, 1, 2] ``` You can toggle this behavior by calling the ```asMutable()``` and ```asImmutable()``` functions: ```js const u = vec3(2, 1, 4).asMutable(); const v = vec3(1, 0, -2); const w = u.add(v); // u = [3, 1, 2], v = [1, 0, -2], w = u ``` You can toggle the mutable state at any time and do it inline like this: ```js const u = vec3(2, 1, 4).asMutable(); const v = vec3(1, 0, -2); const w = u.asImmutable().add(v); // u = [2, 1, 4], v = [1, 0, -2], w = [3, 1, 2] ``` Keep in mind though, that **u** will now be immutable until ```asMutable()``` is called. You can still provide an _out_ argument (target) to mutate another instance or avoid mutating the source instance: ```js const u = vec3(2, 1, 4); const v = vec3(1, 0, -2); const w = u.add(v, vec3()); // u = [2, 1, 4], v = [1, 0, -2], w = [3, 1, 2] ``` 33:T48e,The following shows the pattern used for wrapping the static glMatrix functions. If an argument for the out parameter is passed, then that instance will be mutated. If not, either the source instance or a clone of the source will be modified (depending on if the source is set to be mutable or not). ```js const u = vec3(1, 2, 3); const v = vec3(-2, 1, 0); u.scalar(); // 3.74... NOTE: u.length will return the length of the array, and _not_ the scalar value of the vector u.len(); // 3.74... alias of scalar u.normalize([out]) // [0.26..., 0.53..., 0.80...] u.add(v, [out]); // [-1, 3, 3] u.sub(v, [out]); // [3, 1, 3] u.scale(4, [out]); // [4, 8, 12] u.multiply(v, [out]) // [-2, 2, 0] u.cross(v, [out]); // [-3, -6, 5] NOTE: you may use cross2 for 2d vectors to return the cross product as a pseudoscalar value ... ``` The pattern is the same for most of the vector/matrix/quaternion functions available in glMatrix. Note that not all functions are available from the class instances. Ex. this will not work: ```u.equals(v)```. You would need to use the static method for this (if u and v are vec4): ```vec4.equals(u, v)``` 34:Tba8,GLVector2 = { const mat = { 4: glm.vec2.transformMat2, 6: glm.vec2.transformMat2d, 9: glm.vec2.transformMat3, 16: glm.vec2.transformMat4, }; class GLVector2 extends GLArray { constructor(values) { super(2); if (values && values.length > 0) { this.copyFromArray(values); } else { this.fill(0.0); } } clone () { return new GLVector2(this.slice()); } len() { return this.scalar; } scalar() { return glm.vec2.length(this); } add(other, out) { return glm.vec2.add(out || (this.isMutable ? this : this.clone()), this, other); } dist(other) { return this.distance(other); } distance(other) { return glm.vec2.dist(this, other); } inverse(out) { return glm.vec2.invert(out || (this.isMutable ? this : this.clone()), this); } negate(out) { return glm.vec2.negate(out || (this.isMutable ? this : this.clone()), this); } orth(out) { out = out || (this.isMutable ? this : this.clone()); out[0] = -this[1]; out[1] = this[0]; return out; } rotate(rad, origin, out) { return glm.vec2.rotate(out || (this.isMutable ? this : this.clone()), this, origin || new GLVector2(0, 0), rad); } scale(factor, out) { return glm.vec2.scale(out || (this.isMutable ? this : this.clone()), this, factor) } scaleAndAdd(other, factor, out) { return glm.vec2.scaleAndAdd(out || (this.isMutable ? this : this.clone()), this, other, factor) } sub(other, out) { return this.subtract(other, out); } subtract(other, out) { return glm.vec2.subtract(out || this.isMutable ? this: this.clone(), this, other); } mul(other, out) { return this.multiply(other, out); } multiply(other, out) { return glm.vec2.multiply(out || (this.isMutable ? this : this.clone()), this, other); } multiplyMat(m, out) { return mat[m.length] && mat[m.length](out || this.clone(), this, m); } div(other, out) { return this.divide(other, out); } divide(other, out) { return glm.vec2.divide(out || (this.isMutable ? this : this.clone()), this, other); } normalize(out) { return glm.vec2.normalize(out || (this.isMutable ? this : this.clone()), this); } cross(other, out) { return glm.vec2.cross(out || (this.isMutable ? this : this.clone()), this, other); } // return the cross product as a pseudoscalar for 2d vectors cross2(other, out) { return this.cross(other, out)[2]; } dot(other) { return glm.vec2.dot(this, other); } } /** mapping of additional accessors to array index */ const accessors = ({ x: 0, i: 0, s: 0, y: 1, j: 1, t: 1, }); addVectorAccessors(GLVector2.prototype, accessors); return GLVector2; }35:T9cd,GLVector3 = { const mat = { 9: glm.vec3.transformMat3, 16: glm.vec3.transformMat4, }; class GLVector3 extends GLArray { constructor(values) { super(3); if (values && values.length > 0) { this.copyFromArray(values); } else { this.fill(0.0); } } clone () { return new GLVector3(this.slice()); } len() { return this.scalar; } scalar() { return glm.vec3.length(this); } add(other, out) { return glm.vec3.add(out || (this.isMutable ? this : this.clone()), this, other); } sub(other, out) { return this.subtract(out || other); } subtract(other, out) { return glm.vec3.subtract(out || this.isMutable ? this: this.clone(), this, other); } mul(other, out) { return this.multiply(other, out); } multiply(other, out) { return glm.vec3.multiply(out || (this.isMutable ? this : this.clone()), this, other); } multiplyMat(m, out) { return mat[m.length] && mat[m.length](out || this.clone(), this, m); } div(other, out) { return this.divide(other, out); } divide(other, out) { return glm.vec3.divide(out || (this.isMutable ? this : this.clone()), this, other); } normalize(out) { return glm.vec3.normalize(out || (this.isMutable ? this : this.clone()), this); } cross(other, out) { return glm.vec3.cross(out || (this.isMutable ? this : this.clone()), this, other); } dot(other) { return glm.vec3.dot(this, other); } negate(out) { return glm.vec3.negate(out || (this.isMutable ? this : this.clone()), this); } inverse(out) { return glm.vec3.invert(out || (this.isMutable ? this : this.clone()), this); } scale(factor, out) { return glm.vec3.scale(out || (this.isMutable ? this : this.clone()), this, factor); } scaleAndAdd(other, factor, out) { return glm.vec3.scaleAndAdd(out || (this.isMutable ? this : this.clone()), this, other, factor); } dist(other) { return this.distance(other); } distance(other) { return glm.vec3.dist(this, other); } } /** mapping of additional accessors to array index */ const accessors = ({ x: 0, r: 0, i: 0, s: 0, y: 1, g: 1, j: 1, t: 1, z: 2, b: 2, k: 2, u: 2, }); addVectorAccessors(GLVector3.prototype, accessors); return GLVector3; }36:T9fc,GLVector4 = { class GLVector4 extends GLArray { constructor(values) { super(4); if (values && values.length > 0) { this.copyFromArray(values); } else { this.fill(0.0); } } clone () { return new GLVector4(this.slice()); } len() { return this.scalar; } scalar() { return glm.vec4.length(this); } add(other, out) { return glm.vec4.add(out || (this.isMutable ? this : this.clone()), this, other); } dist(other) { return this.distance(other); } distance(other) { return glm.vec4.dist(this, other); } inverse(out) { return glm.vec4.invert(out || (this.isMutable ? this : this.clone()), this); } negate(out) { return glm.vec4.negate(out || (this.isMutable ? this : this.clone()), this); } scale(factor, out) { return glm.vec4.scale(out || (this.isMutable ? this : this.clone()), this, factor); } scaleAndAdd(other, factor, out) { return glm.vec4.scaleAndAdd(out || (this.isMutable ? this : this.clone()), this, other, factor); } sub(other, out) { return this.subtract(out || other); } subtract(other, out) { return glm.vec4.subtract(out || this.isMutable ? this: this.clone(), this, other); } mul(other, out) { return this.multiply(other, out); } multiply(other, out) { return glm.vec4.multiply(out || (this.isMutable ? this : this.clone()), this, other); } multiplyMat(m, out) { return glm.vec4.transformMat4(out || this.clone(), this, m); } multiplyQuat(q, out) { return glm.vec4.transformQuat(out || this.clone(), this, q); } div(other, out) { return this.divide(other, out); } divide(other, out) { return glm.vec4.divide(out || (this.isMutable ? this : this.clone()), this, other); } normalize(out) { return glm.vec4.normalize(out || (this.isMutable ? this : this.clone()), this); } cross(other, out) { return glm.vec4.cross(out || (this.isMutable ? this : this.clone()), this, other); } dot(other) { return glm.vec4.dot(this, other); } } /** mapping of additional accessors to array index */ const accessors = ({ x: 0, r: 0, i: 0, s: 0, y: 1, g: 1, j: 1, t: 1, z: 2, b: 2, k: 2, u: 2, w: 3, a: 3, l: 3, v: 3, }); addVectorAccessors(GLVector4.prototype, accessors); return GLVector4; }37:T7ab,GLMatrix2 = { class GLMatrix2 extends GLMatrixBase { constructor(values) { super(2, 2); if (values && values.length > 0) { this.copyFromArray(values); } else { glm.mat2.identity(this); } } clone () { return new GLMatrix2(this.slice()); } add(other, out) { return glm.mat2.add(out || (this.isMutable ? this : this.clone()), this, other); } adjoint(out) { return glm.mat2.adjoint(out || (this.isMutable ? this : this.clone()), this); } determinant() { return glm.mat2.determinant(this); } invert(out) { return glm.mat2.invert(out || (this.isMutable ? this : this.clone()), this); } mul(other, out) { return this.multiply(out || other); } multiply(other, out) { return glm.mat2.multiply(out || (this.isMutable ? this : this.clone()), this, other); } multiplyScalar(scalar, out) { return glm.mat2.multiplyScalar(out || (this.isMutable ? this : this.clone()), this, scalar); } multiplyScalarAndAdd(other, scalar, out) { return glm.mat2.multiplyScalarAndAdd(out || (this.isMutable ? this : this.clone()), this, other, scalar); } rotate(rad, out) { return glm.mat2.rotate(out || (this.isMutable ? this : this.clone()), this, rad); } scale(factor, out) { return glm.mat2.scale(out || (this.isMutable ? this : this.clone()), this, factor) } sub(other, out) { return this.subtract(other, out); } subtract(other, out) { return glm.mat2.subtract(out || this.isMutable ? this: this.clone(), this, other); } transpose(out) { return glm.mat2.transpose(out || (this.isMutable ? this : this.clone()), this); } multiplyVec(v, out) { return glm.vec2.transformMat2(out || vec2(), v, this); } } addMatrixAccessors(GLMatrix2.prototype, 2, 2); return GLMatrix2; }38:T7cb,GLMatrix2d = { class GLMatrix2d extends GLMatrixBase { constructor(values) { super(2, 3); if (values && values.length > 0) { this.copyFromArray(values); } else { glm.mat2d.identity(this); } } clone () { return new GLMatrix2d(this.slice()); } add(other, out) { return glm.mat2d.add(out || (out || (this.isMutable ? this : this.clone())), this, other); } determinant() { return glm.mat2d.determinant(this); } invert(out) { return glm.mat2d.invert(out || (this.isMutable ? this : this.clone()), this); } mul(other, out) { return this.multiply(other, out); } multiply(other, out) { return glm.mat2d.multiply(out || (this.isMutable ? this : this.clone()), this, other); } multiplyScalar(scalar, out) { return glm.mat2d.multiplyScalar(out || (this.isMutable ? this : this.clone()), this, scalar); } multiplyScalarAndAdd(other, scalar, out) { return glm.mat2d.multiplyScalarAndAdd(out || (this.isMutable ? this : this.clone()), this, other, scalar); } rotate(rad, out) { return glm.mat2d.rotate(out || (this.isMutable ? this : this.clone()), this, rad); } scale(factor, out) { return glm.mat2d.scale(out || (this.isMutable ? this : this.clone()), this, factor) } translate(v, out) { return glm.mat2d.translate(out || (this.isMutable ? this : this.clone()), this, v); } sub(other, out) { return this.subtract(other, out); } subtract(other, out) { return glm.mat2d.subtract(out || (this.isMutable ? this : this.clone()), this, other); } transpose(out) { return glm.mat2d.transpose(out || (this.isMutable ? this : this.clone()), this); } multiplyVec(v, out) { return glm.vec2.transformMat2d(out || vec2(), v, this); } } addMatrixAccessors(GLMatrix2d.prototype, 2, 3); return GLMatrix2d; }39:T86f,GLMatrix3 = { const vec = { 2: glm.vec2, 3: glm.vec3, }; class GLMatrix3 extends GLMatrixBase { constructor(values) { super(3, 3); if (values && values.length > 0) { this.copyFromArray(values); } else { glm.mat3.identity(this); } } clone () { return new GLMatrix3(this.slice()); } add(other, out) { return glm.mat3.add(out || (this.isMutable ? this : this.clone()), this, other); } adjoint(out) { return glm.mat3.adjoint(out || (this.isMutable ? this : this.clone()), this); } determinant() { return glm.mat3.determinant(this); } invert(out) { return glm.mat3.invert(out || (this.isMutable ? this : this.clone()), this); } mul(other, out) { return this.multiply(other, out); } multiply(other, out) { return glm.mat3.multiply(out || (this.isMutable ? this : this.clone()), this, other); } multiplyScalar(scalar, out) { return glm.mat3.multiplyScalar(out || (this.isMutable ? this : this.clone()), this, scalar); } multiplyScalarAndAdd(other, scalar, out) { return glm.mat3.multiplyScalarAndAdd(out || (this.isMutable ? this : this.clone()), this, other, scalar); } multiplyVec(v, out) { return vec[v.length]?.transformMat3(out || v.clone(), v, this); } rotate(rad, out) { return glm.mat3.rotate(out || (this.isMutable ? this : this.clone()), this, rad); } scale(factor, out) { return glm.mat3.scale(out || (this.isMutable ? this : this.clone()), this, factor) } translate(v, out) { return glm.mat3.translate(out || (this.isMutable ? this : this.clone()), this, v); } sub(other, out) { return this.subtract(other, out); } subtract(other, out) { return glm.mat3.subtract(out || (this.isMutable ? this : this.clone()), this, other); } transpose(out) { return glm.mat3.transpose(out || (this.isMutable ? this : this.clone()), this); } } addMatrixAccessors(GLMatrix3.prototype, 3, 3); return GLMatrix3; }3a:Taf9,GLMatrix4 = { const vec = { 2: glm.vec2, 3: glm.vec3, 4: glm.vec4, }; class GLMatrix4 extends GLMatrixBase { constructor(values) { super(4, 4); if (values && values.length > 0) { this.copyFromArray(values); } else { glm.mat4.identity(this); } } clone () { return new GLMatrix4(this.slice()); } add(other, out) { return glm.mat4.add(out || (this.isMutable ? this : this.clone()), this, other); } adjoint(out) { return glm.mat4.adjoint(out || (this.isMutable ? this : this.clone()), this); } determinant() { return glm.mat4.determinant(this); } invert(out) { return glm.mat4.invert(out || (this.isMutable ? this : this.clone()), this); } mul(other, out) { return this.multiply(other, out); } multiply(other, out) { return glm.mat4.multiply(out || (this.isMutable ? this : this.clone()), this, other); } multiplyScalar(scalar, out) { return glm.mat4.multiplyScalar(out || (this.isMutable ? this : this.clone()), this, scalar); } multiplyScalarAndAdd(other, scalar, out) { return glm.mat4.multiplyScalarAndAdd(out || (this.isMutable ? this : this.clone()), this, other, scalar); } rotate(rad, axis, out) { return glm.mat4.rotate(out || (this.isMutable ? this : this.clone()), this, rad, axis); } rotateX(rad, out) { return glm.mat4.rotateX(out || (this.isMutable ? this : this.clone()), this, rad); } rotateY(rad, out) { return glm.mat4.rotateY(out || (this.isMutable ? this : this.clone()), this, rad); } rotateZ(rad, out) { return glm.mat4.rotateZ(out || (this.isMutable ? this : this.clone()), this, rad); } scale(factor, out) { return glm.mat4.scale(out || (this.isMutable ? this : this.clone()), this, factor) } translate(v, out) { return glm.mat4.translate(out || (this.isMutable ? this : this.clone()), this, v); } sub(other, out) { return this.subtract(other, out); } subtract(other, out) { return glm.mat4.subtract(out || (this.isMutable ? this : this.clone()), this, other); } transpose(out) { return glm.mat4.transpose(out || (this.isMutable ? this : this.clone()), this); } getRotation(out) { return glm.mat4.getRotation(out || quat(), this); } getScaling(out) { return glm.mat4.getScaling(out || vec3(), this); } getTranslation(out) { return glm.mat4.getTranslation(out || vec3(), this); } multiplyVec(v, out) { return vec[v.length]?.transformMat4(out || v.clone(), v, this); } } addMatrixAccessors(GLMatrix4.prototype, 4, 4); return GLMatrix4; }3b:Ta13,GLQuaternion = { const vec = { 3: glm.vec3, 4: glm.vec4, }; class GLQuaternion extends GLArray { constructor(values) { super(4); if (values && values.length > 0) { this.copyFromArray(values); } else { glm.quat.identity(this); } } clone () { return new GLQuaternion(this.slice()); } add(other, out) { return glm.quat.add(out || (this.isMutable ? this : this.clone()), this, other); } calculateW(out) { return glm.quat.calculateW(out || (this.isMutable ? this : this.clone()), this); } conjugate(out) { return glm.quat.conjugate(out || (this.isMutable ? this : this.clone()), this); } exp(out) { return glm.quat.exp(out || (this.isMutable ? this : this.clone()), this); } pow(factor, out) { return glm.quat.exp(out || (this.isMutable ? this : this.clone()), this, factor); } ln(out) { return glm.quat.ln(out || (this.isMutable ? this : this.clone()), this); } mul(other, out) { return this.multiply(other, out); } multiply(other, out) { return glm.quat.multiply(out || (this.isMutable ? this : this.clone()), this, other); } invert(out) { return glm.quat.invert(out || (this.isMutable ? this : this.clone()), this); } normalize(out) { return glm.quat.normalize(out || (this.isMutable ? this : this.clone()), this); } dot(other) { return glm.quat.dot(this, other); } len() { return this.scalar; } scalar() { return glm.quat.length(this); } rotateX(rad, out) { return glm.quat.rotateX(out || (this.isMutable ? this : this.clone()), this, rad); } rotateY(rad, out) { return glm.quat.rotateY(out || (this.isMutable ? this : this.clone()), this, rad); } rotateZ(rad, out) { return glm.quat.rotateZ(out || (this.isMutable ? this : this.clone()), this, rad); } scale(factor, out) { return glm.quat.scale(out || (this.isMutable ? this : this.clone()), this, factor) } getAngle(b) { return glm.quat.getAngle(this, b); } getAxisAngle(out) { return glm.quat.getAxisAngle(out || vec3(), this); } multiplyVec(v, out) { return vec[v.length]?.transformQuat(out || v.clone(), v, this); } } /** mapping of additional accessors to array index */ const accessors = ({ x: 0, y: 1, z: 2, w: 3 }); addVectorAccessors(GLQuaternion.prototype, accessors); return GLQuaternion; }3c:Tb59,GLQuaternion2 = { class GLQuaternion2 extends GLArray { constructor(values) { super(8); if (values && values.length > 0) { this.copyFromArray(values); } else { glm.quat2.identity(this); } } clone () { return new GLQuaternion2(this.slice()); } add(other, out) { return glm.quat2.add(out || (this.isMutable ? this : this.clone()), this, other); } conjugate(out) { return glm.quat2.conjugate(out || (this.isMutable ? this : this.clone()), this); } mul(other, out) { return this.multiply(other, out); } multiply(other, out) { return glm.quat2.multiply(out || (this.isMutable ? this : this.clone()), this, other); } invert(out) { return glm.quat2.invert(out || (this.isMutable ? this : this.clone()), this); } normalize(out) { return glm.quat2.normalize(out || (this.isMutable ? this : this.clone()), this); } dot(other) { return glm.quat2.dot(this, other); } len() { return this.scalar; } scalar() { return glm.quat2.length(this); } rotateX(rad, out) { return glm.quat2.rotateX(out || (this.isMutable ? this : this.clone()), this, rad); } rotateY(rad, out) { return glm.quat2.rotateY(out || (this.isMutable ? this : this.clone()), this, rad); } rotateZ(rad, out) { return glm.quat2.rotateZ(out || (this.isMutable ? this : this.clone()), this, rad); } rotateAroundAxis(axis, rad, out) { return glm.quat2.rotateAroundAxis(out || (this.isMutable ? this : this.clone()), this, axis, rad); } rotateByQuatAppend(q, out) { return glm.quat2.rotateByQuatAppend(out || (this.isMutable ? this : this.clone()), this, q); } rotateByQuatPrepend(q, out) { return glm.quat2.rotateByQuatPrepend(out || (this.isMutable ? this : this.clone()), q, this); } scale(factor, out) { return glm.quat2.scale(out || (this.isMutable ? this : this.clone()), this, factor); } translate(v, out) { return glm.quat2.translate(out || (this.isMutable ? this : this.clone()), this, v); } getDual(out) { return glm.quat2.getDual(out || quat(), this); } setDual(q, out) { return glm.quat2.setDual(out || (this.isMutable ? this : this.clone()), q); } getReal(out) { return glm.quat2.getReal(out || quat(), this); } setReal(q, out) { return glm.quat2.setReal(out || (this.isMutable ? this : this.clone()), q); } getTranslation(out) { return glm.quat2.getTranslation(out || vec3(), this); } } /** mapping of additional accessors to array index */ const accessors = ({ x: 0, y: 1, z: 2, w: 3, x2: 4, y2: 5, z2: 6, w2: 7 }); addVectorAccessors(GLQuaternion2.prototype, accessors); return GLQuaternion2; }3d:[] 2f:{"id":"8b117bd970c6e0ec","slug":"glmatrix-wrapper","title":"Wrapper for glMatrix","thumbnail":"0a761fe0645debdc837b2cda289a8c345eeee3ad1e98efa086a195eab11ad361","access_level":"public","create_time":"$D2023-03-10T12:10:01.321Z","update_time":"$D2023-07-10T12:04:43.548Z","view_time":null,"first_public_time":"$D2023-03-12T15:08:50.998Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"455184b0afc7f1fd","login":"kjerandp","name":"Kjerand Pedersen","avatar_url":"https://avatars-next.observableusercontent.com/3c52e0775a9b4937e6002e09ca22d564189c0d589cae2166e091b5fe3b7f2458","tier":"starter_2024"},"version":1284,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"00080969d76f924b","login":"kjerandp","name":"Kjerand Pedersen","avatar_url":"https://avatars-next.observableusercontent.com/3c52e0775a9b4937e6002e09ca22d564189c0d589cae2166e091b5fe3b7f2458","tier":null}],"members":[{"type":"individual","id":"00080969d76f924b","login":"kjerandp","name":"Kjerand Pedersen","avatar_url":"https://avatars-next.observableusercontent.com/3c52e0775a9b4937e6002e09ca22d564189c0d589cae2166e091b5fe3b7f2458","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"fc9d59b1d3947635","slug":"libs","title":"Libs/reusable","owner":{"id":"455184b0afc7f1fd","login":"kjerandp","name":"Kjerand Pedersen"}},"type":"notebook","body":{"title":"Wrapper for glMatrix","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"ARRAY_TYPE = Array // this may be Array | Float32Array | Float64Array","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"## Usage\nJust import the functions you want to use in your notebook:\n```js\nimport { vec2, vec3, mat3, mix ... } with { ARRAY_TYPE } from '@kjerandp/glmatrix-wrapper'\n```\nWhere ARRAY_TYPE should be a cell in your notebook with the array type you want to use: ```Array|Float32Array|Float64Array```\n\nIf you want to use the default, which is ```Array``` (standard js array), then you don't need to include the ```with``` clause.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":61,"value":"## Examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":81,"value":"Vectors/matrices extend the chosen array type and adds properties to it, such as alternative getters/setters and vector/matrix functions. Most of these function will be wrappers for executing the glMatrix counterpart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":99,"value":"The factory functions are designed to make it easy to create new instances:\n```js\nconst u = vec3(); // u = [0, 0, 0]\nconst v = vec3(2, 1); // v = [2, 1, 0]\nconst w = vec4(v, 1); // w = [2, 1, 0, 1]\nconst x = vec2(v); // x = [2, 1] \n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":283,"value":"\n```js\nconst m = mat4(); // returns 4x4 identity matrix\nconst m = mat2(vec2(2, 1), vec2(3, 2)); // matrices are set columns first\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":108,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":79,"value":"Typical accessors used for vectors is added as well. These includes ```[x, y, z, w]``` or ```[r, g, b, a]``` or ```[i, j, k, l]``` or ```[s, t, u, v]``` for vector types (depending on dimension):\n```js\nconst v = vec3(2, 3, 4); // v = [2, 3, 4]\nlet x = v.x, y = v.y; // x = 2, y = 3\nlet r = v.r, u = v.u; // r = 2, u = 4 \nv.y = 0; // v = [2, 0, 0]\n```\n\nFor matrices there are getters and setters added m00..m33 (```m[col][row]```) depending on matrix size:\n```js\nconst m = mat4(); // 4x4 identity matrix\nlet a = m.m00, b = m.m21 // a = 1, b = 0\nm.m23 = 6; // 1 0 0 0\n // 0 1 0 0 \n // 0 0 1 0 \n // 0 0 6 1\n \n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":146,"value":"Use the clone function to make a copy of an instance:\n```js\nconst u = vec3(1, 2, 3);\nconst v = u.clone(); // v = [1, 2, 3] and v != u\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1200,"value":"You can also see [this fork of my _affine transformations_ example](https://observablehq.com/d/5cce814ed2f3548d), converted to use the glMatrix wrapper functions from this notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":97,"value":"### Vector operations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":123,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":57,"value":"## Implementation\n\nThe factory methods and extra functions are what you generally want to import from this notebook. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":72,"value":"#### Factory methods","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":15,"value":"vec2 = {\n const f = wrapFunction((...values) => new GLVector2(values), glm.vec2, [...exclude, 'cross']);\n f.cross = (a, b, out) => glm.vec2.cross(out || vec3(), a, b); \n f.cross2 = (a, b, out) => glm.vec2.cross(out || vec3(), a, b)[2]; //cross2 is not a glMatrix function\n return f;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"vec3 = wrapFunction((...values) => new GLVector3(values), glm.vec3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"vec4 = wrapFunction((...values) => new GLVector4(values), glm.vec4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":238,"value":"mat2 = wrapFunction((...values) => new GLMatrix2(values), glm.mat2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"value":"mat2d = wrapFunction((...values) => new GLMatrix2d(values), glm.mat2d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"mat3 = wrapFunction((...values) => new GLMatrix3(values), glm.mat3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"mat4 = wrapFunction((...values) => new GLMatrix4(values), glm.mat4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":668,"value":"quat = wrapFunction((...values) => new GLQuaternion(values), glm.quat)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":670,"value":"quat2 = wrapFunction((...values) => new GLQuaternion2(values), glm.quat2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1032,"value":"#### Extra functions / constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1118,"value":"PI = Math.PI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1121,"value":"TAU = 2 * PI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":622,"value":"toDegrees = rad => rad * (180 / Math.PI)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":619,"value":"toRadian = glm.glMatrix.toRadian","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1116,"value":"/**\n * Normalise an angle to be between -PI to +PI\n * @param {number} r radians\n * @return {number} normalised angle\n */\nfunction nrad(r) {\n const v = r % TAU;\n return (v < 0 ? v + TAU : v);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1072,"value":"/**\n * Clamps the value to min or max if value is less than min or greater than max\n * @param {number} value value to clamp\n * @param {number} min minimum value\n * @param {number} max maximum value\n * @return {number} clamped value\n */\nfunction clampValue(value, min = 0, max = 1) {\n if (value < min) return min;\n if (value > max) return max;\n return value;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1075,"value":"/**\n * Clamps each value in array according to min and max.\n * @param {number[]} arr values to clamp\n * @param {number} min minimum value\n * @param {number} max maximum value\n * @param {number[]} out optional array/vector to store the result\n * @return {number[]} array of clamped values\n */\nfunction clampArray(arr, min = 0, max = 1, out = null) {\n out = out || arr;\n for (let i = 0; i < out.length; i++) {\n out[i] = clampValue(out[i], min, max);\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1082,"value":"/**\n * Clamps the argument according to min and max. Arg can be either a numeric\n * value or an array of numeric values.\n * @param {number|number[]} arg value or array of values to clamp\n * @param {number} min minimum value\n * @param {number} max maximum value\n * @param {number[]} out optional array/vector to store the result\n * @return {number|number[]} clamped version of arg\n */\nfunction clamp(arg, min = 0, max = 1, out = null) {\n if (Array.isArray(arg)) {\n return clampArray(arg, min, max, out);\n }\n return clampValue(arg, min, max);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1070,"value":"/**\n * Linear interpolation between two numbers\n * @param {number} a interpolate from\n * @param {number} b interpolate to\n * @param {number} t time 0 = a, 1 = b\n * @return {number} the interpolated value\n */\nfunction lerp(a, b, t) {\n const m = clampValue(t, 0, 1);\n return a * (1 - m) + b * m;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":861,"value":"\n/**\n * Mix (interpolate) numbers or arrays (similar to glsl implementation).\n * Works on both vectors and matrices, since they are both arrays.\n * @param {number[]} a interpolate from\n * @param {number[]} b interpolate to\n * @param {number|number[]} t time 0 = a, 1 = b\n * @param {number[]} out optional array/vector to store the result\n * @return {number[]} interpolated array/vector/matrix\n */\nfunction mix(a, b, t, out = null) {\n const m = Array.isArray(t) ? i => t[i] : () => t;\n out = out || a;\n for (let i = 0; i < out.length; i++) {\n out[i] = lerp(a[i], b[i], m(i));\n }\n return out;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1085,"value":"/**\n * As glsl step function for single numeric values\n * @param {number} edge value to test\n * @param {number} x threshold value\n * @return {number} returns 0 or 1\n */\nfunction stepValue(edge, x) {\n return x >= edge ? 1 : 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1088,"value":"/**\n * As glsl step function for multiple numeric values\n * @param {number[]} edges values to test\n * @param {number|number[]} x threshold values\n * @param {number[]} out optional array/vector to store the result\n * @return {number[]} results for each value in edges\n */\nfunction stepArray(edges, x, out = null) {\n const m = Array.isArray(x) ? i => x[i] : () => x;\n out = out || edges;\n for (let i = 0; i < out.length; i++) {\n out[i] = stepValue(out[i], m(i));\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1091,"value":"/**\n * Implementation of glsl step function. Returns 0 if an edge is less than the\n * threshold x, otherwise 1\n * @param {number|number[]} edge number/array to test\n * @param {number|number[]} x threshold(s)\n * @param {number[]} target optional array/vector to store the result (if edge is array)\n * @return {number|number[]}\n */\nfunction step(edge, x, out = null) {\n if (Array.isArray(edge)) {\n return stepArray(edge, x, out);\n }\n return stepValue(edge, x);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1094,"value":"/**\n * Implementation of glsl smoothstep function\n * @param {number} edge0\n * @param {number} edge1\n * @param {number} x threshold\n */\nfunction smoothstep(edge0, edge1, x) {\n const t = clampValue((x - edge0) / (edge1 - edge0));\n return t * t * (3.0 - 2.0 * t);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1097,"value":"/**\n * Generates a list of interpolated values between from and to,\n * where the number of elements returned are controlled by the\n * steps argument.\n * @param {number|number[]} from value to interpolate from\n * @param {number|number[]} to value to interpolate to\n * @param {number} steps interpolation steps\n * @param {number} start start time of interpolation [0-1]\n * @param {number} end end time of interpolation [0-1]\n */\nfunction seq(from, to, steps, start = 0, end = 1) {\n let f;\n if (Array.isArray(from)) {\n f = t => mix(from, to, t, from.slice());\n } else {\n f = t => lerp(from, to, t);\n }\n const target = [];\n const incr = (end - start) / (steps - 1);\n for (let i = 0; i < steps - 1; i++) {\n const x = start + i * incr;\n target.push(f(x));\n }\n target.push(f(end));\n return target;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1110,"value":"/**\n * Generates a list of interpolated values between 0 and 1,\n * where the number of elements returned are controlled by the\n * steps argument.\n * @param {number} steps interpolation steps\n */\nfunction seqI(steps) {\n const target = [];\n const incr = 1 / (steps - 1);\n for (let i = 0; i < steps - 1; i++) {\n target.push(lerp(0, 1, i * incr));\n }\n target.push(1);\n return target;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1113,"value":"/**\n * Rounds a number to the specific number of digits. Works with either a\n * single number or an array of numbers, which means it can be used with vectors and\n * matrices as well.\n * @param {number|number[]} v value to round\n * @param {number} digits number of digits to round to\n * @return {number} rounded value\n */\nfunction round(v, digits = 1) {\n const f = 10 ** digits;\n if (!Array.isArray(v)) {\n return Math.round(v * f) / f;\n }\n for (let i = 0; i < v.length; i++) {\n v[i] = Math.round(v[i] * f) / f;\n }\n return v;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1278,"value":"function cross(a, b, out) {\n return a.cross(b, out);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1282,"value":"function dot(a, b, out) {\n return a.dot(b, out);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"#### Wrapper Classes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":330,"value":"class GLArray extends ARRAY_TYPE {\n _mutable = false;\n \n constructor(dim) { \n super(dim);\n }\n\n asMutable() {\n this._mutable = true;\n return this;\n }\n\n asImmutable() {\n this._mutable = false;\n return this;\n }\n\n get isMutable() {\n return this._mutable;\n }\n\n copyFromArray(array) {\n array = flattenList(array, this.length);\n for (let i = 0; i < array.length; i++) {\n this[i] = array[i];\n }\n // pad end with zeros if to few values provided\n return this.fill(0.0, array.length, this.length);\n }\n\n set(...values) {\n return this.copyFromArray(values);\n }\n\n fill(value, from = 0, to = 0) {\n to = to || this.length;\n for (let i = from; i < to; i++) {\n this[i] = value;\n }\n return this;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":215,"value":"GLMatrixBase = { \n class MatrixBase extends GLArray {\n rows = 0;\n cols = 0;\n \n constructor(columns, rows) { \n super(columns * rows);\n\n this.cols = columns;\n this.rows = rows;\n }\n \n index(col, row) {\n return this.rows * col + row;\n }\n\n getValue(col, row) {\n if (col < 0 || col > this.cols - 1 || row < 0 || row > this.rows - 1) return undefined;\n const idx = this.index(col, row);\n return this[idx];\n }\n\n setValue(col, row, value) {\n const idx = this.index(col, row);\n /** assign value */\n this[idx] = value;\n return this;\n }\n }\n\n return MatrixBase;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":598,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":586,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":438,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":436,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":445,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":578,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":844,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"#### Implementation specific utility functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":943,"value":"exclude = ['create', 'fromValues', 'clone']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":994,"value":"wrapFunction = (target, source, excl = exclude) => {\n for (let p in source) {\n if (excl.includes(p)) continue;\n const func = source[p];\n const name = p === 'length' ? 'scalar' : p; // can't replace target length => rename to scalar\n const params = getParamNames(func);\n\n // swap out parameter from first position to last and add default if not provided\n if (params[0] === 'out') {\n target[name] = (...args) => func(args.length < params.length ? target() : args.pop(), ...args);\n } else {\n target[name] = func;\n }\n }\n return target;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"flattenList = {\n /**\n * Recursive function used by flattenList\n * @param {number[]} array array to be flattended\n * @param {number[]} flattend resulting array of values\n * @param {number} max max returned values (default is 0 for all)\n */\n function flatRec(array, flattend, max) {\n for (let i = 0; i < array.length; i++) {\n if (max && flattend.length === max) return;\n const el = array[i];\n if (el.length) flatRec(el, flattend, max);\n else flattend.push(el);\n }\n }\n \n /**\n * Recursivly flattens a list of arguments to a 1 dimensional array\n * @param {number[]} arg Arguments to be flattended\n * @param {number[]} flattend Resulting array of values\n * @param {number} max Max returned values (default is 0 for all)\n */\n function flattenList(arg = [], max = 0) {\n const flattend = new Array();\n flatRec(arg, flattend, max);\n return ARRAY_TYPE === Array ? flattend : new ARRAY_TYPE(flattend);\n }\n\n return flattenList;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":494,"value":"function addVectorAccessors(prototype, accessors) {\n // add getters and setters from accessors\n Object.keys(accessors).forEach((a) => {\n Object.defineProperty(prototype, a, {\n get() {\n return this[accessors[a]];\n },\n set(v) {\n if (Number.isFinite(v)) {\n this[accessors[a]] = v;\n }\n },\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"function addMatrixAccessors(prototype, columns, rows) {\n // add extra accessors\n for (let c = 0; c < columns; c++) {\n for (let r = 0; r < rows; r++) {\n Object.defineProperty(prototype, `m${c}${r}`, {\n get() {\n return this.getValue(c, r);\n },\n set(v) {\n this.setValue(c, r, v);\n },\n });\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":904,"value":"getParamNames = {\n const STRIP_COMMENTS = /((\\/\\/.*$)|(\\/\\*[\\s\\S]*?\\*\\/))/mg;\n const ARGUMENT_NAMES = /([^\\s,]+)/g;\n function getParamNames(func) {\n const fnStr = func.toString().replace(STRIP_COMMENTS, '');\n let result = fnStr.slice(fnStr.indexOf('(')+1, fnStr.indexOf(')')).match(ARGUMENT_NAMES);\n if(result === null)\n result = [];\n return result;\n }\n return getParamNames;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"glm = {\n const lib = await require('gl-matrix@3.4.2/dist/gl-matrix.js');\n lib.glMatrix.setMatrixArrayType(ARRAY_TYPE);\n return lib;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 30:"$2f:body"