Parametric curveCAP 4720: Introduction to ObservableUseful Javascript Array functions.Vectors and vector AlgebraIntro to WebGL Programming using twgl.Point In front or back of A PlaneRasterization & InterpolationBarycentric CoordinatesModel Loaders using ThreeJSDiffuse lighting: Lambert Cosine Model.Shade Due to Diffuse LightingOrbit CameraSpotLight and its effect in Lighting.Normal MatrixSpecular lighting ModelDiffuse + Specular + Ambient LightingWebGL Texturing using twgl.WebGL/twgl Rendering of Multipart Model with TextureSkybox rendering using Cubemap.Stenciling ExampleSilhouette EdgeShadow Projection of 3D ObjectsFragment Inside/Outside VolumeInbeweening using Tween.js: 1RotationsRay-Scene (2D) intersectionRotor QuaternionSLERP: Spherical Linear Interpolation
Example Use of TWGL Math Library
Vec3 = twgl.v3
v0 = Vec3.create()
X = Array.from(Vec3.create(...[1, 2, 3]))
test = []
test.push(X, X, X)
test.flat()
v1 = Vec3.create(1, 1, 1)
v2 = Vec3.create(1, 2, 3)
Vec3.add(v1, v2)
Vec3.subtract(v1, v2)
Dot product of Vectors
Vec3.dot(v1, v2)
Length of a Vector
Vec3.length(v1)
Vec3.length(v2)
Vec3.normalize(v1)
Vec3.dot(Vec3.normalize(v1), Vec3.normalize(v2))
Vec3.cross(v1, v2)
Vec3.cross(v2, v1)
Vec3.cross(v1, v1)
Vec3.dot(v1, Vec3.cross(v1, v2))
m0 = Mat4.create() // Create a zero matrix
// For some reason create function is not available in the library. I have added it.
m1 = Mat4.identity() // Create an identity matrix
m2 = Mat4.translation(v1) // Create a translation matrix
deg2rad = (deg) => (deg * Math.PI) / 180
m3 = Mat4.rotationX(deg2rad(45)) // rotate around X-axis by an angle (radian).
m4 = Mat4.rotationY(deg2rad(45)) // rotate around Y-axis by an angle (radian).
m5 = Mat4.rotationZ(deg2rad(45)) // rotate around Z-axis by an angle (radian).
m6 = Mat4.axisRotation(v1, deg2rad(45)) // rotate around axis (3D vector) by an angle (radian)
v2
m7 = Mat4.scaling(v2) // scale each dimension by an amount given by the corresponding entry in the 3D vector
v0
Mat4.transformDirection(m2, v0)
Mat4.transformPoint(m2, v0)
Mat4.negate(m2)
Mat4.transpose(m2)
Mat4.inverse(m2)
Mat4.multiply(m2, Mat4.inverse(m2)) // Product of a matrix with its inverse is Identity matrix.
eye = Vec3.create(0,0,5)
target = Vec3.create()
up = Vec3.create(0, 1, 0)
cameraMatrix = Mat4.lookAt(eye, target, up)
viewMatrix = Mat4.inverse(cameraMatrix)
Mat4.transformPoint(viewMatrix, eye)
Mat4.transformPoint(viewMatrix, target)
fieldOfViewYInRadians = deg2rad(90) // The angle the vertical extent of the view window makes at the camera eye.
aspect = 1 // it is the (view-window-width / view-windo-height)
zNear = 0.1 // Minimum Z-extent of the view volume. Z distance from the eye smaller than this length will be outside clip volume.
zFar = 10 // Maximum Z-extent of the view volume. Z distance from the eye larger than this length will be outside clip volume.
projMatrix = Mat4.perspective(fieldOfViewYInRadians, aspect, zNear, zFar) // Transorms the points inside the view volume to a rectangular box extending from -1 to 1 in the x, y and z dimensions.
Mat4.transformPoint(projMatrix, Vec3.create(0, 0, -zNear))
Mat4.transformPoint(projMatrix, Vec3.create(0, 0, -zFar))
Mat4.transformPoint(projMatrix, Vec3.create(-zFar, 0, -zFar))
Mat4.transformPoint(projMatrix, Vec3.create(-zNear, 0, -zNear))
Mat4.transformPoint(projMatrix, Vec3.create(zNear, 0, -zNear))
Mat4.transformPoint(projMatrix, Vec3.create(0, zFar, -zFar))
twgl = require("twgl.js")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
