rough-stuff / rough

Create graphics with a hand-drawn, sketchy, appearance
http://roughjs.com
MIT License
19.73k stars 611 forks source link

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

Closed notwaldorf closed 2 years ago

notwaldorf commented 2 years ago

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 :sob:")? 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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@notwaldorf I just published a patch (https://github.com/rough-stuff/rough/pull/194) release v4.4.5. Let me know if it works for you.

pshihn commented 2 years ago

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 commented 2 years ago

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

notwaldorf commented 2 years ago

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