This project is based around building a webapp paint project with a node based brush editor allowing for the creation and (potentially heavy) optimisation of customised brushes. Tools within the editor are based around these customised brushes made along with multiple sketching tools.
The site can be separated into two main 'pages':
This page is where the actual drawing is done, making use of the brushes created
Just apply the brush to the created canvas
Flood fill an area by tiling a brush back to back and cropping
Flood fill an area by using a wfc algorithm and cropping.
It might be possible to do wfc via GPU (for canvas size C, brush size B, section size S):
- Precompute side hashes for each section of brush result - O((B/S)^2)
- Also could be done via GPU
- Whilst maximum entropy > 0
- Compute maximum + minimum entropy via GPU - O(logC)
- For each cell has entropy = the minimum entropy
- Assign random value to cell
- Mark cell for updates
- Whilst there are still cells to update, For each cell C to update
- Attempt to update the entropy of cells around C
- If a cell is updated, mark it for update and check
Makes drawing straight lines easier by placing a limit on where can be drawn
This page is dedicated to designing custom brushes via a node based system
The node system primarily uses beautiful-react-diagrams with the following edits made:
- Typescript typing has been introduced for schema components
- Additional config options have been added to the Diagram element
- Multiple graph algorithms have been added to the shared functions, to allow for folding of nodes
- Added options to provide custom port rendering (both via custom classNames and custom render functions)
The code for this modified version can be found in the ./lib/beautiful-react-diagrams directory
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
- Diagramming
- Modals