JSFiddle - React, Tailwind, and code Playground

by Will Stott

HTML

<canvas width="200", height="200" id="c1"></canvas>

CSS

canvas {
  border: solid grey 2px;
}
body {
  background: black;
}

JavaScript

const CANVAS_SIZE = 200;

let canvas = document.getElementById("c1");
let ctx = canvas.getContext("2d");

let lastTime = Date.now();

let mousePos = new THREE.Vector2(0.5, 0.5);
let slerpPos = new THREE.Vector2(0.5, 0.5);
let lookPos = new THREE.Vector2(0.5, 0.5);

canvas.addEventListener("mousemove", (event) => {
	// console.log("mouse", mousePos);
	mousePos.x = event.offsetX / canvas.width;
  mousePos.y = event.offsetY / canvas.height;
});

const SPEED = 0.02;
const SCALE = 4;

function onFrame() {
	let deltaTime = Date.now() - lastTime;
  
  // This section of the code determines the algorithm we're using.
  const SPEED = 0.05;
  const SCALE = 4;
  lookPos.copy(slerpPos);
  slerpPos.lerp(mousePos, SPEED);
  lookPos.sub(slerpPos).multiplyScalar(SCALE).negate();
  
  render();
  
	window.requestAnimationFrame(onFrame);
}

window.requestAnimationFrame(onFrame);

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  ctx.fillStyle = "lightgrey";
  ctx.fillRect(98, 98, 4, 4);
  
  ctx.fillStyle = "grey";
  let mouseRenderPos = mousePos.clone().multiplyScalar(CANVAS_SIZE).subScalar(3);
	ctx.fillRect(mouseRenderPos.x, mouseRenderPos.y, 6, 6);

  ctx.fillStyle = "pink";
  let slerpRenderPos = slerpPos.clone().multiplyScalar(CANVAS_SIZE).subScalar(3);
  ctx.fillRect(slerpRenderPos.x, slerpRenderPos.y, 6, 6);
 
  ctx.fillStyle = "lightgreen";
  let lookRenderPos = lookPos.clone().multiplyScalar(CANVAS_SIZE).subScalar(3);
  ctx.fillRect(100 + lookRenderPos.x, 100 + lookRenderPos.y, 6, 6);
}