JSFiddle - React, Tailwind, and code Playground

by alexvestin

CSS

body {
  
  margin: 0;
}

JavaScript

const scale = 16;

let p0 = { x: 0, y: 0 }
let p1 = { x: 32 , y: 32  };
const prefs = [p0, p1];
let pcounter = 0;

const canvas = document.createElement("canvas")


canvas.width = 2048;
canvas.height = 2048;
document.body.appendChild(canvas)
const ctx = canvas.getContext("2d");
ctx.scale(scale, scale);

const PADDING = 2;
const LINE_OFFSET = PADDING;
const TILE_SIZE = 16;
const NEGATION = TILE_SIZE - PADDING;
const F_EPSILON = 0.000001;
let numTileLines = canvas.width / TILE_SIZE;


const get_tile = (v) => {
	const n = Number(v < 0) * NEGATION;
  return Math.floor((v - n) / TILE_SIZE) * TILE_SIZE;
}


const setUpRay = (l, dx, dy, dtdx, dtdy) =>  {
	const r = { row_t0: 0, col_t0: 0, row_t1: Infinity, col_t1: Infinity, line: l, tile: 0, x: 0, y: 0 };

  r.x = Math.floor(l.x0);
  r.y = Math.floor(l.y0);
  const tl_x = get_tile(r.x); 
  const tl_y = get_tile(r.y);
  
  if (Math.abs(dy) > F_EPSILON) {
  	const next_y = l.y1 > l.y0 ? tl_y + TILE_SIZE : tl_y;
    r.row_t1 = Math.min((dtdy * (next_y - l.y0)) / TILE_SIZE, 1.0)
  }
  
  if (Math.abs(dx) > F_EPSILON) {
  	const next_x = l.x1 > l.x0 ? tl_x + TILE_SIZE : tl_x;
    r.col_t1 = Math.min((dtdx * (next_x - l.x0)) / TILE_SIZE, 1.0)
  }
  
	return r;
}

const rayDone = (r) => {
  const isDone = Math.abs(r.row_t0 - 1.0) < F_EPSILON || Math.abs(r.col_t0 - 1.0) < F_EPSILON;; 
  return isDone;
}


const stepRays = (l1, l2) => {	
  const dx = l1.x1 - l1.x0;
  const dy = l1.y1 - l1.y0;
  
  const dtdx = dx !== 0 ? (TILE_SIZE / dx) : 1.0;
  const dtdy = dy !== 0 ? (TILE_SIZE / dy) : 1.0;
  
  
  const x_step = Math.abs(dtdx);
  const y_step = Math.abs(dtdy);
  
  const x_dir = Math.sign(dx) * TILE_SIZE;
  const y_dir = Math.sign(dy) * TILE_SIZE;
  
  const r0 = setUpRay(l1, dx, dy, dtdx, dtdy);
  r0.id = 0;
  const r1 = setUpRay(l2, dx, dy, dtdx, dtdy);
  r1.id = 1;
  
  const cache = [99999999, 99999999];  
    
  let counter = 0;  
  while (true) { 
  	if(counter++ > 100) {
      alert("Hang")
    	break;
    }
       
 ...