打算在 Scratch 里构建一个 dotPack 模拟器。

我们在之前的文章里提到:

就可编程部分来说， dotPack 是一个由 ESP32 驱动的 16x16 NeoPixel 点阵屏。

思路

如果把 dotPack 看作 16x16 个拼成正方形的彩色方块，在 Scratch 模拟它好像不难。

似乎只需创建一个彩色方块角色，然后复制 256 次，再将它们排列成一个正方形即可。

在社区里探索

在开始项目之前，喜欢在 Scratch 社区淘宝，看看是不是有可以 remix 的项目，于是尝试使用 pixel、NeoPixel、16x16之类的关键字在 Scratch 社区里搜索一番:

结果找到许多有趣的东西:

复习 克隆 相关知识

通过浏览以上项目，发现 克隆 是完成这项任务的关键策略。

我在 克隆 上经验不丰富。曾与 CodeLab 成员在 Neverland 里讨论过 克隆 的一些怪癖，我们站在面向对象层面，谈论了 克隆 一些反直觉、不一致的地方。

由于不够熟悉，我需要复习一下 克隆 相关知识。Scratch Wiki 是深入学习 Scratch 相关知识的好地方。花了几分钟复习一下与克隆有关的知识之后，再开始项目，就没有遇到什么障碍了。

制作项目

像素颜色列表

我们使用一个列表变量(np-pixels)来记录 256 个像素的颜色，我是从 MicroBlocks 的 NeoPixels 库里学来的技巧（MicroBlocks 的作者 John Maloney 也是 Scratch 的首席架构师）。

颜色值以文本的形式存储在列表的每个 item 里。

像素颜色

大部分的代码都在 pixel 角色中。这个角色是所有 256 个克隆体的本体，它自身处于隐藏状态（可能是 Scratch 社区的最佳实践）。

pixel 角色有 6 种造型，分别表示六种颜色:

  • black
  • white
  • red
  • green
  • blue

如有需要，可以添加更多造型，以支持更多颜色。

每个克隆体负责管理自身的颜色(面向对象风格)，它不断观察 np-pixels 中与自己相关的位置（每个克隆体在np-pixels里都有一个与之对应的 item 存储它的颜色），如果颜色值发生了变化，就立刻调整自身的颜色（切换造型）。

我目前想不出以任意 RGB 颜色填充方块的策略，所以对每种颜色的支持是通过枚举实现的。一种可能的方向是使用画笔来实现这个项目。颜色特效也是引入更多颜色的方法，但它的数值我还没有弄清楚。如果未来有更好的方案，只需要修改存储到 np-pixels 里的内容即可。

排列方式

为了模拟 dotPack，我们需要把 pixel 角色克隆 256(16x16) 次, 然后将克隆体从左到右，从上到下排列成一个正方形。

这些工作使用初始化自定义积木完成的。关于这个积木，重要的一点是: 在创建时，勾选 运行时不刷新屏幕, 这样就能在瞬间排列好 256 个积木.

根据我们采用的排列方式(从左到右，从上到下)，可以将 np-pixels 的一维坐标与 set pixel x _ y _ color _ 的二维坐标进行转化。

编程接口(API)

dotPack 最重要的编程接口是设置像素颜色(set pixel x _ y _ color _)，它的具体代码已经在上边一张图片里。我们将颜色值存储在np-pixels列表里，每个克隆体会通过观察列表相应位置，来更新自己。

其他的 API 基本都可以通过包装set pixel x _ y _ color _来实现，我只实现了一些简单的 API:

  • set background
  • clean

如果你想实现更多编程接口(API)，应该不是什么难事。

接下来我们展示使用这些编程接口(API)做的一些小练习。

一些例子

点亮对角线

我之前喜欢使用这个例子来介绍如何搭配使用条件与循环: 可编程书包。

Snow Crash

更多内容。

其他

开机画面

Alan Kay 在 1968 年，从这个 16x16 像素的早期平板显示器里，看到现代个人计算机的形态: 在像素显示器上制造图形幻觉。

为了绘制 Alan Kay 制作上边这张点阵图, 我先是在 Scratch 里构造出了一个点阵悬停显示器，然后与这个悬停显示器一起工作(人机共生)，用它在点阵上辅助导航位置，再利用这些由交互获得的信息来便捷绘制像素图，而不是逐个去数像素。

以下是在 Scratch 里构建点阵悬停显示器的源码，它也被视为克隆体的职责（面向对象又一次帮助了我们）:

采用个人计算风格来编程真是太有趣了，几乎任何材料都会因此变得灵活与强大。

个人计算社区的风格之一是 bootstrapping，“如果要造一艘大船，先造出一个竹筏，到海上去生活，之后在海上造船”。

项目源码

dotPack 模拟器(在线)

dotPack-模拟器.sb3

参考