JSFiddle - React, Tailwind, and code Playground

by muztv

HTML

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

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");

const p = {
	x: 1,
  y: 1,
  z: 1,
  rx: 45
};

const center = {
	x: Math.round(canvas.width / 2), 
  y: Math.round(canvas.height / 2)
};

const pxSize = 100;

const drawWall = (cx, cy, cz, s) => {
	const xRange = p.x - cx === 0 ? 0.01 : p.x - cx;
  const zRange = p.z - cz === 0 ? 0.01 : p.z - cz;
	const realSize = pxSize * zRange;

	const w = s * realSize;
  const x = cx * realSize + center.x + p.rx * 1;
  const y = cy * realSize + center.y;
  const hRx = (180 / p.rx) * (zRange / 2) / (xRange);

	ctx.beginPath();
  ctx.moveTo(x, y + -hRx);
  ctx.lineTo(x, y + hRx + w);
  ctx.lineTo(x + w, y + w);
  ctx.lineTo(x + w, y);
  ctx.lineTo(x, y + -hRx);
  ctx.stroke();
}

const clear = () => ctx.clearRect(0, 0, canvas.width, canvas.height);

const render = (t) => {
	clear();
  drawWall(1, 1, 2, 1);
/*   drawWall(1, 1, 2, 1);
  drawWall(-1, 1, 2, 1);
    drawWall(1, 1, 2, 1); */
	requestAnimationFrame(render);
}

requestAnimationFrame(render);

let t = 0;
setInterval(() => {
	//p.z = 5 +  Math.sin(t++ / 2) * 4;
  p.rx++;
  if (p.rx > 180) p.rx = 0;
  
}, 50)