Зачем мне эта математика
12.5K subscribers
449 photos
26 videos
1 file
322 links
Исследуем реальный мир через призму математики

Это канал Яндекс Образования

Мы делаем Практикум, Учебник, Лицей и другие большие проекты

Приходите учиться к нам: education.yandex.ru/

Номер регистрации 4962369782
Download Telegram
🎶 Когда графики звучат как «Разделение»

Узнаете музыку на видео? Да, это музыкальная тема из сериала «Разделение», который собрал миллионы фанатов по всему миру. Сейчас объясним, причем здесь математика и как графики могут зазвучать не хуже музыкальных инструментов.

В ролике вы видите интерфейс Desmos — графического калькулятора, который обычно используют для построения функций. Desmos постоянно выручает школьников, студентов и математиков, а еще его можно превратить в полноценный синтезатор, и Марк Эвенштейн доказывает это в видео.

🎹 Как Desmos превращается в музыкальный инструмент
Desmos умеет воспроизводить синусоиду, частота и амплитуда которой управляются параметрами графика. Всего один функциональный тон, который зависит от частоты и амплитуды, может творить чудеса.

Функциональный тон, кстати, это звук, полученный одним типом волны и одним способом управления этой волной — через функцию, которая задает её частоту и амплитуду.


Эвенштейн выходит за рамки простого построения графиков: он использует ползунки, анимации и другие возможности Desmos, чтобы превращать функции в звуковые волны.

🎸 Тема из Severance как функция времени
Музыка из сериала строится вокруг четырёхтактного цикла с постоянным басом на ноте «До». В Desmos это реализуется как кусочно-постоянная функция, где каждая «ступенька» соответствует определённой высоте звука. Координаты по оси y напрямую сопоставляются с частотами, а ось x — это время.

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

Громкость звука — отдельная тема. Её Эвенштейн моделирует с помощью косинусоид.

🥁Перкуссия: как из синусоиды извлечь удар
Наша любимая часть этой истории — ударные! Desmos по умолчанию может воспроизводить только синусоиду, но автор использует случайные числа, которые создают «шумовые полосы». Энергия звука имитируется с помощью амплитудных огибающих, которые тоже задаются функциями времени. Увидеть «шумовые полосы» можно на скриншоте, который мы приложили: серый прямоугольник справа — это оно.

Эвенштейн — не первый, кто начал делать музыку в Desmos, но его подход точно можно назвать необычным.

Хотите серию постов о диковинных вещах реализованных в Desmos?

#рекомендуем
21👍8🔥5🤩4👏31🤓1
This media is not supported in your browser
VIEW IN TELEGRAM
А вам удавалось увидеть, как значок DVD попадает в угол экрана? Устраиваем голосование эмодзи:

🤩 — да!
👀 — нет, до сих пор хочу увидеть.
🤔 — я родился/ась после 2005 и не понимаю, о чем речь.
👀56🤩46🤔15😨4
Зачем мне эта математика
А вам удавалось увидеть, как значок DVD попадает в угол экрана? Устраиваем голосование эмодзи: 🤩 — да! 👀 — нет, до сих пор хочу увидеть. 🤔 — я родился/ась после 2005 и не понимаю, о чем речь.
📀 Математика значка DVD

Теперь, когда кого-то мы заставили поностальгировать, а кого-то привели в замешательство, расскажем, почему мы решили поговорить с вами про значок DVD. Сначала немного культурного контекста.

В нулевых почти в каждой квартире был DVD-проигрыватель. На нём была заставка по умолчанию: значок, который «плавал» от одной стороны экрана к другой, и редко, очень редко попадал в угол. Серьёзно, некоторые из нас так и не увидели, как это происходит.


Так от чего же зависит, попадет значок в угол или нет? Математика говорит, что дело в размерах экрана и самого логотипа. А ещё — в том, откуда стартует значок. Если он начинает движение из одного из углов, попадание — вопрос времени. А если это не так, логотип может бесконечно «гулять» по экрану, ни разу не достигнув углов. Именно поэтому в популярных скринсейверах начальные условия подобраны так, чтобы попадание в угол всё-таки случалось – авторы все предусмотрели!

🍿Кстати, наблюдение за значком DVD стало особенно популярным после выхода серии «Офиса», в которой герои смотрят за ним прямо на совещании — той, из которой взят первый фрагмент видео. Некоторые зрители болели так, будто смотрели главный футбольный матч века! Это хорошо видно на втором видео.

Вот так обычный скринсейвер стал настоящим культурным феноменом. С математикой мы, кстати, не закончили: скоро вернёмся и расскажем, сколько времени на самом деле пришлось бы ждать героям «Офиса», чтобы увидеть значок в углу. Если у вас есть предположения, будем ждать в комментариях 🤩

#история
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
27👏9🔥8👍4😍3
Зачем мне эта математика
📀 Математика значка DVD Теперь, когда кого-то мы заставили поностальгировать, а кого-то привели в замешательство, расскажем, почему мы решили поговорить с вами про значок DVD. Сначала немного культурного контекста. В нулевых почти в каждой квартире был…
Минуты? Часы? Дни? Выясняем, как долго герои «Офиса» ждали, когда логотип попадет в угол

Как и обещали, возвращаемся с ответом на вопрос о значке DVD. Мы подошли к делу серьёзно и всё посчитали.

Итак, допустим, логотип стартует из одного из углов экрана — скажем, правого верхнего. Попадёт он в угол или нет, зависит от размеров экрана и логотипа. Давайте обозначим размер логотипа как h×w пикселей и размер экрана — как H×W пикселей, и попробуем найти ответ.

Объяснение упаковали в карточки: в них мы сначала рассказываем общий принцип подсчётов, а потом делаем расчёты по «Офису». А в комментарии добавили небольшой бонус: поясняющую гифку ❤️

Что думаете? Чисто интуитивно казалось, что ответ будет меньше или больше?

#как_устроено
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
23🔥9👍2🤓2🆒2
🪄 Кривые, изменившие мир, или Что общего у Pixar, Apple, Photoshop и Times New Roman?

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

Вы точно с ними сталкивались. Просто не знали, что у них есть официальное название и целая история.

Например, мы привыкли думать, что графика — это что-то нарисованное, но на самом деле большая часть визуального контента на экране не рисуется, а вычисляется. Компьютер не рисует круг — он строит траекторию по уравнению. Он не анимирует героя — он решает, по какой кривой тот должен пройти из точки A в точку B.

Даже буквы в посте, который вы читаете прямо сейчас — это не просто набор пикселей, а инструкция из кривых! А когда вы нажимаете на красиво анимированную кнопку в любимом приложении, анимация её появления задаётся кривой Безье, которая контролирует скорость и характер движения.

Этим постом мы начинаем целый сериал о кривых Безье. Смотрите в следующих сериях:

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

А чтобы знакомство с темой прошло легко, предлагаем немного поиграть — у нас тут всё-таки нескучная математика. Наша сегодняшняя рекомендация — Bezier Game, интерактивная игра, в которой можно выполнять задания и управлять кривыми Безье. Попробуйте, чтобы понять, как устроен этот математический феномен и просто развлечься.

#рекомендуем
Please open Telegram to view this post
VIEW IN TELEGRAM
👍219🤩6🥰3😱1🍓1
Зачем мне эта математика
🪄 Кривые, изменившие мир, или Что общего у Pixar, Apple, Photoshop и Times New Roman? Всё это — результат одной революционной математической идеи. Контуры, по которым бегают персонажи «Корпорации монстров», любимые дизайнерские шрифты, да и вообще, любой…
🔧⚙️ Как инженер Renault придумал язык для шрифтов, анимации и дизайна

Кривые Безье — инструмент дизайнеров, создателей анимации и разработчиков интерфейсов. Но родились они не в художественной студии, а... в автомобилестроительной компании!

Вернёмся в 1960-е и заглянем в чертёжную мастерскую французского автогиганта Renault. Там работал Пьер Безье — инженер, который отвечал за проектирование кузовов автомобилей. Кстати, формы машин тогда создавались вручную: с помощью шаблонов, лекал и физического моделирования.

Безье захотел найти способ описывать плавные формы математически — так, чтобы можно было управлять ими и изменять их. Он предложил использовать систему контрольных точек, где кривая начинается в одной точке, заканчивается в другой, а промежуточные управляющие точки «тянут» линию, придавая ей изгиб. Кривая не обязана проходить через все точки: она приближается к ним. Для промышленности это было революционно!

💡 Безье не просто предложил форму — он ввёл алгоритм, который позволял строить кривую шаг за шагом. Сегодня этот метод известен как алгоритм де Кастельжо, в честь Поля де Кастельжо — математика из Citroën, конкурирующей компании. Он независимо от Безье предложил похожий подход, но держал это в секрете. Безье же своим открытием поделился, и именно его имя спустя годы стало нарицательным.

🔧 Интересно, что математическим фундаментом кривых Безье стали многочлены Бернштейна, описанные ещё в 1912 году советским математиком Сергеем Бернштейном. Использовав их, Безье сделал то, что мы так любим: изменил реальный мир с помощью математики.

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

#история
👍2513🔥9🏆1🦄1
📝 Немного теории (совсем чуть-чуть)

Мы тут подумали: вдруг кому-то не хватило математики в предыдущих постах? Несём немного теоретических пояснений. Надеемся, вы разделяете нашу любовь к формулам!

Напомним, кривые Безье — это способ описания гладких кривых с помощью точек: начальной, конечной и нескольких управляющих. Эти управляющие точки «тянут» кривую, придавая ей форму.

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

А в комментариях добавили ссылки на Desmos — заглядывайте, если хотите посмотреть, как устроены эти виды кривых, и построить их самостоятельно 🌀

#как_устроено
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
188👍4🙏2🆒1
This media is not supported in your browser
VIEW IN TELEGRAM
🔤 Почему буквы, которые вы читаете прямо сейчас — это код, и причём здесь кривые

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

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

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

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

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

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

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

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

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

#как_устроено
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2511👍5🆒2
💨 Анимация в любимых мультиках: когда движение — тоже кривая

В современной анимации так много интересного — кажется, жизни не хватит, чтобы посмотреть всё. Но что бы вы не выбрали — Pixar, Disney или мультфильмы от российских художников — везде за плавные движения будет отвечать математика. А если быть точнее, снова кривые Безье.

В основе современной анимации лежит концепция tweening — автоматической генерации промежуточных кадров между двумя ключевыми. Достаточно сказать: «в начале персонаж стоит в левой части кадра» и «в конце — в правой», и программа достроит движение между этими состояниями.

Вот только мало «просто достроить». По умолчанию можно линейно двигать объект из точки A в точку B, но такой переход будет казаться механическим, неживым. Вот почему в профессиональной анимации важно не только где находится объект, но и как он туда попадает — с ускорением рывком, плавным замедлением или скольжением по инерции. Но как это контролировать?

Ответить на этот вопрос помогают кривые времени, и самой популярной моделью для них остаётся кривая Безье. Допустим, мы хотим, чтобы объект начинал движение медленно, потом ускорялся, а под конец снова замедлялся. Тогда мы рисуем график времени с помощью кривой Безье и программа «читает» его как инструкцию.

Такой подход в анимации можно применять ко всему: движению персонажей, морганию глаз или движению волос, на которые подул ветер — как на гифке к посту.

В крупных студиях — Pixar, DreamWorks и других — аниматоры редактируют кривые движений вручную, добиваясь точности. Моргание может быть нервным или расслабленным, походка — напряжённой или уверенной. Всё это выражается через форму кривой.

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

#как_устроено
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
23😍9👍6🔥6🤗1🆒1