NoCanvas Universe

Абсолютно бесполезные эффекты с выдуманными ограничениями? Это всё моё, родное :)


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


Интро

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

Решение

Использование векторов отметалось как неспортивное (несмотря на полную кроссбраузерность); border-radius очень многообещающая вещь, но, любимый всеми обозреватель интернета (любой версии), не поддерживает это свойство. Картинки с разноцветными кругами?

Решение было случайно, когда мне на глаза попалась статья о юникодных символах в википедии - можно рисовать круги символами ● (0x25CF) разных размеров (прототип эффекта).

Облом

Генерируем несколько десятков кругов, вешаем на них эффект изменения размера (радиус круга уменьшается до некоторого предела, потом увеличивается по рандому) и получаем самый настоящий облом. Даже попробовал всё это вставить в код 9elements — всё равно ерунда получается.

При небольшом изменении радиуса, круги начинают противно дрожать, убивая всю созерцательность эффекта напрочь. Я более двух дней пытался найти решение - ставил различные шрифты (желательно те, которые есть и под windows, и под linux), менял формулы, узнал о "ex" в css; ничего не помогало.

Нужно было срочно искать другой эффект или...

Решение

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

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

Технические моменты

Для придания большего "реализма", планеты делятся на мелкие и крупные, а в центр добавлен оранжевый круг (видимо, символизирующий солнце).

Для того, чтобы вселенная оставалась одной и той же при каждом запуске, штатный Math.random был заменен на первый попавшийся в гугле (но, зато, позволяющий выставить начальный seed).

В этом эффекте опера рвёт файрфокс (визуально), но всё равно, хром быстрее всех (IE6 в виртуалбоксе перестаёт двигаться уже при 20 планетах).