https://github.com/friendlymatthew/clay
Web Assembly. Infinite canvas. Rectangles.
https://github.com/friendlymatthew/clay
design simd wasm
Last synced: 5 months ago
JSON representation
Web Assembly. Infinite canvas. Rectangles.
- Host: GitHub
- URL: https://github.com/friendlymatthew/clay
- Owner: friendlymatthew
- Created: 2024-09-14T15:55:29.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-29T21:42:37.000Z (over 1 year ago)
- Last Synced: 2025-03-31T03:27:12.394Z (about 1 year ago)
- Topics: design, simd, wasm
- Language: Rust
- Homepage: https://friendlymatthew.github.io/clay/
- Size: 2.15 MB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# clay
This crate aims to provide a interactive design tool as a functional Yew component. Currently, `clay` can move around and freehand, draw rectangles or circles on an infinite canvas.
`clay` heavily relies on wasm32 SIMD intrinsics. Since this problem space is bound to planar and spatial operations, this crate also aims to implement every geometric operation in SIMD.
There isn't a clear roadmap ahead but most exciting ideas are persisting shapes to disk and simple multicollaboration.
## How to Run
> *These instructions make use of `just`. To install, simply `cargo install just`*
>
> [Install prerequisites](https://yew.rs/docs/getting-started/introduction)
To run the app:
```bash
just run
```
To compile or test the `math` crate:
```bash
cd math && just build # or just test
```
## Performance
The effects of SIMD are not measured yet. An ad-hoc benchmark comparing `clay` and the original Typescript scalar implementation [written by Alikiki](https://github.com/alikiki/baby-tldraw) is planned.
## Reading
[Baby Tldraw](https://www.hajeon.xyz/posts/post-content/20240413_tldraw.html)
[Creating a Zoom UI](https://www.steveruiz.me/posts/zoom-ui)
> A canvas is a fixed 2-dimensional plane of infinite dimensions. All shapes and objects rendered on the canvas operate in 2-dimensional space.
>
> The camera is suspended above and points at the canvas. The camera operates in 3-dimensional space.
>
> The implementations for converting from screen to canvas and finding the viewport can be found in Steve Ruiz's blog post above.
[MDN's SVG Resource](https://developer.mozilla.org/en-US/docs/Web/SVG)