Часы на кривых Безье



    Bézier Clock — часы на кривых Безье, где цифры плавно перетекают из одной формы в другую. Автор говорит, что это его первый проект на Processing.js, исходный код опубликован. Можно отредактировать его и изменить, например, скорость анимации.

    При выключенной анимации цифры трансформируются за 5 секунд до смены значения, а при включенной (пробелом) — в течение всего времени. Например, в 12:30:35 цифра «2» будет уже на полпути к превращению в «3». Направляющие скрываются кликом мыши.
    Метки:
    Поделиться публикацией
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 53
    • +7
      на клик мышки скрываются направляющие.
      открой секрет редактирования:)
      • +6
        >> Если в браузере включены куки, то можно даже вручную отредактировать форму цифр, потягивая за направляющие.

        Нигде в описании на сайте такого не написано. Ализар сам это придумал =)
        • 0
          For some reason it won't work if you have cookies disabled in Chrome — blame Processing.js, not me.

          Уточню — на сайте написано, что если выключены cookies, то не будет работать вообще, в Хроме (автор винит Processing,js).
      • 0
        А ещё по нажатию на клавишу `a` меняется плавность.
        • 0
          А, что меняет 's' не знаете?
          • 0
            Меняется флаг, который, если true, то во время отрисовки часов и минут сбросить тип плавности анимации на линейный.
            • НЛО прилетело и опубликовало эту надпись здесь
          • –4
            и почему в вузе такому не учили :(
            • +11
              Уж не знаю у кого как, а у нас про кривые Безье рассказывали.
              • +5
                не понимаю минусаторов, я имел в виду не описание самих кривых Безье, а о их нестандартном применении. не знаю как для других, но лично я усваиваю намного лучше те вещи которые интересно преподают, а не тупо читают лекцию с листка бумаги не отводя от него глаз.
                • +9
                  Ну и где же оно нестандартное? С помощью кривых Безье рисуются цифры на экране? Так основная их область применения — компьютерная графика, об этом любой препод с листка прочитает :)
                  • +2
                    А с помощью CD-rom'a можно прочитать дискету, думала моя преподавательница по математике, вставив в него дискету, благо успел ее остановить. Не у всех все было хорошо с преподавателями…
              • +29
                Кривые Безье — это та самая «не нужная программистам» математика. Возможно, вы ее просто прогуляли :)
                • НЛО прилетело и опубликовало эту надпись здесь
                  • +10
                    Согласен, я потому и взял в кавычки. Самостоятельно изучать математику намного сложнее, чем любой ЯП.
                    • +4
                      Увы, правда. Только приходит это понимание слишком поздно.
                      • 0
                        У кого как, к счастью.
                        Мне ещё в школе иногда приходилось программить графику, до универа уже был знаком с матрицами (немного, благодаря афинным преобразованиям), вектора изучил раньше программы, да и sin/cos очень часто нужны были, так что с этим проблем не было (и нет, сейчас учусь) ).

                        Вообще очень хороший способ показывать, что математика нужна.

                        З.Ы. не о том немного написал, не обратил внимания. И да, собственно, благодаря необходимости, например, учиться самостоятельно перемножать матрицы, ну и т.п. понимание, что математику самому изучить сложнее, тоже пришло достаточно рано.
                  • +7
                    Неужели все настолько низкого мнения об аудитории, что подумали, что человек жалуется, что ему не преподавали кривые Безье? Очевидно же, что он имеет ввиду недостатки в преподнесении предмета.
                  • +1
                    С этим и школьник справится: линейная интерполяция, для которой нужна математика на уровне 5 класса, и кривые Безье, для которых достаточно скачать processing.js
                    • 0
                      Они и в нативном canvas-е поддерживаются, а processing.js работает на нём.
                  • 0
                    Классная идея. А можно нормальную ссылку на гитхаб?
                    • 0
                      Я залип минуты на 4 -_-
                      • НЛО прилетело и опубликовало эту надпись здесь
                        • +13
                          Сам удивляюсь, какой жирный таракан залез в голову. :)
                        • –1
                          Информативность таких часов чувствительно меньше, чем обычных, что переводит их куда-то в раздел арт-объектов.
                          Пока цифра переползает из одной формы в другую, совершенно не понятно, что же будет в итоге. То есть на часы надо смотреть дольше.
                          Для заставки на экран пойдёт, а как информационное табло на сайт — уже не очень.
                          • 0
                            Этот режим отключается пробелом, и тогда только секунды изменяются.
                            • 0
                              Скорость изменения, конечно, меняется в некоторых пределах, это понятно.
                              Но задачу «бросить один взгляд на часы и считать всю информацию» это всё равно не решает.
                              А если отключить всю анимацию, то и «фишка» пропадёт.
                              • 0
                                Для минут и десятков секунд можно сократить время анимации. И можно сделать ее резче, например, применив кубическое преобразование (переключается кнопкой a). Тогда анимация останется, но проводить в непонятном положении цифры будут меньше времени.
                                • +1
                                  После первого бритья такой проблемы уже не будет Через какое-то время достаточно будет бросить взгляд на цифру часов и можно приблизительно понять, сколько минут.
                            • НЛО прилетело и опубликовало эту надпись здесь
                            • 0
                              У меня вот запаздывают десятичные в секундах. Пока меняется десятка на двойку — уже 5-6 секунд проходит.
                              • 0
                                Там все позиции, кроме секундной, переплывают пять секунд (ровно).
                              • +10
                                Установил системное время на 09:59:50 и насладился.
                                • +2
                                  Хорошо, только пять секунд для анимации — слишком много. Хватит и двух.
                                  • +3
                                    На эти часы можно смотреть вечно.
                                    • –1
                                      Хочу такой скринсейвер
                                      • +6
                                        У кого-то ещё работает скринсейвер o_o
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                      • +5
                                        Интересно было почитать PS от автора.

                                        Студент второго года обучения инженерного факультета Оксфордского унивеситета ищет место постажироваться на летних каникулах в Англии или Австралии в какой-нить небольшой компании.

                                        Достойное начало профессионального пути.
                                        • 0
                                          Скоро и полноценные веб версии корела и люстры можно ждать.
                                          • +1
                                            Срочно сделать отображение на стене лазерной разверткой. как раз векторная штука
                                            • 0
                                              Хочу такие часы на десктопе или мобильном…
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                • 0
                                                  Буду надеяться, что кто-то сделает. Не программист я… Времени нет учиться в эту сторону полноценно.
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                    • +1
                                                      Android/Ubuntu 14.04, kde. Плазмоиды вышел бы шикарный.
                                                • 0
                                                  Посмотрите в сторону Timely, там цифры трансформируются еще более красиво и плавно.
                                                  • 0
                                                    У меня стоит на мобильном. Очень приятная анимация и стилистика в целом.
                                                    • 0
                                                      Спасибо) можно некоторые комментарии? На Nexus 4 анимация не идеально плавная, хотя, по идее, тут нетяжелая отрисовка. В идеале, как мне кажется это был бы виджет масштабируемый, а не фиксированные обои. В любом случае, спасибо ещё раз.
                                                      • 0
                                                        1) Насчёт плавности анимации стоит подумать, я старался достигнуть баланса между плавностью и энергопотреблением :)
                                                        2) С виджетом гораздо больше проблемы плавности, туда так просто анимацию не впихнуть, можно только картинку периодически менять, у меня пока не получилось сделать быстрее 8-10 FPS, что неприемлемо из-за страшных лагов. Придумаю, как сделать — сделаю :)
                                                        • 0
                                                          Все равно круто) У меня Timely как базовый стоит.
                                                  • +2
                                                    Написал Live Wallpaper под Android: play.google.com/store/apps/details?id=net.olegg.bezierclock

                                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.