{"id":26606878,"url":"https://github.com/clumsycomputer/clumsy-graphics","last_synced_at":"2025-04-09T20:33:15.298Z","repository":{"id":37987977,"uuid":"394384950","full_name":"clumsycomputer/clumsy-graphics","owner":"clumsycomputer","description":"a tool for rapidly developing animations where frames are described using svg elements à la react 🙃","archived":false,"fork":false,"pushed_at":"2024-07-28T21:53:59.000Z","size":6044,"stargazers_count":11,"open_issues_count":14,"forks_count":0,"subscribers_count":2,"default_branch":"production","last_synced_at":"2025-03-20T14:41:48.612Z","etag":null,"topics":["animation","docker","ffmpeg","inkscape","react","svg","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clumsycomputer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-09T17:39:38.000Z","updated_at":"2023-08-14T22:26:48.000Z","dependencies_parsed_at":"2022-07-17T09:30:28.569Z","dependency_job_id":null,"html_url":"https://github.com/clumsycomputer/clumsy-graphics","commit_stats":null,"previous_names":["clumsycomputer/graphics-renderer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clumsycomputer%2Fclumsy-graphics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clumsycomputer%2Fclumsy-graphics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clumsycomputer%2Fclumsy-graphics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clumsycomputer%2Fclumsy-graphics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clumsycomputer","download_url":"https://codeload.github.com/clumsycomputer/clumsy-graphics/tar.gz/refs/heads/production","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248107787,"owners_count":21049008,"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":["animation","docker","ffmpeg","inkscape","react","svg","typescript"],"created_at":"2025-03-23T22:23:49.526Z","updated_at":"2025-04-09T20:33:15.270Z","avatar_url":"https://github.com/clumsycomputer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# clumsy-graphics\n\na tool for rapidly developing animations where frames are described using svg elements à la react 🙃\n\n## example\n\n#### tl;dr\n\n![TL;DR Hello Rainbow Animation Gif](/assets/HelloRainbow.gif)\n\n#### ./example-project/HelloRainbow.animation.tsx\n\n```typescript\nimport React from 'react'\nimport { AnimationModule } from 'clumsy-graphics'\nimport getColormap from 'colormap'\n\nconst HelloRainbowAnimationModule: AnimationModule = {\n  moduleName: 'Hello-Rainbow',\n  frameCount: 24,\n  getFrameDescription: getHelloRainbowFrameDescription,\n  frameSize: {\n    width: 1024,\n    height: 1024,\n  },\n  animationSettings: {\n    frameRate: 9,\n    constantRateFactor: 1,\n  },\n}\n\nexport default HelloRainbowAnimationModule\n\ninterface GetHelloRainbowFrameDescriptionApi {\n  frameCount: number\n  frameIndex: number\n}\n\nasync function getHelloRainbowFrameDescription(\n  api: GetHelloRainbowFrameDescriptionApi\n) {\n  const { frameCount, frameIndex } = api\n  const rainbowColormap = getColormap({\n    colormap: 'rainbow-soft',\n    nshades: frameCount,\n    format: 'hex',\n    alpha: 1,\n  })\n  const mainFrameColor = rainbowColormap[frameIndex % frameCount]\n  return (\n    \u003csvg viewBox={`0 0 100 100`}\u003e\n      \u003crect\n        x={0}\n        y={0}\n        width={100}\n        height={100}\n        fill={'black'}\n        stroke={mainFrameColor}\n        strokeWidth={2}\n      /\u003e\n      \u003ctext\n        x={5}\n        y={9}\n        style={{\n          fontFamily: 'monospace',\n          fontSize: 5,\n          fontWeight: 600,\n          fill: mainFrameColor,\n        }}\n      \u003e\n        Hello Rainbow\n      \u003c/text\u003e\n      {new Array(frameCount).fill(null).map((_, squareIndex) =\u003e {\n        const squareStamp = squareIndex / frameCount\n        const squareRadius = 30 - 30 * squareStamp\n        const squareLength = 2 * squareRadius\n        return (\n          \u003crect\n            x={50 - squareRadius}\n            y={50 - squareRadius}\n            width={squareLength}\n            height={squareLength}\n            stroke={rainbowColormap[(squareIndex + frameIndex) % frameCount]}\n            strokeWidth={0.5}\n          /\u003e\n        )\n      })}\n    \u003c/svg\u003e\n  )\n}\n```\n\n#### develop and iterate on animation\n\n```bash\nyarn clumsy-graphics startDevelopment --animationModulePath=./example-project/HelloRainbow.animation.tsx\n```\n\nopen browser at `localhost:3000`\n\n#### ./example-project/HelloRainbow.gif\n\n![Hello Rainbow Animation Gif](/assets/HelloRainbow.gif)\n\n## installation\n\n#### add package to project\n\n```bash\nyarn add clumsy-graphics\n```\n\n#### setup docker\n\ninstall and run [docker engine](https://docs.docker.com/engine/install/) _(the majority of `clumsy-graphics` runs within a container to simplify dependency management)_\n\n## api\n\n\u003e clumsy-graphics --animationModulePath=\\\u003cSourceFilePath\u003e\n\n- **`animationModulePath`:** path to animation module export file\n\n  - required\n\n- **`clientServerPort`:** the port on the host machine to use for handling api, asset, and page requests\n\n  - defaultValue = _3000_\n\n#### how-to\n\n- run _clumsy-graphics_ command\n\n- open browser at `localhost:3000`\n\n- begin making changes on the active animation module\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclumsycomputer%2Fclumsy-graphics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclumsycomputer%2Fclumsy-graphics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclumsycomputer%2Fclumsy-graphics/lists"}