https://github.com/clumsycomputer/clumsy-graphics
a tool for rapidly developing animations where frames are described using svg elements à la react 🙃
https://github.com/clumsycomputer/clumsy-graphics
animation docker ffmpeg inkscape react svg typescript
Last synced: about 1 month ago
JSON representation
a tool for rapidly developing animations where frames are described using svg elements à la react 🙃
- Host: GitHub
- URL: https://github.com/clumsycomputer/clumsy-graphics
- Owner: clumsycomputer
- License: other
- Created: 2021-08-09T17:39:38.000Z (almost 4 years ago)
- Default Branch: production
- Last Pushed: 2024-07-28T21:53:59.000Z (10 months ago)
- Last Synced: 2025-03-20T14:41:48.612Z (about 2 months ago)
- Topics: animation, docker, ffmpeg, inkscape, react, svg, typescript
- Language: TypeScript
- Homepage:
- Size: 5.76 MB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# clumsy-graphics
a tool for rapidly developing animations where frames are described using svg elements à la react 🙃
## example
#### tl;dr
#### ./example-project/HelloRainbow.animation.tsx
```typescript
import React from 'react'
import { AnimationModule } from 'clumsy-graphics'
import getColormap from 'colormap'
const HelloRainbowAnimationModule: AnimationModule = {
moduleName: 'Hello-Rainbow',
frameCount: 24,
getFrameDescription: getHelloRainbowFrameDescription,
frameSize: {
width: 1024,
height: 1024,
},
animationSettings: {
frameRate: 9,
constantRateFactor: 1,
},
}
export default HelloRainbowAnimationModule
interface GetHelloRainbowFrameDescriptionApi {
frameCount: number
frameIndex: number
}
async function getHelloRainbowFrameDescription(
api: GetHelloRainbowFrameDescriptionApi
) {
const { frameCount, frameIndex } = api
const rainbowColormap = getColormap({
colormap: 'rainbow-soft',
nshades: frameCount,
format: 'hex',
alpha: 1,
})
const mainFrameColor = rainbowColormap[frameIndex % frameCount]
return (
Hello Rainbow
{new Array(frameCount).fill(null).map((_, squareIndex) => {
const squareStamp = squareIndex / frameCount
const squareRadius = 30 - 30 * squareStamp
const squareLength = 2 * squareRadius
return (
)
})}
)
}
```
#### develop and iterate on animation
```bash
yarn clumsy-graphics startDevelopment --animationModulePath=./example-project/HelloRainbow.animation.tsx
```
open browser at `localhost:3000`
#### ./example-project/HelloRainbow.gif
## installation
#### add package to project
```bash
yarn add clumsy-graphics
```
#### setup docker
install and run [docker engine](https://docs.docker.com/engine/install/) _(the majority of `clumsy-graphics` runs within a container to simplify dependency management)_
## api
> clumsy-graphics --animationModulePath=\
- **`animationModulePath`:** path to animation module export file
- required
- **`clientServerPort`:** the port on the host machine to use for handling api, asset, and page requests
- defaultValue = _3000_
#### how-to
- run _clumsy-graphics_ command
- open browser at `localhost:3000`
- begin making changes on the active animation module