Продолжение перевода статьи
Если вам интересно, почему я использую 0. вместо просто 0 без десятичной дроби, то это потому, что добавление десятичной дроби в конце целого числа приведет к тому, что оно будет иметь тип float вместо int. Когда вы используете функции, которым требуются числа типа float, размещение десятичной дроби в конце целого числа — это самый простой способ удовлетворить компилятор.
Мы используем радиус 0,2, потому что наша система координат настроена только на значения UV в диапазоне от нуля до единицы. Когда вы запустите код, вы заметите, что что-то не так.
Кажется, в левом нижнем углу холста есть четверть синего круга. Почему? Потому что наша система координат в настоящее время настроена так, что начало координат находится в левом нижнем углу. Нам нужно сдвинуть каждое значение на 0,5, чтобы начало системы координат оказалось в центре холста.
Вычтите 0,5 из UV-координат:
uv -= 0.5; // <-0.5, 0.5>
Теперь диапазон составляет от -0,5 до 0,5 как по оси X, так и по оси Y, что означает, что начало системы координат находится в центре холста. Однако мы столкнулись с другой проблемой...
Наш круг кажется немного растянутым, поэтому он больше похож на эллипс. Это вызвано соотношением сторон холста. Если ширина и высота холста не совпадают, круг выглядит растянутым. Мы можем решить эту проблему, умножив компонент X UV-координат на соотношение сторон холста.
uv.x *= iResolution.x/iResolution.y; // fix aspect ratio
Это означает, что компонент X больше не находится в диапазоне от -0,5 до 0,5. Он будет варьироваться между значениями, пропорциональными соотношению сторон вашего холста, которое будет определяться шириной вашего браузера или веб-страницы (если вы используете что-то вроде Chrome DevTools для изменения ширины).
Готовый код должен выглядеть следующим образом:
Запустив код, вы должны увидеть идеально пропорциональный синий круг! 🎉
Мы можем немного повеселиться с этим! Мы можем использовать глобальную переменную iTime для изменения цветов с течением времени. Используя функцию косинуса (cos), мы можем снова и снова перебирать один и тот же набор цветов. Поскольку функции косинуса колеблются между значениями от -1 до 1, нам необходимо настроить этот диапазон на значения от нуля до единицы.
Помните, что любые значения цвета в конечном цвете фрагмента, которые меньше нуля, будут автоматически обнулены. Аналогично, любые значения цвета, превышающие единицу, будут привязаны к единице. Регулируя диапазон, мы получаем более широкий диапазон цветов.
Запустив код, вы должны увидеть, как круг меняет разные цвета.
Вас может смутить синтаксис uv.xyx. Это называется Свиззлинг. Мы можем создавать новые векторы, используя компоненты переменной. Давайте посмотрим на пример.
vec3 col = vec3(0.2, 0.4, 0.6);
vec3 col2 = col.xyx;
vec3 col3 = vec3(0.2, 0.4, 0.2);
В приведенном выше фрагменте кода столбцы col2 и col3 идентичны.
Перемещение круга
Чтобы переместить круг, нам нужно применить смещение к координатам XY внутри уравнения для круга. Следовательно, наше уравнение будет выглядеть следующим образом:
(x - offsetX)^2 + (y - offsetY)^2 - r^2 = 0
x = x-coordinate on graph
y = y-coordinate on graph
r = radius of circle
offsetX = how much to move the center of the circle in the x-axis
offsetY = how much to move the center of the circle in the y-axis
Вы можете еще раз поэкспериментировать с Desmos calculator, скопировав и вставив следующий код:
(x - 2)^2 + (y - 2)^2 - 4 = 0
Внутри Shadertoy мы можем настроить нашу функцию sdfCircle, чтобы разрешить смещения, а затем переместить центр круга на 0,2.
Вы снова можете использовать глобальную переменную iTime в определенных местах, чтобы оживить холст и анимировать круг.
Приведенный выше код будет перемещать круг по круговой траектории по часовой стрелке, как если бы он вращался вокруг начала координат. Умножив iTime на значение, вы можете ускорить анимацию. Умножая выходные данные функции синуса или косинуса на значение, вы можете контролировать, насколько далеко круг перемещается от центра холста. В iTime вы будете часто использовать функции синуса и косинуса, поскольку они создают колебания.
Заключение
В этом уроке мы научились фиксировать систему координат холста, рисовать круг и анимировать его по круговой траектории. Круги, круги, круги! 🔵
На следующем уроке я покажу вам, как нарисовать квадрат на экране. Затем мы научимся его вращать!