{"id":17689904,"url":"https://github.com/cdaein/ssam","last_synced_at":"2025-04-04T13:11:03.533Z","repository":{"id":65554206,"uuid":"594614483","full_name":"cdaein/ssam","owner":"cdaein","description":"Ssam.js is a creative coding helper that provides animation loop, git snapshot, video export, time lapse and more.","archived":false,"fork":false,"pushed_at":"2025-02-25T05:25:05.000Z","size":1696,"stargazers_count":124,"open_issues_count":0,"forks_count":5,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-28T12:05:36.388Z","etag":null,"topics":["canvas","canvas-animation","create-ssam","createssam","creative-coding","generative-art","glsl","mp4","ssam","webgl","webgpu"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/cdaein.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":["cdaein"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2023-01-29T04:43:51.000Z","updated_at":"2025-02-25T05:24:58.000Z","dependencies_parsed_at":"2023-12-17T00:27:20.059Z","dependency_job_id":"14951041-c3d5-4ae3-94e2-1bc87e179c17","html_url":"https://github.com/cdaein/ssam","commit_stats":{"total_commits":228,"total_committers":2,"mean_commits":114.0,"dds":0.00877192982456143,"last_synced_commit":"60fc76879b5f0554a29931e0915fbb06867fb3d2"},"previous_names":[],"tags_count":52,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaein%2Fssam","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaein%2Fssam/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaein%2Fssam/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaein%2Fssam/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cdaein","download_url":"https://codeload.github.com/cdaein/ssam/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247182302,"owners_count":20897379,"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":["canvas","canvas-animation","create-ssam","createssam","creative-coding","generative-art","glsl","mp4","ssam","webgl","webgpu"],"created_at":"2024-10-24T11:49:16.263Z","updated_at":"2025-04-04T13:11:03.516Z","avatar_url":"https://github.com/cdaein.png","language":"TypeScript","funding_links":["https://github.com/sponsors/cdaein"],"categories":[],"sub_categories":[],"readme":"[![example gif animation](./docs/example.gif)](https://codepen.io/cdaein/pen/zYVRZZW)\n\n# Ssam\n\nSsam.js (쌈 as in [Korean dish](https://en.wikipedia.org/wiki/Ssam)) wraps your HTML5 Canvas sketches and provides helpful features such as animation props and file exports. It is inspired by [`canvas-sketch`](https://github.com/mattdesl/canvas-sketch/).\n\n\u003e ⚠️ This module is in an early stage of development, and there may be unexpected bugs.\n\n## Install\n\nThe easiest and quickest way to set up a sketch with Ssam is to use `create-ssam` CLI command. You don't need to install anything (except Node.js) in advance. Simply run the command below and you can jump straight into creative coding:\n\n```sh\nnpm create ssam@latest\n```\n\nThe prompts will guide you through options and templates. See [`create-ssam`](https://github.com/cdaein/create-ssam) for the list of templates.\n\nAlternatively, if you only want to install `ssam` package into your own set up:\n\n```sh\nnpm install ssam\n```\n\n## CDN\n\nIf you don't use NPM or use sites like [CodePen](https://codepen.io/cdaein/pen/dyBdpEy) for creating a quick sketch, use CDN such as [unpkg](https://unpkg.com/ssam/dist/ssam.esm.js) or [jsdelivr](https://cdn.jsdelivr.net/npm/ssam/dist/ssam.esm.js) and directly import Ssam with a URL:\n\n```js\nimport { ssam } from \"https://cdn.jsdelivr.net/npm/ssam/dist/ssam.esm.js\";\n// or,\nimport { ssam } from \"https://esm.run/ssam\";\n```\n\n## How to\n\n- See [Wiki](https://github.com/cdaein/ssam/wiki) for documentation.\n- [ssam-examples](https://github.com/cdaein/ssam-examples) repo has basic examples.\n- [ssam-thing-examples](https://github.com/cdaein/ssam-thing-examples) repo has examples of drawing with Thing Umbrella packages.\n\n## Features\n\n- **TypeScript**: It can work both in JavaScript or TypeScript projects.\n- **ESM**: You can use it alongside other ESM packages.\n- **Vitejs**: Vitejs is modern and fast. You can extend the config to add functionality. Ssam also has a few of its own plugins.\n- **Multiple sketch modes**: It supports vanilla Canvas 2D API, WebGL context, or you can use with other Canvas libraries (Three.js, OGL, Two.js, Pts.js, etc.) as long as they support an existing canvas. p5.js is not supported (yet).\n- **Hot Reload**: Code updates will be instantly applied without a full page refresh and wthout losing the sketch states.\n- **Git snapshot**: Commit your code to git and export a frame with the same hash for an easy archiving and retrieval.\n- **Timelapse documentation**: Automatically export an image when you save your code to create a visual documentation of your project over time.\n- **Animation loop**: The `playhead` prop repeats `0..1` and makes it easy to create a seamless animation loop. Other props such as `time`, `frame`, `deltaTime` and `loopCount` are provided as well. You can also adjust frame rate for playing and exporting independently.\n- **Sketch settings**: Many essential settings reduce boilerplate code in your sketch - animation duration, playback frame rate, filename, etc.\n- **Sketch props**: Use props for each mode such as `context`, `width`, `height` to help your coding.\n- **File exports**: Export canvas as image, animated GIF, PNG sequence or MP4/WebM video at various frame rates.\n\n## Example\n\nThe code used to create the cover gif:\n\n```typescript\nimport { drawRect } from \"@daeinc/draw\";\nimport { snapBy } from \"@daeinc/math\";\nimport { css, hsv, srgb } from \"@thi.ng/color\";\nimport { Smush32 } from \"@thi.ng/random\";\nimport { ssam } from \"ssam\";\nimport type { Sketch, SketchSettings } from \"ssam\";\n\nconst seed = 1249;\nconst rnd = new Smush32(seed);\nconst num = 200;\n\nconst sketch: Sketch\u003c\"2d\"\u003e = ({ wrap, context: ctx, width, height }) =\u003e {\n  const sn = 40; // snap\n  const rects = Array.from({ length: num }, (_, i) =\u003e {\n    const w = snapBy(rnd.minmaxInt(sn, 200), sn);\n    const h = snapBy(rnd.minmaxInt(sn, 100), sn);\n    const x = snapBy(rnd.minmaxInt((sn + w) / 2, width - (sn + w) / 2), sn);\n    const y = snapBy(rnd.minmaxInt((sn + h) / 2, height - (sn + h) / 2), sn);\n    return [x, y, w, h];\n  });\n\n  wrap.render = ({ playhead }) =\u003e {\n    ctx.fillStyle = css(srgb(hsv(0, 0, 0.95)));\n    ctx.fillRect(0, 0, width, height);\n\n    rects.forEach((r, i) =\u003e {\n      const w = r[2] / 2 + (Math.sin(i + playhead * Math.PI * 2) * r[2]) / 2;\n      drawRect(ctx, [snapBy(r[0], 1), snapBy(r[1], 1)], [w, r[3]], \"center\");\n      const c = hsv([\n        (i / num) * 0.15,\n        Math.sin(i) * 0.5 + 0.5,\n        Math.cos(i / 8) * 0.4 + 0.9,\n      ]);\n      if (i % 5 === 0) {\n        ctx.fillStyle = css(srgb(c));\n        ctx.fill();\n      } else {\n        ctx.strokeStyle = css(srgb(c));\n        ctx.stroke();\n      }\n    });\n  };\n};\n\nconst settings: SketchSettings = {\n  dimensions: [600, 200],\n  duration: 3_000,\n  playFps: 12,\n  exportFps: 12,\n  pixelated: true,\n  framesFormat: [\"gif\"],\n};\n\nssam(sketch, settings);\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdaein%2Fssam","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcdaein%2Fssam","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdaein%2Fssam/lists"}