fragment

<h1 align="center">Fragment</h1> <div align="center">一个用于创意编程的网页开发环境</div> <br/>

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。