{"id":13622625,"url":"https://github.com/raphaelameaume/fragment","last_synced_at":"2025-05-16T03:02:49.109Z","repository":{"id":58417133,"uuid":"226928112","full_name":"raphaelameaume/fragment","owner":"raphaelameaume","description":"[alpha] A web development environment for creative coding","archived":false,"fork":false,"pushed_at":"2025-04-20T12:51:52.000Z","size":12620,"stargazers_count":856,"open_issues_count":3,"forks_count":22,"subscribers_count":7,"default_branch":"dev","last_synced_at":"2025-04-20T13:42:56.925Z","etag":null,"topics":["creative-coding","generative-art","javascript","web"],"latest_commit_sha":null,"homepage":"https://fragment.tools","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/raphaelameaume.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-09T17:24:59.000Z","updated_at":"2025-04-20T12:51:56.000Z","dependencies_parsed_at":"2023-02-15T02:50:33.866Z","dependency_job_id":"977fa401-1b11-4a91-95a4-ae5931656ee9","html_url":"https://github.com/raphaelameaume/fragment","commit_stats":{"total_commits":558,"total_committers":3,"mean_commits":186.0,"dds":0.005376344086021501,"last_synced_commit":"bf4bc720e6a1e1f58e9048f6c7afbcf0ea285d2f"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphaelameaume%2Ffragment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphaelameaume%2Ffragment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphaelameaume%2Ffragment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphaelameaume%2Ffragment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raphaelameaume","download_url":"https://codeload.github.com/raphaelameaume/fragment/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459081,"owners_count":22074604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["creative-coding","generative-art","javascript","web"],"created_at":"2024-08-01T21:01:21.880Z","updated_at":"2025-05-16T03:02:44.090Z","avatar_url":"https://github.com/raphaelameaume.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Tools"],"sub_categories":["Frameworks • Libraries • Ecosystems"],"readme":"\u003ch1 align=\"center\"\u003eFragment\u003c/h1\u003e\n\u003cdiv align=\"center\"\u003eA web development environment for creative coding\u003c/div\u003e\n\u003cbr/\u003e\n\n![Screen capture of Fragment, splitted in two columns, the left one has a centered canvas displaying squares arranged in a grid, the right column contains various controls for colors, variables and exports](https://github.com/raphaelameaume/fragment/raw/main/screenshot.png 'Screen Capture of Fragment')\n\n`fragment` provides a simple API to work with `\u003ccanvas\u003e`.\n\n## Features\n\n- Multiple rendering modes: [Canvas 2D](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API), [p5.js](https://github.com/processing/p5.js/), [three.js](https://github.com/mrdoob/three.js/), [WebGL fragment shaders](https://developer.mozilla.org/en-US/docs/Web/API/WebGLShader)\n- Built-in GUI from sketch files\n- Export `\u003ccanvas\u003e` to images (.png, .webm, .jpg) or videos (.mp4, .webm, .gif) on the fly\n- Hot shader reloading \u0026 [glslify](https://github.com/glslify/glslify) support\n- Interactive sketches using _triggers_\n- Static build for production deployment\n\n## Installation\n\n### With `npx`\n\n```bash\nnpx fragment-tools sketch.js --new\n```\n\n### Installing globally with `--global`\n\n```bash\nnpm install fragment-tools --global\n```\n\nYou should now be able to run `fragment` from your command line.\n\n```bash\nfragment sketch.js --new\n```\n\n### Installing locally\n\n```bash\nnpm install fragment-tools\nnpx fragment sketch.js --new\n```\n\n## Usage\n\n```\n# create a new directory for your sketches\nmkdir sketches\n\n# move into that folder\ncd sketches\n\n# create a sketch from a template\nnpx fragment-tools ./sketch.js --new --template=2d\n```\n\nLearn more about the available flag options in the [CLI docs](./docs/api/CLI.md).\n\n## Example\n\nThis is an example of a sketch drawing a blue circle on a black background with a custom control for the radius of the circle.\n\n```js\nexport let props = {\n  radius: {\n    value: 10,\n    params: {\n      min: 4,\n      max: 30,\n    },\n  },\n};\n\nexport let update = ({ context, width, height }) =\u003e {\n  // draw background\n  context.fillStyle = '#000000';\n  context.fillRect(0, 0, width, height);\n\n  // draw circle\n  const radius = props.radius.value;\n\n  context.fillStyle = '#0000ff';\n  context.beginPath();\n  context.arc(width * 0.5, height * 0.5, radius, 0, 2 * Math.PI, false);\n  context.fill();\n};\n```\n\nLearn how to write your own sketch by following the [Getting started](./docs//guide/getting-started.md) guide, reading the [API docs](./docs/api/sketch.md) or the [examples](./examples/).\n\n## Contributing\n\nIf you find issues, please [file one](https://github.com/raphaelameaume/fragment/issues) with details on how to reproduce it.\n\nFeel free to reach out on [Twitter](https://twitter.com/raphaelameaume) if you want to discuss the project.\n\n## Running it locally\n\n```\n# clone or fork the project\ngit clone https://github.com/raphaelameaume/fragment.git\n\n# move to the root of the repository\ncd fragment\n\n# run the command line locally\nnode ./bin/index.js examples/shape-2d.js --dev\n\n# or from your sketch folder\nnode [path-to-root]/bin/index.js sketch.js --dev\n```\n\n\u003e The `--dev` flag only enables Vite `info` logLevel, helpful for development. Otherwise it will work the same as when you're running from the npm package.\n\nAlternatively, you can tell npm to point the `fragment` command to the newly cloned folder.\n\n```\n# at the root of the repo\nnpm link\n```\n\nYou should be able the command as before, only this time it will point to the repository instead of the globally installed package.\n\n```\nfragment sketch.js\n```\n\nIf that's not the case, try to uninstall `fragment-tools` globally first, make sure the `fragment` command is not found anymore, then retry to link the project from the root of the repo.\n\n## Credits\n\n- [Vite](https://vitejs.dev/)\n- [Svelte](https://svelte.dev/)\n- The font used for display is the [JetBrains Mono](https://www.jetbrains.com/lp/mono/).\n- Icons are from [Iconic](https://iconic.app/)\n- A special thanks to [Matt Deslauriers](https://www.mattdesl.com/) for [canvas-sketch](https://github.com/mattdesl/canvas-sketch) and his multiple projects around generative-art tools.\n\n## License\n\nSee [LICENSE.md](./LICENSE.md) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphaelameaume%2Ffragment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraphaelameaume%2Ffragment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphaelameaume%2Ffragment/lists"}