fragment

用 JavaScript 快速上手创意编码，轻松生成视觉艺术与交互动画。

开源 🏷️完全免费 🔧 仅开源项目，无在线服务，需自行部署设计创意 🍴 复刻 23 🐛 待处理 4 👀 关注 7

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 949

维护状态活跃

是否开源开源

定价模式 🏷️完全免费开源项目，MIT许可证，完全免费，可自行部署使用。

项目预览

项目数据

分类设计创意

开发团队raphaelameaume

官网地址https://fragment.tools

GitHubhttps://github.com/raphaelameaume/fragment

定价模式🏷️完全免费

价格说明开源项目，MIT许可证，完全免费，可自行部署使用。

访问状态🔧 仅开源项目，无在线服务，需自行部署

是否开源是

开源协议MIT

主要语言JavaScript

技术栈/模型creative-coding,generative-art,javascript,web

GitHub 星标★ 949

上线时间2019-12-09 00:00:00

代码更新2026-11-09

仓库体积13.8 MB

本站数据更新2026-11-10

维护状态活跃

收录时间2026-08-09

浏览次数5

项目介绍

fragment 是一个处于 alpha 阶段的现代创意编码工具包，专为艺术家、设计师和开发者打造。它解决了传统创意编程工具（如 Processing、openFrameworks）学习曲线陡峭、环境配置复杂的问题，提供了一套基于 JavaScript 的轻量级、模块化 API，让用户能快速上手生成视觉艺术、交互动画和生成式设计。其核心能力包括：简洁的绘图原语（点、线、形状）、灵活的动画循环、响应式事件处理（鼠标、键盘、触摸）、以及基于 Canvas/WebGL 的渲染后端。项目强调“现代”体验，代码风格干净，文档示例丰富，适合快速原型和教学场景。目前仍处于早期阶段，API 可能变动，但已具备完整的核心功能，适合探索性创作。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 949

技术标签

creative-coding generative-art javascript web

使用教程

难度：入门约 15 分钟部署方式：本地 (Node) 4 步

环境要求

Node.js 18+

安装与启动步骤

1生成 sketch 工程

--new 创建新工程，--template=2d 指定 2D 画布模板。
```
npx fragment sketch.js --new --template=2d
```
2TypeScript 模板

加 --typescript 生成 TS 版骨架，类型提示更完整。
```
npx fragment sketch.ts --new --template=2d --typescript
```
3起开发服务器

带热更新，改代码即时重绘，适合反复调参。
```
npx fragment sketch.js
```
4导出成品

渲染结果可直接导出为图片或视频，用于海报、动效素材。