fragment

分段

用于创意编码的网络开发环境

fragment提供了一个简单的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

用法

 # create a new directory for your sketches
mkdir sketches

# move into that folder
cd sketches

# create a sketch from a template
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 } ) => {
  // draw background
  context . fillStyle = '#000000' ;
  context . fillRect ( 0 , 0 , width , height ) ;

  // draw circle
  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文档或示例，了解如何编写自己的草图。

贡献

如果发现问题，请提交有关如何复制它的详细信息。

如果您想讨论该项目，请随时在Twitter上联系。

在本地运行它

 # clone or fork the project
git clone https://github.com/raphaelameaume/fragment.git

# move to the root of the repository
cd fragment

# run the command line locally
node ./bin/index.js examples/shape-2d.js --dev

# or from your sketch folder
node [path-to-root]/bin/index.js sketch.js --dev

--dev标志仅启用Vite info Loglevel，对开发有用。否则，它的工作原理与您从NPM软件包运行时相同。

另外，您可以告诉NPM将fragment命令指向新克隆的文件夹。

 # at the root of the repo
npm link

您应该像以前一样能够像以前一样，只有这次才能指向存储库，而不是全球安装的软件包。

 fragment sketch.js

如果事实并非如此，请首先尝试在全球范围内卸载fragment-tools ，请确保不再找到fragment命令，然后重试将项目与回购的根链接起来。

学分

• Vite
• 苗条
• 用于显示的字体是Jetbrains Mono。
• 图标来自标志性
• 特别感谢Matt Deslauriers的Canvas-Sketch及其围绕生成工具的多个项目。

执照

有关详细信息，请参见License.MD。