
Fix Procedural SVG Generation Bugs in Javascript
- or -
Post a project like this947
£1.3k(approx. $1.7k)
- Posted:
- Proposals: 7
- Remote
- #3745653
- Awarded
Description
Experience Level: Expert
Seeking a strong-ish background either with SVG curve types, or at least the mathematics behind them.
I have noted (in this archive: https://drive.google.com/file/d/1dxV0Q5YQPrKkNFXWi6h4Q0Ca6zvWiU-y/view?usp=sharing) the specific issues that need fixing, both in the code (in the comments marked 'FIXME'), and also in the accompanying screenshot showing both an example of non-overlap (expected behaviour, marked in green) and overlap (wrong behaviour, marked in red).
However the nodes are positioned relative to each-other (they can be moved by drag-and-drop around the canvas), the edge geometry (whenever there are two *or more* edges) between them must remain clearly separated and non-overlapping. The solution must also not break the single-edge case. Ideally, there will be smooth transitions as the curves change upon repositioning nodes, but it's more important that - when stationary - that the curves don't overlap.
The main relevant areas of the code for this task are circleRectDelta(), circleCircleDelta(), and the _mutualTotal > 1 case in Edge.resetGeometry(). SVG geometry types, in case you're unfamiliar, are documented here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
I have noted (in this archive: https://drive.google.com/file/d/1dxV0Q5YQPrKkNFXWi6h4Q0Ca6zvWiU-y/view?usp=sharing) the specific issues that need fixing, both in the code (in the comments marked 'FIXME'), and also in the accompanying screenshot showing both an example of non-overlap (expected behaviour, marked in green) and overlap (wrong behaviour, marked in red).
However the nodes are positioned relative to each-other (they can be moved by drag-and-drop around the canvas), the edge geometry (whenever there are two *or more* edges) between them must remain clearly separated and non-overlapping. The solution must also not break the single-edge case. Ideally, there will be smooth transitions as the curves change upon repositioning nodes, but it's more important that - when stationary - that the curves don't overlap.
The main relevant areas of the code for this task are circleRectDelta(), circleCircleDelta(), and the _mutualTotal > 1 case in Edge.resetGeometry(). SVG geometry types, in case you're unfamiliar, are documented here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

Andrew W.
100% (3)Projects Completed
5
Freelancers worked with
5
Projects awarded
45%
Last project
15 Nov 2022
New Zealand
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies