perlin_noise/board.js

var water = "#1E90FF";
var beach = "#ffff00";
var grass = "#008000";
var threshold_water = 0.70;
var threshold_beach = 0.80;
var threshold_grass = 0.90;
var maxValue = 30;
var minValue = -30;
var tilesColor = [water,beach,grass]

var board_numbers = [];

var cycle = 50;
var tile_width=16;
var tile_height=16;
var width = Math.floor(1600 / tile_width);
var height = Math.floor(800 / tile_height);
var current_noise = [];


function findHeighestNumber(array){
	var heighest = Number.MIN_VALUE;
	for(var i = 0; i < array.length; i++){
		var row = array[i];
		for(var j = 0; j < row.length; j++){
			if(row[j] > heighest){
				heighest = row[j];
			}
		}
	}
	return heighest;
}

function findSmallestNumber(array){
	var smallest = Number.MAX_VALUE;
	for(var i = 0; i < array.length; i++){
		var row = array[i];
		for(var j = 0; j < row.length; j++){
			if(row[j] < smallest){
				smallest = row[j];
			}
		}
	}
	return smallest;

}


/*
 * The representation of a tile
 *
 * color value between 0,1,2
 */
class Tile {

	constructor(x,y,color){
		this.x = x;
		this.y = y;
		this.color = color;

		if(color === 0){
			this.accessible = true;
		} else {
			this.accessible = false;
		}
	}

}

class Ship{

	constructor(x,y,speed){
		this.x = x;
		this.y = y;
		this.speed = speed;
		this.dx = 1*speed;
		this.dy = 1*speed;
	}

	draw(context){
		var img = new Image();
		img.src = "ship.png";
		img.height = "16";
		img.width = "16";
		context.drawImage(img,this.x,this.y);	
	
	}
	
	update(){

		this.x += dx;
		this.y += dy;
		this.draw(context);
	}
}


function createBoard(height, width, array){
	var board = document.getElementById("can");
	var context = board.getContext("2d");
	var heighestNumber = findHeighestNumber(array);
	console.log(array);
	console.log(heighestNumber);
	for(var i = 0; i < height; i++){
		var row = [];
		for(var j = 0; j < width; j++){
			//console.log(randomNumber);
			var x = (array[i][j]/ heighestNumber)*100;
			//console.log(value);
			//console.log(array[i][j]);
			if(x <= 100.00 && x >= 70.00){
				color = 1;
			} 
			if(x <= 69.00 && x >= 65.00){
				color = 1;
			} 
			if(x <=  65.00 && x >= 0){
				color = 0;
			} 


			var tmp_tile = new Tile(j, i, color);
			context.fillStyle = tilesColor[color];
        	context.fillRect(i*tile_height+1, j*tile_width+1, tile_width, tile_height);
			row.push(tmp_tile);

		}
		board_numbers.push(row);
	}
}

/**
 * This function interpolates values in a Array
 */
function interpolate(startValue, endValue,y){
	var m = (endValue - startValue)/(y);
	var result = [];
	result.push(startValue);
	for(var i = 1; i < y; i++){
		result[i] = m * i + startValue;
	}
	result.push(endValue);
	return result;
}



function generate_perlin_noise(rounds,height,width){
	var result = [];
	var points_width = width;
	var points_height = height;


	for(var r = 0; r < rounds; r++){
		var tmp_array = [];
		//console.log("------------------ Step "+r+" --------------");
		
		
		
		// Interpolation für Reihen. Imprinzip ist das ganzschön ineffizient, da manche Reihen wieder überschrieben werden aber kein bock das zu ändern.
		
		for(var i = 0; i < height; i++){
			var row = [];
			var startValue = Math.random() * (maxValue - minValue) + minValue; //Stupid, but i always forgot, how to set the boundries
			var counter = 0;
			for(var j = 0; j < width; j++){
				//console.log(counter);
				//console.log("Step "+i+"+"+j+":");
				//console.log("counter: "+counter);
				if (j % (points_width - 1) === 0 && !(j === 0) || j === (width - 1)){
					//console.log(counter);
					let endValue = Math.random() * (maxValue - minValue) + minValue; //Stupid, but i always forgot, how to set the boundries
					interpolate(startValue, endValue, counter);
					row = row.concat(interpolate(startValue, endValue, counter));
					startValue = endValue;	
					counter = 0;
				} else {
					counter++;
				}
			}
			//console.log(row);
			tmp_array.push(row);
		}
		

		// Spalten interpolation 
		for(var i = 0; i < width; i++){
			var startValue = tmp_array[0][i];
			var counter = 0;
			for(var j = 0; j < height; j++){
				if(j % (height-1) === 0 && !(j === 0) || j === (height - 1)){
					var endValue = tmp_array[j][i];
					var tmp_interpolate = interpolate(startValue, endValue, counter);
					startValue = endValue;
					for(var k = 0; k < counter; k++){
						tmp_array[j-counter][i] = tmp_interpolate[k];
					}	
					counter = 0;	
				} else {
					counter++;
				}
				
			}
		}

		result.push(tmp_array)
	
		points_width = Math.floor(points_width / 2)+1;
		points_height = Math.floor(points_height / 2)+1;
	}
	console.log(result);
	//return result;

	
	var combi = [];

	for (var i = 0; i < height; i++){
		var rows = [];
		for (var j = 0; j < width; j++){
			rows[j] = 0;
		}
		combi.push(rows);
	}
	
	console.log("------------- Ergebnisse ----------- Ergebnisse -------------");
	console.log(combi);

	// adding all array to one array
	for(var r = 0; r < rounds; r++){
		var tmp = result.pop();
		for (var i = 0; i < height; i++){
			for (var j = 0; j < width; j++){
				combi[i][j] = combi[i][j] + tmp[i][j];
			}
		}
	}

	var smallest = findSmallestNumber(combi);
	for (var i = 0; i < height; i++){
		for (var j = 0; j < width; j++){
			combi[i][j] = combi[i][j] - smallest; 
		}
	}

	//Adding smallest Element to Noise_Array

	// ???? Anomalie ????

	console.log(result);
	console.log(combi);

	return combi;
}


/**
 * This function starts the perlin noise generation process
 * */
function run_perlin_noise(){
	var noise_array = generate_perlin_noise(cycle,width,height);
	console.log(noise_array);
	current_noise = noise_array;
	createBoard(height,width,noise_array);

}


function moveShip(canvas, e){
		var rect = canvas.getBoundingClientRect();
		var x = Math.floor(e.clientX - rect.left);
		var y = Math.floor(e.clientY - rect.top);
		var ship = new Ship(x,y,5);
		ship.draw(canvas.getContext("2d"));
		console.log("x: "+x+" y: "+y);
}

window.onload = (function(){
	var can = document.getElementById("can");
	can.addEventListener('mousedown', function(e){
		createBoard(height,width,current_noise);
		moveShip(can, e);
	});
	
	run_perlin_noise();

});