@clumsycomputer/graphics-renderer v2.0.0

graphics-renderer

this repository provides tooling for rendering animations where frames are described using svg elements à la react 🙃

example

./example-project/Foo.animation.tsx

import React from 'react'
import { AnimationModule } from '@clumsycomputer/graphics-renderer'

const FooAnimationModule: AnimationModule = {
  moduleName: 'Foo',
  frameCount: 10,
  getFrameDescription: getFooFrameDescription,
  frameSize: {
    width: 1024,
    height: 1024,
  },
  animationSettings: {
    frameRate: 5,
    constantRateFactor: 1,
  },
}

export default FooAnimationModule

interface GetFooFrameDescriptionApi {
  frameCount: number
  frameIndex: number
}

async function getFooFrameDescription(api: GetFooFrameDescriptionApi) {
  const { frameCount, frameIndex } = api
  const centerAngle = ((2 * Math.PI) / frameCount) * frameIndex
  return (
    <svg viewBox={`0 0 100 100`}>
      <rect x={0} y={0} width={100} height={100} fill={'black'} />
      <circle
        cx={15 * Math.cos(centerAngle) + 50}
        cy={15 * Math.sin(centerAngle) + 50}
        r={5}
        fill={`rgb(${
          255 * Math.abs(Math.sin(2 * Math.PI * (frameIndex / frameCount)))
        },128,64)`}
      />
    </svg>
  )
}

render animation as mp4

yarn graphics-renderer renderAnimation --animationModulePath=./example-project/Foo.animation.tsx --animationMp4OutputPath=./example-project/example.mp4"

convert animation to gif

yarn graphics-renderer convertAnimationToGif --animationMp4SourcePath=./example-project/foo.mp4 --animationGifOutputPath=./example-project/foo.gif --gifAspectRatioWidth=512

./example-project/foo.gif

installation

add package to project

yarn add @clumsycomputer/graphics-renderer

install dependency binaries (macos)

ffmpeg

brew install ffmpeg

inkscape

brew install --cask inkscape

make inkscape binary available at 'inkscape'

ln -s /Applications/Inkscape.app/Contents/MacOS/inkscape inkscape

commands

startDevelopment

graphics-renderer startDevelopment --animationModulePath=\

api

• 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

• generatedAssetsDirectoryPath: path to directory where requested assets will live

  • defaultValue = Path.resolve(__dirname, './developmentAssets')

• numberOfFrameRendererWorkers: the number of workers to allocate for rendering frames

  • defaultValue = numberOfCpuCores - 2

how-to

• run startDevelopment command

• open browser at development service with a valid query string detailing desired asset

  • schema: localhost:<ClientServerPort>(/animation | /frame/<FrameIndex>)(/logs | /result)

  • animation example: localhost:3000/animation/result

  • frame example: localhost:3000/frame/0/result

• begin making changes on the active animation module

renderAnimation

graphics-renderer renderAnimation --animationModulePath=\ --animationMp4OutputPath=\

api

• animationModulePath: path to animation module export file

  • required

• animationMp4OutputPath: path to write .mp4 file

  • required

• numberOfFrameRendererWorkers: the number of workers to allocate for rendering frames

  • defaultValue = numberOfCpuCores - 1

renderAnimationFrame

graphics-renderer renderAnimationFrame --animationModulePath=\ --frameFileOutputPath=\ --frameIndex=\

api

• animationModulePath: path to animation module export file

  • required

• frameFileOutputPath: path to write frame file

  • required

  • file type can be svg or png

• frameIndex: the index of the frame to render

  • required

convertAnimationToGif

graphics-renderer convertAnimationToGif --animationMp4SourcePath=\ --animationGifOutputPath=\

api

• animationMp4SourcePath: path of .mp4 file

  • required

• animationGifOutputPath: path to write .gif file

  • required

• gifAspectRatioWidth: width of .gif file in pixels

  • defaultValue = widthOfSourceMp4

  • aspect ratio will be preserved