数据驱动的公共图形，2026
Piano Wharf
鼓浪屿是钢琴之岛，不通汽车，只能乘轮渡抵达。在轮渡候船厅里，岛屿自奏：实时潮汐去弹响琴键，每个琴键都是岛上的一个地名；最响的那个名字，就是接下来该去的地方。
- 年份
- 2026 年 6 月
- 角色
- 品牌设计与代码。调研和汇报由 Congrui Wang 负责。
- 团队
- 两人：冯恺琦与 Congrui Wang
- 课程
- 数据驱动的公共图形，设计技术 2 · 同济大学设计创意学院
- 状态
- 2026 年 6 月提交的课程作业。装置是一项提案。
一天，逐小时
01构想
一片网点，三种读法：潮汐、琴键、音符。
整套视觉识别就是一个视觉原子：一个黑点，意义由它的疏密承载。同样这些点，既是潮汐，一道波形；也是琴键，像键盘一样并排的一列列；还是音符，每一列都标着它弹出的音高。海、声音、文字、地点、海。
- 潮汐一道竖直的波形剪影实时潮位
- 琴键并排站立的竖列每一列是一个地点
- 音符每一列标上它的音高C 大调五声音阶：C D E G A
字标用和潮汐同样的网点铸成：先栅格化，再在半调网格上重新渲染，于是标志和画面成了同一种材料。剩下的交给两款字体：DM Mono 用于数据和标签，Cormorant Garamond 斜体用于开口说话的那一行。不用颜色，是我有意坚持的：颜色通常做的事，由疏密来做。
02潮汐弹奏
水里涨起来的，墙上也涨起来。
在草图里，起作用的是一个数：潮位，每六十秒读一次。高于中潮位时，沿岸的地点变得密集，其中一个被放大、留住；低于中潮位时，轮到腹地的庭院。下落的点打在琴键上，每个键奏响自己的音，被留住的名字每隔几秒在这一组地点里换一个。
- 潮位0.10 – 5.45 m高于中潮位 2.78 m：沿岸的地点变密并被推荐；低于它，则是腹地的庭院
- 潮汐涨落涨潮 / 落潮在系统里，把同一个切换读得更细（有对应关系，草图里没有）
- 轮渡班次每小时 0 – 6 班速度：多久落下一滴（系统里有对应关系，草图里没有）
- 人流每分钟 0 – 120 人有多少琴键是活的（系统里有对应关系，草图里没有）
墙面大多时候是静止的。每一列用五到八秒呼吸一次；一滴落下击中琴键，这一列随着音符响起而鼓起；同一时间最多四个音，即使在高峰，也至少留出百分之三十的静默。
03过程
网点之前的五版草图。
半调是最后才出现的。在它之前，有一个需要有人动手的调音台，一张动不起来的网格，一个徒有其表的着色器，一张换到哪里都能展示的橙色公共图形，还有一副实心字做成、显得沉重的键盘。
城市 DJ 调音台给游客用的调音台，输出是一张流动网络。需要交互，太复杂，做不到五秒读懂。
潮汐克拉尼网格厦门二十四小时的潮汐，做成二十四块克拉尼板，用 Processing 写成。是一张海报，不是实时的画面。
域扭曲一个 GPU 着色器，七层倍频噪声，潮汐作为扭曲幅度。画面丰富，但换成任何地方都做得出来。
三种潮位，橙色版扭曲版在低、中、高潮位下的样子，配上 Tone.js 的钢琴音。是一张数据图形，还不是这座岛的标志。
实心字键盘地名立成竖直的琴键。看得出是钢琴，但文字和乐器仍是两回事，而且显得沉重。网点把它们融为一体。
04场地
候船厅里的一面墙，供五到八米外观看。
厦门鼓浪屿南侧的轮渡码头：这座岛唯一的门，所有人都在这里闲着等待，身处两地之间。提案把草图投影到候船厅南面的混凝土墙上，墙面六米乘三米半，由一台每六十秒刷新一次潮位的本地电脑驱动，配一只音量低于交谈声的吸顶音箱。夜晚是最好的观看条件，这也是这套视觉识别用疏密、不用颜色的原因之一。
这份记录说明不了的
- 原型里的潮位读数由一张 24 小时的表模拟而来，结构仿照实时接口；没有接入实时观测站。
- 投影是提案。什么都没有安装；文档里的观看距离和光线测试，是在屏幕尺度上模拟的。
- 五秒读图的结果，来自几位看过效果图的人，而不是码头上的任何人。
- 提案的现场图像是生成的，不是照片；图里的墙也不是码头的墙。
- 轮渡班次和人流在系统里只是纸面上的对应；草图只读取潮位。
- 在草图里，潮位以中潮位为界，在两组地点之间切换；疏密并不像视觉识别系统里写的那样，随潮位连续增长。
AI 使用情况
部分代码，即半调与波形的数学计算、Canvas 与 Tone.js 的管线，是在 AI 协助下写成的，并在边界值上手动核对过。两张提案现场图由 AI 图像工具生成。
详情
- 题目
- Piano Wharf。岛屿自奏：为鼓浪屿轮渡码头做的城市品牌信号，由潮汐绘出。
- 媒介
- 一套生成式视觉识别：一个浏览器草图（Canvas、Tone.js），把潮位变成一片网点 · 一套视觉识别系统 · 一份分五部分的文档 · 一个在码头候船厅里投影的提案
- 技能
- 视觉识别设计 · 生成式图形 · 创意编程 · 声音映射
- 工具
- JavaScript Canvas · Tone.js · 早期迭代用 Processing · 视觉识别中的 DM Mono 与 Cormorant Garamond
影片是最终草图自己的输出，为本页逐帧录制：潮汐按原型的 24 小时潮位表推进，每小时两秒半；声音是草图弹出的音符，用它自己的合成器和混响渲染，并做了响度匹配。海报是我自己设计的。迭代图是早期草图的输出。两张提案现场图由 AI 图像工具生成。提交作业中的调研数据和引语出自 Congrui Wang，这里不再重复。