Computer Graphics Calculator

3D Calculator

Barycentric Interpolation (Accepts Fractions or Decimals)

Number of Values to Interpolate (2 for uv, 3 for color, etc.):

Values Known for All Points
Note: if you know alpha, beta, and gamma already, put them in the interpolated point section and set the first vertex to [1, 0, 0], the second to [0, 1, 0], and the third to [0, 0, 1].
Vertex 1:
Vertex 2:
Vertex 3:
Interpolated Point:

Values Known Only for Vertices
Vertex 1:

Vertex 2:

Vertex 3:

Bilinear Interpolation

X: Y:
Top Left X: Top Left Y:
Bottom Right X: Bottom Right Y:

Top Left Value: Top Right Value:
Bottom Left Value: Bottom Right Value:

Result:

Vector Normalization (Accepts Fractions or Decimals)

Size of Vector:

Vector:

Curve with Basis Functions & Control Points (Accepts Fractions or Decimals)

Number of Basis Functions & Control Points:

Size of Control Point Vectors:

u:

Basis Functions:

Control Points:

Point:

Transforming a Point in 3D

If you don't want to use a matrix, let it stay as translate(0,0,0), enlarge(1,1,1), or scale(1,1,1).
Remember that the rotation is in DEGREES, not radians, and is LOCAL NOT GLOBAL.
Enlarge and scale both affect future transformations, but the scale from THREE does not.
T: translation R: (Euler) rotation E: enlarge (from LOCAL center) S: scale (from GLOBAL center)

Point(x,y,z):
Result(x,y,z):

Axis Angle

Global: rotateOnWorldAxis()
Local: rotateOnAxis()
Specify 4 numbers: angle,axisX,axisY,axisZ
The axis angle method does not suffer from gimbal lock.

Global

Axis(x,y,z):
Vector(x,y,z):
Angle (in Degrees):

Result(x,y,z):

Local

Axis(x,y,z):
Vector(x,y,z):
Angle (in Degrees):
Local Center(x,y,z):

Result(x,y,z):

Quaternions

THREE.js converts everything internally to quaternions.
Specify 4 numbers: A quaternion is a 4D complex number.
Quaternions are composed via multiplication.
Quaternions can be interpolated (spherical linear interpolation)
Quaternions do not suffer from gimbal lock.

Axis Angle to Quaternion

Axis(x,y,z):
Angle (in Degrees):

Result:
\(cos(\frac{\theta}{2}):\)
\(x*sin(\frac{\theta}{2}):\)
\(y*sin(\frac{\theta}{2}):\)
\(z*sin(\frac{\theta}{2}):\)

Euler Angle to Quaternion

Angle(x,y,z) (in Degrees):

Result:
Intermediate results for each rotation at x, y, z:
\( (cos(\frac{x}{2}), sin(\frac{x}{2}), 0, 0 ):\)

\( (cos(\frac{y}{2}), 0, sin(\frac{y}{2}), 0 ):\)

\( (cos(\frac{z}{2}), 0, 0, sin(\frac{z}{2}) ):\)

Multiplied Quaternion:

Quaternion to Axis Angle

\(cos(\frac{\theta}{2}):\)
\(x*sin(\frac{\theta}{2}):\)
\(y*sin(\frac{\theta}{2}):\)
\(z*sin(\frac{\theta}{2}):\)

Result:
Axis(x,y,z):
Angle (in Degrees):

Quaternion to Euler Angle

Quaternion (w, x, y, z):

Result:
Euler Angle(x,y,z) (in Degrees):

Bezier Tangents

Number of Control Points (4 for cubic, 3 for quadratic):

Size of Control Points (3 for 3D, 2 for 2D):

Control Points:

Tangent At Beginning:

Tangent At End:

4D Matrix-Matrix Multiplication

Left Matrix:

Right Matrix:

Resulting Matrix:

4D Matrix-Vector Multiplication

Left Matrix:

Vector:

Resulting Vector:

OR PROJECTED

Texture Mapping

Provide Order of Plane Vertices:
Lower-Left:
Lower-Right:
Upper-Right:
Upper-Left:

Provide U,V Values of Vertices:
Vertex 0:
Vertex 1:
Vertex 2:
Vertex 3:

Provide Type of Texture Wrapping:

Mirror in U uses mirrored wrapS; Mirror in V uses mirrored wrapT.

Result:

Shaders

Vector Shader:

varying vec2 v_uv;
void main() {
  v_uv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

Fragment Shader:

varying vec2 v_uv;
void main() {
  vec3 dark = vec3(0.1, 0.1, 0.1);
  vec3 light = vec3(0.9, 0.9, 0.9);
  vec2 xy = abs(fract(v_uv / 0.25) - 0.5); // affects # of repetitions; affects start point
  float d = max(xy.x, xy.y); // affects shape; currently square
  float e = fwidth(d) / 2.0;
  float dc = smoothstep(0.125 - e, 0.125 + e, d);
  gl_FragColor = vec4(mix(dark, light, dc), 1.0);
}

Choose the number of repetitions and the offset of the shape.

Choose the shape.
Notice that when using \(xy.x^{n}\) and \(xy.y^{n}\), n = 2 creates a circle and higher m values make more square-like shapes.

Edit the vertex shader code:

Edit the fragment shader code:

Phong Material

COLOR:
SHININESS:

2D Calculator

Convert Cardinal to Cubic Bezier

Cardinal Points:

s value:
s is fraction:

Resulting Cubic Bezier Points:

Convert Cubic Bezier to Cardinal

Cubic Bezier Points:

s value:
s is fraction:

Resulting Cardinal Points:

Convert Cardinal to Hermite

Cardinal Points:

s value:
s is fraction:

Resulting Hermite Points:

Resulting Hermite Tangents:

Convert Hermite to Cardinal

Hermite Points:

Hermite Tangents:

s value:
s is fraction:

Resulting Cardinal Points:

Convert Hermite to Cubic Bezier

Hermite Points:

Resulting Cubic Bezier Points:

Convert Cubic Bezier to Hermite

Cubic Bezier Points:

Resulting Hermite Points:

Convert Quadratic Bezier to Cubic Bezier

Quadratic Points:

Resulting Cubic Points:

Connect Cubic Bezier to End of Quadratic Bezier

Quadratic Points: (you do not need q0)

C(1) connection is 2/3, G(1) is any:
scale is fraction:

Resulting Cubic Points:

b2 and b3 do not matter

Connect Quadratic Bezier to End of Cubic Bezier

Cubic Points: (you do not need c0 or c1)

C(1) connection is 3/2, G(1) is any:
scale is fraction:

Resulting Quadratic Points:

q2 does not matter

Connecting Quadratic Bezier to End of Quadratic Bezier

Quadratic Points: (you do not need p0)

C(1) connection is 1, G(1) is any:
scale is fraction:

Resulting Quadratic Points:

q2 does not matter

Connecting Cubic Bezier Between 2 Cubic Beziers with C(1)

First Cubic Points: (you do not need a0 or a1)

Second Cubic Points: (you do not need c2 or c3)

Resulting Cubic Points:

Connecting Quadratic Bezier Between 2 Cubic Beziers with G(1)

First Cubic Bezier Points: (you do not need a0 or a1)

Second Cubic Bezier Points: (you do not need c2 or c3)

Resulting Quadratic Bezier Points:

Decastlejau

Bezier Points:

u:

Is Quadratic:
u is fraction:

First Segment Points:

Second Segment Points:

The point at u:

Interpolating Many Line Segments

Number of Points:

Points Loop:
u =

Points:

Distance

Bezier with Arc-Length Parameterization

Arc-Length Tangent (Given beginning tangent, what is ending tangent?)

Tangent at Beginning:
Second to Last and Last Point: (do not need b0 or b1)

Matrix-Point Multiplication

Matrix:

Point:

3D Matrix-Matrix Multiplication

Left Matrix:

Right Matrix:

Resulting Matrix:

Transforming a Point

If you don't want to use a matrix, let it stay as translate(0,0).
T: translation R: rotation S: scale
If you use rotation, use the first box for the angle! Use DEGREES!

Point(x,y):
Result(x,y):

Find Arc Length Around Simple Perimeter

Add points to the shape by switching from option N to option P and adding the x and y values.

u: perimeter: lengths:
Result(x,y):