Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Dots" fill looks weird when units are scaled up #193

Closed
notwaldorf opened this issue Nov 4, 2021 · 6 comments
Closed

"Dots" fill looks weird when units are scaled up #193

notwaldorf opened this issue Nov 4, 2021 · 6 comments

Comments

@notwaldorf
Copy link

notwaldorf commented Nov 4, 2021

Hiya!

I'm trying to use rough.js with canvas-sketch; the only part of this that matters is that canvas-sketch lets me use inches as the canvas unit, rather than pixels (and it does the inches-> pixels conversion behind the scenes). For most options this is fine; for ex this is a hashed rectangle of 5x5 inches,

const rect = rc.rectangle(1, 1, 5, 5, {
      fill: 'black',
      fillWeight: 0.05, 
      hachureGap: 0.5,
      roughness:0.1,
    });

And it looks about what you'd expect (if maybe with slightly wider lines than expected):
Screen Shot 2021-11-04 at 12 50 42 PM

When I switch the fill to "dots" however, the dots go really wild:
Screen Shot 2021-11-04 at 12 51 47 PM

I assume this is happening because there's some internal math that assumes pixels, but before I go digging where to fix that locally, I was wondering if you had any advice of where to look? Or any hacks to just scale the dots down more (that isn't "stop using inches 😭")? The fillWeight seems to be getting ignored in my case, or somehow scaled in the library maybe? (0.05 inches should be a very small radius, but if i crank up the hachure gap to 3 inches soIid just get fewer dots, it still looks wrong and not like a teensy circle:
Screen Shot 2021-11-04 at 12 53 37 PM

I'm sorry for the edge case! Thanks in advance! 🙏

@notwaldorf
Copy link
Author

Ah, hmm, I think it might be this line: https://github.com/rough-stuff/rough/blob/master/src/fillers/dot-filler.ts#L34, which is bad (for me) because i can see why you'd want a ceiling there 😂

@pshihn
Copy link
Collaborator

pshihn commented Nov 4, 2021

I was looking at it. and I realized there's just a flaw in the code. The ceil actually is alright there.
I am overriding the roughness in this case: https://github.com/rough-stuff/rough/blob/master/src/fillers/dot-filler.ts#L14 which is just hacky

@pshihn
Copy link
Collaborator

pshihn commented Nov 4, 2021

@notwaldorf I just published a patch (#194) release v4.4.5.
Let me know if it works for you.

@pshihn
Copy link
Collaborator

pshihn commented Nov 4, 2021

Here's a sample with the latest build: https://codepen.io/shihn/pen/PoKQjQE

Note that at this scale, those rough dots looks more like squiggles than circles. Something I can improve on

@notwaldorf
Copy link
Author

Ahhhh this is amazing! I will give it a try today, thank you so much! 🥰

@notwaldorf
Copy link
Author

(In the meantime I need to thank you for the code in geometry.ts, it has been a life saver)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants