Friday, December 27, 2019

vector - Cutting paths with paths in Sketch.app


Goal: To come up with a set of curves on different scales to reproduce the typical "metro map" look. Also to learn what this kind of curve is called (not bezier, not rational?)


Given the following circular path, I would like to "cut" it along the lines shown in order to yield eight segments. I would repeat this process for various sized circles so that they nest as in the London tube map screenshot lower in the post.


In the end, I would remove the "fill" (the resulting paths would be "open" anyway, so unfilled anyway) and outfit it with a thick "line" to make the "tracks" of my would-be metro map.


Circle, overlaid with the



I tried every variation I could think of, with the circle and line on "top", using intersections and masking, perhaps I'm simply doing something wrong, I never used Sketch to modify shapes before.


Any option, including using the intersection points to add additional control points to the circle (so that I could select, and duplicate just two control points to get a 1/8 or 1/4 radius would work for me.


My alternative would be to learn enough geometry to write this as script for Sketch (luckily I'm a software engineer) and "program" out paths with the correct curvature, but I'm quite sure that turns out to be more difficult that it appears, not to mention my knowing nothing about geometry to calculate where the line 1000,0|1000,0 intersects the circle at north-east on it's face.


If I would have the luxury of using Illustrator I suppose I could use the "Pathfinder" tool to "outline" my shapes, according to this page:


Adobe Illustrator




London tube map screenshot, credit




No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...