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

В вышеизложенном нет ничего принципиально неправильного, но я, конечно, не смог бы выбрать свою из линейки. Что затрудняет запоминание большинства случайных аватаров, так это их абстрактность; у пользователя нет ничего, за что можно было бы ухватиться и связать с чем-то реальным.

В Patreon мы делаем что-то немного другое. Мы хотим отдать приоритет запоминаемости, сохраняя при этом большое количество вариаций.

Помимо того, что лисы уже являются чем-то вроде неофициального талисмана Patreon, лисы относительно легко рисовать и (в некотором роде) антропоморфны, что является очень привлекательным свойством и привело к тому, что мы выбрали их в качестве наших аватаров.

Что делает лису

Голова лисы состоит из нескольких частей: головы, двух ушей, двух глаз, носа, рта и белой нижней стороны (которую мы назвали маской).

Изначально мы собирались использовать HTML Canvas для рисования эллиптической головы. Самый простой способ сделать это - использовать кривые Безье и параметр, управляющий угловатостью, установленный на точное значение. Мы обнаружили, что изменение значения для получения более угловатой формы сразу же выглядело лисьим. С другой стороны, круглые лица больше похожи на мышиных или кроличьих.

Но вариации по-прежнему имеют первостепенное значение, поэтому мы позволяем «угловатости» варьироваться в определенных пределах.

Цвет меха тоже важен. Лисы могут быть разноцветными, но в реальной жизни мы редко видим лисицу пурпурную. Для генерации случайных цветов в пределах границ мы настоятельно рекомендуем использовать HSL, а не RGB, поскольку параметры более точно передаются человеческому восприятию. Основываясь на тщательном исследовании изображений в Google, мы определили, что оттенки лисиц находятся примерно в диапазоне от 5 до 50 или между красным и желтым, с некоторыми вариациями яркости и насыщенности.

Поколение

Вообще говоря, наш алгоритм разделен на две части: описание и рендеринг. Мы создали объект Fox, который имеет объект головы, объект ушей, объект носа и т. Д. Каждый из этих объектов описывает себя на основе некоторых (возможно, случайных) значений, например:

// psuedo-code (faux-code)
nose = {
  // nose is always centered horizontally, no variation here
  x: head.width/2,
  // nose is always below eyes, between 20-40% the rest of the way down the face
  y: (eyes.y + random.between(0.2, 0.4) * (head.height - eyes.y)),
  // width and height vary between 3-4% of the head's width
  width: random.between(0.03, 0.04) * head.width,
  height: random.between(0.03, 0.04) * head.width
}

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

Одна интересная вещь заключается в том, что мы заполняем наш генератор случайных чисел идентификатором пользователя, а это означает, что конкретный человек всегда будет соответствовать одному и тому же лису. С 21 параметром и (консервативно) 10 различимыми состояниями на параметр, количество возможных «лисиц» находится примерно в 10²¹, что для нашего случая использования практически бесконечно. Так что в ближайшее время мы, вероятно, не увидим повторных лисиц.

Люк Дэвис и мне понравилось работать над этим проектом, и мы надеемся, что вам понравятся лисы! Мы надеемся, что эти аватары не только сделают сайт красивее, но и напомнят пользователям, что они уникальные личности в невероятном сообществе.