«Сшивание» нескольких 2d массивов

Question

EDIT (перефразированный вопрос): Как использовать предоставленную функцию плавного перехода для создания постепенного перехода между смежными 2d-массивами? Каждый массив имеет одинаковый размер и содержит значения от 0 до 1, имеющие плавный переход от края к краю через симплексный шум. В результате я хотел разницу между соседними значениями массива, чтобы быть в maxiumum 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 2d массивы, содержащие значения между 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, я воссоздал функцию в интерпретаторе IDLE Python очень быстро, чтобы я мог вставлять в нее значения и получать мгновенные результаты, и, насколько я могу судить, все, что он делает, это растянуть ваше значение min до 0 , ваше максимальное значение равно 1, а затем нормализует параметр значения соответствующим образом.

Например, если вы предоставите параметры (0.2, 0.4, 0.3) 0.3 находится на полпути между 0,2 и 0,4, так что функция будет нормализовать значение около 0,5

Вы просто пытаетесь создать прочный градиент чисел с 50 строк массива/столбцы, которые пересекают Edge A и Edge B?

Если это так, я не знаю, является ли плавный переход.

Независимо от того, что-то вроде этого, я бы получил физическое и вытащил лист бумаги и вытащил что-то вроде этого с идентификатором массива посередине и наклейкой краев (Предположим, что образец лица в кости в примере ниже) :

 |--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), Е (AST), S (outh), W (EST), чтобы визуализировать, в каком направлении к голове от края

Heading направление:.

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,]...etc...] (дополнительные запятые преднамеренно, представляющие пустое место в списке, хорошо заполняемое в следующем)

Теперь с этим списком вы получите 25 строк или столбцов из в любом направлении, которое вы отметили для каждого массива, подключите его в свой список в пустых пространствах, и у вас будет абсолютный минимум и максимальные значения для вашего градиента.var list = [[1,B,W,0.3, 5,A,S,0.7],...etc...]

Затем, если это сплошной градиент, вы просто сделаете легкую математику step_value = Math.abs(list[n][3] - list[n][7])/50, затем увеличивайте или уменьшайте от начального значения для каждого края в соответствующем направлении в зависимости от того, является ли это минимальным или максимальным.

Если это сложнее, чем прямой градиент между ребрами 2D-массива, я извиняюсь, но, вероятно, вам понадобится лучшая визуализация того, что вы пытаетесь сделать.

Answer 2

Чтобы попытаться объяснить плавный шаг. Сначала вы начинаете с линейной интерполяции между двумя значениями, а затем изменяете ее с помощью кубической функции.

Диаграмма показывает линейную интерполяцию между 0 и 1 в зеленом, и сглаженную версию в красном цвете. Я закрепил значения для x вне диапазона, но вы также можете увидеть продолжение кубика в черном.

В функции

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

Функция всегда будет возвращать значение в диапазоне от 0 до 1. Если значение < мин возвращается 0, и если значение> макс возвращает 1. Если значение находится между мин и макс вас получить интерполированное значение.

Математически это кусок кубика 3 x^2 - 2 x^3.

---

Мой первый инстинкт должен был бы применить Gaussian blurring вдоль каждого края.