SDF - Distance Tests

by Niklas Knaack

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.js"></script>

CSS

html, body, div {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  min-height: 100vh;
  overflow: hidden;
  background: radial-gradient(#202020, #000000);
}

JavaScript

//---

//https://www.youtube.com/watch?v=Cp5WWtMoeKg

//---

console.clear();

//---

let stats = null;

const MATHPI2 = Math.PI * 2;
const MATHSQRT22 = Math.SQRT2 / 2;

let w = 1024;
let h = 512;

const canvas = document.createElement( 'canvas' );
const context = canvas.getContext( '2d' );

let animationFrame = null;

let imageData = null;
let data = null;
let depthBuffer = null;

const border = { left: 1, top: 1, right: w, bottom: h };

let mousePos = { x: 0, y: 0 };
let mousePosSave = { x: 0, y: 0 };

let boxes = [];
let circles = [];
let triangles = [];
let lines = [];
let rhombi = [];
let tetragons = [];
let polygons = [];

let modus = 0;
let signals = [];

//---

function init() {
	
  canvas.addEventListener( 'click', clickHandler, false );
  canvas.addEventListener( 'mousemove', mouseMoveHandler, false );

  document.body.appendChild( canvas );

  window.addEventListener( 'resize', onResize, false );
  
  //---
  
  stats = new Stats();
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.top = '0px';
  //stats.domElement.style.zIndex = 100;
  
  document.body.appendChild( stats.domElement );
  
  //---

	restart();

}

function onResize( event ) {
    
  restart();

}

function restart() {

	w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

  canvas.width = w;
  canvas.height = h;

  imageData = context.getImageData( 0, 0, w, h );
  data = imageData.data;
  
  //---

  border.right = w;
  border.bottom = h;

  //---
  
  addElements();
  
  //---
  
  if ( animationFrame != null ) {
  
    cancelAnimFrame( animationFrame );
  
  }
 	
	animationFrame = requestAnimFrame( render );

}

//---

function addElements() {

	boxes = [];
	circles = [];
  triangles = [];
  lines = [];
  rhombi = [];
  tetragons = [];
  polygons = [];
  
  signals = [];
  
  //---
  
  for ( let i = 0; i < 3; i ++ ) {
  
 ...