На canvas транслируется видео поток с камеры. Необходимо:

1. Сверстать внешний вид представления, согласно изображению "main view.jpg" (вывод камеры сделать серым, в центре овал, вокруг которого затемненное пространство до краев), все надписи, присутствующие на изображении и кнопка в 2х состояниях – active / disabled

2. Вокруг овала есть рамка, в нескольких цветовых вариантах, согласно изображению "states-and-tips.jpg". Над кнопкой есть блок подсказок, в который могут погружаться 1-10 строк текста с подсказками. Блок растет вверх. Цвет блока подсказок может быть серым полупрозрачным или зеленым, как на картинке.

3. Рамка вокруг овала может принимать вид таймлайна, с заданным временем заполнения и несколькими режимами внешнего вида – первый изображен на рисунке timeline_error.jpg, второй режим (timelines.jpg) – это плавное заполнение с изменением цвета по мере заполнения. Время заполнения и все цвета бэкграундов и самих линий задаются константами.

4. Центральный овал нужно представить как объемный стеклянный цилиндр заданного радиуса (переменная), по которому должны перемещаться две линии, координаты перекрестия которых задаются скриптом. Нужно геометрически правильно, с использованием кривых Безье отрисовать эти линии при любой координате пересечения. При изменении координаты пересечения линий они должны плавно с заданной скоростью (переменная) переместиться в новую точку.

Вся анимация должна быть максимально легковесной с применением RequestAnimationFrame. Детали в личке.

Ставки 2

Андрей Чвиль

Переможець

5 1

Проєкти -
Оцінка -
Рейтинг 430

Бюджет: 8500 RUB Термін: 2 дні

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

У списку не показані ставки, приховані замовником чи фрилансером з Plus, а також ставки, що порушують правила

Актуальні фриланс-проєкти в категорії HTML та CSS верстання

Дизайн і верстка лендінгу для бухгалтерських послуг (Webflow / no-code)

Дизайн сайтів 30 ставок 5 серпня

Не вказано
GeekQlick

35 ставок 5 серпня

Не вказано
Корм для тварин

Тестування та QA 27 ставок 5 серпня

Не вказано
Перенос готової головної сторінки з Bolt.new на WordPress/Elementor Pro

Веб-програмування 74 ставки 4 серпня

Не вказано
Автоматизація на базі Google Sheets для запису на пробні заняття (онлайн школа мов)

Javascript та Typescript 64 ставки 4 серпня

Не вказано

Владислав Я.
Нелідово, Росія

Проєктів 72
Оцінка -
Рейтинг 2 205

Андрей Чвиль

Андрей Чвиль

Ставки поки відсутні

Актуальні фриланс-проєкти в категорії HTML та CSS верстання

Дизайн і верстка лендінгу для бухгалтерських послуг (Webflow / no-code)

GeekQlick

Корм для тварин

Перенос готової головної сторінки з Bolt.new на WordPress/Elementor Pro

Автоматизація на базі Google Sheets для запису на пробні заняття (онлайн школа мов)