CodeLab DynamicTable: 一个可实施的技术方案

CodeLab

我的命题可以用以下方式解释：了解我作法的人，会用这些命题当做梯子，越过它们，最终会发现这些梯子是荒谬的。他必须超越这些命题，之后才能正确的看待世界。 -- 维特根斯坦 《逻辑哲学论》

前言

CodeLab DynamicTable: A Seeing World 可以看作 CodeLab DynamicTable 的白皮书。 文章里，我们着重阐述了想法的来源、设计原则以及可能性，尽管也站在技术视角做了一些讨论，却未给出完整的可实施技术方案。

本文则试着给出一个可实施的技术方案， 它包含硬件设备清单和源码细节。

需要强调的是，开放性和可扩展性是 CodeLab DynamicTable 的灵魂，大家可以随意改造它，构建自己想要的东西.我们也鼓励你为用户保留这种灵活性，让 Ta 自己成为创造者。

我们推荐将本文看作实施 DynamicTable 一个脚手架，而不是标准答案。将其视为一个帮助你爬上墙头的梯子，一旦爬上去之后，去做你自己想做的事情吧，不要拘泥于梯子本身。

第 0 号 CodeLab DynamicTable

CodeLab 目前有 4 张办公桌，3 个全职人员。我们将第 4 张桌子构建为 DynamicTable。

可以把这张桌子视为 第0号 DynamicTable。

我们在CodeLab DynamicTable: A Seeing World提到说， DynamicTable 的构成包括

  • 铅笔
  • 剪刀
  • 纸张
  • 橡皮泥
  • 可打印的 Marker
  • 摄像头
  • 显示设备(超短焦投影仪)
  • 桌子
  • CodeLab Scratch
  • CodeLab Adapter
  • ...

铅笔、剪刀、纸张、橡皮泥 是日常实物，不做讨论。

其中硬件/设备包括:

  • 桌子
  • 显示设备(超短焦投影仪)
  • 可打印的 Marker
  • 摄像头

软件包括:

  • CodeLab Adapter
  • CodeLab Scratch

接下来，我们站在实施的视角来讨论它们。

硬件/设备

桌子

我们采用了宜家的这款升降桌。

我们选择了橡木纹理表面，这个纹理表面在弱光下，挺适合直接作为投影表面。

它的尺寸信息是:

  • 长度: 120 厘米
  • 宽度: 80 厘米

选择这款升降桌的最初动机是: 来 CodeLab 参加编程活动的孩子身高不同。此外，它也支持我们站立办公。

需要说明的是: DynamicTable 对桌子没有特别要求。可以任意选择。如果它的表面纹理不适合投影，可以考虑铺一层桌布。

显示设备(超短焦投影仪)

我们选择了 LG 的这款超短焦投影仪: PH450UG，33cm 就可以获得 80 英寸的大屏幕。

它内置电池，续航超过 2.5 小时。

体积小巧(132 x 200 x 80.5 mm)，单手可握。更详细的参数，参看产品页。

投影既可以是桌面，也可以投射到墙上。

可打印的 Marker

我们目前选择 ArUco 作为 Marker 。上图一共有 5x6 = 30 个 Marker， 按照从左到右，从上到下的顺序，Marker id 依次从 1 到 30。

你可以将 Marker 视为一种二维码，计算机可以识别它。计算机除了可以理解它的 id (编号)信息, 还可以理解它在什么位置，旋转角是多少，以及中心点和边缘 4 个角点在镜头下的坐标是多少。

它是一个携带空间信息的二维码。

ArUco Marker 在 AR 和 机器人领域都用得很广泛，是一个开放项目。

我们目前使用 OpenCV(Python)解析它。

CodeLab 已经构建了解析 ArUco Marker Adapter 插件，你可以在不了解它的情况下, 在 Scratch 中使用它。

如果你愿意深入学习 ArUco Marker，推荐学习MECARUCO: mechanics & aruco。

ArUco Marker 的类型

ArUco Marker 有多种类型， 我们选择了 4X4_50布局的， 一共有 50 个不同的 Marker。

如果选择7X7_1000 则一共有 1000 种不同的 Marker。

你可以在线查看它们之间的区别: arucogen， 也可以从以上页面生成可打印 Marker。

如何生成以及打印 Marker

有多种方式生成 Marker，既可以从 arucogen 每次生成一个 marker 。

也可以使用 Python 代码批量生成 marker:

生成以上 marker 的代码为:

import numpy as np
import cv2
from cv2 import aruco
import matplotlib.pyplot as plt
import matplotlib as mpl
# %matplotlib inline
aruco_dict = aruco.Dictionary_get(aruco.DICT_4X4_50)
fig = plt.figure()
nx = 6
ny = 5
for i in range(1, nx*ny+1):
ax = fig.add_subplot(ny,nx, i)
img = aruco.drawMarker(aruco_dict,i, 700)
plt.imshow(img, cmap = mpl.cm.gray, interpolation = "nearest")
ax.axis("off")
# plt.savefig("_data/markers.pdf")
plt.savefig("markers.png")
# plt.show()

每个 marker 多大合适呢？

这个可能需要通过做实验来获得。摄像头摆放的高度，以及分辨率， 都可能影响 marker 识别率。

我们目前在 A4 纸上以黑白模式打印 ArUco Marker，大小是这样的:

在一张 A4 纸上打印 2 份 30 张的 marker。

如果你想让 marker 更小，也是可以的，最好做一些实验，确保识别率。如果你愿意把 marker 打印得更大，请随意。

摄像头

我们选择了logitech C922PRO 摄像头， 支持分辨率 1080P 视频流。

选择这款摄像头是因为，我们准备在 CodeLab 办公室做直播。

DynamicTable 使用 Scratch 的视频数据(480x360), 这么低的分辨率对摄像头要求很低，所以绝大多数 USB 摄像头都可以。

为了保证灵活性，最好有一个摄像头活动支架:

以上便说完了 DynamicTable 的硬件/设备构成。

软件

CodeLab Adapter

使用 CodeLab Adapter 插件: node_physical_blocks.py, 我们可以解析摄像头所见到的 ArUco Marker ，并按照从左到右、从上到下的顺序依次列出 Marker id。

目前 node_physical_blocks.py 已经在插件市场中。

CodeLab Scratch

以下是一个简单的案例，识别出拼写单词:

Scratch-spell-demo

按绿旗运行程序， 将开启摄像头，并运行 node_physical_blocks.py 插件，如果你是第一次运行 node_physical_blocks.py 插件，将自动安装依赖:opencv-contrib-python , 这个依赖比较大(> 60MB) ，耐心等待一会儿，依赖安装完成后，屏幕右上角会出现通知信息。

每次按下空格的时候，将分析摄像头画面，从中提取出 marker 信息，并在舞台区域显示识别到的 marker id 列表。（从左到右，从上到下）。

整个 Scratch 程序的逻辑是: 获取当前屏幕的 marker 数据(marker id)，存放到 scratch 变量: markers 里；将 marker id 与 marker 的含义绑定到一起(诸如marker 2 表示字母 c)。如果屏幕中的 marker 拼成的字母是 cat，则触发猫叫声。

marker id 的含义是自定义的；拼写的结果要触发什么行为是自定义的。

只要将 Scratch-spell-demo 稍加修改，就可以作出以下视频里的案例。

以上只是一个非常简单的案例，发挥你的想象力，去做好玩的东西 :)

投影呢？

以上例子的输出只使用了声音，并未将交互动画投影到桌面。

将动画投影到桌面的想法是这样的: 最大化 Scratch 舞台，选一个黑色背景，将舞台区域之外的地方变黑（在最大化舞台区模式下，CodeLab Scratch支持切换到dark模式）。

之所以要让角色之外的区域都变黑，是因为投影仪将黑色解释为没有光照, 如此一来我们就能让 Scratch 角色与桌子(环境)融为一体。

一旦理解这个想法，你就能自己制作各种有趣的沉浸式场景啦。

参考