### Ping pong ball coming at ya

Physics-y

```// You can find the Turtle API reference here: https://turtletoy.net/syntax
Canvas.setpenopacity(0.1);

// movement parameters
const numSteps = 150
const maxBallWeight = 140
const simulationTimeEnd = 6

const initPos = [1, 4, 4]
const initSpeed = [-7.2, 0, -0.7]
const acceleration = [0.1, -9.8, 0]

const limitMin = [-3, -1, -100]
const limitMax = [3, 100, 100]

const bounceSpeedLoss = [0.78, 0.88, 1] // perun

var camera
let turtle = new Turtle()
let startDist, endDist
function init() {
camera = new Camera([0.5, 3, -5], [0, 0.5, 3])

startDist = distance(getPosition(0), camera.position)
endDist = distance(getPosition(simulationTimeEnd), camera.position)

makeGridBox()
}

function walk(i) {
let t = (i/numSteps + 0.5/numSteps) * simulationTimeEnd
vertex = getPosition(t)

let dist = distance(vertex, camera.position)
let closeness = 1 - (dist - endDist) / (startDist - endDist)

let size = 1 + closeness * 2
let weight = 0.3 + closeness

drawBall(vertex, size, weight * maxBallWeight)

return i < numSteps
}

function getPosition(t) {
let x = getBouncingAcceleratedPos(t, initPos[0], initSpeed[0], acceleration[0], limitMin[0], limitMax[0], bounceSpeedLoss[0])
let y = getBouncingAcceleratedPos(t, initPos[1], initSpeed[1], acceleration[1], limitMin[1], limitMax[1], bounceSpeedLoss[1])
let z = getBouncingAcceleratedPos(t, initPos[2], initSpeed[2], acceleration[2], limitMin[2], limitMax[2], bounceSpeedLoss[2])
return [x, y, z]
}

function drawBall(pos, size, steps) {
for (let i = 0; i < steps; i++) {
let scale = i / steps;
scale = Math.pow(scale, 0.6)
drawCircle(pos, size * scale)
}
}

let circleTurtle = new Turtle() // one turtle to rule them all
function drawCircle(pos, size) {
circleTurtle.penup()

let screenPos = toScreen(pos, camera)

// fake a highlight
let addX = 0.25 * size;
let addY = 0.45 * size;

circleTurtle.goto(screenPos)

circleTurtle.pendown()
circleTurtle.circle(size)
}

function toScreen(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(), camera.getCameraMatrix())
}

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]
}

// Camera

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
}
}
}

// Movement functions
const MAX_BOUNCES = 100

function getBouncingAcceleratedPos(t, initPos, initPosSpeed, acceleration, lowerLimit, upperLimit, bounceSpeedLoss) {
let value = getAcceleratedPos(t, initPos, initPosSpeed, acceleration)
if (value >= lowerLimit && value <= upperLimit) return value

let bounces = 0
let tOffset = 0
let posOffset = initPos
let speedOffset = initPosSpeed
let tBounce = t
while ((value < lowerLimit || value > upperLimit) && bounces++ < MAX_BOUNCES) {
let limit = value < lowerLimit ? lowerLimit : upperLimit
tBounce = getTimeForAcceleratedPos(limit, posOffset, speedOffset, acceleration, tBounce)
let afterBounceSpeed = getAcceleratedSpeed(tBounce, speedOffset, acceleration) * bounceSpeedLoss * -1

posOffset = limit
speedOffset = afterBounceSpeed
tOffset += tBounce

value = getAcceleratedPos(t - tOffset, posOffset, speedOffset, acceleration)

if (Math.abs(speedOffset) <= 0.01) break;
}
value = Math.min(Math.max(value, lowerLimit), upperLimit) // to counter rounding errors fromin previous loop

if (bounces >= MAX_BOUNCES) {
console.warn("Max bounces reached")
return lowerLimit
}
else {
return value
}
}

function getAcceleratedPos(t, initPos, initSpeed, acceleration) {
return initPos + initSpeed * t + 0.5 * acceleration * Math.pow(t, 2)
}

function getAcceleratedSpeed(t, initSpeed, acceleration) {
return acceleration * t + initSpeed
}

// https://www.wolframalpha.com/input/?i=x+%3D+0.5+*+a+*+t%5E2+%2B+v*t+%2B+x0+solve+for+t
function getTimeForAcceleratedPos(pos, initPos, initSpeed, acceleration, t) {
if (acceleration == 0 && initSpeed != 0) {
return (pos - initPos) / initSpeed
}

let result1 = -(Math.sqrt(2 * acceleration * (pos - initPos) + Math.pow(initSpeed, 2)) + initSpeed) / acceleration
let result2 = (Math.sqrt(2 * acceleration * (pos - initPos) + Math.pow(initSpeed, 2)) - initSpeed) / acceleration

// get the result closest to current t
let result = Math.abs(result1 - t) < Math.abs(result2 - t) ? result1 : result2
return result
}

// misc

function makeGridBox() {
let modelMatrix = mat4.create()
mat4.fromRotationTranslationScale(modelMatrix, quat.create(), [0, -1, 3], [1, 1, 1])
drawGrid(3, 3, modelMatrix)

let rot = quat.create()
quat.fromEuler(rot, 0, 0, -90)
mat4.fromRotationTranslationScale(modelMatrix, rot, [-3, 2, 3], [1, 1, 1])
drawGrid(3, 3, modelMatrix)

quat.fromEuler(rot, 0, 0, 90)
mat4.fromRotationTranslationScale(modelMatrix, rot, [3, 2, 3], [1, 1, 1])
drawGrid(3, 3, modelMatrix)
}

let gridTurtle = new Turtle()
function drawGrid(range, steps, modelMatrix) {
for(let k = 0; k <= 1; k+=1/steps) {
let coord = [-range, 0, (k * 2 - 1) * range]

gridTurtle.penup()
gridTurtle.goto(toScreen(coord, camera, modelMatrix))
coord[0] = range
gridTurtle.pendown()
gridTurtle.goto(toScreen(coord, camera, modelMatrix))
}
for(let k = 0; k < 1; k+=1/steps) {
let coord = [(k * 2 - 1) * range, 0, -range]

gridTurtle.penup()
gridTurtle.goto(toScreen(coord, camera, modelMatrix))
coord[2] = range
gridTurtle.pendown()
gridTurtle.goto(toScreen(coord, camera, modelMatrix))
}
}

function lerp(a, b, amount) {
return a * (1 - amount) + b * amount
}

function distance(a, b) {
return Math.sqrt(Math.pow((a[0] - b[0]), 2) + Math.pow((a[1] - b[1]), 2) + Math.pow((a[2] - b[2]), 2))
}

// 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) {
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()```