Experiment

by CrazyDave2345

HTML

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

TypeScript

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

const buffer = [];
let position = {x: 0, y: 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 Packet(new_position) {
  // calculate dy/dt	based on new x,y and old x, y
  const dt = (new_position.t - old_position.t);
  
  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
  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;
  //new_position.x + dt*dx_dt
}

const client_updateperiod = 1/60

function Lerp() {
  position.x += dx_dt
  position.y += dy_dt
  position.t += client_updateperiod
  dx_dt += d2x_dt
  dy_dy += d2y_dt
  /*
	if (buffer.length > 0) {
 		const current = buffer[0];
    const distance = Math.sqrt(Math.pow(current[0] - position[0], 2) + Math.pow(current[1] - position[1], 2));
    if (distance > 0) {
      const direction = Math.atan2(current[1] - position[1], current[0] - position[0]);
    	position[0] += ((distance < 10) ? distance : 10) * Math.cos(direction);
      position[1] += ((distance < 10) ? distance : 10) * Math.sin(direction);
    } else {
    	buffer.shift();
    }
  }*/
}

function GameUpdate() {
	Lerp();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.beginPath();
  ctx.lineWidth = "6";
  ctx.strokeStyle = "red";
  ctx.rect(position.x + 12.5, position.y + 12.5, 25, 25);
  ctx.stroke();
  ctx.closePath();
}

// intializeClient should send a packet with the base position and the time, maybe initialize dx_dt and dy_dt too, it should do this for every new entity that appears...