Experiment

by CrazyDave2345

HTML

<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

/*interface PositionData {
  x: number;
  y: number;
  t: number;
}*/

const buffer = [];
let position = {x: 0, y: 0, t:0};
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let old_position/*: PositionData*/ = {x: 0, y: 0, t: 0};
let dx_dt = 0;
let dy_dt = 0;

let old_dx_dt = 0;
let old_dy_dt = 0;

let d2x_dt = 0;
let d2y_dt = 0;

function assert(boolean) {
  if (!boolean) debugger;
}

function Packet(new_position) {
  const dt = (new_position.t - old_position.t);
  console.log("dt", dt)
  console.log("new_pos", new_position.x, new_position.y)
  console.log("old_pos", old_position.x, old_position.y)

  // calculate dy/dt based on new x,y and old x, y
  dx_dt =	(new_position.x	- old_position.x) / dt
  dy_dt =	(new_position.y	- old_position.y) / dt
  // calculate d2y/dt	based on new dy/dt and old dy/dt
  d2x_dt = (dx_dt - old_dx_dt) / dt;
  d2y_dt = (dy_dt - old_dy_dt) / dt;  
  // set old x,y to the new x,y
  Object.assign(old_position, new_position)
  //old_poisition = new_position
  // set last_dx_dt,last_dy_dt to the new dx_dt,dy_dt
  old_dx_dt = dx_dt;
  old_dy_dt = dy_dt;
  const latency = position.t - new_position.t
  //position.x += dx_dt*latency
  //position.y += dy_dt*latency
  dx_dt += ((new_position.x - position.x) / latency)
  dy_dt += ((new_position.y - position.y) / latency)
  
  // interpolate with actual rendered position
  // average them out
  //dx_dt += 
  //dx_dt /= 2
  //dy_dt += (new_position.y - position.y) / (position.t - new_position.t)
  //dy_dt /= 2
  console.log("timelag", (position.t - new_position.t))
  //assert((position.t - new_position.t) > 0)
}

const client_updateperiod = 1000/60

function Lerp(ms_passed) {
  // .../dt are per 1 unit of 1
  // we're not moving by 1 unit of t, we're moving by
  // client_updateperiod, so 
  position.x += dx_dt * ms_passed //+ (old_position.x - position.x) / (position.t - old_position.t)
  position.y += dy_dt * ms_passed// + (old_position.y - position.y) /...