[Bug] Jaggy lines not smoothed
tarngerine opened this issue · comments
Really cool library! I'm having trouble with the quality of the smoothing:
jaggy.mov
do you have any idea what could be causing this type of jaggyness?
options:
const stroke = getStroke(pixelCoords, {
smoothing: 0.99,
streamline: 0.99,
size: Math.max(24 * scale, 1),
});
input:
[{"x":424,"y":350},{"x":424,"y":350},{"x":425,"y":349},{"x":426,"y":348},{"x":427,"y":347},{"x":428,"y":347},{"x":430,"y":346},{"x":431,"y":346},{"x":432,"y":345},{"x":433,"y":345},{"x":435,"y":344},{"x":436,"y":344},{"x":437,"y":344},{"x":438,"y":344},{"x":439,"y":344},{"x":439,"y":344},{"x":440,"y":344},{"x":440,"y":344},{"x":441,"y":344},{"x":442,"y":344},{"x":443,"y":344},{"x":445,"y":344},{"x":450,"y":346},{"x":453,"y":346},{"x":458,"y":348},{"x":461,"y":348},{"x":463,"y":348},{"x":469,"y":349},{"x":475,"y":350},{"x":478,"y":350},{"x":480,"y":351},{"x":483,"y":351},{"x":485,"y":352},{"x":490,"y":353},{"x":491,"y":354},{"x":493,"y":355},{"x":495,"y":355},{"x":496,"y":356},{"x":497,"y":356},{"x":497,"y":356},{"x":497,"y":357},{"x":497,"y":357},{"x":498,"y":357},{"x":498,"y":357},{"x":498,"y":357},{"x":498,"y":358},{"x":498,"y":358},{"x":499,"y":358},{"x":499,"y":359},{"x":500,"y":359},{"x":500,"y":360},{"x":500,"y":361},{"x":501,"y":362},{"x":501,"y":363},{"x":502,"y":364},{"x":502,"y":365},{"x":503,"y":367},{"x":503,"y":368},{"x":503,"y":370},{"x":503,"y":371},{"x":503,"y":372},{"x":503,"y":372},{"x":503,"y":373},{"x":503,"y":374},{"x":503,"y":375},{"x":503,"y":376},{"x":503,"y":377},{"x":502,"y":378},{"x":502,"y":379},{"x":501,"y":380},{"x":500,"y":380},{"x":500,"y":381},{"x":500,"y":382},{"x":500,"y":382},{"x":499,"y":382},{"x":499,"y":382},{"x":498,"y":383},{"x":498,"y":383},{"x":497,"y":383},{"x":495,"y":384},{"x":495,"y":384},{"x":494,"y":384},{"x":493,"y":384},{"x":493,"y":384},{"x":493,"y":384},{"x":493,"y":384},{"x":492,"y":384},{"x":492,"y":384},{"x":491,"y":384},{"x":490,"y":384},{"x":488,"y":384},{"x":487,"y":384},{"x":487,"y":384},{"x":486,"y":384},{"x":485,"y":384},{"x":484,"y":384},{"x":484,"y":385},{"x":483,"y":385},{"x":482,"y":385},{"x":481,"y":385},{"x":478,"y":386},{"x":474,"y":386},{"x":470,"y":386},{"x":467,"y":386},{"x":464,"y":386},{"x":461,"y":386},{"x":458,"y":386},{"x":454,"y":386},{"x":452,"y":386},{"x":451,"y":386},{"x":449,"y":386},{"x":448,"y":386},{"x":447,"y":386},{"x":447,"y":386},{"x":446,"y":386},{"x":446,"y":386},{"x":445,"y":386},{"x":445,"y":386},{"x":445,"y":386},{"x":445,"y":387},{"x":445,"y":387},{"x":445,"y":387},{"x":445,"y":387},{"x":443,"y":389},{"x":440,"y":391},{"x":439,"y":392},{"x":438,"y":394},{"x":437,"y":395},{"x":436,"y":397},{"x":435,"y":400},{"x":434,"y":401},{"x":433,"y":402},{"x":433,"y":404},{"x":433,"y":406},{"x":433,"y":407},{"x":433,"y":408},{"x":433,"y":409},{"x":433,"y":410},{"x":433,"y":410},{"x":433,"y":410},{"x":433,"y":411},{"x":433,"y":411},{"x":433,"y":411},{"x":433,"y":411},{"x":433,"y":411},{"x":434,"y":411},{"x":434,"y":411},{"x":434,"y":411},{"x":434,"y":411},{"x":434,"y":411},{"x":434,"y":411},{"x":434,"y":411},{"x":434,"y":411},{"x":434,"y":411},{"x":434,"y":411},{"x":434,"y":411},{"x":435,"y":411},{"x":435,"y":411},{"x":435,"y":411},{"x":435,"y":411},{"x":435,"y":411},{"x":435,"y":411},{"x":435,"y":411},{"x":435,"y":410},{"x":435,"y":410},{"x":436,"y":410},{"x":436,"y":410},{"x":436,"y":410},{"x":436,"y":410},{"x":436,"y":410},{"x":437,"y":409},{"x":437,"y":409},{"x":437,"y":409},{"x":437,"y":409},{"x":437,"y":409},{"x":437,"y":409},{"x":437,"y":409},{"x":438,"y":409},{"x":438,"y":409},{"x":438,"y":409},{"x":438,"y":409},{"x":438,"y":409},{"x":438,"y":408},{"x":439,"y":408},{"x":439,"y":408},{"x":439,"y":408},{"x":439,"y":408},{"x":440,"y":408},{"x":440,"y":407},{"x":441,"y":407},{"x":441,"y":407},{"x":442,"y":407},{"x":442,"y":406},{"x":442,"y":406},{"x":442,"y":406},{"x":443,"y":406},{"x":443,"y":406},{"x":443,"y":406},{"x":443,"y":406},{"x":443,"y":406},{"x":444,"y":406},{"x":444,"y":406},{"x":444,"y":406},{"x":444,"y":406},{"x":445,"y":406},{"x":445,"y":406},{"x":446,"y":406},{"x":447,"y":405},{"x":448,"y":405},{"x":449,"y":405},{"x":450,"y":405},{"x":451,"y":405},{"x":452,"y":405},{"x":454,"y":405},{"x":455,"y":405},{"x":456,"y":405},{"x":456,"y":405},{"x":456,"y":404},{"x":456,"y":404},{"x":457,"y":404},{"x":457,"y":404},{"x":457,"y":404},{"x":457,"y":404},{"x":458,"y":404},{"x":458,"y":404},{"x":458,"y":404},{"x":458,"y":404},{"x":458,"y":404},{"x":459,"y":404},{"x":459,"y":404},{"x":459,"y":404},{"x":459,"y":404},{"x":459,"y":404},{"x":459,"y":404},{"x":459,"y":404},{"x":460,"y":404},{"x":460,"y":404},{"x":460,"y":404},{"x":460,"y":404},{"x":460,"y":404},{"x":460,"y":405},{"x":460,"y":405},{"x":460,"y":405},{"x":460,"y":405},{"x":460,"y":405},{"x":460,"y":405},{"x":460,"y":405},{"x":460,"y":405},{"x":460,"y":406},{"x":460,"y":406},{"x":460,"y":406},{"x":460,"y":406},{"x":460,"y":406},{"x":460,"y":406},{"x":460,"y":406},{"x":460,"y":406},{"x":460,"y":406},{"x":460,"y":406},{"x":460,"y":406},{"x":460,"y":406},{"x":460,"y":407},{"x":460,"y":407},{"x":460,"y":407},{"x":460,"y":407},{"x":460,"y":407},{"x":460,"y":408},{"x":460,"y":408},{"x":460,"y":408},{"x":460,"y":408},{"x":459,"y":408},{"x":459,"y":408},{"x":459,"y":408},{"x":459,"y":408},{"x":459,"y":408},{"x":459,"y":408},{"x":459,"y":408},{"x":459,"y":408},{"x":459,"y":408},{"x":459,"y":408},{"x":459,"y":408},{"x":459,"y":408},{"x":459,"y":409},{"x":459,"y":409},{"x":459,"y":409},{"x":459,"y":409},{"x":459,"y":409},{"x":459,"y":409},{"x":459,"y":410},{"x":459,"y":410},{"x":459,"y":410},{"x":459,"y":410},{"x":459,"y":410},{"x":459,"y":410},{"x":459,"y":410},{"x":459,"y":410},{"x":459,"y":410},{"x":459,"y":410},{"x":459,"y":411},{"x":459,"y":411},{"x":459,"y":411},{"x":459,"y":411},{"x":459,"y":411},{"x":459,"y":411},{"x":459,"y":411},{"x":459,"y":411},{"x":459,"y":411},{"x":459,"y":412},{"x":459,"y":412},{"x":459,"y":412},{"x":459,"y":412},{"x":459,"y":412},{"x":459,"y":412},{"x":459,"y":412},{"x":459,"y":412},{"x":459,"y":413},{"x":459,"y":413},{"x":459,"y":413},{"x":459,"y":413},{"x":459,"y":414},{"x":459,"y":414},{"x":459,"y":415},{"x":459,"y":415},{"x":459,"y":415},{"x":459,"y":415},{"x":459,"y":415},{"x":459,"y":416},{"x":459,"y":416},{"x":459,"y":416},{"x":459,"y":416},{"x":459,"y":416},{"x":459,"y":416},{"x":459,"y":416},{"x":459,"y":416},{"x":459,"y":416},{"x":459,"y":416},{"x":459,"y":416},{"x":459,"y":417},{"x":459,"y":417},{"x":459,"y":417},{"x":459,"y":417},{"x":459,"y":417},{"x":459,"y":417},{"x":460,"y":417},{"x":460,"y":417},{"x":460,"y":418},{"x":460,"y":418},{"x":460,"y":418},{"x":460,"y":418},{"x":460,"y":418},{"x":461,"y":418},{"x":461,"y":418},{"x":461,"y":418},{"x":461,"y":418},{"x":461,"y":418},{"x":461,"y":418},{"x":461,"y":418},{"x":461,"y":418},{"x":462,"y":418},{"x":462,"y":418},{"x":463,"y":418},{"x":463,"y":418},{"x":463,"y":418},{"x":463,"y":418},{"x":464,"y":418},{"x":464,"y":418},{"x":465,"y":418},{"x":465,"y":418},{"x":467,"y":417},{"x":468,"y":417},{"x":470,"y":416},{"x":471,"y":415},{"x":473,"y":415},{"x":474,"y":414},{"x":476,"y":414},{"x":477,"y":413},{"x":479,"y":412},{"x":481,"y":411},{"x":483,"y":410},{"x":484,"y":409},{"x":484,"y":409},{"x":484,"y":408},{"x":485,"y":408},{"x":486,"y":407},{"x":487,"y":406},{"x":488,"y":405},{"x":488,"y":404},{"x":489,"y":404},{"x":490,"y":403},{"x":490,"y":403},{"x":490,"y":402},{"x":491,"y":401},{"x":493,"y":400},{"x":493,"y":400},{"x":495,"y":398},{"x":496,"y":397},{"x":499,"y":395},{"x":502,"y":393},{"x":506,"y":393},{"x":510,"y":392},{"x":515,"y":392},{"x":520,"y":392},{"x":525,"y":392},{"x":529,"y":392},{"x":532,"y":393},{"x":535,"y":393},{"x":536,"y":395},{"x":536,"y":399},{"x":535,"y":403},{"x":533,"y":407},{"x":531,"y":410},{"x":529,"y":412},{"x":527,"y":415},{"x":525,"y":416},{"x":523,"y":417},{"x":521,"y":417},{"x":517,"y":418},{"x":515,"y":418},{"x":512,"y":418},{"x":508,"y":419},{"x":504,"y":420},{"x":497,"y":422},{"x":493,"y":424},{"x":482,"y":429},{"x":475,"y":433},{"x":468,"y":437},{"x":464,"y":440},{"x":462,"y":441},{"x":462,"y":441},{"x":462,"y":441},{"x":463,"y":442},{"x":465,"y":446},{"x":467,"y":447},{"x":468,"y":448},{"x":471,"y":451},{"x":473,"y":452},{"x":474,"y":452},{"x":474,"y":451},{"x":475,"y":451},{"x":476,"y":450},{"x":476,"y":449},{"x":476,"y":448},{"x":477,"y":448},{"x":477,"y":448},{"x":477,"y":448},{"x":477,"y":448},{"x":477,"y":447},{"x":477,"y":447},{"x":477,"y":446},{"x":477,"y":445},{"x":477,"y":445},{"x":477,"y":445},{"x":477,"y":444},{"x":477,"y":444},{"x":477,"y":444},{"x":478,"y":444},{"x":478,"y":444},{"x":478,"y":444},{"x":478,"y":444},{"x":478,"y":443},{"x":479,"y":443},{"x":479,"y":443},{"x":479,"y":442},{"x":480,"y":442},{"x":480,"y":442},{"x":481,"y":441},{"x":483,"y":441},{"x":485,"y":440},{"x":486,"y":439},{"x":488,"y":438},{"x":489,"y":438},{"x":490,"y":438},{"x":491,"y":438},{"x":492,"y":437},{"x":494,"y":437},{"x":496,"y":437},{"x":497,"y":437},{"x":497,"y":437},{"x":497,"y":437},{"x":499,"y":437},{"x":501,"y":438},{"x":504,"y":438},{"x":507,"y":438},{"x":509,"y":438},{"x":510,"y":438},{"x":511,"y":438},{"x":513,"y":437},{"x":515,"y":437},{"x":518,"y":435},{"x":521,"y":431},{"x":523,"y":428},{"x":525,"y":426},{"x":530,"y":421},{"x":536,"y":415},{"x":539,"y":411},{"x":542,"y":407},{"x":545,"y":404},{"x":546,"y":401},{"x":547,"y":399},{"x":546,"y":399},{"x":546,"y":397},{"x":546,"y":393},{"x":546,"y":388},{"x":546,"y":376},{"x":545,"y":370},{"x":545,"y":364},{"x":544,"y":359},{"x":544,"y":353},{"x":544,"y":347},{"x":544,"y":344},{"x":544,"y":343},{"x":544,"y":343}]
(sorry no codesandbox, implementations kinda tied to the client codebase rn)
just curiuos if you have a gut of what area i should look into
nvm its a leaflet issue! rendering my own path fixes it