Статьи

Итак, есть ли у нас победитель в Code Challenge # 1?

Прошла неделя с тех пор, как мы запустили наш быстрый Code Challenge # 1 , что означает, что пришло время объявить победителя! Это было сложно. Несмотря на то, что количество заявок не было высоким, нет сомнений в качестве наших победителей.

Но сначала давайте рассмотрим несколько разных подходов к поставленной задаче.

Моя очередь первая!

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

(* И нет, я не могу вручить приз самому себе… ну, я почти уверен, что не могу… правильно?!? ).

Я поиграл с CSS и SVG — двумя из моих сильных сторон — и решил не использовать скрипты. Поскольку в CSS или SVG нет настоящей случайной функции, уловка заключалась в том, чтобы сделать обычные циклы анимации более случайными, чем они есть на самом деле. Вот мое решение.

Не стесняйтесь выбирать код, но основными интересными моментами являются:

  • В анимации линии ЭКГ используется только один внешний SVG и два отдельных цикла анимации.
  • Одна CSS-анимация (путешествие) зацикливает зеленый градиент слева направо. Накладная маска формирует линию ЭКГ.
  • Я создал 6 уникальных «сердцебиений ЭКГ» на графике SVG и настроил их как ключевые спрайты. Я переключаю эти ключевые кадры, чтобы они выглядели случайными (я добавил крошечные цифры внизу, чтобы сделать переключение ключевых кадров более очевидным).
  • Вторая анимация обрабатывает каждое «сердцебиение» как отдельный спрайт и переключается на новый при каждом проходе — но это происходит только в темной части цикла, когда его не видно.
  • Конечно, поскольку каждое «сердцебиение» использует одну и ту же анимацию CSS, мы обычно ожидаем, что все они будут отображать одинаковые ключевые кадры. Хитрость в том, чтобы заставить их всех выглядеть по-разному, состоит в том, чтобы компенсировать время их запуска, используя animation-delay И если мы используем отрицательные задержки (например, animation-delay: -9s Это действительно полезный трюк с производительностью.
  • Вся анимация контролируется единственной переменной Sass в верхней части окна CSS — $animation-time: 5s; , Изменение этого числа приведет к изменению большого числа показаний и скорости ЭКГ.
  • Он создан для Chome и не широко протестирован, но должен работать где угодно.

Существуют некоторые ограничения чисто CSS-подхода, но я довольно доволен общим эффектом. Мне нужен JS, чтобы улучшить элементы, которые мне не нравятся.

Третий приз: PaulOB

Нам очень повезло, что Пол долгое время работал помощником, наставником и консультантом для пользователей SitePoint (возможно, к двум?). В этом случае он пожертвовал драгоценным временем отдыха на солнце, чтобы создать вкусное решение SVG.

Павел сказал:

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

Должен вернуться в бассейн сейчас ?

Пол, мы приветствуем вас, сэр!

(Кроме того, мы выясним, какую футболку SitePoint, держателя для банок или какую-то коллекцию SitePoint мы можем вам выслать.)

Равный Первый приз: Никватон

Несмотря на то, что не было большого количества записей для этой первой проблемы с кодом, не было недостатка в качестве двух лучших записей. На самом деле, мы подумали, что лучшие 2 работы были настолько достойны награды, что решили присудить им обеим призы в размере 200 долларов на подарочную карту Amazon.

Запись Никваттона была именно той вещью, которую я имел в виду.

Как объясняет Ник, его решение:

Использует системы частиц, потому что они мне нравятся. :smiley: Кроме того, вы можете получить очень дешевый эффект следа с помощью canvas, заполнив контекст рисования почти прозрачным черным, что делает след исчезновения для моей линии «ping».

RAF обеспечивает плавную работу всей анимации, а анимация сердцебиения контролируется с помощью рекурсивного метода setTimeout (). Я использую setTimeout (), чтобы управлять эффектами, которые не являются для каждого кадра, и это также означает, что я могу запустить это с немного случайными интервалами, для органичного ощущения.
Метод heartBeat () контролирует и слегка рандомизирует частоту пульса, наблюдаемую в сердце и линии пульса.

Подход Ника к JS и Canvas предлагает гибкость, которую трудно совместить с другими подходами. Я не могу представить, как вы могли бы начать имитировать эти эффекты частиц с помощью метода на основе SVG.

Также относительно легко немного рандомизировать скорость анимации. Это нелегко подделать без JS, но действительно продает правдоподобие этой анимации.

Равный Первый приз: Давидомарфч

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

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

Но Дэвид также добавил два убийственных элемента X-фактора.

  1. Аудио : классический аппарат «буп… буп… буп…» добавляет столько драмы, когда пульс увеличивается.
  2. Интерактивность : Помимо некоторой автоматической «пассивной случайности», Дэвид позволяет пользователю контролировать частоту сердечных сокращений с помощью позиции курсора. Переместитесь в крайнее левое положение, чтобы усыпить пациента, — и вправо, чтобы дать пациенту укол адреналина в сердце.

Этот ограниченный контроль скорости ЭКГ делает этот аппарат потенциально действительно полезным в сценарии фильма / телевизора.

Как и решение Ника, блок ЭКГ записывается на холст с помощью JavaScript, но Дэвид использует библиотеку P5.js. Раньше я не использовал P5, но с модулями для рисования, анимации и звука кажется хорошим фундаментом для создания такого проекта.

Все, супер внушительный вклад.

И спасибо, и поздравляю Дэвида, Ника и Пола. Мы скоро свяжемся.

Что дальше? Кодовый вызов № 2: битва за CSS

Для нашего следующего испытания мы сотрудничаем с нашими друзьями на CSSbattles.dev, чтобы спонсировать Battle round # 4 . Есть 3 денежных приза и 20 премиальных членств SitePoint, в которых можно соревноваться в течение трех недель. Подробности будут в моем следующем посте.