Butterchurn 项目教程

Butterchurn 项目教程

butterchurn Butterchurn is a WebGL implementation of the Milkdrop Visualizer 项目地址: https://gitcode.com/gh_mirrors/bu/butterchurn

1. 项目的目录结构及介绍

Butterchurn 项目的目录结构如下：

butterchurn/
├── examples/
├── experiments/
│   └── wasm-eel/
├── loaders/
├── src/
├── .eslintrc
├── .gitignore
├── LICENSE
├── README.md
├── netlify.toml
├── package.json
└── yarn.lock

目录结构介绍

• examples/: 包含项目的示例代码，展示了如何使用 Butterchurn 进行可视化。
• experiments/wasm-eel/: 包含实验性的 WebAssembly 相关代码。
• loaders/: 包含加载器相关的代码。
• src/: 包含项目的主要源代码。
• .eslintrc: ESLint 配置文件，用于代码风格检查。
• .gitignore: Git 忽略文件，指定哪些文件和目录不需要被 Git 管理。
• LICENSE: 项目的开源许可证文件，Butterchurn 使用 MIT 许可证。
• README.md: 项目的说明文档，包含项目的概述、安装和使用说明。
• netlify.toml: Netlify 配置文件，用于部署项目。
• package.json: 项目的 npm 配置文件，包含项目的依赖和脚本。
• yarn.lock: Yarn 锁定文件，确保依赖版本的一致性。

2. 项目的启动文件介绍

Butterchurn 项目的启动文件主要是 src/index.js。这个文件是项目的入口文件，负责初始化 Butterchurn 可视化器并加载音频源。

启动文件代码示例

import butterchurn from 'butterchurn';
import butterchurnPresets from 'butterchurn-presets';

// 初始化 audioContext 和获取 canvas
const visualizer = butterchurn.createVisualizer(audioContext, canvas, {
  width: 800,
  height: 600
});

// 连接音频源
visualizer.connectAudio(audioNode);

// 加载预设
const presets = butterchurnPresets.getPresets();
const preset = presets['Flexi, martin + geiss - dedicated to the sherwin maxawow'];
visualizer.loadPreset(preset, 0.0);

// 调整可视化器大小
visualizer.setRendererSize(1600, 1200);

// 渲染帧
visualizer.render();

3. 项目的配置文件介绍

Butterchurn 项目的配置文件主要包括以下几个：

3.1 .eslintrc

ESLint 配置文件，用于定义代码风格和检查规则。

{
  "extends": "eslint:recommended",
  "rules": {
    "no-console": "off"
  }
}

3.2 netlify.toml

Netlify 配置文件，用于部署项目。

[build]
  publish = "dist"
  command = "npm run build"

[context.production]
  command = "npm run build"

[context.deploy-preview]
  command = "npm run build"

3.3 package.json

项目的 npm 配置文件，包含项目的依赖和脚本。

{
  "name": "butterchurn",
  "version": "2.0.0",
  "description": "Butterchurn is a WebGL implementation of the Milkdrop Visualizer",
  "main": "src/index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "dependencies": {
    "butterchurn-presets": "^2.0.0"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-dev-server": "^4.0.0"
  }
}

通过以上配置文件，可以轻松地启动和配置 Butterchurn 项目，实现音乐可视化效果。

butterchurn Butterchurn is a WebGL implementation of the Milkdrop Visualizer 项目地址: https://gitcode.com/gh_mirrors/bu/butterchurn