Javascript 菱形方形实现产生的值太高
我已经实现了一个菱形正方形函数,它可以生成一个高度图。乍一看,这个实现似乎工作正常 这仅仅是两个例子,但我们已经可以看到,总的来说,输出值似乎相当高。只有少数真正黑暗的价值观。我E.如果你看一下这张照片中的高度图(由钻石广场制作),你会发现它们不像我的一样均匀。不同地区之间的偏移量要大得多。有些区域看起来像陨石坑 我无法确定这种行为的原因是否是错误的参数化或实现。虽然web上的示例实现有一些不同,但我认为我已经了解了基本概念 我正在处理一个平面类型的数组。我传递给函数的参数是:Javascript 菱形方形实现产生的值太高,javascript,algorithm,Javascript,Algorithm,我已经实现了一个菱形正方形函数,它可以生成一个高度图。乍一看,这个实现似乎工作正常 这仅仅是两个例子,但我们已经可以看到,总的来说,输出值似乎相当高。只有少数真正黑暗的价值观。我E.如果你看一下这张照片中的高度图(由钻石广场制作),你会发现它们不像我的一样均匀。不同地区之间的偏移量要大得多。有些区域看起来像陨石坑 我无法确定这种行为的原因是否是错误的参数化或实现。虽然web上的示例实现有一些不同,但我认为我已经了解了基本概念 我正在处理一个平面类型的数组。我传递给函数的参数是: sideL
sideLength
- 因为我有一个平面阵列,代表一个2D矩阵,所以我将传递网格边长,以便进一步计算。我在这里传递一个值257
maxHeight
- 可能的最高输出值。我在这里传递255,因为我稍后将使用输出在画布上渲染高度贴图
粗糙度
- 这是我在平方步中使用的偏移值,以便生成更多随机高度偏移。这里我通常取50左右的值
Heightmap
函数以获得输出:
/**
* Creates a heightmap based on parameters passed.
* @param {number} sideLength - Side length of a the resulting grid array. Diamond-Square can only have a size (2^n)+1.
* @param {number} maxHeight - Max height value for the heightmap's values.
* @param {number} roughness - A factor which is used as offset value for the heightmap. Defines the roughness of a heightmap.
* @returns {Float32Array} - A flat `Float32Array` representing a 2D-grid with size `sideLength * sideLength`.
*/
static HeightMap(sideLength, maxHeight, roughness) {
const n = Math.log(sideLength - 1) / Math.log(2);
if (n < 0 || n % 1 != 0) {
throw "Invalid side length in Diamond Square: Side Length has to be in range of `(2^n) + 1`.";
}
let gridArray = new Float32Array(sideLength * sideLength);
this._initGrid(gridArray, sideLength, maxHeight);
this._seed(gridArray, sideLength, roughness);
return gridArray;
}
之后,HeightMap
函数调用\u seed
,它基本上是菱形方形循环:
/**
* Performs the Diamond Square (aka. Midpoint displacement) algorithm on a given flat TypedArray.
* @param {Float32Array} gridArray - An (Diamond-Square-initialized) `Float32Array`.
* @param {number} sideLength - Side length of a the resulting grid array.
* @param {number} roughness - A factor which is used as offset value for the heightmap. Defines the roughness of a heightmap.
* @returns {Float32Array} - Returns a ready to use heightmap produced by the Diamond-Square algorithm.
*/
static _seed(gridArray, sideLength, roughness) {
let step = Math.sqrt(gridArray.length) - 1;
let size = Math.sqrt(gridArray.length) - 1;
let currentRoughness = roughness;
while (step / 2 >= 1) {
let numSquares = (Math.pow(size, 2)) / (Math.pow(step, 2));
let perRowSquares = Math.floor(Math.sqrt(numSquares));
for (let i = 0; i < perRowSquares; i++) {
for (let j = 0; j < perRowSquares; j++) {
const nwIndex = this._getNWIndex(i, j, step, sideLength);
const cornerValues = this._getCornerValues(nwIndex, gridArray, sideLength, step);
this._diamondStep(nwIndex, cornerValues, gridArray, sideLength, step, currentRoughness);
this._squareStep(nwIndex, cornerValues, gridArray, sideLength, step, currentRoughness);
}
}
currentRoughness /= 2.0;
step /= 2;
}
return gridArray;
}
因为所有四个角的值都用在菱形和方形步长中,所以我也有一个函数:
/**
* Return an array holding the north-west, north-east, south-west and south-east values for the current step.
* @param {number} nwIndex - North-West index for current step.
* @param {Float32Array} gridArray - The corner values for the current step.
* @param {number} sideLength - Grid's side length.
* @param {number} stepSize - Current step size.
* @returns {Float32Array} - Returns the typed array the function of operating on.
*/
static _getCornerValues(nwIndex, gridArray, sideLength, stepSize) {
return [
gridArray[nwIndex], // NW
gridArray[nwIndex + stepSize], // NE
gridArray[nwIndex + stepSize * sideLength], // SW
gridArray[nwIndex + stepSize + stepSize * sideLength] // SE
];
}
最后但并非最不重要的是,我有\u diamondStep
和\u sqaureStep
:
/**
* Performs the Diamond Step by setting the center value for the current step.
* @param {number} nwIndex - North-West index for current step.
* @param {number[]} cornerValues - The corner values for the current step.
* @param {Float32Array} gridArray - Array holding heightmap data. Function will write to this array.
* @param {number} sideLength - Grid's side length.
* @param {number} stepSize - Current step size.
* @returns {Float32Array} - Returns the typed array the function of operating on.
*/
static _diamondStep(nwIndex, cornerValues, gridArray, sideLength, stepSize, roughness) {
// Center point. Calculated from "East - `stepSize / 2`"
gridArray[(((nwIndex + stepSize * sideLength) + stepSize) - (stepSize * sideLength) / 2) - stepSize / 2]
= (cornerValues[0] + cornerValues[1] + cornerValues[2] + cornerValues[3]) / 4 + (roughness * MathHelper.RandomInt(-1, 1));
return gridArray;
}
/**
* Performs the Square Step by setting the north, east, south and west values for the current step.
* @param {number} nwIndex - North-West index for current step.
* @param {number[]} cornerValues - The corner values for the current step.
* @param {Float32Array} gridArray - Array holding heightmap data. Function will write to this array.
* @param {number} sideLength - Grid's side length.
* @param {number} stepSize - Current step size.
* @param {number} roughness - Roughness factor for the current step.
* @returns {Float32Array} - Returns the typed array the function of operating on.
*/
static _squareStep(nwIndex, cornerValues, gridArray, sideLength, stepSize, roughness) {
const average = (cornerValues[0] + cornerValues[1] + cornerValues[2] + cornerValues[3]) / 4;
const value = average + (roughness * MathHelper.RandomInt(-1, 1));
// N
gridArray[nwIndex + (stepSize / 2)] = value;
// E
gridArray[((nwIndex + stepSize * sideLength) + stepSize) - (stepSize * sideLength) / 2] = value;
// S
gridArray[(nwIndex + stepSize * sideLength) + stepSize / 2] = value;
// W
gridArray[(nwIndex + stepSize * sideLength) - (stepSize * sideLength) / 2] = value;
return gridArray;
}
正如我之前提到的,实现似乎是可行的。我仍然想知道整体的“白度”是否是由错误的参数化或worng实现引起的
这是一把小提琴:
功能高度图(边长、最大高度、粗糙度){
const n=Math.log(边长-1)/Math.log(2);
如果(n<0 | | n%1!=0){
抛出“菱形方块中的无效边长:边长必须在`(2^n)+1`”范围内”;
}
设gridArray=new Float32Array(边长*边长);
_initGrid(gridArray、边长、最大高度);
_种子(网格阵列、边长、粗糙度);
返回网格数组;
}
函数_initGrid(gridArray、sideLength、maxHeight){
gridArray[0]=RandomInt(0,maxHeight);//NW
gridArray[sideLength-1]=RandomInt(0,maxHeight);//NE
gridArray[sideLength*sideLength-1]=RandomInt(0,maxHeight);//SE
gridArray[sideLength*sideLength-sideLength]=RandomInt(0,maxHeight);//SW
返回网格数组;
}
函数_seed(网格阵列、边长、粗糙度){
让step=Math.sqrt(gridArray.length)-1;
设size=Math.sqrt(gridArray.length)-1;
让电流粗糙度=粗糙度;
而(步骤/2>=1){
设numSquares=(Math.pow(size,2))/(Math.pow(step,2));
设perRowSquares=Math.floor(Math.sqrt(numSquares));
for(设i=0;i
.greyscaleCanvas{
边框:实心1px黑色;
}
所以我稍微修改了代码
/**
* Return an array holding the north-west, north-east, south-west and south-east values for the current step.
* @param {number} nwIndex - North-West index for current step.
* @param {Float32Array} gridArray - The corner values for the current step.
* @param {number} sideLength - Grid's side length.
* @param {number} stepSize - Current step size.
* @returns {Float32Array} - Returns the typed array the function of operating on.
*/
static _getCornerValues(nwIndex, gridArray, sideLength, stepSize) {
return [
gridArray[nwIndex], // NW
gridArray[nwIndex + stepSize], // NE
gridArray[nwIndex + stepSize * sideLength], // SW
gridArray[nwIndex + stepSize + stepSize * sideLength] // SE
];
}
/**
* Performs the Diamond Step by setting the center value for the current step.
* @param {number} nwIndex - North-West index for current step.
* @param {number[]} cornerValues - The corner values for the current step.
* @param {Float32Array} gridArray - Array holding heightmap data. Function will write to this array.
* @param {number} sideLength - Grid's side length.
* @param {number} stepSize - Current step size.
* @returns {Float32Array} - Returns the typed array the function of operating on.
*/
static _diamondStep(nwIndex, cornerValues, gridArray, sideLength, stepSize, roughness) {
// Center point. Calculated from "East - `stepSize / 2`"
gridArray[(((nwIndex + stepSize * sideLength) + stepSize) - (stepSize * sideLength) / 2) - stepSize / 2]
= (cornerValues[0] + cornerValues[1] + cornerValues[2] + cornerValues[3]) / 4 + (roughness * MathHelper.RandomInt(-1, 1));
return gridArray;
}
/**
* Performs the Square Step by setting the north, east, south and west values for the current step.
* @param {number} nwIndex - North-West index for current step.
* @param {number[]} cornerValues - The corner values for the current step.
* @param {Float32Array} gridArray - Array holding heightmap data. Function will write to this array.
* @param {number} sideLength - Grid's side length.
* @param {number} stepSize - Current step size.
* @param {number} roughness - Roughness factor for the current step.
* @returns {Float32Array} - Returns the typed array the function of operating on.
*/
static _squareStep(nwIndex, cornerValues, gridArray, sideLength, stepSize, roughness) {
const average = (cornerValues[0] + cornerValues[1] + cornerValues[2] + cornerValues[3]) / 4;
const value = average + (roughness * MathHelper.RandomInt(-1, 1));
// N
gridArray[nwIndex + (stepSize / 2)] = value;
// E
gridArray[((nwIndex + stepSize * sideLength) + stepSize) - (stepSize * sideLength) / 2] = value;
// S
gridArray[(nwIndex + stepSize * sideLength) + stepSize / 2] = value;
// W
gridArray[(nwIndex + stepSize * sideLength) - (stepSize * sideLength) / 2] = value;
return gridArray;
}
function HeightMap(sideLength, maxHeight, roughness) {
const n = Math.log(sideLength - 1) / Math.log(2);
if (n < 0 || n % 1 != 0) {
throw "Invalid side length in Diamond Square: Side Length has to be in range of `(2^n) + 1`.";
}
let gridArray = new Array(sideLength);
for (var i = 0; i < gridArray.length; i++) {
gridArray[i] = new Float32Array(sideLength);
}
gridArray = _initGrid(gridArray, sideLength, maxHeight);
gridArray = _seed(gridArray, sideLength, roughness);
return gridArray;
}
function _initGrid(gridArray, sideLength, maxHeight) {
gridArray[0][0] = RandomInt(0, maxHeight); // NW
gridArray[0][sideLength-1] = RandomInt(0, maxHeight); // NE
gridArray[sideLength-1][sideLength-1] = RandomInt(0, maxHeight); // SE
gridArray[sideLength-1][0] = RandomInt(0, maxHeight); // SW
return gridArray;
}
function _seed(gridArray, sideLength, roughness) {
let step = sideLength - 1;
let size = sideLength - 1;
let currentRoughness = roughness;
let run_num = 0
while (step / 2 >= 1) {
console.log(run_num)
run_num = run_num + 1
let numSquares = Math.pow(size, 2) / Math.pow(step, 2);
let perRowSquares = Math.floor(Math.sqrt(numSquares));
for (let i = 0; i < perRowSquares; i++) {
for (let j = 0; j < perRowSquares; j++) {
row = i*step
col = j*step
const squareCornerValues = _getSquareCornerValues(gridArray, row, col, step)
gridArray = _diamondStep(squareCornerValues, row, col, step, gridArray, currentRoughness);
gridArray = _squareStep(row, col, step, gridArray, sideLength, currentRoughness)
// _squareStep(diamondMidPoints, gridArray, step, currentRoughness);
}
}
currentRoughness /= 2.0;
step /= 2;
}
return gridArray;
}
function _diamondStep(squareCornerValues, i, j, step, gridArray, currentRoughness) {
gridArray[row+step/2][col+step/2] = (squareCornerValues[0] + squareCornerValues[1] + squareCornerValues[2] + squareCornerValues[3] ) / 4 + (currentRoughness * RandomInt(-1, 1));
return gridArray;
}
function _squareStep(row, col, step, gridArray, sideLength, currentRoughness) {
let diamondMidPoints = [[row, col+step/2], //top
[row+step/2, col], //left
[row+step, col+step/2], //right
[row+step/2, col+step] //bottom
];
for (let z = 0; z < diamondMidPoints.length; z++){
corners = _get_diamond_corners(diamondMidPoints[z], step, sideLength, gridArray);
gridArray[diamondMidPoints[z][0]][diamondMidPoints[z][1]] = (corners[0] + corners[1] + corners[2] + corners[3]) /4 + (currentRoughness * RandomInt(-1, 1));
}
return gridArray;
}
function _getSquareCornerValues(gridArray, row, col, step) {
return [
gridArray[row][col], // NW
gridArray[row][col+step], // NE
gridArray[row+step][col], // SW
gridArray[row+step][col+step] // SE
];
}
function _get_diamond_corners(diamondMidPoints, step, sideLength, gridArray){
row = diamondMidPoints[0];
col = diamondMidPoints[1];
top_coord = [(row - step/2 + sideLength) % sideLength, col];
left_coord = [row, (col - step/2 + sideLength) % sideLength];
right_coord = [row, (col + step/2 + sideLength) % sideLength];
bottom_coord = [(row + step/2 + sideLength) % sideLength, col];
return [gridArray[top_coord[0]][top_coord[1]],
gridArray[left_coord[0]][left_coord[1]],
gridArray[right_coord[0]][right_coord[1]],
gridArray[bottom_coord[0]][bottom_coord[1]]
];
}
function Grayscale(canvasName, data, rows, cols) {
let canvas = document.getElementById(canvasName);
let ctx = canvas.getContext("2d");
let imageData = ctx.createImageData(cols, rows);
for (let i = 0; i < data.length; i++) {
const color = data[i];
imageData.data[i * 4] = color;
imageData.data[i * 4 + 1] = color;
imageData.data[i * 4 + 2] = color;
imageData.data[i * 4 + 3] = 255;
}
ctx.putImageData(imageData, 0, 0);
}
function RandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
let terrainGrid = HeightMap(257, 255, 50);
terrainList = []
for (let q=0; q < 257; q++) {
terrainList.push.apply(terrainList, terrainGrid[q])
}
Grayscale('grayscaleCanvas', terrainList, 257, 257);