Пользователь
30,2
рейтинг
11 сентября 2014 в 12:14

Разработка → Часы на кривых Безье



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

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

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (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
      • 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

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