Distance Tests

by Niklas Knaack

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();

//---

const MATHPI2 = Math.PI * 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 boxes = [];
let circles = [];
let triangles = [];

//---

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

  document.body.appendChild( canvas );

  window.addEventListener( 'resize', onResize, false );

	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 = [];
  
  //---
  
  for ( let i = 0; i < 1; i ++ ) {
  
  	const box = {};

    box.center = { x: Math.round( Math.random() * w ), y: Math.round( Math.random() * h ) };
    box.size = Math.round( Math.random() * 50 + 50 );

  	boxes.push( box );
  
  }

	for ( let i = 0; i < 1; i ++ ) {
  
  	const circle = {};
    
    circle.center = { x: Math.round( Math.random() * w ), y: Math.round( Math.random() * h ) };
    circle.radius = Math.round( Math.random() * 50 + 50 );

  	circles.push( circle );
  
  }
  
  for ( let i = 0; i < 1; i ++ ) {
  
  	const center = { x: Math.round( Math.random() * w ), y: Math.round(...