创作起点

Starting point

这是一件可以交互的粒子作品。白色薄瓣组成一个空心结构，通过缓慢的收缩和舒展模拟呼吸。开口偏向一侧，外缘较亮，内壁较暗，用明暗差表现层次和深度。

This interactive particle work starts with a hollow structure made of white petals. Slow contraction and expansion simulate breathing. An off-centre opening, a bright rim, and a darker interior establish depth.

点击表面会发出粒子流，受击区域随之弯折、翻开和脱落。损伤会累积，后续冲击继续作用在已有缺口上。

Clicking the surface sends a particle stream. The hit area bends, opens, and sheds fragments. Damage accumulates, and later impacts act on the existing gaps.

完整过程包含两次爆裂。第一次之后，剩余薄瓣回收成一个较小的球体；第二次之后，主体和界面全部散开，画面变黑，随后出现重新开始按钮。

The full sequence contains two ruptures. After the first, the remaining petals gather into a smaller sphere. After the second, the sculpture and interface disperse, the screen turns black, and a restart button appears.

视觉参考

Visual references

参考主要分成三类：点云如何形成连续的薄面，碎片如何经过镜头，以及爆裂时的疏密和方向。下面是制作时使用的参考图和视频抽帧，点击可查看原尺寸。

The references address three questions: how points form a continuous membrane, how fragments pass the camera, and how density and direction vary during a rupture. These are the reference images and video stills used during production. Click an image for its original resolution.

薄面与点密度

Membranes and point density

视频中的形态与空间

Form and depth in video

爆裂的密度与方向

Rupture density and direction

作品借鉴了这些形态和空间关系，参考图没有作为贴图使用。静态图只用于观察外形，动作的时间、速度和受力在本作中另行设计。

The work draws on these forms and spatial relationships. The references are not used as textures. The still images inform shape; timing, speed, and forces were designed separately for this work.

薄膜与粒子

Membranes and particles

早期薄瓣偏厚，密集的粒子容易叠成白块。我把表面分成膜面、脉络、卷边和少量散点，分别控制密度、尺寸和亮度。密处读成面，疏处仍能看见单粒。

The early petals looked thick, and overlapping points formed white patches. I divided each surface into membrane, veins, curled edges, and a few loose grains, controlling their density, size, and brightness separately. Dense areas read as a surface; sparse areas retain individual points.

每片薄瓣保留自己的大小、朝向和局部坐标。受击、弯折和脱落都沿用这套结构，因此飞散时还能看出原来的纹理和形状。

Each petal retains its size, orientation, and local coordinates. Impacts, bending, and detachment use this structure, so the original texture and shape remain recognizable as it scatters.

内壁原先排列得太均匀，大小和受光都很接近。调整后，薄瓣的尺寸与朝向差异更大，少数大片较亮，其余部分保持较暗，空腔的深度更清楚。

The interior was initially too uniform in size and illumination. I increased the variation in size and orientation, lighting a few larger petals while keeping the rest darker. This made the cavity easier to read.

最终保留白色薄膜、略暖的亮边和深蓝黑背景，避免颜色变化干扰形态和运动。

The final palette keeps white membranes, slightly warm highlights, and a deep blue-black background so that colour changes do not obscure form and motion.

接触反馈

Contact response

早期点击后，表面会直接散开，缺少接触过程。后来把粒子流的命中点与实际膜面统一到同一套坐标中，让粒子流先抵达移动中的薄瓣，再从接触处传出弯折。

The early surface scattered immediately after a click, without a clear contact. I put the stream target and the rendered membrane in the same coordinate system. The stream now reaches the moving petal before a bend spreads from the contact point.

部分粒子沿膜面继续移动，带动附近薄瓣撑开。脱离时保留原来的朝向和根部牵拉，再加入短暂回弹，减少从弯折到飞散之间的跳变。

Some grains continue along the membrane and push nearby petals open. Detachment retains the original orientation and root pull, with a brief recoil to reduce the jump between bending and scattering.

局部回收有停顿、回弹和再次收拢。新的冲击可以在回收结束前再次命中；受损薄瓣会保留卷曲、错位和缺口。

Local recovery includes pauses, recoil, and another inward pull. A new impact can arrive before recovery finishes. Damaged petals retain curls, displacement, and gaps.

爆裂后的回收

Recovery after rupture

第一次爆裂时，大碎片先向外飞，根部短暂保持连接，拉伸超过阈值后才断开。靠近镜头的薄膜会放大，仍保留原有脉络和卷边。

During the first rupture, larger fragments move outward while their roots briefly stay connected. The connections break after a stretch threshold is reached. Membranes grow larger near the camera while retaining their veins and curled edges.

回收中段曾出现明显停滞：向外飞行突然结束，再切换成向内吸回。修改后，向内牵引逐渐增强，阻尼同步增加，让薄瓣从外飞连续转为回卷。

Recovery once had a clear stall: outward flight stopped abruptly before an inward pull began. I made the inward pull and damping increase together, allowing a continuous turn from outward flight to inward motion.

回收只使用剩下的原薄瓣。脱落并消失的部分不会补回，少量碎片会迟到或留在外围。小球的收缩、停顿和舒展采用不同的时长，避免匀速重复。

Recovery uses only the remaining original petals. Lost material is not replaced. A few fragments arrive late or remain outside. Contraction, pauses, and expansion have different durations to avoid a uniform loop.

完整流程

Full sequence

自动模式会连续发送粒子流，手动模式由观众选择命中位置。两种模式共用累积损伤和两次爆裂的流程。

Automatic mode sends successive streams; manual mode lets the viewer choose each hit location. Both modes use the same accumulated damage and two-rupture sequence.

1. 初始状态 Initial state

   空心结构缓慢收缩和舒展，受击后逐渐出现缺口。

   The hollow structure slowly contracts and expands. Impacts gradually create gaps.

2. 第一次爆裂 First rupture

   薄膜拉伸、断开，碎片经过镜头，剩余部分开始回收。

   Membranes stretch and break. Fragments pass the camera while the remaining petals begin to return.

3. 回收后 After recovery

   剩余薄瓣形成小球，保持不规则的呼吸动作，等待下一次冲击。

   The remaining petals form a smaller sphere with uneven breathing motion, awaiting another impact.

4. 第二次爆裂 Second rupture

   主体与界面散开，画面归黑，随后出现重新开始按钮。

   The sculpture and interface disperse. The screen turns black before the restart button appears.

第二次爆裂也会带走标题、状态文字和控件。它们沿主体向外的方向散开；全部消失后保留短暂黑场，再显示中央的重新开始按钮。

The second rupture also disperses the title, status, and controls in the same outward direction as the sculpture. Once everything has disappeared, a brief black interval precedes the central restart button.

主要修改

Main revisions

迭代过程中保留了空心结构、白色薄膜和固定视角，主要调整表面细节、受击反馈、回收动作和结尾。

The hollow structure, white membranes, and fixed viewpoint stayed throughout the revisions. The main changes concern surface detail, impact response, recovery, and the ending.

1. 减薄花瓣，区分膜面、脉络和卷边，降低密集粒子叠加后的过曝。

   Thinner petals, distinct membranes, veins, and curled edges, with less overexposure from overlapping points.

2. 统一命中点和膜面坐标，让接触、折弯、回弹和邻片运动对应起来。

   Shared coordinates for hit locations and membranes, connecting contact, bending, recoil, and neighbouring motion.

3. 把爆裂后的长期粒子云改成小球回收，让第一次爆裂造成的缺失在后半段继续可见。

   The long particle cloud after rupture became a returning sphere, keeping the first rupture’s missing material visible in the second half.

4. 减少回收停滞和突然加速，增加内壁薄瓣在大小、朝向与亮度上的差异。

   Less stalling and sudden acceleration during recovery, with more variation in the interior petals’ size, orientation, and brightness.

5. 减弱小球抖动，改用较慢、不等长的收缩与舒展，保留局部滑脱和外围碎片。

   Less shaking in the smaller sphere, replaced by slower, uneven contraction and expansion, with local slipping and outer fragments retained.

6. 让界面在第二次爆裂时一起散开，补齐黑场、重启按钮和自动模式的衔接。

   Interface dispersal during the second rupture, followed by a black interval, restart button, and corrected automatic-mode transitions.

声音制作

Sound production

背景使用小提琴录音，音量随呼吸和牵拉变化。接触时有短促拨弦，回收时加入简短的旋律片段。

The background uses recorded violin, with volume following breathing and pulling. Contact adds a short plucked response, and recovery introduces brief melodic phrases.

爆裂音效试过合成弦乐、管弦乐采样和短弓录音。最后使用我在 Logic Pro 中制作的四轨混音：大提琴、弦乐组、原声吉他和小提琴。

I tested synthetic strings, orchestral samples, and short-bow recordings for the ruptures. The final sound uses my four-track Logic Pro mix: cello, string ensemble, acoustic guitar, and violin.

两次爆裂分别使用两个导出版本，各约 2.85 秒。第一版起音较集中，播放音量较低；第二版稍晚展开，播放音量更大。音效由实际爆裂事件触发，保留原音高、声部平衡和完整尾音。

The two ruptures use two exported versions, each about 2.85 seconds long. The first has a more concentrated onset and plays at a lower level; the second unfolds slightly later and plays louder. Each actual rupture triggers its sound, preserving the original pitch, balance, and complete tail.

声音需要手动开启。背景小提琴采样来自 VSCO 社区版，爆裂音效使用自己的混音文件。

Sound is enabled manually. Background violin samples come from VSCO Community Edition; rupture effects use my own mixes.

实时作品

Live work

点击白色表面发送一束粒子流。开启自动模式会继续完整流程；关闭后，可以手动控制下一次冲击。空格暂停，R 重新开始，H 隐藏界面；Shift 加点击或 Shift 与 I 同时按下可发出三束。

Click the white surface to send one particle stream. Automatic mode runs the full sequence; switch it off to control the next impact manually. Space pauses, R restarts, and H hides the interface. Shift + click or Shift + I sends three streams.

点击后加载作品。声音需单独开启，M 可以静音。 Click to load the work. Enable sound separately; M mutes it. 在完整窗口打开 ↗ Open in a full window ↗

代码结构

Code structure

代码沿用课程中位置、速度、受力和粒子数组的组织方式。每个逻辑粒子对应一片薄瓣，曲面上的细点描述膜面。点材质、柔边贴图和不同点尺寸控制视觉层次，运动与颜色由 JavaScript 更新。

The code follows the course structure of position, velocity, force, and particle arrays. Each logical particle represents a petal; finer surface points describe its membrane. Point materials, soft-edged textures, and different point sizes establish visual layers. JavaScript updates motion and colour.

模拟使用固定步长和同一初始随机种子。接触、粒子流、回收、小球和界面分成独立模块，共用作品时间。薄膜形变、明暗与柔焦采用视觉近似。

The simulation uses a fixed step and starting random seed. Contact, streams, recovery, the smaller sphere, and interface have separate modules sharing the artwork time. Membrane deformation, lighting, and focus use visual approximations.

资料与署名

Sources and credits

制作记录根据项目笔记、保存版本和运行检查整理。参考图集中在第二节，其余作品图均为浏览器运行截图。Logic Pro 截图来自自己的音效工程。

This record is based on project notes, saved versions, and runtime checks. Reference images appear in section 02; the other artwork images are browser captures. The Logic Pro screenshot shows my own sound project.

1. 花朵视频 · Okamirufu Vizualizer Flower video · Okamirufu Vizualizer 参考花瓣褶皱、卷边和点密度。第二节保留了视频抽帧。 A reference for petal folds, curled edges, and point density. A video still appears in section 02.
2. 其余视觉参考 Other visual references 制作时保存的静态图片和粒子隧道视频，原始链接与作者尚未确认。保留原图中的文字与标记。 Static images and a particle tunnel video saved during production. Original links and authors have not been confirmed. Text and marks within the images are retained.
3. Three.js 点材质文档 Three.js PointsMaterial documentation 用点云和缓冲几何组织薄膜，运动由 JavaScript 更新。 Point clouds and buffer geometry organize the membranes; JavaScript updates motion.
4. VSCO 社区版音源库 VSCO Community Edition 背景小提琴采样来源，采用 CC0 许可。 The background violin sample source, released under CC0.
5. 声音来源与署名 Sound credits 背景采样与自制音效的详细说明。 Details of the background samples and original sound effects.

创作与声音设计 Artwork and sound design

Boyan Peng · 2026

工具 Tools

Three.js · JavaScript · Logic Pro

制作时间 Production dates

2026 年 10 月 13—14 日 13–14 October 2026