From 0aa3e3de592cf7bff2285fa7ed5c52d5547a4c7d Mon Sep 17 00:00:00 2001 From: Schoko Date: Sat, 18 Sep 2021 00:03:48 +0200 Subject: [PATCH] + Html mit dem Perlin Noise --- board.js | 282 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 12 +++ ship.png | Bin 0 -> 2545 bytes 3 files changed, 294 insertions(+) create mode 100644 board.js create mode 100644 index.html create mode 100644 ship.png diff --git a/board.js b/board.js new file mode 100644 index 0000000..921a769 --- /dev/null +++ b/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(); + +}); diff --git a/index.html b/index.html new file mode 100644 index 0000000..e818f16 --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + +Perlin Noise + + + +

Perlin Noise

+ + + + diff --git a/ship.png b/ship.png new file mode 100644 index 0000000000000000000000000000000000000000..d719218a9cdd10c167a23c0eae91daf7af931961 GIT binary patch literal 2545 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 Hu0mjfI%Bv* literal 0 HcmV?d00001