https://github.com/transitive-bullshit/avp

Audio Visual Playground, or Alien vs Predator? You decide...
https://github.com/transitive-bullshit/avp

Last synced: about 2 months ago
JSON representation

Audio Visual Playground, or Alien vs Predator? You decide...

• Host: GitHub
• URL: https://github.com/transitive-bullshit/avp
• Owner: transitive-bullshit
• License: mit
• Created: 2021-02-28T18:01:31.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-10-11T21:57:44.000Z (8 months ago)
• Last Synced: 2025-03-30T11:33:23.893Z (3 months ago)
• Language: TypeScript
• Homepage: https://avp.vercel.app
• Size: 32.8 MB
• Stars: 22
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Funding: .github/funding.yml
  • License: license

Awesome Lists containing this project

README

        


  

  (quick demo; enable sound)



# Audio Visual Playground

[![Build Status](https://github.com/transitive-bullshit/avp/actions/workflows/test.yml/badge.svg)](https://github.com/transitive-bullshit/avp/actions/workflows/test.yml) [![MIT License](https://img.shields.io/badge/license-MIT-blue)](https://github.com/transitive-bullshit/avp/blob/main/license) [![Prettier Code Formatting](https://img.shields.io/badge/code_style-prettier-brightgreen.svg)](https://prettier.io)

## How it works

- [Animated stable diffusion](https://replicate.com/andreasjansson/stable-diffusion-animation) - Hosted on Replicate

- WebGL, [three.js](https://threejs.org/), glsl for rendering

- [Meyda](https://meyda.js.org/) for audio feature extraction

- [MediaRecorder](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) for recording video in-browser

  - Great so I don't need to host any heavyweight servers

- [ffmpeg](https://ffmpeg.org/) for converting webm ⇒ mp4

  - `ffmpeg -i test.webm  -ss 0.05 -vf scale="iw/2:ih/2" -c:v libx264 -crf 16 -movflags faststart -pix_fmt yuv420p -r 40 -profile:v main -preset medium test.mp4`

## TODO

- [x] add stroke styles in addition to fill

- [x] add circle style

- [x] add mirror option

- [x] fix output pixel density

- [x] start/pause/stop should be async

- [ ] separate download or get blob methods

- [ ] mp4 output support

- [ ] render offscreen sped-up

- [ ] add demo to readme

- [ ] add basic docs

- [x] hosted demo

- [ ] explore backgrounds, color palettes, and avatars

- [ ] explore different post-processing effects

- [ ] add descript-style animated captions

- [ ] add UX for generating custom backgrounds using replicate API

## Inspiration

- https://www.youtube.com/watch?v=QykkWNOtap4

- https://www.youtube.com/watch?v=Q1bxyKOZ5RI

## License

MIT © [Travis Fischer](https://transitivebullsh.it)

If you found this project interesting, please consider [sponsoring me](https://github.com/sponsors/transitive-bullshit) or following me on twitter