Art Glove: 10 шагов (с изображениями)

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:47

Art Glove - это носимая перчатка, которая содержит различные типы датчиков для управления художественной графикой с помощью Micro: bit и p5.js. Пальцы используют датчики изгиба, которые контролируют значения r, g, b, а также акселерометр в элементах управления Micro: bit x., координаты y для графики. Я создал этот проект как свой семестр для моего класса носимых технологий в качестве старшего по программе «Технологии, искусство и медиа» в CU Boulder.

Запасы:

• Садовые перчатки
• BBC Micro: Бит
• 3-4 датчика Flex
• Резисторы 10 кОм
• Монтажный провод (красный и черный)
• Кусачки для проволоки
• Макетная плата
• Зажимы-крокодилы (двусторонние и односторонние)
• Припой
• Паяльник
• Иголка
• Нить
• Вощеная бумага
• Лента
• Ножницы
• Ручка и карандаш

Шаг 1: следы датчика изгиба

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

1. Для начала сделаем дорожки на пальцах, которые будут удерживать датчики изгиба на месте. Наличие этих дорожек позволяет датчикам изгиба немного двигаться вперед и назад, одновременно удерживая их на пальце при изгибе. Сначала выверните перчатку наизнанку.
2. Возьмите датчик изгиба и поместите его в средний гребень пальца. С помощью ручки нарисуйте датчик изгиба.
3. Проденьте нить в иглу. Подарите себе щедрый кусок. Завяжите узел на конце нити.
4. Начиная сверху и на линии, просто продуйте дугу датчика изгиба, пропустите иглу сквозь перчатку изнутри и протолкните ее обратно по параллельной линии. Полностью протяните иглу, чтобы узел оказался на начерченной вами линии.
5. Плотно затягивая, завяжите с другой стороны 2–3 узла, чтобы нить не выходила. Убедитесь, что он плотный, чтобы датчик изгиба был надежно зафиксирован против вашего пальца.
6. Обрежьте нить, оставив несколько см. нитки на конце, чтобы узел не развязался.
7. Повторите шаги 2–6 для всех пальцев, к которым вы прикрепляете гибкие датчики, до тех пор, пока изображение не будет выглядеть как предпоследнее изображение.
8. Переверните перчатку так, чтобы она была повернута правильно. Проденьте датчики изгиба через направляющие, чтобы убедиться, что они правильно лежат на руке.

Шаг 2. Использование последовательной связи с Micro: bit

Чтобы увидеть выходные данные наших датчиков, мы будем использовать последовательную связь. Вы увидите, как настроить код в Makecode на следующем шаге, но сначала мы научимся читать его с нашего терминала. (Примечание: я использую Mac, поэтому эти шаги могут отличаться в зависимости от вашей операционной системы. Для других операционных систем смотрите здесь).

1. Подключите Micro: bit
2. Откройте свой терминал
3. введите 'ls /dev/cu.*'
4. Вы должны увидеть что-то вроде '/dev/cu.usbmodem1422', но точное число будет зависеть от вашего компьютера.
5. После того, как вы запустите код, набрав screen /dev/cu.usbmodem1422 115200 (с вашим конкретным номером последовательного порта), вы получите последовательный вывод Micro: bit.
6. Ваш результат должен выглядеть примерно так, как на картинке выше, в зависимости от того, как вы его отформатировали!

Шаг 3: создание прототипа схемы

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

1. Используя приведенную выше принципиальную схему, создайте прототип своей схемы на макетной плате, используя перемычки, резисторы, односторонние зажимы типа «крокодил» и бит Micro:.
2. Подключите датчики изгиба к контактам 0, 1 и 2.
3. Я использовал этот код, чтобы проверить свои гибкие датчики
4. Согните их несколько раз, чтобы увидеть их показания и убедиться, что они работают правильно.

В коде последняя строка "serial.writeLine" - это то место, где мы записываем данные в наш последовательный вывод. Вы можете форматировать этот вывод, как хотите, я разделил каждую переменную запятой, а затем разделил ее запятой позже, но эта часть зависит от вас.

(Примечание: после того, как я выполнил этот шаг, я обнаружил, что один из моих датчиков изгиба имеет скол в проводящей краске и поэтому не дает хороших показаний. Вот почему на некоторых фотографиях показано, что я работаю с 4 датчиками. Узнав это, я пошел до трех датчиков на указательном, среднем и безымянном пальцах. Я также обнаружил, что мои датчики изгиба имеют самый широкий диапазон считывания изгиба «в противоположную сторону», поэтому я положил их на перчатку резистивной краской вниз.)

Шаг 4: Проверка акселерометра и датчика освещенности

На этом этапе я также решил протестировать акселерометр и датчик освещенности на Micro: bit.

1. Подключите Micro: bit к компьютеру
2. Загрузите этот код
3. Затем я протестировал акселерометр, датчики света и изгиба вместе с этим кодом.

(Примечание: именно в этот момент я понял, что вы не можете использовать контакты и датчик освещенности одновременно, поэтому я не использовал датчик освещенности в своем финале, но я хотел, чтобы вы могли видеть, как читать датчик освещенности, если нужен!)

Шаг 5: Пайка датчиков изгиба

Теперь приступим к пайке компонентов вместе! Это захватывающая часть, но важно не торопиться и проверять, что все еще работает, чтобы вы не добрались до конца, у вас что-то не работает, и не быть уверенным, где что-то пошло не так! Я предлагаю использовать здесь двусторонние зажимы типа «крокодил», чтобы проверить, что каждый датчик по-прежнему работает после того, как провода и резисторы будут спаяны вместе.

1. Возьмите датчик изгиба и скотч или положите на него тяжелый предмет, чтобы удерживать его на месте.
2. Возьмите резистор 10 кОм и отрежьте большую часть конца так, чтобы длина провода была примерно равна длине провода на датчике изгиба.
3. Возьмите паяльник и надавите им на резистор и провод датчика, пока они не нагреются.
4. Возьмите припой и вдавите его в горячий утюг, поскольку он начнет плавиться по компонентам. Вам просто нужно достаточно, чтобы покрыть провода.
5. Снимите утюг. Здесь я надел другую перчатку для садоводства и удерживал резистор и провод на месте, пока припой остывал.
6. Обрежьте длинный красный провод и поместите его в паяное соединение, где встречаются резистор и датчик изгиба. Повторите шаги 4-5. Это аналоговый контактный провод.
7. Обрежьте длинный кусок черного провода и поместите его на конец другого провода. Повторите шаги 4-5. Это ваш заземляющий провод.
8. Обрежьте длинный кусок красного провода и второй конец резистора так, чтобы он был такой же длины, как предыдущая сторона. Повторите шаги 4-5. Это ваш провод питания.
9. Повторите шаги 1–8 для остальных датчиков изгиба.
10. Оставьте ваши провода длинными, чтобы у вас было место для работы, чтобы сделать их правильной длины позже, когда вставляете их в Micro: bit.

Шаг 6: Припайка к Micro: бит и сборка перчатки

Теперь, когда наши датчики готовы, мы собираемся приступить к пайке Micro: bit и сборке перчатки. Не забудьте еще раз проверять на ходу, используя зажимы из крокодиловой кожи, чтобы убедиться, что компоненты все еще работают после того, как вы спаяете их вместе.

1. Положите датчики и Micro: bit на перчатку, чтобы получить представление о том, куда должны идти провода и какой длины они должны быть.
2. Оберните красный провод вокруг штыря питания. Используйте кусачки, чтобы зачистить провод и оставить открытые зазоры, к которым вы будете прикреплять провод. Проделайте то же самое с заземляющим проводом.
3. Обведите контуром перчатку, которую вы не используете. Это поможет нам спаять все вместе и получить правильную длину. Вы будете делать все в обратном порядке, поэтому дважды проверьте, правильно ли вы пайки!
4. Поместите Micro: bit примерно в том месте, где вы хотите, чтобы он лежал в руке. Сделайте отметки, где сидят провода заземления и питания.
5. Закрепите изолентой провод питания или заземления.
6. Закрепите датчик изгиба лентой.
7. Обрежьте провод питания так, чтобы он проходил сразу за отметкой на всей линии электропередачи.
8. Спаяйте эти части вместе.
9. Повторите шаги 5–8 для других проводов питания и заземляющих проводов.
10. Возьмите бит Micro: и поместите его под только что припаянные провода. Припаяйте питание и заземление к правильным контактам.
11. Обрежьте аналоговые провода так, чтобы они проходили сразу за концы контактов и могли обернуться к передней стороне.
12. Припаяйте провода к правильным контактам.
13. Я обнаружил, что мои показания были наилучшими и наиболее последовательными, когда все провода (питание, земля и аналоговый) касались как передней, так и задней части контактов.
14. Один трек за другим, одновременно подталкивайте датчики изгиба пальцами вверх.
15. Как только датчики будут на месте, наденьте перчатку и убедитесь, что они правильно сидят. Если вам нужно добавить дорожки или исправить их размещение, сделайте это сейчас.
16. Как только датчики окажутся там, где вы хотите, обратите внимание на то, где закрепить биту Micro: на месте. Вы можете использовать маленькие отверстия по обе стороны от кнопок A и B или использовать отверстия для булавок. Используйте иглу и нить, чтобы закрепить его на руке.

Поздравляю! Аппаратные компоненты перчатки готовы!

Шаг 7: Micro: битовый код

Теперь я собираюсь познакомить вас с кодом Micro: bit. Вы можете сделать этот код таким, каким хотите, но я хотел пройти и объяснить все, чтобы вы могли увидеть, что я сделал, как я это сделал и почему! Вы можете найти мой код здесь.

1. Строки 1-31. Здесь я использую предустановленные функции, которые поставляются с Micro: bit.

   • Нажатие A уменьшает счетчик, который представляет собой выбор доступной графики. Как только вы достигнете 0, он вернется к самому большому числу.
   • Нажатие B увеличивает счетчик, как только вы достигнете максимального количества доступных графиков, он вернется к 0.
   • Если текущая выбранная вами графика не является той, которая сейчас рисуется, одновременное нажатие A и B выбирает новую графику.
   • Если текущий выбранный графический элемент совпадает с рисунком, который вы рисуете, одновременное нажатие клавиш A и B заполняет форму, если она может иметь заливку.
   • Встряхивание бита Micro: устанавливает для переменной стирания значение 1, которое указывает p5.js стереть холст и начать с черного. Он приостанавливает выполнение на секунду, а затем устанавливает его обратно на 0, чтобы пользователь мог продолжить рисование.

2. Строки 32-64 устанавливают мои переменные. Было важно использовать много переменных, чтобы большинство значений не было жестко запрограммировано. Они могут меняться вместе с перчаткой, а также легко заменяться в одном месте вместо того, чтобы обновлять кучу значений повсюду. Выделю несколько важных.

   • Размер холста - это тот, который приятно иметь в одной переменной для обновления в зависимости от размера моего холста. То же самое с shapeHigh. По мере добавления или удаления графики я могу обновить это число здесь.
   • Переменные high и low позволяют мне отслеживать текущие максимумы и минимумы датчиков и иметь постоянный диапазон калибровки. Это важно, поскольку каждый человек, который носит перчатки, будет иметь разный диапазон движений и, следовательно, разные максимумы и минимумы, которых они могут достичь.
3. Строки 66-68 считывают аналоговые значения с контактов датчиков изгиба.

4. Строки 69-74 калибруют высокое значение указательного пальца.

   • Если достигается новый максимум, он устанавливает его как максимум.
   • Перенастраивает диапазон этого пальца.
   • Использует этот новый диапазон для отображения цветов
5. Строки 75-80 калибруют нижнее значение для указательного пальца.
6. Строки 81-104 делают то же самое, что и 4 и 5 для среднего и безымянного пальцев.

7. Строки 105-107 сопоставляют значения моего датчика гибкости со значениями цвета 0-255 (или от colorLow до colorHigh, если я не использую полный диапазон).

   • Встроенная функция карты из Makecode не давала мне отличных карт, учитывая ограниченный диапазон, который я получал от своих датчиков. Итак, я создал свою собственную функцию отображения.
   • Вот как это работает. Диапазон ввода каждого пальца определяется им (максимальное значение - минимальное значение). Цветовой диапазон, который также является (наивысшее значение цвета - наименьшее значение цвета), делится на диапазон каждого пальца. Это число округляется до наименьшего целого числа и является частным.
   • (Фактическое значение датчика - наименьшее значение датчика) дает значение в пределах диапазона. Умножение этого на частное, которое мы нашли выше, и добавление самых низких значений цвета дает вам сопоставленное значение от датчика к цвету в пределах цветового диапазона.
8. Строка 109 показывает значение высоты тона (вверх и вниз).
9. Линии 110-115 калибруют максимум и минимум для этого значения.
10. Строка 116 показывает значение рулона (слева и справа).
11. Линии 117-122 калибруют максимум и минимум для этого значения.
12. Строки 123–126 сопоставляют значения тангажа и крена с размером холста и округляют их до целых чисел.
13. Строка 127 записывает переменные в последовательный вывод, используя serial.writeLine, разделяя каждое значение запятой и пробелом «,», чтобы проанализировать их позже.

Как только у вас будет код, который вам нравится, загрузите его и перетащите из загрузок в Micro: bit (вы должны увидеть его в «Locations» в левой части окна поиска), чтобы загрузить код в Micro: bit.

Шаг 8: Последовательная связь с P5.js

Для последовательной связи с p5.js нам понадобится дополнительный инструмент. Чтобы узнать больше о том, что происходит за кулисами последовательной связи, я предлагаю прочитать эту статью.

1. Загрузите версию приложения p5.js по этой ссылке. У меня есть версия Alpha 6, но подойдет любая.
2. Используйте этот шаблон p5.js для последовательной связи. Чтобы настроить его, введите правильное имя последовательного порта для portName в строке 12. Это имя мы выяснили на шаге 2.
3. Подключите Micro: bit к компьютеру
4. Откройте последовательное приложение p5.js.
5. Выберите свой порт из списка портов и больше ничего не делайте. Даже не открывать! Просто выберите свой порт из списка.
6. Нажмите "Выполнить" в шаблоне последовательного порта p5.js. Вы должны увидеть его открытым, и он будет читать вам нулевые значения, поскольку мы еще не написали код для анализа нашего последовательного вывода.

Теперь мы можем последовательно обмениваться данными от нашего Micro: bit к p5.js!

Шаг 9: Код P5.js

Теперь перейдем к коду p5.js. Здесь мы читаем значения последовательного вывода и используем их для создания искусства.

1. Как я уже упоминал на предыдущем шаге, убедитесь, что имя порта в строке 12 - это имя порта вашего компьютера.
2. В функции setup () в строках 32-33 я добавил левый и правый буфер с помощью createGraphics, я сделал это, чтобы разделить холст, чтобы одна часть использовалась для рисования, а другая часть могла отображать направления и показывать, какой рисунок вы смотрите или прокручиваете.
3. Функция draw () вызывает функции, которые я сделал для отдельного создания leftBuffer и rightBuffer. Он также определяет, где начинается верхний левый угол каждого буфера.
4. Функция drawRightBuffer () отображает весь текст для выбранных направлений и графики.

5. Функции drawLeftBuffer () отображают всю графику.

   • Строка 93 случайным образом генерирует значение альфа-значения. Это сделано для того, чтобы все цвета имели разные значения прозрачности, чтобы изображение выглядело более интересно. Если бы у меня было 4 гибких датчика, я бы использовал для этого 4-й!
   • Строка 94 устанавливает значение хода равным значениям r, g, b, определенным датчиками изгиба.
   • Строки 96-102 можно раскомментировать, чтобы проверить, как перчатка работает без перчатки, с помощью мыши. Замените строку 102 графикой из остальной части функции.
6. 104-106 стереть холст, когда рука трясется, установив черный фон холста
7. 108-114 управлять заливкой фигур, когда A + B нажаты и выбраны, и текущая форма такая же
8. 117-312, где отображается графика. Это основная часть кода и часть для творчества! Я предлагаю взглянуть на ссылку p5.js, чтобы лучше понять, как управлять фигурами. Я использовал крен и тангаж для управления позициями x, y и изменения размера фигур и графики, и, как я уже упоминал ранее, использовал расширение. датчики изгиба для контроля цвета. Здесь вы можете проявить творческий подход! Играйте с тем, что может предложить p5.js, и придумывайте свою собственную забавную графику для управления! Здесь я также установил описание для currentShape, которое отображается в правом буфере.
9. 318-460 Я установил описание для selectedShape.

10. Строки 478-498 - это функция serialEvent (). Отсюда мы получаем серийные данные.

    • В строках 485-486 я установил proll и ppitch (предыдущий крен и тангаж) на предыдущие значения крена и тангажа.
    • В строке 487 я разделил данные на ",". Я делаю это потому, что записал данные через запятую. Вы бы поместили сюда все, что вы отделили от своих переменных. Эти переменные помещаются в массив чисел.
    • Затем в строках 488-496 я устанавливаю переменные для соответствующего элемента в массиве и переводю их из строки в число. Я использую эти переменные в функции drawLeftBuffer () для управления графикой.

Это в значительной степени подводит итог кода и завершает проект! Теперь мы можем увидеть, как работает перчатка.

Шаг 10: конечный продукт

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