This is an experiment with brush drawing in WebGL, with code written in typescript. I am curious what features are needed for a good drawing experince.
View live: http://brush.tips
Features:
- Accepts input at > screen refresh
- Catmull-rom interpolation
- Input distance filtering
- Output distance filtering (only draw if moved x pixels)
- Variable sharpness
- Draw whole stroke or incrementally
Missing features:
- Support mobile devices with touch APIs
- Efficiency: write points to vertex buffer, then emit a single drawcall
- Variable brush diameter with velocity
- Other brush dynamics
- Smoothing of input points during a stroke
- Draw last stroke segment dynamically (see Notes.app on iOS)
- Dithering
- Texture
Feel free to adapt this for your own use. It may be published on NPM at some point to make that more convenient.
Original experiments https://codepen.io/darknoon/pen/QMNxQq) https://codepen.io/darknoon/pen/GvowNQ
The original code was written in 2017 in React. To apply to the Recurse Center, I needed code written without a framework, so I converted this to plain typescript.
How to run locally:
$ tsc -w
# In another terminal
$ now dev
# or your favorite static site serverHow to deploy:
$ now