search

hunkim98 / dotting

Dotting is a pixel art editor component library for react
https://hunkim98.github.io/dotting/
MIT License
43 stars 12 forks source link

Improve `BrushTool.DOT` drawing method #36

Closed hunkim98 closed 1 year ago

hunkim98 commented 1 year ago

Currently, the BrushTool.DOT is designed to draw pixels on the current mouse position when mouse is down. This causes problems when the user drags the mouse too fast. For instance see the below example.

https://github.com/hunkim98/dotting/assets/57612141/9e86234f-1bc5-4ebe-a2f6-8ec7cbaa5dc1

The browser cannot track every mouse position precisely. To fix this issue, we need a new algorithm for drawing the pixels.

What we should do can be seen in the image below.

Screen Shot 2023-05-14 at 12 31 00 PM

Finding the intersections is not easy and is a waste of time. Instead, you could use a line drawing algorithm based on the cosine value of the neighboring points.

That algorithm is called Bresenham's line algorithm

For Korean materials that explain Bresenham's line algorithm, one could take a look at the below materials.

To implement this, one could use this.mouseDownWorldPos and this.mouseMoveWorldPos and some additional array to keep track of the neighboring points.

hunkim98 commented 1 year ago

@Lee-Si-Yoon I think this issue might help you understand some basic computer graphic algorithms. Would you like to give it a try?

hunkim98 commented 1 year ago

@Lee-Si-Yoon I have previously implemented a line drawing method based on Bresenham's algorithm in my canvas_with_math project. You could take a look at it.

hunkim98 commented 1 year ago

Closing this issue since #38 was merged