javascript - "Stitching"多个二维数组

Question

编辑(改写问题):我将如何使用提供的 smoothstep 函数在相邻的二维数组之间创建渐变？每个数组大小相同，包含介于 0 和 1 之间的值，通过单纯形噪声从边缘到边缘平滑过渡。因此，我希望相邻数组值之间的差异最大为 0.04

function smoothstep (min, max, value) {
    var x = Math.max(0, Math.min(1, (value-min)/(max-min)));
    return x*x*(3 - 2*x);
};

---

我有 6 个二维数组，其中包含 0 到 1 之间的值来表示球面上的高度。要遍历数组的所有值，我有这个:

for (var i = 0; i < cube.faces.length; i++) {
    for (var x = 0; x < cube.faces[i].heightMap.length; x++) {
        for (var z = 0; z < cube.faces[i].heightMap.length; z++) {
            if (x == 0 || x == cube.faces[i].heightMap.length - 1 || z == 0 || z == cube.faces[i].heightMap.length - 1) {
                switch (i) {
                    case 0:
                        if (x == 0) {
                            //match left of face 1 to top of face 4
                        } else if (z == 0) {
                            //match top of face 1 to top of face 6
                        } else if (z == cube.faces[i].heightMap.length - 1) {
                            //match bottom of face 1 to top of face 5
                        } else {
                            //match right of face 1 to top of face 3
                        }
                        break;
                    case 1:
                        if (x == 0) {
                            //match left of face 2 to bottom of face 3
                        } else if (z == 0) {
                            //match top of face 2 to bottom of face 6
                        } else if (z == cube.faces[i].heightMap.length - 1) {
                            //match bottom of face 2 to bottom of face 5
                        } else {
                            //match right of face 2 to bottom of face 4
                        }
                        break;
                    case 2:
                        if (x == 0) {
                            //match left of face 3 to right of face 5
                        } else if (z == 0) {
                            //~~match top of face 3 to right of face 1~~
                        } else if (z == cube.faces[i].heightMap.length - 1) {
                            //~~match bottom of face 3 to left of face 2~~
                        } else {
                            //match right of face 3 to left of face 6
                        }
                        break;
                    case 3:
                        if (x == 0) {
                            //match left of face 4 to right of face 6
                        } else if (z == 0) {
                            //~~match top of face 4 to left of face 1~~
                        } else if (z == cube.faces[i].heightMap.length - 1) {
                            //~~match bottom of face 4 to right of face 2~~
                        } else {
                            //match right of face 4 to left of face 5
                        }
                        break;
                    case 4:
                        break;
                    case 5:
                        break;
                    default:
                        break;
                }
            }
        }
    }
}

但是，我在让面孔匹配时遇到了一些麻烦。对此，我发现了一个名为“smoothstep”的函数，这似乎正是我所需要的。我不知道如何实现它，我还没有找到对我有用的解释。

function smoothstep(min, max, value) {
    var x = Math.max(0, Math.min(1, (value - min) / (max - min)));
    return x * x * (3 - 2 * x);
};

下一页是我了解到此方法的地方，但我无法理解要说的内容。如果有人有时间，您能解释一下我如何将其应用到我的情况中吗？ Link to related question

Answer 1

RE:Smoothstep，我在 Python 的 IDLE 解释器中非常快速地重新创建了该函数，以便我可以将值插入其中并获得即时结果，据我所知，它所做的只是将您的最小值拉伸(stretch)为 0，您的最大值为 1，然后相应地对值参数进行归一化。

例如，如果您提供参数 (0.2, 0.4, 0.3) 0.3 介于 0.2 和 0.4 之间，因此该函数会将值归一化为大约 0.5

您是否只是想用与边 A 和边 B 相交的 50 个数组行/列来创建纯数字渐变？

如果是这样，我不知道 smoothstep 是否可行。

无论如何，对于这样的事情，我会进行 body 检查并拿出一张纸并在中间画出像这样的数组 id 并标记边缘(假设下面示例中的骰子面图案):

        |--A--|
        D  3  B
        |--C--|

        |--A--|
        D  1  B
        |--C--|

|--A--| |--A--| |--A--|
D  2  B D  4  B D  5  B
|--C--| |--C--| |--C--|

        |--A--|
        D  6  B
        |--C--|

然后在脑海中将其折叠起来(或将其切出并实际折叠立方体)以找到边对并绘制箭头指示从边向内进入面的方向。 (我喜欢使用 N(orth)、E(ast)、S(outh)、W(est) 来可视化从边缘向哪个方向前进。

前进方向:

N = Same columnID, Start at max RowID and decrement  (going north)
E = Same rowID, Start at min ColumnID and increment  (going east)
S = Same columnID, Start at min RowID and increment  (going south)
W = Same rowID, Start at max ColumnID and decrement  (going west)

你最终会得到一个类似于 var list = [1,B,W,, 5,A,S,], [4,B,W,, 5,D,E,] 的列表...等...](额外的逗号是有意的，代表列表中的空格以及接下来填写的内容)

现在构建了该列表后，您可以从边缘沿您为每个数组记下的任何方向获取值，25 行或 25 列，将其插入列表的空白处，您将获得绝对最小和梯度的最大值。例如var list = [[1,B,W,0.3, 5,A,S,0.7],...等...]

然后如果它是一个纯渐变，你只需做一些简单的数学运算 step_value = Math.abs(list[n][3] - list[n][7])/50 然后根据是最小值还是最大值，在适当的方向上从每条边的起始值开始递增或递减。

如果它比 2D 阵列边缘之间的直线渐变更复杂，我很抱歉，但可能需要更好地可视化您正在尝试做的事情。