艺术Glove

13,529

26.

5.

简介:艺术手套

The Art Glove is a wearable glove that contains different types of sensors to control art graphics through a Micro:bit and p5.js The fingers utilize bend sensors that control r,g,b values, and the accelerometer in the Micro:bit controls x,y coordinates for the graphics. I created this project as my term project for my Wearable Technology Class as a senior in the Technology, Arts, and Media program at CU Boulder.

补给品:

第1步:弯曲传感器轨道

First, we're going to focus on making the hardware. This way when we get to coding we have the actual glove component to use and test.

  1. 要开始,我们将在手指上制作轨道,这将保持弯曲传感器到位。具有这些轨道允许弯曲传感器稍微稍后移动,同时也使其固定到手指以弯曲。首先,将手套翻出来。
  2. 拿一个弯道传感器并将其放入手指的中间脊。使用笔,概述弯曲传感器
  3. 把螺纹穿过你的针头。给自己一件慷慨的作品。在螺纹的末端绑一个结。
  4. 从顶部和线上开始,只需吹弯传感器的弧,通过手套穿过内侧,然后将其推回并在平行线上推动。一直拉针,所以结坐在你画的线上。
  5. 紧紧地拉动,在另一边制作2-3节。这将确保线程不会出现。确保其紧密,以便弯曲传感器对您的手指固定
  6. 切断留下几厘米的螺纹。螺纹在末端使结没有撤消。
  7. 重复步骤2-6,适用于所有手指,您正在附加Flex传感器,直到它看起来像是第三个到最后一个图像。
  8. 把手套翻转,所以它以正确的方式转动。通过轨道滑动弯曲传感器,以确保它们在手上正确拟合

Step 2: Using Serial Communication With Micro:bit

要查看来自我们的传感器的输出,我们将使用串行通信。您将看到如何在下一步中设置Makecode中的代码,但首先我们将学习如何从终端中读取它。(注意:我正在使用Mac,所以这些步骤可能不同,具体取决于您的操作系统。对于其他操作系统,请查看这里)。

  1. 插入您的micro:bit
  2. 打开你的终端
  3. 类型 'ls /dev/cu.*'
  4. 你应该看到一个看起来像'/dev/cu.usbmodem1422.'但确切的数字将取决于您的计算机
  5. 一旦您正在运行代码,键入“screen /dev/cu.usbmodem1422 115200'(with your specific serial port number) will give you your Micro:bit's serial output
  6. 您的输出应该看起来像上面的图片,具体取决于您如何格式化输出!

第3步:调制电路

Before soldering all our components together we're going to prototype the circuit and write a few lines of example code to read our sensor values and make sure our components work correctly.

  1. 使用上面的电路图,使用跳线电线,电阻,单面鳄鱼夹和微观:位在面包板上的电路原型。
  2. Connect your bend sensors to pins 0, 1, & 2.
  3. 我用了这一点代码to test my flex sensors
  4. Bend them a few times to see their readings and make sure they're working correctly

在代码中,最后一行“Serial.Writeline”是我们编写到我们的串行输出的地方。您可以格式化此输出,但您想要使用逗号分隔每个变量,然后稍后将其分割在逗号上,但这部分取决于您。

(Note: After I did this step I found out one of my bend sensors had a chip in the conductive paint and therefore was not getting good readings. That's why some of the pictures show me working with 4 sensors. After finding this out I went down to just three sensors on the pointer, middle, and ring finger. I also found my bend sensors had the most wide range of reading bending the "opposite" way which is why I put them on the glove with the resistive paint facing down.)

第4步:测试加速度计和光传感器

At this stage I also chose to test the accelerometer and light sensor on the Micro:bit

  1. 将您的micro:bit连接到您的计算机
  2. 下载这一点代码
  3. 然后我测试了加速度计,光线和弯曲传感器以及此代码

(注意:就在这一点上我想出了你不能同时使用引脚和光传感器,所以我没有在我的决赛中使用光传感器,但我希望你能看到如何阅读光传感器如果您需要!)

第5步:焊接弯曲传感器

现在我们将在一起开始焊接我们的组件!这是一个令人兴奋的部分,但是很重要,慢慢地检查一切都在你去的时候仍然工作,所以你没有结束,有一些不起作用,而且不确定它出错了!我建议在这里使用双面鳄鱼剪辑剪辑检查每个传感器仍然有效,一旦电线和电阻焊接在一起。

  1. 拿起弯曲传感器和磁带,或放在它上的重物将其固定到位。
  2. 乘坐10K欧姆电阻,切割大部分末端,使铅在弯曲传感器上的铅即可。
  3. Take your soldering iron and press it on both the resistor and bend sensor lead until they're hot
  4. Take your solder and press it into the hot iron as it starts to melt over the components. You just need enough to cover the wires.
  5. 取出铁。在这里,我放在另一个园艺手套上,并在焊料冷却时将电阻和电线固定到位。
  6. 夹在电阻器和弯曲传感器相遇的焊点上,将其夹住并将其放在焊点。重复步骤4-5。这是模拟销线。
  7. 夹一块长件黑线并将其放在另一个铅的末端。重复步骤4-5。这是你的地线。
  8. 夹在电阻器的另一端夹住一块长件红色,所以它就像前一边一样长。重复步骤4-5。这是您的电源线。
  9. Repeat steps 1-8 for the rest of your bend sensors.
  10. 让您的电线长,以便您有空间才能在将它们放在Micro:位时以后使它们正确的长度。

第6步:焊接到微:钻头并组装手套

Now that our sensors are ready, we're going to start soldering to the Micro:bit and assembling the glove. Remember again to test as you go, using alligator clips to make sure the components are still working after you solder them together.

  1. 打开传感器和微妙:钻头上的手套,了解电线需要去哪里以及他们需要多长时间。
  2. 在电源引脚周围缠绕红色电线。使用钢丝钳将电线剥离并留出将电线连接到的开放空白。为地线执行此操作。
  3. 概述你没有使用的手套。这将帮助我们焊接一切并获得正确的事物。虽然如此仔细检查你在正确的方式焊接东西!
  4. 放置你的micro:bit大约需要它躺在手上的地方。制作标记是地面和电源线坐。
  5. 磁带the wire, power or ground, in place.
  6. 将弯曲传感器胶带到位。
  7. 切割电源线,使其在所有电源线上刚过它的标记。
  8. 焊接these pieces together.
  9. Repeat steps 5-8 for the other power wires, and for the ground wires.
  10. Take the Micro:bit and place it under the newly soldered wires. Solder the power and ground to the correct pins.
  11. 夹住模拟线,以便它们刚刚过销的末端,可以将其包裹在前侧。
  12. 将电线焊接到正确的针脚。
  13. 我发现,当所有电线(电源,地面和模拟)触摸引脚的前后时,我的读数最佳,最符合最符合。
  14. 一条轨道一条轨道,按下弯曲同时向上传递手指。
  15. 一旦传感器到位,将手套放开并确保合适是正确的。如果您需要添加曲目,或修复其放置,请执行此操作。
  16. 一旦传感器谎言,您希望它们在哪里,请注意将Micro:位到位的位置。您可以使用A和B按钮两侧的小孔或使用针头的孔。使用你的针和线将它绑在手上

恭喜!手套的硬件组件现在完成!

第7步:Micro:位代码

Now I'm going to be walking you through the Micro:bit code. You are more than welcome to make this code what you want but I wanted to go through and explain everything so you can see what I did, how I did it, and why! You can find my code这里

  1. Lines 1-31. Here I am using preset functions the Micro:bit comes with.
    • 按下计数,这是可用图形的选择。达到0后,它会恢复到最高数字。
    • 按B增加计数,一旦达到最高数量的可用图形,它会返回0。
    • 如果所选的当前图形不是当前正在绘制的图形,则按A和B同时选择新图形。
    • 如果所选的当前图形是与绘制的那个相同的图形,则按A和B同时填充形状,如果它可以填充。
    • 摇动微:位将擦除变量设置为1,告诉p5.js擦除画布并启动黑色。它会暂停运行一秒钟,然后将其设置回0,以便用户可以继续绘制。
  2. Lines 32-64 are setting up my variables. It was important to use a lot of variables so that most of the values weren't hardcoded. They can change with the glove and also easily be changed in one place instead of updating a bunch of values all over the place. I'll highlight a few of the important ones.
    • Canvas大小是一个很好的一个变量,以根据我的画布的大小更新。与形状一样。当我添加或摆脱图形时,我可以在此处更新该号码。
    • 高变量和低变量让我跟踪传感器的电流高低,并且具有连续校准范围。这是重要的,因为佩戴手套的人将具有不同的运动范围,因此它们能够达到不同的高度和低点。
  3. 第66-68行正在从弯曲传感器的引脚中读取模拟值
  4. 第69-74行正在校准指针手指的高值。
    • 如果达到了新的高位,它将其设置为高电平。
    • 重新校准该手指的范围。
    • 使用该范围的颜色映射
  5. Lines 75-80 are calibrating the low value for the pointer finger.
  6. 第81-104行与中间和环手指的4和5相同。
  7. 第105-107行正在将我的Flex传感器值映射到颜色值0-255(或Colorlow到ColorHigh,如果我没有完成全部范围)
    • 从MakeCode的内置地图功能并没有给我一个很好的映射,给出了我传感器的有限范围。所以我做了自己的映射函数。
    • 这是它的工作原理。每个手指的输入范围由它确定(最高值 - 它是最低值)确定。颜色范围,即(最高颜色值 - 最低颜色值)由每个手指范围除以。这个数字是舍入的最低整数,是商。
    • The (actual sensor value - the lowest sensor value) gives you the value within the range. Multiplying this by quotient we found above and adding the lowest color values gives you a mapped value from the sensor, to the color, within the color range.
  8. 第109行在间距值(上下)读取。
  9. 第110-115行校准了该值的高低低
  10. 线116在滚动值(左右)中读取。
  11. 线路117-122正在校准此值的高低低
  12. 第123-126行将音高和滚动值映射到画布大小并将其舍入到整个数字。
  13. 第127行使用Serial.Writeline将变量写入串行输出,通过逗号和空间分离每个值“,”,以便稍后解析。

Once you have the code how you like it, download it and drag it from your downloads to your Micro:bit (you should see it on "Locations" on the left side of your finder) to upload the code to the Micro:bit

第8步:与p5.js串行通信

要使用P5.js串行沟通,我们需要一个额外的工具。我建议阅读更多关于串行通信的幕后的内容本文

  1. 从中下载p5.js应用程序的版本关联。我有Alpha 6版本,但任何任何都会有效。
  2. 使用此p5.js.模板串行沟通。要将其设置为第12行的PortName的正确串行端口名称。这是我们在步骤2中找到的名称。
  3. 将您的micro:bit连接到您的计算机
  4. 打开p5.js串行应用程序。
  5. Select your port from the port list and don't do anything else. Not even press open! Just select your port from your list.
  6. 按P5.JS串行模板中的RUN。您应该能够看到它打开,它将读取您空值,因为我们还没有写入代码来解析我们的串行输出。

现在,我们可以从我们的micro:bit串行沟通到p5.js!

第9步:P5.JS代码

Now we're gonna jump into the p5.js代码。这是我们在串行输出值中读取的地方,并使用它们来创建艺术。

  1. 正如我在上一步中提到的那样,确保第12行的PortName是您的特定计算机端口名称。
  2. 在Setup()函数中,在第32-33行上,我用CreateGraphics添加了左侧和右侧缓冲区,我这样做是为了将画布分开,使一个部件用于绘图,另一部分可以显示方向,显示哪个图形你正在看或滚动。
  3. 我做的画()函数调用函数克雷亚te the leftBuffer and rightBuffer separately. It also defines where the top left corner of each buffer starts.
  4. DrawRightBuffer()函数显示方向和图形选择的所有文本
  5. The drawLeftBuffer() functions displays all the graphics.
    • 第93行随机生成alpha值的值。这是所有颜色都有不同的透明度值,使其看起来更有趣。我有4个Flex传感器,我会用4个为此!
    • 线94将笔划值设置为由Flex传感器确定的R,G,B值
    • 第96-102行可以取消关注,以测试手套如何使用鼠标使用手套而无需使用鼠标。用来自函数的其余部分用图形替换第102行。
  6. 104-106通过将帆布背景设置为黑色时擦除帆布
  7. 10.8.-114 control the fill of the shapes when A+B are pressed and selected and current shape are the same
  8. 117-312是显示图形的位置。这是重量的大部分代码和零件要获得创意!我建议看着p5.j​​s参考更好地了解如何控制形状。我使用卷和间距来控制x,y位置并更改形状和图形的大小,并且正如我之前提到的那样使用。弯曲传感器以控制颜色。这是你可以创造的地方!玩P5.JS必须提供什么并提出自己的有趣图形来控制!在这里,我还设置了在rightBuffer上显示的CurrentsHape的描述。
  9. 318-460我设置了SelectedShape的描述。
  10. 第478-498行是SeriaLEVENT()功能。这是我们收到串行数据的地方。
    • 在第485-486行上,我将PROLL和PPitch(先前的滚动和音调)设置为先前的卷和俯仰值。
    • On line 487 I split the data on ",". I do this because I wrote the data to be separated by commas. You would put whatever you separated your variables with here. These variables get put into the numbers array.
    • 然后,在第488-496行中,我将变量设置为数组中的相应元素,并将它们从字符串转换为数字。我在整个绘图速率()函数中使用这些变量来控制图形。

That pretty much sums the code up and finishes the project! Now we can see the glove working in action.

第10步:最终产品

Here's some pictures of the finished glove as well as some art pieces it generated! Watch the demo video to see it in action!

是第一个分享

    建议书

    • 玩具与游戏比赛

      玩具与游戏比赛
    • 大与小挑战

      大与小挑战
    • 修复它挑战

      修复它挑战

    5点评论

    0.
    27sjean.

    17天前

    你做得很好的好工作,我玩得开心

    0.
    Stumpchunkman.

    22天前

    做得好!在概念/信息艺术中拥有本科,这真的与我共鸣!

    0.
    Elaina M

    1year ago

    这有多乐趣!!桥接技术和艺术的好方法!!!!

    0.
    jordankdenn.

    11个月前回复

    Thank you! I love exploring how we can connect the two!