Fragment
一个用于创意编程的网页开发环境
fragment
为使用<canvas>
提供了一个简单的API。
特性
- 多种渲染模式:Canvas 2D、p5.js、three.js、WebGL片段着色器
- 从草图文件内置GUI
- 即时将
<canvas>
导出为图像(.png、.webm、.jpg)或视频(.mp4、.webm、.gif) - 热重载着色器和支持glslify
- 使用_触发器_实现交互式草图
- 用于生产部署的静态构建
安装
使用npx
npx fragment-tools sketch.js --new
使用--global
全局安装
npm install fragment-tools --global
现在您应该可以从命令行运行fragment
了。
fragment sketch.js --new
本地安装
npm install fragment-tools
npx fragment sketch.js --new
使用方法
# 为您的草图创建一个新目录
mkdir sketches
# 进入该文件夹
cd sketches
# 从模板创建一个草图
npx fragment-tools ./sketch.js --new --template=2d
在CLI文档中了解更多可用的标志选项。
示例
这是一个在黑色背景上绘制蓝色圆圈的草图示例,其中包含一个用于控制圆圈半径的自定义控件。
export let props = {
radius: {
value: 10,
params: {
min: 4,
max: 30,
},
},
};
export let update = ({ context, width, height }) => {
// 绘制背景
context.fillStyle = '#000000';
context.fillRect(0, 0, width, height);
// 绘制圆圈
const radius = props.radius.value;
context.fillStyle = '#0000ff';
context.beginPath();
context.arc(width * 0.5, height * 0.5, radius, 0, 2 * Math.PI, false);
context.fill();
};
通过阅读入门指南、API文档或示例来学习如何编写您自己的草图。
贡献
如果您发现问题,请提交issue并详细说明如何重现该问题。
如果您想讨论这个项目,欢迎在Twitter上联系我。
本地运行
# 克隆或fork项目
git clone https://github.com/raphaelameaume/fragment.git
# 进入仓库根目录
cd fragment
# 在本地运行命令行
node ./bin/index.js examples/shape-2d.js --dev
# 或从您的草图文件夹
node [path-to-root]/bin/index.js sketch.js --dev
--dev
标志只启用Vite的info
日志级别,这对开发很有帮助。否则,它的工作方式与从npm包运行时相同。
或者,您可以告诉npm将fragment
命令指向新克隆的文件夹。
# 在仓库根目录
npm link
您应该能够像以前一样使用该命令,只是这次它会指向仓库而不是全局安装的包。
fragment sketch.js
如果不是这种情况,请先尝试全局卸载fragment-tools
,确保找不到fragment
命令,然后从仓库根目录重新尝试链接项目。
致谢
- Vite
- Svelte
- 显示使用的字体是JetBrains Mono。
- 图标来自Iconic
- 特别感谢Matt Deslauriers的canvas-sketch以及他在生成艺术工具方面的多个项目。
许可证
详情请参阅LICENSE.md。