README


这个文件夹里保存的是这个网页的音乐、视觉代码和运行文件。

如果只是想看看它是怎么做的，不需要把整个项目运行起来。
音乐和视觉可以分开看。


────────────────────────
01  MUSIC
────────────────────────

音乐的原始代码在：
01_Music/Strudel.txt

如果想单独听音乐：

1. 打开 Strudel
   https://strudel.cc/

2. 打开「Strudel.txt」

3. 复制里面的全部代码

4. 粘贴到 Strudel 编辑器中

5. 点击运行 ▶

这里保存的是音乐最初的代码形式（放到AI里，它能解释）。

────────────────────────
02  VISUAL
────────────────────────

主要的视觉代码在：

02_Visual

其中主要的视觉代码是：Visual-Code.txt
(我把sketch.js的内容粘贴到txt文件里了)

花、蝴蝶、星星、银河，
以及它们的移动、消失和彼此之间的关系，
主要都写在这个文件里。

如果只是想看视觉是怎么写出来的，
把Visual-Code.txt（或者sketch.js）拖动到AI里就可以（也可以和‘Strudel.txt’一起放进去哦～）。

────────────────────────
03  INSIDE 02_VISUAL
────────────────────────

02_Visual 里保存的是运行这个网页的主要视觉代码和运行文件。

✦sketch.js
  主要的视觉世界。
  花、星星、蝴蝶、星河，以及大部分动画和时间变化都在这里。

✦Visual-Code.txt
  sketch.js的txt版本，可以直接打开看到代码

✦music.js
  网页里使用的音乐代码（这个不能放到Strudel，因为代码有些不一样）。
  负责 A–H 各段音乐，以及音乐与网页运行之间的连接。

✦audio-engine.js
  音频播放与控制。
  负责网页怎样启动、停止和控制音乐。

✦entrance.js
  进入这个世界之前的部分。
  包括密码页面以及进入主场景之前的交互。

✦butterfly-appearance.js
  与蝴蝶有关的独立代码。

✦index.html
  把整个网页的不同部分连接起来。

✦assets/
  网页使用的图片、声音和其他素材。


✦handwriting-ivory.png
  是我的字的扫描版本>_<

这些文件是在制作网页的时候用到的，不是单独运行的文件呀，

如果想浏览整个文件的内容，
可以用 Visual Studio Code 打开（需要下载安装），会比较容易看到文件之间的结构和代码。

不过，如果只是想知道我是怎么做的，
其实不用运行它。可以直接把代码丢给AI，它能看懂。


────────────────────────
ABOUT THIS
────────────────────────

音乐和画面都写在代码里。
它们共享同一条时间轴，也会回应共同事件。

所以这不是给音乐配上画面，也不是给画面配上音乐。
我想试着让它们从一开始，就属于同一个世界。


我脑海里的世界，希望你喜欢。


P.S.

音乐每次都会不太一样哦～

代码可以丢给 AI，让它给你解释哦～

我画了一只小兔子耶～可不可爱❤️
//        /) /)
//       ( ᵔ ᵕ ᵔ )
//       / づ ✦
