Benchmark - Math.sqrt distance calculation VS Tile method

by Michael Prosser

HTML

<h1>Math.sqrt distance calculation VS Tile method</h1>
<h3 id="xfaster">Roughly 2.5x - 2.9x faster</h3>
<p id="output"></p>
<p id="averages"></p>

CSS

body{
  font-family: helvetica, serif;
}
#output{
  max-height: 100px;
  overflow: auto;
  font-size: 10px;
  border: solid 1px #ccc;
  padding: 10px;
}

JavaScript

var scene = {
	name: "MY SCENE"
};

var running1 = 0;
var running2 = 0;


function distance(p1,p2){

	return Math.sqrt(Math.pow(p2.x-p1.x,2) + Math.pow(p2.z-p1.z,2));

}

var grounds = [
	{
  	position: {
    	x: -100,
      y: 0,
      z: -100
    }
  },
  {
  	position: {
    	x: 0,
      y: 0,
      z: -100
    }
  },
  {
  	position: {
    	x: 100,
      y: 0,
      z: -100
    }
  },
  {
  	position: {
    	x: -100,
      y: 0,
      z: 0
    }
  },
  {
  	position: {
    	x: 0,
      y: 0,
      z: 0
    }
  },
  {
  	position: {
    	x: 100,
      y: 0,
      z: 0
    }
  },
  {
  	position: {
    	x: -100,
      y: 0,
      z: 100
    }
  },
  {
  	position: {
    	x: 0,
      y: 0,
      z: 100
    }
  },
  {
  	position: {
    	x: 100,
      y: 0,
      z: 100
    }
  }
]

function method1(position){

		var closest = 100000;
		var d;
		var ground;
		var gl = grounds.length;
		
		for(var i=0;i<gl;i++){
			
			d = distance(position,grounds[i].position);
			
			if(d < closest){
				
				closest = d;
				ground = grounds[i];
				
			}
			
		}
		
		return ground;

}

function method2(position){

		var gl = grounds.length;
		
		for(var i=0;i<gl;i++){
			
      if((position.x >= grounds[i].position.x-50) && (position.x <= grounds[i].position.x+50)){
      
      	if((position.z >= grounds[i].position.z-50) && (position.z <= grounds[i].position.z+50)){
      
      		return grounds[i];
      
     	 }
      
      }
			
		}
		
}

function test1(s){

	var n = s.name;

}

function test2(){

	var n = scene.name;

}

var output = document.getElementById('output');
var averages = document.getElementById('averages');

var timer = function(name) {
    var start = new Date();
    return {
        stop: function() {
            var end  = new Date();
            var time = end.getTime() - start.getTime();
            console.log('Timer:', name, 'finished in', time, 'ms');
            output.innerHTML += 'Timer: ' + name + '<br />finished in ' + time + ' ms<br />';
     ...