Автор: Чжоу Чжичуан
Время чтения: 10~15мин.
До того, как я узнал о шуме, мое понимание случайности ограничивалось Math.random. Это очень полезно, например, простая программа лотереи в H5 или случайный выбор карты... И мне нужно реализовать некоторые эффекты случайного изображения в моей недавней работе, поэтому я обнаружил, что эта функция может делать очень ограниченные вещи. Затем я наткнулся на шум, случайную форму шума, который отлично решил мою проблему. Поэтому я хочу написать эту статью, надеясь, что некоторые студенты, изучающие фронтенд, особенно те, кто занимается восстановлением большего эффекта в своей работе, понимают шум.Может быть, после этого у вас появится больше идей об этих случайных элементах в дизайне дизайнера. черновик, много идей.
Дизайнеры часто добавляют случайные элементы в свои проекты, что является отличным дизайнерским приемом. Но для front-end реализации восстановление таких элементов дизайна заставит нас чувствовать себя бессильными в большинстве случаев, т.к. базовый Api предоставляет правильные геометрические фигуры (круги, прямоугольники и т.д.), зачастую в итоге эти эффекты приходится Скомпрометируйте и используйте восстановление вырезанного изображения, мы не можем сделать больше оптимизации, и мы не можем выразить больше дизайнерских идей, добавив анимацию, которая всегда была пустой областью для внешнего восстановления большинства студентов.
Вышеприведенные изображения взяты из некоторых реальных эскизов дизайна. Легко найти случайные элементы, о которых я говорю. Они добавляют дизайну ощущение таинственности и технологичности, но кажутся сложными для создания с традиционным интерфейсом. Методы реставрации дизайна. И они как раз очень подходят для использования шума для достижения.
Алгоритм шума был очень зрелым после многих лет разработки, и существует множество классификаций шума Перлина, симплексного шума и шума вейвлета.Шум в этой статье относится к шуму Перлина по умолчанию и не будет подробно представлять конкретные алгоритмы шума. Передовые студенты, которые были ознакомлены с этой областью, проводят эвристическое введение.
случайная линия
Давайте сначала решим простую задачу: нарисуем случайную линию. Это кажется достаточно простым, мы используем Math.random, чтобы сгенерировать серию точек и соединить их.
for (let i = 0; i < POINTCOUNT; i++) {
const y = HEIGHT / 2 + (Math.random() - 0.5) * 2 * MAXOFFSET;
const point = {
x: i * STEP,
y
};
POINTS.push(point);
}
...
ctx.moveTo(POINTS[0].x, POINTS[0].y);
for (let i = 1; i < POINTS.length; i++) {
const point = POINTS[i];
ctx.lineTo(point.x, point.y);
}
ctx.stroke();
Но ничего особенного, как нарочито нарисованный линейный график. Прямая линия делает наше изображение очень жестким. Давайте сделаем небольшое улучшение. Мы найдем две контрольные точки между двумя случайными точками и используем кривую Безье, чтобы снова соединить случайные точки:
for (let i = 0; i < POINTS.length - 1; i++) {
const point = POINTS[i];
const nextPoint = POINTS[i + 1];
ctx.bezierCurveTo(
controlPoints[i][1].x,
controlPoints[i][1].y,
controlPoints[i + 1][0].x,
controlPoints[i + 1][0].y,
nextPoint.x,
nextPoint.y
);
}
ctx.stroke();
На этот раз это более естественно.То, что мы делаем на этом шаге, очень важно.Хотя это не сам алгоритм шума, идея та же. Случайные точки в приведенном выше примере можно понимать как случайные функции, а одна случайная функция не имеет смысла. После того, как мы соединим их прямыми линиями, они все еще выглядят несвязанными в целом, но после того, как мы соединим их плавно последовательно, они образуют законченный узор друг перед другом, и получают естественный случайный эффект. Это также мое субъективное понимание шума после изучения шума - основная проблема, которую решает шум, состоит в том, чтобы заставить некоррелированные случайные функции производить какой-то плавный переход или связь.
Ну вот и останавливаемся, думаем о природе, отдыхаем. Подумайте об облаках, реках, горах... все это случайные явления в природе, созданные с течением времени. Ключевым моментом здесь является «накопление», то есть облако не появится без причины, и река не появится внезапно.Все они развиваются понемногу, поэтому в этих случайных событиях оно «плавно» «трансформируется». .
Шум Перлина
В современных играх и кино- и телепроизведениях уже можно реалистично восстановить эти природные элементы. Их нет и нельзя сделать с помощью большого количества программного обеспечения для моделирования, но они генерируются с помощью кода Ключевой технологией, используемой здесь, является алгоритм шума. Важной частью этого алгоритма является алгоритм интерполяции в случайном признаке, значение в середине случайного признака может быть сглажено, чтобы имитировать результат этой эволюции в природе.
Еще в 1983 году Кен Перлин участвовал в производстве анимационного фильма Диснея "ТРОН". Для достижения этого эффекта естественной текстуры он предложил шум Перлина. Шум Перлина был очень успешным, и он также получил Оскар за научно-технические достижения. достижения.
В нашем примере выше кривые Безье используются для сглаживания случайных признаков, в то время как шум Перлина использует более научный и сложный метод интерполяции:
f(t)=t*t*t*(t*(t*6-15)+10)
Если вы заинтересованы, вы можете проверить детали реализации самостоятельно. Шум Перлина превратился во многие реализации деформации, включая более позднюю оптимизированную версию шума Перлина, симплексный шум. Эта статья посвящена использованию шума. Для некоторых из приведенных ниже реализаций по умолчанию используется шум Перлина.
Использование шумовых функций
Использование функции шума состоит в том, чтобы принять точку, а затем вернуть результат от -1 до 1. Единицей случайной длины объекта является 1, поэтому перед использованием функции шума необходимо обратить внимание на преобразование единицы измерения. Например, если у вас есть холст 1000 x 1000, и вы хотите использовать случайные значения для каждого пикселя с шумом, вам сначала нужно определить, сколько случайных квадратов вы хотите применить.Если вы применяете nxn квадратов, прежде чем получить случайные значения, вам нужно преобразовать координаты
scale = 1000 / n;
nx = x / scale;
ny = y / scale;
pointRandom = noise2D(nx, ny);
js реализован инструмент шума:GitHub.com/Джозеф Г/ОИ… Github.com/j vagner / sima ...
случайный набор
Шум принимает одни и те же параметры и всегда возвращает один и тот же результат, поэтому обычно предустановлен случайный набор, целью которого является создание фиксированных случайных характерных точек, а затем сглаженный случайный результат будет интерполирован среди этих случайных характерных точек. Реализация обсуждаться не будет. Некоторые инструменты шума уже установили случайный набор по умолчанию. Вы также можете настроить разные начальные значения для создания различных случайных эффектов. Предыдущий инструмент шума, Noisejs, можно просто определить следующим образом:
noise.seed(Math.random());
одномерный шум
Одномерный шум можно легко понять, назначив случайный набор целочисленным битам на оси x и вычислив непрерывно преобразуемое случайное значение с помощью функции гладкой интерполяции. Это утверждение может не совпадать с конкретным шумом Перлина, но основную идею можно легко понять следующим образом.
Простой результат заключается в том, что, учитывая координату, вы получите случайное значение.Если вы зададите непрерывные координаты, вы получите непрерывные случайные значения вместо получения некоррелированных разнесенных значений, таких как значение Math.random().
Пример одномерного шума
В следующем примере показан эффект яйца, сделанного с одномерным шумом.Во-первых, возьмите фиксированные равные точки на окружности, и они получат случайное смещение за счет шума, а затем объедините время, чтобы сделать смещение плавным со временем, чтобы изменить:
код spray.IO/eat Номер ООН AU имеет...
Например, эффект последующего возгорания, компенсация эффекта раскачивания хвоста пламени, реализуется одномерным шумом в сочетании с временным сдвигом.
код спрей.IO/induction uh wipe/spray...
Эффект смещения во времени одномерного шума также может быть достигнут с помощью времени в качестве параметра y функции двумерного шума.
двумерный шум
Двумерный шум. Задав двумерную сетку, фиксированный случайный набор, определенный на предыдущем шаге, будет распределен по вершинам этих сеток, а случайная характеристика каждой вершины представляет собой вектор градиента, а затем вычисляются точки вокруг сетка.Вектор из четырех вершин в точку на квадрате (то есть точку, где нужно вычислить значение шума, желтая точка на рисунке ниже), умножить их на вектор градиента и, наконец, использовать интерполяцию функция интерполяции для получения случайного шума, соответствующего значению точки.
Изображение ниже было сгенерировано с помощью webGL для применения функции 2D-шума, где белый цвет представляет 1, а черный — -1, что является эффектом сетки 5*5. Нам не нужно заботиться о webgl здесь, нам нужно заботиться только о том, как определить квадраты, применимые к нашим собственным задачам, и получить соответствующие непрерывные случайные значения.
Здесь основное внимание уделяется использованию шума.Для конкретного метода реализации вы можете щелкнуть ссылку ниже, чтобы понять. Использование очень простое:
// 这里除 100 是为了以一百个像素为单位应用一个噪声方格
let randomValue = noise.simplex2(x / 100, y / 100);
Пример 2D-шума
Случайное значение, полученное функцией шума, очень свободно, и его можно использовать для определения различных переменных, которые вам нужны.Например, в следующем примере гладкое случайное значение используется для определения вектора скорости частицы для достижения как случайного и эффекты непрерывного движения:
function calculateField() {
for(let x = 0; x < columns; x++) {
for(let y = 0; y < rows; y++) {
let angle = noise.simplex3(x/20, y/20, noiseZ) * Math.PI * 2;
let length = noise.simplex3(x/40 + 40000, y/40 + 40000, noiseZ) * 0.5;
field[x][y].setLength(length);
field[x][y].setAngle(angle);
}
}
}
Сгенерируйте вектор со случайным углом и длиной вектора, здесь используется 3D-шум simplex3, фактически третий параметр используется как 2D-смещение.
Если вы сохраните следы движения, вы можете получить более крутой эффект.
// 使用半透明清楚画布
function drawBackground(alpha) {
ctx.fillStyle = `rgba(0, 0, 0, ${alpha || 0.07})`;
ctx.fillRect(0, 0, w, h);
}
Пример 2D-шума (svg)
Путем наложения нескольких шумов Перлина разных частот этот метод называется фрактальным шумом, и можно получить больше текстур, таких как поток воды, горы и реки. В SVG есть фильтр такого рода шума, feTurbulence, По сравнению с обычным фильтром css, с которым мы знакомы, его легко игнорировать, но он может привести к множеству неожиданных эффектов:
<feTurbulence type="turbulence" baseFrequency="0.01 .1" numOctaves="1" result="turbulence" seed="53" />
- numOctaves количество шумовых стеков
- семя случайное семя
- тип шума тип
feTurbulence фактически применяет результирующее значение шума к каждому пикселю для получения значения цвета, которое затем можно комбинировать с другими фильтрами для преобразования этих случайных цветов в другие случайные представления, такие как смещения пикселей, которые могут быть достигнуты с помощью фильтра feTurbulence для достижения некоторые естественные текстуры и отражения.
код squirt.io/йо Кэтрин/спрей/…
Я спросил .tech brood.com/fiddle/3165…
Шумовая суперпозиция здесь имеет определенные ограничения по частоте и амплитуде, они самоподобны, см.thebookofshaders.com/13
3D-шум
Трехмерный шум на самом деле просто добавляет широту к двумерному шуму для определения трехмерного случайного набора вершин Трехмерные координаты в трехмерной сетке будут соответствовать значению шума, которое также является непрерывным.
Случайное значение, полученное с помощью 3D-шума, можно преобразовать в смещение 3D-точки в направлении ее вектора нормали, реализуя тем самым случайную волнообразную деформацию. В webGL этот шаг обычно выполняется в вершинном шейдере, который выполняется на всех определенных вершинах:
float addLength = maxLength * cn(normalize(position) * 2.9 + time * 0.9); // 计算随机值
vec3 newPosition = position + normal * addLength; // 转换为法向向量方向上的偏移值
код спрей.IO/induction uh wipe/spray...
Во фрагментном шейдере можно применить текстуру с шумом:
Как упоминалось выше, первоначальная цель нойз-дизайна — имитировать естественные эффекты в фильмах, видео/играх, поэтому использование webGL для создания океанов, гор и рек — само собой разумеющееся:код спрей.IO/подковообразная стенка ямы ползает/боится...
Конечно, для этого требуется не только умелое использование шума, но и WebGL. Хотя мы вначале представили использование шума в canvas/svg, теперь webGL широко поддерживается компьютерными и мобильными браузерами. В сочетании с webGL шум может играть роль.Это более ценно.
Эпилог
Шум имеет широкий спектр применения, является важным знанием в области графики и играет важную роль в 3D-программах. Однако шум не является исключительным в области 3D-графики.Научившись использовать шум и применяя его к базовым фронтенд-технологиям, таким как canvas svg css, вы также можете добиться некоторых неожиданных эффектов.Однажды дизайнер выводит эффект, похожий на этот случайный Функция Рисунок, возможно, пожелает напрямую найти дизайнера для общения. Возможно, эти эффекты создаются за счет использования шума в каком-либо программном обеспечении для обработки изображений. Если сгенерированные параметры получены, их также можно достичь во внешнем интерфейсе.Комбинируя смещение времени, может быть достигнута отличная анимация.
использованная литература
thebookofshaders.com/13/?lan=ch
Подпишитесь на официальный аккаунт [IVWEB Community], чтобы получать свежие статьи каждую неделю, ведущие к вершине жизни!