Because Reinder asked
Log in to post a comment.
// You can find the Turtle API reference here: https://turtletoy.net/syntax Canvas.setpenopacity(0.01); // movement parameters const numSteps = 30 const startZ = 4.5 const endZ = -2.4 const startX = 3.6 const endX = -0.3 const startY = 4. const yInitSpeed = 0 const gravity = -9.8 const ground = -0.76 const bounceSpeedLoss = 0.65 // perun // sphere render options const intensity = 10 // instances var sphere var camera var lightPos function init() { camera = new Camera([0, 0, -3], [0, 0, 0]) lightPos = [-4, 10, -1] sphere = new Sphere(2, startZ - endZ) } // walk let turtle = new Turtle() // one turtle to rule them all function walk(i) { if (i == 19) return true; // dirty hack to prevent that one overlap for (let j = 0; j < 10; j++) { let t = i/numSteps + 0.5/numSteps + (j - 5) * 0.0004 let x = lerp(startX, endX, t) let y = getBouncingAcceleratedPos(t * 2.7, startY, yInitSpeed, gravity, ground) let z = lerp(startZ, endZ, t) sphere.setRotationPositionScale(quat.create(), [x, y, z], 0.05) sphere.draw() } return i < numSteps } // Classes function Sphere(depth, maxDist) { this.vertices = [] this.indices = [] this.triangles = [] this.modelMatrix = mat4.create() this.invModelMatrix = mat4.create() this.position = [0, 0, 0] this.setRotationPositionScale = function(rotation, position, scale) { this.position = position mat4.fromRotationTranslationScale(this.modelMatrix, rotation, position, [scale, scale, scale]) mat4.invert(this.invModelMatrix, this.modelMatrix) } this.init = function() { this.initializeSphere() for (let i = 0; i < depth; i++) { this.subdivide() } for (let vertex of this.vertices) { vec3.normalize(vertex, vertex); } for (let vertex of this.vertices) { let theta = Math.acos(vertex[2]) // r = 1 let phi = Math.atan2(vertex[1],vertex[0]) // let newR = 1 + phi * 0.1 // vertex[0] = newR * Math.sin(theta) * Math.cos(phi) // vertex[1] = newR * Math.sin(theta) * Math.sin(phi) // vertex[2] = newR * Math.cos(theta) } for (let i = 0; i < this.indices.length; i+=3) { let triangle = new Triangle( this.vertices[this.indices[i]], this.vertices[this.indices[i + 1]], this.vertices[this.indices[i + 2]]) this.triangles.push(triangle) } } this.initializeSphere = function() { let X = 0.525731112119133606; let Z = 0.850650808352039932; this.vertices = [ [-X, 0.0, Z], [ X, 0.0, Z ], [ -X, 0.0, -Z ], [ X, 0.0, -Z ], [ 0.0, Z, X ], [ 0.0, Z, -X ], [ 0.0, -Z, X ], [ 0.0, -Z, -X ], [ Z, X, 0.0 ], [ -Z, X, 0.0 ], [ Z, -X, 0.0 ], [ -Z, -X, 0.0 ] ] this.indices = [ 1, 4, 0, 4, 9, 0, 4, 5, 9, 8, 5, 4, 1, 8, 4, 1, 10, 8, 10, 3, 8, 8, 3, 5, 3, 2, 5, 3, 7, 2, 3, 10, 7, 10, 6, 7, 6, 11, 7, 6, 0, 11, 6, 1, 0, 10, 1, 6, 11, 0, 9, 2, 11, 9, 5, 2, 9, 11, 2, 7 ]; } this.subdivide = function() { // cache of midpoint indices var midpointIndices = []; // create lists instead... var l = this.indices.length; var subdividedIndices = []; var subdividedVertices = this.vertices; // subdivide each triangle for (var i = 0; i < l - 2; i += 3) { // grab indices of triangle var i0 = this.indices[i]; var i1 = this.indices[i + 1]; var i2 = this.indices[i + 2]; // calculate new indices var m01 = this.getMidpointIndex(midpointIndices, subdividedVertices, i0, i1); var m12 = this.getMidpointIndex(midpointIndices, subdividedVertices, i1, i2); var m02 = this.getMidpointIndex(midpointIndices, subdividedVertices, i2, i0); subdividedIndices.push( i0, m01, m02, i1, m12, m01, i2, m02, m12, m02, m01, m12); } this.indices = subdividedIndices.slice(); } this.getMidpointIndex = function(midpointIndices, vertices, i0, i1) { if (midpointIndices[i0] && midpointIndices[i0][i1]) { return midpointIndices[i0][i1]; } if (midpointIndices[i1] && midpointIndices[i1][i0]) { return midpointIndices[i1][i0]; } if (!midpointIndices[i0]) midpointIndices[i0] = []; return this.addVertex(midpointIndices, vertices, i0, i1); } this.addVertex = function(midpointIndices, vertices, i0, i1) { //there is no vertex between these vertices yet var v0 = this.vertices[i0]; var v1 = this.vertices[i1]; var midpoint = [0, 0, 0]; vec3.add(midpoint, v0, v1) vec3.multiply(midpoint, midpoint, [0.5, 0.5, 0.5]) var midpointIndex = vertices.length; midpointIndices[i0][i1] = midpointIndex; this.vertices.push(midpoint); return midpointIndex; } this.draw = function() { let distance = this.position[2] - endZ let distScale = 1 - Math.min(Math.pow(distance/maxDist, 0.25), 0.999) //console.log("distance " + distance + ", distScale " + distScale) for (let triangle of this.triangles) { this.drawSphereTriangle(triangle, distScale * intensity) } } this.drawSphereTriangle = function(triangle, darkness) { let visible = this.isFrontfacing(camera.position, triangle) if (visible) { let frontFacingAmount = this.frontFacingAmount(camera.position, triangle) let fresnel = Math.pow((1 - frontFacingAmount), 1.5) let specular = this.getSpecular(camera.position, lightPos, triangle) let shading = 16 * Math.min((1 - specular), 1) * fresnel * darkness drawTriangle(triangle, camera, this.modelMatrix, shading) } } this.isFrontfacing = function(camPos, triangle) { // all in local space let localCamera = vec3.transformMat4([], camera.position, this.invModelMatrix) let center = getCenter(triangle) // note: it's a unit sphere so point == normal let camToTriangle = vec3.subtract([], center, localCamera) return vec3.dot(camToTriangle, center) < 0 } this.frontFacingAmount = function(camPos, triangle) { let localCamera = vec3.transformMat4([], camera.position, this.invModelMatrix) vec3.normalize(localCamera, localCamera) let trianglePos = getCenter(triangle) vec3.normalize(trianglePos, trianglePos) return Math.abs(Math.acos(vec3.dot(trianglePos, localCamera)) / (0.5 * Math.PI)) } this.getSpecular = function(camPos, lightPos, triangle) { // all in local space let localCamera = vec3.transformMat4([], camPos, this.invModelMatrix) let localLight = vec3.transformMat4([], lightPos, this.invModelMatrix) let trianglePos = getCenter(triangle) let normal = trianglePos let viewDirection = vec3.normalize([], vec3.subtract([], localCamera, trianglePos)) let lightDirection = vec3.normalize([], localLight) if (vec3.dot(normal, lightDirection) < 0.0) { return 0 } else { let inverted = vec3.scale([], lightDirection, -1) let reflected = this.reflect(inverted, normal) let reflectedDotted = vec3.dot(reflected, viewDirection) return Math.pow(Math.max(0.0, reflectedDotted), 1) } } this.getDistance = function(camPos, triangle) { let worldTrianglePos = vec3.transformMat4([], getCenter(triangle), this.modelMatrix) return vec3.distance(camPos, worldTrianglePos) } this.reflect = function(incident, normal) { let dotted = vec3.dot(normal, incident) let multiplied = vec3.scale([], normal, dotted * 2) return vec3.subtract([], incident, multiplied) } this.init() } function Line(v0, v1) { //console.log("new line ", v0, v1) this.pluckerCoords = []; this.v0 = v0 this.v1 = v1 this.pluckerCoords[0] = v0[0] * v1[1] - v1[0] * v0[1]; this.pluckerCoords[1] = v0[0] * v1[2] - v1[0] * v0[2]; this.pluckerCoords[2] = v0[0] - v1[0]; this.pluckerCoords[3] = v0[1] * v1[2] - v1[1] * v0[2]; this.pluckerCoords[4] = v0[2] - v1[2]; this.pluckerCoords[5] = v1[1] - v0[1]; this.toString = function() { return "<" + printVertex(this.v0) + " | " + printVertex(this.v1) + ">"; } } function Triangle(v0, v1, v2) { this.v0 = v0 this.v1 = v1 this.v2 = v2 this.edge = function(index) { switch (index) { case 0: return new Line(this.v0, this.v1); case 1: return new Line(this.v1, this.v2); case 2: return new Line(this.v2, this.v0); } } this.toString = function() { return "<" + printVertex(this.v0) + " | " + printVertex(this.v1) + " | " + printVertex(this.v2) + ">"; } this.transformedCopy = function(matrix) { let newV0 = [0, 0, 0] let newV1 = [0, 0, 0] let newV2 = [0, 0, 0] vec3.transformMat4(newV0, this.v0, matrix) vec3.transformMat4(newV1, this.v1, matrix) vec3.transformMat4(newV2, this.v2, matrix) return new Triangle(newV0, newV1, newV2) } } function Camera(position, lookAt) { this.position = position this.lookAt = lookAt this.fov = 0.5 this.nearPlane = 1 this.farPlane = 1000 this.aspect = 1 this.projectionMatrix = [] this.cameraMatrix = [] this.dirty = true this.getPerspectiveMatrix = function() { this.updateMatrices() return this.projectionMatrix } this.getCameraMatrix = function() { this.updateMatrices() return this.cameraMatrix } this.updateMatrices = function() { if (this.dirty) { this.projectionMatrix = mat4.create() mat4.perspective(this.projectionMatrix, this.fov, this.aspect, this.nearPlane, this.farPlane) this.cameraMatrix = mat4.create() mat4.lookAt(this.cameraMatrix, camera.position, camera.lookAt, [0,1,0]) this.dirty = false } } } // Utility functions function drawTriangle(triangle, camera, modelMatrix, levels = 1) { let center = getCenter(triangle) let levelsRound = Math.round(levels) for (let i = 1; i < levelsRound + 1; i++) { let levelScale = i/(levelsRound + 1) turtle.penup() turtle.goto(renderVertex(lerp3(center, triangle.v2, levelScale), camera, modelMatrix)) turtle.pendown() turtle.goto(renderVertex(lerp3(center, triangle.v0, levelScale), camera, modelMatrix)) turtle.goto(renderVertex(lerp3(center, triangle.v1, levelScale), camera, modelMatrix)) turtle.goto(renderVertex(lerp3(center, triangle.v2, levelScale), camera, modelMatrix)) } } function renderVertex(vertex, camera, modelMatrix = []) { if (typeof finalMatrix == "undefined") finalMatrix = mat4.create() if (modelMatrix.length > 0) { mat4.multiply(finalMatrix, camera.getCameraMatrix(), modelMatrix) mat4.multiply(finalMatrix, camera.getPerspectiveMatrix(), finalMatrix) } else { mat4.multiply(finalMatrix, camera.getPerspectiveMatrix(), cameraMatrix) } vertex = vertex.concat(1) vec4.transformMat4(vertex, vertex, finalMatrix) x = vertex[0] / vertex[3] y = vertex[1] / vertex[3] z = vertex[2] / vertex[3] // to canvas coords x = -x * 50 y = -y * 50 return [x, y, z] } function lerp3(from, to, amount) { let x = lerp(from[0], to[0], amount) let y = lerp(from[1], to[1], amount) let z = lerp(from[2], to[2], amount) return [x, y, z] } function lerp(a, b, amount) { return a * (1 - amount) + b * amount } function getCenter(triangle) { return [ (triangle.v0[0] + triangle.v1[0] + triangle.v2[0]) / 3, (triangle.v0[1] + triangle.v1[1] + triangle.v2[1]) / 3, (triangle.v0[2] + triangle.v1[2] + triangle.v2[2]) / 3, ] } // Movement untility functions const MAX_BOUNCES = 100 function getBouncingAcceleratedPos(t, start, startSpeed, acceleration, ground) { let y = getAcceleratedPos(t, start, startSpeed, acceleration) if (y > ground) return y let bounces = 0 let tOffset = 0 let posOffset = start let speedOffset = startSpeed while (y < ground && bounces++ < MAX_BOUNCES) { let tBounce = getTimeForAcceleratedPos(ground, posOffset, speedOffset, acceleration) let afterBounceSpeed = getAcceleratedSpeed(tBounce, speedOffset, acceleration) * bounceSpeedLoss * -1 posOffset = ground speedOffset = afterBounceSpeed tOffset += tBounce y = getAcceleratedPos(t - tOffset, posOffset, speedOffset, gravity) } return y } function getAcceleratedPos(t, start, startSpeed, acceleration) { return start + startSpeed * t + 0.5 * acceleration * Math.pow(t, 2) } function getAcceleratedSpeed(t, startSpeed, acceleration) { return acceleration * t + startSpeed } function getTimeForAcceleratedPos(pos, start, startSpeed, acceleration) { if (acceleration == 0) return 0 let result1 = (Math.sqrt(Math.pow(startSpeed, 2) - 2 * acceleration * (start - pos)) - startSpeed) / acceleration let result2 = (-Math.sqrt(Math.pow(startSpeed, 2) - 2 * acceleration * (start - pos)) - startSpeed) / acceleration // assuming we only want the positive result return Math.max(result1, result2) } // gl-matrix EPSILON = 0.00001; halfToRad = 0.5 * Math.PI / 180.0; function vec3() { this.add = function(out, a, b) { out[0] = a[0] + b[0]; out[1] = a[1] + b[1]; out[2] = a[2] + b[2]; return out; } this.subtract = function(out, a, b) { out[0] = a[0] - b[0]; out[1] = a[1] - b[1]; out[2] = a[2] - b[2]; return out; } this.multiply = function(out, a, b) { out[0] = a[0] * b[0]; out[1] = a[1] * b[1]; out[2] = a[2] * b[2]; return out; } this.normalize = function(out, a) { let x = a[0]; let y = a[1]; let z = a[2]; let len = x*x + y*y + z*z; if (len > 0) { //TODO: evaluate use of glm_invsqrt here? len = 1 / Math.sqrt(len); } out[0] = a[0] * len; out[1] = a[1] * len; out[2] = a[2] * len; return out; } this.scale = function(out, a, b) { out[0] = a[0] * b; out[1] = a[1] * b; out[2] = a[2] * b; return out; } this.distance = function(a, b) { let x = b[0] - a[0]; let y = b[1] - a[1]; let z = b[2] - a[2]; return Math.sqrt(x*x + y*y + z*z); } this.dot = function (a, b) { return a[0] * b[0] + a[1] * b[1] + a[2] * b[2]; } this.transformMat4 = function(out, a, m) { let x = a[0], y = a[1], z = a[2]; let w = m[3] * x + m[7] * y + m[11] * z + m[15]; w = w || 1.0; 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; return out; } } function vec4() { this.transformMat4 = function(out, a, m) { let 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; } } function mat4() { this.create = function() { return new Float32Array(16) } this.identity = function(out) { out[0] = 1; out[1] = 0; out[2] = 0; out[3] = 0; out[4] = 0; out[5] = 1; out[6] = 0; out[7] = 0; out[8] = 0; out[9] = 0; out[10] = 1; out[11] = 0; out[12] = 0; out[13] = 0; out[14] = 0; out[15] = 1; return out; } this.lookAt = function(out, eye, center, up) { let x0, x1, x2, y0, y1, y2, z0, z1, z2, len; let eyex = eye[0]; let eyey = eye[1]; let eyez = eye[2]; let upx = up[0]; let upy = up[1]; let upz = up[2]; let centerx = center[0]; let centery = center[1]; let centerz = center[2]; if (Math.abs(eyex - centerx) < EPSILON && Math.abs(eyey - centery) < EPSILON && Math.abs(eyez - centerz) < EPSILON) { return identity(out); } z0 = eyex - centerx; z1 = eyey - centery; z2 = eyez - centerz; len = 1 / Math.sqrt(z0 * z0 + z1 * z1 + z2 * z2); z0 *= len; z1 *= len; z2 *= len; x0 = upy * z2 - upz * z1; x1 = upz * z0 - upx * z2; x2 = upx * z1 - upy * z0; len = Math.sqrt(x0 * x0 + x1 * x1 + x2 * x2); if (!len) { x0 = 0; x1 = 0; x2 = 0; } else { len = 1 / len; x0 *= len; x1 *= len; x2 *= len; } y0 = z1 * x2 - z2 * x1; y1 = z2 * x0 - z0 * x2; y2 = z0 * x1 - z1 * x0; len = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2); if (!len) { y0 = 0; y1 = 0; y2 = 0; } else { len = 1 / len; y0 *= len; y1 *= len; y2 *= len; } out[0] = x0; out[1] = y0; out[2] = z0; out[3] = 0; out[4] = x1; out[5] = y1; out[6] = z1; out[7] = 0; out[8] = x2; out[9] = y2; out[10] = z2; out[11] = 0; out[12] = -(x0 * eyex + x1 * eyey + x2 * eyez); out[13] = -(y0 * eyex + y1 * eyey + y2 * eyez); out[14] = -(z0 * eyex + z1 * eyey + z2 * eyez); out[15] = 1; return out; } this.multiply = function(out, a, b) { let a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3]; let a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7]; let a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11]; let a30 = a[12], a31 = a[13], a32 = a[14], a33 = a[15]; // Cache only the current line of the second matrix let b0 = b[0], b1 = b[1], b2 = b[2], b3 = b[3]; out[0] = b0*a00 + b1*a10 + b2*a20 + b3*a30; out[1] = b0*a01 + b1*a11 + b2*a21 + b3*a31; out[2] = b0*a02 + b1*a12 + b2*a22 + b3*a32; out[3] = b0*a03 + b1*a13 + b2*a23 + b3*a33; b0 = b[4]; b1 = b[5]; b2 = b[6]; b3 = b[7]; out[4] = b0*a00 + b1*a10 + b2*a20 + b3*a30; out[5] = b0*a01 + b1*a11 + b2*a21 + b3*a31; out[6] = b0*a02 + b1*a12 + b2*a22 + b3*a32; out[7] = b0*a03 + b1*a13 + b2*a23 + b3*a33; b0 = b[8]; b1 = b[9]; b2 = b[10]; b3 = b[11]; out[8] = b0*a00 + b1*a10 + b2*a20 + b3*a30; out[9] = b0*a01 + b1*a11 + b2*a21 + b3*a31; out[10] = b0*a02 + b1*a12 + b2*a22 + b3*a32; out[11] = b0*a03 + b1*a13 + b2*a23 + b3*a33; b0 = b[12]; b1 = b[13]; b2 = b[14]; b3 = b[15]; out[12] = b0*a00 + b1*a10 + b2*a20 + b3*a30; out[13] = b0*a01 + b1*a11 + b2*a21 + b3*a31; out[14] = b0*a02 + b1*a12 + b2*a22 + b3*a32; out[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return out; } this.perspective = function(out, fovy, aspect, near, far) { let f = 1.0 / Math.tan(fovy / 2), nf; out[0] = f / aspect; out[1] = 0; out[2] = 0; out[3] = 0; out[4] = 0; out[5] = f; out[6] = 0; out[7] = 0; out[8] = 0; out[9] = 0; out[11] = -1; out[12] = 0; out[13] = 0; out[15] = 0; if (far != null && far !== Infinity) { nf = 1 / (near - far); out[10] = (far + near) * nf; out[14] = (2 * far * near) * nf; } else { out[10] = -1; out[14] = -2 * near; } return out; } this.fromRotationTranslationScale = function(out, q, v, s) { // Quaternion math let x = q[0], y = q[1], z = q[2], w = q[3]; let x2 = x + x; let y2 = y + y; let z2 = z + z; let xx = x * x2; let xy = x * y2; let xz = x * z2; let yy = y * y2; let yz = y * z2; let zz = z * z2; let wx = w * x2; let wy = w * y2; let wz = w * z2; let sx = s[0]; let sy = s[1]; let sz = s[2]; out[0] = (1 - (yy + zz)) * sx; out[1] = (xy + wz) * sx; out[2] = (xz - wy) * sx; out[3] = 0; out[4] = (xy - wz) * sy; out[5] = (1 - (xx + zz)) * sy; out[6] = (yz + wx) * sy; out[7] = 0; out[8] = (xz + wy) * sz; out[9] = (yz - wx) * sz; out[10] = (1 - (xx + yy)) * sz; out[11] = 0; out[12] = v[0]; out[13] = v[1]; out[14] = v[2]; out[15] = 1; return out; } this.invert = function(out, a) { let a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3]; let a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7]; let a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11]; let a30 = a[12], a31 = a[13], a32 = a[14], a33 = a[15]; let b00 = a00 * a11 - a01 * a10; let b01 = a00 * a12 - a02 * a10; let b02 = a00 * a13 - a03 * a10; let b03 = a01 * a12 - a02 * a11; let b04 = a01 * a13 - a03 * a11; let b05 = a02 * a13 - a03 * a12; let b06 = a20 * a31 - a21 * a30; let b07 = a20 * a32 - a22 * a30; let b08 = a20 * a33 - a23 * a30; let b09 = a21 * a32 - a22 * a31; let b10 = a21 * a33 - a23 * a31; let b11 = a22 * a33 - a23 * a32; // Calculate the determinant let det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06; if (!det) { return null; } det = 1.0 / det; out[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det; out[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det; out[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det; out[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det; out[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det; out[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det; out[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det; out[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det; out[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det; out[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det; out[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det; out[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det; out[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det; out[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det; out[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det; out[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det; return out; } } function quat() { this.create = function() { let out = []; out[0] = 0; out[1] = 0; out[2] = 0; out[3] = 1; return out; } this.fromEuler = function(out, x, y, z) { x *= halfToRad; y *= halfToRad; z *= halfToRad; let sx = Math.sin(x); let cx = Math.cos(x); let sy = Math.sin(y); let cy = Math.cos(y); let sz = Math.sin(z); let cz = Math.cos(z); out[0] = sx * cy * cz - cx * sy * sz; out[1] = cx * sy * cz + sx * cy * sz; out[2] = cx * cy * sz - sx * sy * cz; out[3] = cx * cy * cz + sx * sy * sz; return out; } } vec3 = new vec3() // mimic static functions behavior vec4 = new vec4() quat = new quat() mat4 = new mat4() // end gl-matrix init()