Built entirely with Typescript and Webgl
-
- Textured Brushes via image url
- Pen pressure for variable size and opacity
- Pannable, Zoomable, and Rotatable Canvas
- Configurable Brush Stabilization
-
- Middle mouse click and draw :: Pan
- Scroll Wheel :: Zoom
- Alt + mouse drag :: Rotate
- cltr z :: undo
- c :: Clear Canvas
- s :: Settings Menu
- i :: EyeDropper
-
- Finger Pinch :: Zoom
- Finger Pan :: Pan
- Finger Rotate :: Rotate
- Two Finger Double Tap :: Undo
- Two Finger Triple Tap :: Clear Canvas
- Four Finger Double Tap :: Settings Menu
- One Finger Long Hold :: Eyedropper
-
- WebGL
- NextJS
- Typescript
- TailwindCSS
-
Brushes are currently implemented as a sequence of image 'stamps'. These stamps are packed densely next to one another which gives the illusion of a continuous stroke. This method is not ideal for performance nor for visual quality. As such, I will explore 'skeletal' and parametrically defined strokes in the future
-
Once the brush system is finished, the next step is to build a UI from which the user can select the different tools. Ontop of this UI will be non-trivial tools such as the paint bucket and lasso tool
I hope for this application to be a fully fledged drawing editor on par with the likes of other online editors such as aggie.io. However, this will take an enourmous amount of time and effort. Resources on creating brush engines are few and far between on the internet. If you have any experience with creating these types of applications please feel free to reach out to me! I could use the help :)