Ueda's AttractorJacobi Elliptic Functions in the Complex PlaneSDF Points with reglClifford and de Jong AttractorsDrawing Instanced Lines with reglInstanced Line RenderingLawson's Klein BottleInteractive Multi-scale Turing PatternsSelecting the Right Opacity for 2D Point CloudsAdaptive Contouring in Fragment ShadersBaker's MapFake Transparency for 3D SurfacesGPU BoidsDouble Compound Pendulums3D Reaction-DiffusionMathematical Easter Egg ColoringToiletpaperfullerenes and Charmin NanotubesQuasicrystalsObservable + regl2D (Non-physical) N-body Gravity with Poisson's EquationPeriodic Planar Three-Body OrbitsQuick (miterless) Lines in WebGLSpin WebGLicosphereregl-cameraFinding Roots in the Complex Planeglsl-complexglsl-complex-auto-differentiationDomain Coloring with Adaptive Contouringgl-mat3gl-mat4gl-quatgl-mat2gl-vec3gl-vec2Instanced WebGL Circlesregl-toolsDomain Coloring for Complex FunctionsContour Plots with regl Observable PlotDrawing indexed mesh data as screen-space normals without duplicating dataGPUs, FFTs, and the 1-D Schrödinger Equation
gl-vec4
a = vec4.create()
b = vec4create()
vec4 = ({
create: vec4create,
clone: vec4clone,
fromValues: vec4fromValues,
copy: vec4copy,
set: vec4set,
add: vec4add,
subtract: vec4subtract,
sub: vec4sub,
multiply: vec4multiply,
mul: vec4mul,
divide: vec4divide,
div: vec4div,
min: vec4min,
max: vec4max,
scale: vec4scale,
scaleAndAdd: vec4scaleAndAdd,
distance: vec4distance,
dist: vec4dist,
squaredDistance: vec4squaredDistance,
sqrDist: vec4sqrDist,
length: vec4length,
len: vec4len,
squaredLength: vec4squaredLength,
sqrLen: vec4squaredLength,
negate: vec4negate,
inverse: vec4inverse,
normalize: vec4normalize,
dot: vec4dot,
lerp: vec4lerp,
random: vec4random,
transformMat4: vec4transformMat4,
transformQuat: vec4transformQuat,
})
/**
* Adds two vec4's
*
* @param {vec4} out the receiving vector
* @param {vec4} a the first operand
* @param {vec4} b the second operand
* @returns {vec4} out
*/
function vec4add (out, a, b) {
out[0] = a[0] + b[0]
out[1] = a[1] + b[1]
out[2] = a[2] + b[2]
out[3] = a[3] + b[3]
return out
}
/**
* Creates a new vec4 initialized with values from an existing vector
*
* @param {vec4} a vector to clone
* @returns {vec4} a new 4D vector
*/
function vec4clone (a) {
var out = new Float32Array(4)
out[0] = a[0]
out[1] = a[1]
out[2] = a[2]
out[3] = a[3]
return out
}
/**
* Copy the values from one vec4 to another
*
* @param {vec4} out the receiving vector
* @param {vec4} a the source vector
* @returns {vec4} out
*/
function vec4copy (out, a) {
out[0] = a[0]
out[1] = a[1]
out[2] = a[2]
out[3] = a[3]
return out
}
/**
* Creates a new, empty vec4
*
* @returns {vec4} a new 4D vector
*/
function vec4create () {
var out = new Float32Array(4)
out[0] = 0
out[1] = 0
out[2] = 0
out[3] = 0
return out
}
/**
* Calculates the euclidian distance between two vec4's
*
* @param {vec4} a the first operand
* @param {vec4} b the second operand
* @returns {Number} distance between a and b
*/
function vec4distance (a, b) {
var x = b[0] - a[0],
y = b[1] - a[1],
z = b[2] - a[2],
w = b[3] - a[3]
return Math.sqrt(x * x + y * y + z * z + w * w)
}
vec4dist = vec4distance
/**
* Divides two vec4's
*
* @param {vec4} out the receiving vector
* @param {vec4} a the first operand
* @param {vec4} b the second operand
* @returns {vec4} out
*/
function vec4divide (out, a, b) {
out[0] = a[0] / b[0]
out[1] = a[1] / b[1]
out[2] = a[2] / b[2]
out[3] = a[3] / b[3]
return out
}
vec4div = vec4divide
/**
* Calculates the dot product of two vec4's
*
* @param {vec4} a the first operand
* @param {vec4} b the second operand
* @returns {Number} dot product of a and b
*/
function vec4dot (a, b) {
return a[0] * b[0] + a[1] * b[1] + a[2] * b[2] + a[3] * b[3]
}
/**
* Creates a new vec4 initialized with the given values
*
* @param {Number} x X component
* @param {Number} y Y component
* @param {Number} z Z component
* @param {Number} w W component
* @returns {vec4} a new 4D vector
*/
function vec4fromValues (x, y, z, w) {
var out = new Float32Array(4)
out[0] = x
out[1] = y
out[2] = z
out[3] = w
return out
}
/**
* Returns the inverse of the components of a vec4
*
* @param {vec4} out the receiving vector
* @param {vec4} a vector to invert
* @returns {vec4} out
*/
function vec4inverse (out, a) {
out[0] = 1.0 / a[0]
out[1] = 1.0 / a[1]
out[2] = 1.0 / a[2]
out[3] = 1.0 / a[3]
return out
}
/**
* Calculates the length of a vec4
*
* @param {vec4} a vector to calculate length of
* @returns {Number} length of a
*/
function vec4length (a) {
var x = a[0],
y = a[1],
z = a[2],
w = a[3]
return Math.sqrt(x * x + y * y + z * z + w * w)
}
vec4len = vec4length
/**
* Performs a linear interpolation between two vec4's
*
* @param {vec4} out the receiving vector
* @param {vec4} a the first operand
* @param {vec4} b the second operand
* @param {Number} t interpolation amount between the two inputs
* @returns {vec4} out
*/
function vec4lerp (out, a, b, t) {
var ax = a[0],
ay = a[1],
az = a[2],
aw = a[3]
out[0] = ax + t * (b[0] - ax)
out[1] = ay + t * (b[1] - ay)
out[2] = az + t * (b[2] - az)
out[3] = aw + t * (b[3] - aw)
return out
}
/**
* Returns the maximum of two vec4's
*
* @param {vec4} out the receiving vector
* @param {vec4} a the first operand
* @param {vec4} b the second operand
* @returns {vec4} out
*/
function vec4max (out, a, b) {
out[0] = Math.max(a[0], b[0])
out[1] = Math.max(a[1], b[1])
out[2] = Math.max(a[2], b[2])
out[3] = Math.max(a[3], b[3])
return out
}
/**
* Returns the minimum of two vec4's
*
* @param {vec4} out the receiving vector
* @param {vec4} a the first operand
* @param {vec4} b the second operand
* @returns {vec4} out
*/
function vec4min (out, a, b) {
out[0] = Math.min(a[0], b[0])
out[1] = Math.min(a[1], b[1])
out[2] = Math.min(a[2], b[2])
out[3] = Math.min(a[3], b[3])
return out
}
/**
* Multiplies two vec4's
*
* @param {vec4} out the receiving vector
* @param {vec4} a the first operand
* @param {vec4} b the second operand
* @returns {vec4} out
*/
function vec4multiply (out, a, b) {
out[0] = a[0] * b[0]
out[1] = a[1] * b[1]
out[2] = a[2] * b[2]
out[3] = a[3] * b[3]
return out
}
vec4mul = vec4multiply
/**
* Negates the components of a vec4
*
* @param {vec4} out the receiving vector
* @param {vec4} a vector to negate
* @returns {vec4} out
*/
function vec4negate (out, a) {
out[0] = -a[0]
out[1] = -a[1]
out[2] = -a[2]
out[3] = -a[3]
return out
}
/**
* Normalize a vec4
*
* @param {vec4} out the receiving vector
* @param {vec4} a vector to normalize
* @returns {vec4} out
*/
function vec4normalize (out, a) {
var x = a[0],
y = a[1],
z = a[2],
w = a[3]
var len = x * x + y * y + z * z + w * w
if (len > 0) {
len = 1 / Math.sqrt(len)
out[0] = x * len
out[1] = y * len
out[2] = z * len
out[3] = w * len
}
return out
}
/**
* Generates a random vector with the given scale
*
* @param {vec4} out the receiving vector
* @param {Number} [scale] Length of the resulting vector. If ommitted, a unit vector will be returned
* @returns {vec4} out
*/
function vec4random (out, scale) {
scale = scale || 1.0
// TODO: This is a pretty awful way of doing this. Find something better.
out[0] = Math.random()
out[1] = Math.random()
out[2] = Math.random()
out[3] = Math.random()
vec4normalize(out, out)
vec4scale(out, out, scale)
return out
}
/**
* Scales a vec4 by a scalar number
*
* @param {vec4} out the receiving vector
* @param {vec4} a the vector to scale
* @param {Number} b amount to scale the vector by
* @returns {vec4} out
*/
function vec4scale (out, a, b) {
out[0] = a[0] * b
out[1] = a[1] * b
out[2] = a[2] * b
out[3] = a[3] * b
return out
}
/**
* Adds two vec4's after scaling the second operand by a scalar value
*
* @param {vec4} out the receiving vector
* @param {vec4} a the first operand
* @param {vec4} b the second operand
* @param {Number} scale the amount to scale b by before adding
* @returns {vec4} out
*/
function vec4scaleAndAdd (out, a, b, scale) {
out[0] = a[0] + (b[0] * scale)
out[1] = a[1] + (b[1] * scale)
out[2] = a[2] + (b[2] * scale)
out[3] = a[3] + (b[3] * scale)
return out
}
/**
* Set the components of a vec4 to the given values
*
* @param {vec4} out the receiving vector
* @param {Number} x X component
* @param {Number} y Y component
* @param {Number} z Z component
* @param {Number} w W component
* @returns {vec4} out
*/
function vec4set (out, x, y, z, w) {
out[0] = x
out[1] = y
out[2] = z
out[3] = w
return out
}
/**
* Calculates the squared euclidian distance between two vec4's
*
* @param {vec4} a the first operand
* @param {vec4} b the second operand
* @returns {Number} squared distance between a and b
*/
function vec4squaredDistance (a, b) {
var x = b[0] - a[0],
y = b[1] - a[1],
z = b[2] - a[2],
w = b[3] - a[3]
return x * x + y * y + z * z + w * w
}
vec4sqrDist = vec4squaredDistance
/**
* Calculates the squared length of a vec4
*
* @param {vec4} a vector to calculate squared length of
* @returns {Number} squared length of a
*/
function vec4squaredLength (a) {
var x = a[0],
y = a[1],
z = a[2],
w = a[3]
return x * x + y * y + z * z + w * w
}
vec4sqrLen = vec4squaredLength
/**
* Subtracts vector b from vector a
*
* @param {vec4} out the receiving vector
* @param {vec4} a the first operand
* @param {vec4} b the second operand
* @returns {vec4} out
*/
function vec4subtract (out, a, b) {
out[0] = a[0] - b[0]
out[1] = a[1] - b[1]
out[2] = a[2] - b[2]
out[3] = a[3] - b[3]
return out
}
vec4sub = vec4subtract
/**
* Transforms the vec4 with a mat4.
*
* @param {vec4} out the receiving vector
* @param {vec4} a the vector to transform
* @param {mat4} m matrix to transform with
* @returns {vec4} out
*/
function vec4transformMat4 (out, a, m) {
var x = a[0], y = a[1], z = a[2], w = a[3]
out[0] = m[0] * x + m[4] * y + m[8] * z + m[12] * w
out[1] = m[1] * x + m[5] * y + m[9] * z + m[13] * w
out[2] = m[2] * x + m[6] * y + m[10] * z + m[14] * w
out[3] = m[3] * x + m[7] * y + m[11] * z + m[15] * w
return out
}
/**
* Transforms the vec4 with a quat
*
* @param {vec4} out the receiving vector
* @param {vec4} a the vector to transform
* @param {quat} q quaternion to transform with
* @returns {vec4} out
*/
function vec4transformQuat (out, a, q) {
var x = a[0], y = a[1], z = a[2],
qx = q[0], qy = q[1], qz = q[2], qw = q[3],
// calculate quat * vec
ix = qw * x + qy * z - qz * y,
iy = qw * y + qz * x - qx * z,
iz = qw * z + qx * y - qy * x,
iw = -qx * x - qy * y - qz * z
// calculate result * inverse quat
out[0] = ix * qw + iw * -qx + iy * -qz - iz * -qy
out[1] = iy * qw + iw * -qy + iz * -qx - ix * -qz
out[2] = iz * qw + iw * -qz + ix * -qy - iy * -qx
out[3] = a[3]
return out
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.