Птицы на этом сайте выглядят как они просто бродят вокруг делая что угодно, и то целая точка, но под «чем угодно» огромное количество арифметики. Размер пула, жёсткий потолок на сколько может быть видимо одновременно, три отдельные зоны они не позволены покидать, и одна птица та что построена никогда не синхронизироваться с чем-либо.
Пул и потолок
Есть пул из восьми летающих кандидатов отчислить от (тупики, чайки, крачка, баклан, один орёл) плюс три птицы та что всегда на экране, сидящие нежели летающие (два тупика и один кулик-сорока). Каждая загрузка страницы рисует случайное подмножество летающего пула нежели показывая все восьмь сразу:
export function rollSkyColony(rand: () => number = Math.random): SkyColonyRoll {
const guaranteed = CANDIDATES.find((c) => c.guaranteed)!;
const rest = CANDIDATES.filter((c) => !c.guaranteed);
const shuffled = [...rest].sort(() => rand() - 0.5);
const extraCount = 2 + Math.floor(rand() * 3); // 2-4
const chosen = [guaranteed, ...shuffled.slice(0, extraCount)];
...
}Один кандидат всегда отчисляется (ближайший тупик, отмечен guaranteed, в основном так мобильный посетитель, кто только когда-либо видит та один летающий независимо от видовой части, всегда имеет что-то движущееся в небе) и потом случайный два к четырём больше приходит из остатка. Математика и летающее количество на экране всегда где-то между три и пять, никогда больше, никогда меньше, и в сочетании с тремя всегда-на окунившихся птиц общее количество птиц сидящих на странице одновременно всегда шесть к восьми. То жёсткий потолок, не несчастье как случайность случается приземлиться, каждый возможный розыгрыш приземляется внутри того диапазона через конструкцию.
Почему числа на каждой птице выглядят так намеренно
Каждый кандидат несёт два независимых значения времени, горизонтальную длительность пересечения и вертикальную продолжительность качания, и я выбрал их специфично так никакие два никогда не делят простое соотношение:
// длительность 210s / качание 233s, оба прайм-соседний-ish и нигде
// близко к простому соотношению; крошечный 0.4px амплитуда, "блуждает меньше всего".
{
id: 'eagle',
species: 'eagle',
top: '4vh',
left: '50%',
width: 32,
duration: 210,
bobDuration: 233,
bobAmp: 0.4,
opacity: 0.35,
dir: 'ltr'
}Если горизонтальное пересечение птицы и её вертикальное качание случилось разделить общий фактор, скажем 60-секундное пересечение и 20-секундное качание, комбинированное движение повторилось бы каждые 60 секунд и терпеливый зритель в конечном итоге заметил бы петлю. Выбери длительности без общего фактора вместо истинный период повтора становится их наименьшим общим кратным, что для большинства из этих пар приземляется где-то в тысячах секунд. Никто не смотрит заголовок достаточно долго ловить то. Оно читается как органический дрейф потому что, на любом временном масштабе человек действительно переживает, эффективно это никогда не повторяется.
Орёл специфично получает самую маленькую амплитуду качания и самый долгий период качания в целом пуле, 0.4 пиксель блуждания по 233 секундам, против тупиков блуждающих полный пиксель поперёк периодов одна десятая столь долгой. Оно также сидит выше в небе, 4vh от верха, самое далеко от всего в пуле, пространственно и ритмично оба. Это одна птица построена никогда не синхронизироваться с ритмом любой другой птицы даже случайно, и видимо блуждать меньше всего при этом, что где «орёл летит один» действительно приходит от, не одиночество в поэтическом смысле, просто действительно некоррелированное движение через конструкцию.
Три зоны и урок об отличии видов
Птицы живут выше жёсткой линии, её собственный измеренный край вершины силуэта острова фона, выраженный в такие же vh единицы как положение вертикали каждого кандидата так связь держит в любой ширине видовой части. Рыба живут ниже их собственной линии, горизонтальная полоса подножия водяной линии, определённая как ровно рядок 3 из её 5-ряд пиксель сетки (земля занимает ряды 0 через 2, море берёт ряды 3 и 4). Одна рыба исключение через конструкцию, нарушающее ту линию коротко на его собственном долгом цикле, всё остальное остаётся строго на его собственной стороне.
Я разделил те зоны для действительной причины, не только аккуратность. Рано в работе окружающей сцены я имел отчёт о «птице» замеченной плывущей в полосу подножия, и возвращаясь через код, силуэт рыбы и силуэт низко летящей птицы были похожи достаточно в форме и раскраске в глаз что кто-то смотрящий действительно не мог рассказать какой они видели. Исправление было не только исполнение вертикальных зон более строго, оно было создание действительных грамматик силуэта намеренно отличаться друг от друга, рыба читается как боковой профиль торпеда форма в холодной сине-серой, птица читается как вверху-вниз крылья-развернутые форма полностью. Два спрайта та что только когда-либо правильная форма в правильной зоне, так даже взгляд говорит тебе что ты смотришь на без нужды думать об это.
Линия зоны сама прошла через её собственный плохой проход перед тем. Первая версия просто выбрала top процент та что выглядела примерно правильно на моём собственном экране:
// первая попытка: прикидываемый раскол, нет связи к действительному искусству
const SKY_ZONE_MAX_TOP = '55%';Выглядело хорошо на моей собственной ширине видовой части и разваливалось момент когда сама заголовок искусство изменила высоту, так как число не было связано ни с чем реальным, просто уговор. Что действительно держится это измеряя действительный силуэт вместо угадывания процента:
// Безопасность зоны: слой теней острова фиксирован, якорь-дна, 42vh
// высокий на рабочем столе, так его собственный топмост силуэт пиксель сидит на
// (100-42)=58vh из вершины видовой части. Каждый кандидат `top` остаётся
// хорошо очищенный той линией вместо угадываемого процента.Часть я почти не построил
Сцена действительно один место на целом этом сайте та что анимирует вообще, всё остальное статично или щёлкает на место над 70 миллисекундами и останавливается. Это было бы намного проще оставить заголовок и подножие как фиксированным, рукой выбранным искусством пути самая первая версия этого сайта действительно была, пять специфичных птиц в пяти специфичных позах, без случайности, без логики настойчивости, без зоны математики получить право. Некоторые код выше, особенно coprime комментарии времени, это вид вещь никто когда-либо сознательно заметит как читатель. Я знаю это там, и как только заголовок начал действительно ощущаться живым вместо выглядящего как оформление та что случилось двигаться, я не мог убедить себя назад в отправке статической версии опять.
Пул всё ещё держит на телефоне
Ничего этого не только настольном тоже. Ниже видовой части 768px, каждый кандидат кроме одного guaranteed тупика получает спрятано совсем в CSS, намеренно, так маленький экран не застрял рендирирующим четыре или пять перекрывающихся летающих в заголовок та что только имеет комнату показать их спёртых на вершине друг друга. Та единственная гарантированная птица ровно та же та что всегда рисуется на настольном тоже, так мобиль не нуждается отдельного розыгрыша или отдельного пула, оно просто молча отбрасывает всё та что настольный розыгрыш выбрал сверх та одна птица. И целый пул уважает prefers-reduced-motion та же дорога остаток искусства сцены сайта делает, каждый спрайт всё ещё рендирирует в его собственной позиции отдыха, заморозил нежели отсутствующий, ничто на странице идёт пусто просто потому что чья-то система просила меньше движения.