🔤 Почему буквы, которые вы читаете прямо сейчас — это код, и причём здесь кривые

В любом тексте на экране мы видим буквы. Но что видит компьютер? Как появились современные шрифты и почему буквы — это на самом деле код?

До 1980-х годов компьютерные шрифты были наборами картинок. Каждой букве соответствовал битмап — пиксельная картинка определённого размера. Нужно десять размеров букв? Держи десять файлов. Такая система была тяжёлой и плохо масштабируемой.

Революция началась с векторных шрифтов. В них каждая буква — не изображение, а инструкция, как её построить. А контуры символов описываются кривыми — чаще всего квадратичными или кубическими кривыми Безье. Прорывом стал и формат TrueType, появившийся в 1991 году: там каждая линия в букве задаётся квадратичной кривой Безье. Это всего три точки: начальная, конечная и одна управляющая. Этого достаточно, чтобы задать элегантную плавную форму.

Благодаря такому подходу буквы легко масштабируются, компактно хранятся и выглядят чётко на экранах разных размеров — от часов до 8K-мониторов.

🖥 Как буквы становятся пикселями
Компьютерный экран — сетка пикселей, и чтобы отобразить векторную букву, нужно превратить кривые в пиксели. Этот процесс называется растеризацией. Работает он так:

➡️Контур буквы задаётся кривыми Безье. Как на гифке к посту.

➡️Для каждого пикселя выясняется, где он находится: внутри буквы или снаружи.

➡️Алгоритм проводит через пиксель горизонтальную линию и считает, сколько раз она пересекает контур. Нечётное число — пиксель закрашивается. Чётное — остаётся фоном. Получается буква!

Благодаря кривым Безье шрифты адаптируются к контексту: это не просто форма, а гибкий алгоритм. И всё ради того, чтобы буквы выглядели идеально на любом экране (а дизайнеры спорили, какой шрифт лучше). А в честь Пьера Безье, кстати, до сих пор называют шрифты и даже дизайнерские компании 🤩

#как_устроено

А ещё мы вчера внезапно увидели Citroën 2CV — автомобиль, который когда-то прославил французский автопром! В Citroën трудился Поль де Кастельжо: тот самый конкурент Пьера Безье, который одновременно с ним придумал способ строить плавные кривые — об обоих мы уже рассказывали.

Дизайн этой легендарной модели годами делали вручную, пока не пришёл де Кастельжо. Он придумал свой знаменитый алгоритм, благодаря которому процесс производства стал сильно проще. Плавные линии, такие как на фото, теперь можно было создавать в программе.

Увидеть Citroën 2CV своими глазами — везение. Когда изучаешь математику, удивительные совпадения и открытия случаются каждый день 🔅

Мемы про математику изучены на 1%: оказывается, про кривые Безье тоже есть...

Ставьте 🏆, если считаете, что парикмахер справился с задачей 🥲

#меммат

🎮 Играли когда-нибудь в стратегии вроде Cities: Skylines, Planet Zoo или SimCity (2013)?

Если да, вы уже сталкивались с кривыми Безье в геймдеве. Да-да, теми же, что рисуют шрифты и управляют анимациями.

В геймдизайне они повсюду! И зачастую буквально вшиты в возможности движка.

🏃‍➡️Движение не по линейке
Игровые персонажи редко двигаются по прямой. Им нужно избегать препятствий, ускоряться, тормозить и так далее, и кривые Безье позволяют сделать движения реалистичными и плавными. Вместо того, чтобы описывать движение пошагово, разработчик задаёт контрольные точки, а кривая Безье строит на их основе естественный маршрут.

Это особенно полезно для:

🟠юнитов в RTS (реалтайм-стратегиях);

🟠NPC (неигровых персонажей) в RPG;

🟠кат-сцен и интро, когда нужно показать плавное движение камеры;

🟠траекторий заклинаний, снарядов и эффектов.

Плавные движения не только про красоту: они экономят вычисления, повышают читаемость и улучшают игровой опыт. Игрок не замечает математику, но чувствует её результат. Например, когда кривые задают не только маршруты, но и «поведение» движения: ускорение, инерцию или отскок. Именно они определяют, как камера «ныряет» в подземелье или облетает башню.

🏔 Горы и реки
Ещё одно яркое применение кривых Безье — редактирование ландшафта. Когда игрок мышкой рисует дорогу или береговую линию, движение руки редко идеально ровное. Но игра аппроксимирует, то есть сглаживает этот жест кривой Безье, и результат получается гладким.

В градостроительных играх и песочницах контуры дорог и рек сглаживаются автоматически, а высотные профили участков (склоны и холмы) строятся по кубическим кривым. Игроку достаточно вести мышью: игра сама достроит из этого красивую форму.

Так работают, например:

🔴в Cities: Skylines — плавные дороги;

🔴в Planet Zoo — точные профили для загонов и ландшафта;

🔴в SimCity (2013) — формирование ландшафта без сетки, на свободных кривых.

Если в играх всё кажется плавным, красивым и живым — это не магия, а, с большой вероятностью, кривые Безье.

А вы во что любите поиграть?

#как_устроено

🎥Бонус: очень красивое (и полезное) видео о кривых Безье

Нашли отличное видео по теме и не можем не поделиться им с вами. Это ролик от Фреи Холмэр, и мы советуем его всем, кто интересуется геймдизайном, математикой или анимацией.

В видео Фрея:

✅объясняет, как устроены базовые типы кривых: линейные, квадратичные и кубические (у нас был пост об этом);

✅показывает, как они применяются в играх для трасс, камер и эффектов;

✅разбирает важные темы вроде касательных, нормалей и равномерного движения по кривой (мы бы объяснили, о чем речь, но Фрея сделала это за нас);

✅показывает, что «под капотом» у Unity и как с его помощью создается движение в играх.

Оцените масштаб проделанной работы: всё сделано в Unity (код на C#), а всего на создание ролика ушло 33 дня!

Кстати, видео сделано в рамках конкурса от 3Blue1Brown — пожалуй, самого известного YouTube-канала о математике (рассказывали о нём тут). Грант Сандерсон, создатель проекта, лично похвалил Фрею и сказал, что её видео задаёт слишком высокую планку для остальных участников. И он прав: это не просто объяснение, а настоящий арт-проект. В общем, очень советуем!

#рекомендуем

🌀Сериал про кривые Безье подошёл к концу.

Знаем, тема не из лёгких. Но если вы дочитали до финала, то это уже большая победа. И, возможно, теперь вы будете смотреть на графику и анимацию в любимых мультфильмах и играх совсем иначе.

Закрепляем список предыдущих эпизодов:
✅пролог с рекомендацией полезной игры
✅откуда взялись кривые Безье
✅какие формулы их описывают
✅как они повлияли на современные шрифты
✅как им удаётся управлять анимацией
✅чем они полезны в геймдеве
✅бонус видео о кривых Безье

А теперь — финальный выпуск. Показываем, где ещё можно неожиданно столкнуться с этими кривыми. Будет много ссылок: советуем сохранить и походить по ним, когда будет время.

Твиттер, чайники и абстрактное искусство
Знали ли вы, что культовая птичка Twitter буквально собрана из кривых Безье? В этом материале автор разбирает, как её построить — от круга до крыла. Да, логотипы — тоже программируемые формы, и дизайнеры работают с кривыми почти так же, как инженеры.

А вот проект, где с помощью кривых Безье… анимируют чайник. Utah Teapot — легендарный объект в истории компьютерной графики. Его поверхность описывается Безье-патчами — аналогом кривых в 3D. Вот подробный разбор для тех, кто не боится формул.

Здесь вы найдёте вдохновляющий пост, где автор изучает кривые просто из любви к геометрии и делает из них визуальные паттерны. Красота невероятная.

Интерактивная подборка:
🔴Завораживающая анимация кривых: можно сделать гифку или просто залипнуть
🔴Изящный визуальный гайд по кривым: от математики до движения
🔴Сумасшедший эксперимент по комбинированию кривых
🔴Bezier Playground — приложение для Mac и iOS, в котором можно «рисовать» кривые и наблюдать, как они трансформируются в фигуры

На этом всё! Спасибо, что следили за постами про кривые Безье. Как они вам? В математике много тем, которые ну никак не помещаются в один пост, поэтому мы планируем иногда постить вот такие серии.

#рекомендуем

Геймдев всё чаще появляется в нашем канале — и не просто так❗️

Индустрия набирает обороты, профессии становятся популярнее, а интерес к внутренней кухне игр только увеличивается.

Для тех, кто хочет погрузиться в тему глубже — нашли отличный канал: Не рисуем и не кодим — Гейм-дизайн. Автор даёт советы новичкам и делится полезными заметками с теми, кто уже в теме.

Здесь вы узнаете о всех тонкостях работы геймдизайнера, получите теоретическую базу и сами начнёте подмечать интересные детали в играх.

Вот несколько постов, с которых можно начать:
✅ Подборка постов, которая поможет стать гейм-дизайнером
✅ Ссылки для гейм-дизайнеров
✅ Как сделать хороший туториал в игре
✅ Почти все термины и понятия гейм-дизайнеров
✅ Сочность в играх и как её добиться

Подписывайтесь и ставьте ❤️‍🔥, если чужих игр вам уже мало, а руки чешутся создать свою.

#рекомендуем

Достаём двойные листочки!

Возвращаемся к вам с задачами. В прошлый раз вы показали отличные результаты. Но то были сухие вычисления. Сегодня переходим в практическую плоскость и считаем… деньги.

✅Условие: вы устраиваетесь на новую работу, и начальник предлагает вам выбор между:

А — 200 тыс. ₽ в месяц за первый год работы и повышение на 30 тыс. ₽ за каждый последующий год
B — 170 тыс. ₽ за первые шесть месяцев работы и повышение на 25 тыс. ₽ каждые последующие шесть месяцев

✅Вопрос: какое предложение вы бы приняли и почему?

Голосуйте в опросе ниже и делитесь решением в комментариях — вечером проверим, насколько вас выгодно нанимать работодателю❤️

#задача