+ Html mit dem Perlin Noise

board.js

@@ -0,0 +1,282 @@
+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=10;
+var tile_height=10;
+var width = Math.floor(1600 / tile_width);
+var height = Math.floor(800 / tile_height);
+
+
+
+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";
+		context.drawImage(img,32,32);	
+	
+	}
+	
+	update(){
+		this.draw(context);
+
+		this.x += dx;
+		this.y += dy;
+	}
+}
+
+
+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 = 2;
+			} 
+			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);
+	createBoard(height,width,noise_array);
+
+}
+
+
+function moveShip(canvas, e){
+		var rect = canvas.getBoundingClientRect();
+		var x = e.clientX - rect.left;
+		var y = 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){
+		moveShip(can, e);
+	});
+	
+	run_perlin_noise();
+
+});

index.html

@@ -0,0 +1,12 @@
+ <!DOCTYPE html>
+<html>
+<head>
+<title>Perlin Noise</title>
+	<script src="board.js"></script> 
+</head>
+<body>
+	<h1> Perlin Noise</h1>
+	<canvas id="can" width="1600" height="800" style="border:1px solid #000000;"></canvas>
+	<button id="new_btn"> Neu </button>
+</body>
+</html>