# Shape from Stroke

Is there a known way to take the stroke of a bezier curve or PShape and turn it into a closed path / shape?

for example:

1 Like

Hi,

I found the following in the processing forum which might be just your question:
https://forum.processing.org/one/topic/creating-the-outline-path-from-a-line-with-specified-strokeweight.html

Unfortunately the final solution isn’t there. But there is mentioned the Geomerative library from Richard Marxer which has lots of functions to manipulate paths and shapes.

I couldn’t quickly find if there is a function implemented that solves your problem.

1 Like

1 Like

Think you made a copy-paste error with the link oops. fixed. i’m not sure if it is what you are looking for but it might at least point you in a direction worthwhile.

2 Likes

Hi @dehyde

The approach suggested in the SO thread linked by @hotfooted is interesting but you might face a problem when dealing with `curveVertex` or `bezierVertex` as you won’t be able to retrieve all the vertices along that line that are necessary to compute their perpendicular projection.

Below an annotated example sketch (Python mode) that:

• computes a degree 3 polyline (close to Bezier spline) from a set of control points using the Catmull-Clark subdivision algorithm

• calculates the perpendicular projection of each vertex of that polyline on both sides (inner and outer edge of your path).

• draw a PShape made of `QUAD_STRIP` from these projected vertices

You can adjust the subdivision level to your needs, tune the length of the perpendicular lines (the width of your path) and interactively change the position of the control points with the mouse.

``````ITER = 5 #up to 7 max
SW = 25.0
toMove = None

def setup():
size(1000, 600, P2D)
strokeWeight(2)
smooth(8)
noFill()

global ctrlPnts, pnts

ctrlPnts = [PVector(250, 320), PVector(450, 150), PVector(610, 200), PVector(850, 280), PVector(500, 400), PVector(540, 480), PVector(260, 500)]
pnts = ctrlPnts
subdivide()

def draw():
background('#FFFFFF')

#Draw lines between control points
pushStyle()
strokeWeight(1)
stroke(40, 40, 255)
for i, p in enumerate(ctrlPnts):
line(p.x, p.y, ctrlPnts[(i+1)%len(ctrlPnts)].x, ctrlPnts[(i+1)%len(ctrlPnts)].y)
popStyle()

#Draw control points
pushStyle()
stroke(255, 30, 90)
strokeWeight(10)
for p in ctrlPnts:
point(p.x, p.y)
popStyle()

#Draw Catmull-Clark subdivided polyline (spline)
for i in xrange(len(pnts)):
p1 = pnts[i]
p2 = pnts[(i+1)%len(pnts)]
line(p1.x, p1.y, p2.x, p2.y)

pushStyle()
strokeWeight(.7)
fill(95, 250, 90, 60)
for i in xrange(len(pnts)+1):
p1 = pnts[i-1] #last point
pm = pnts[i%len(pnts)] #midpoint
p2 = pnts[(i+1)%len(pnts)] # next point
theta = atan2(p2.y - p1.y, p2.x - p1.x) + HALF_PI

px = (SW*.5) * cos(theta)
py = (SW*.5) * sin(theta)

vertex(pm.x - px, pm.y - py) #vertices for the outer edge of path
vertex(pm.x + px, pm.y + py) #vertices for the inner edge of path
endShape()
popStyle()

def mouseDragged():
global toMove
for p in ctrlPnts:
if dist(p.x, p.y, mouseX, mouseY) < 12:
toMove = p
break

try:
toMove.set(mouseX, mouseY)
except:
print "No control point selected"

def mouseReleased():
global toMove
do = False
for p in ctrlPnts:
if dist(p.x, p.y, mouseX, mouseY) < 12:
do = True
break
if do:
toMove = None
subdivide()

def subdivide():

global pnts
pnts = ctrlPnts

#Catmull-Clark subdivision
for j in xrange(ITER):
newPnts = []
for i in xrange(len(pnts)):
p1 = pnts[i]
p2 = pnts[(i+1)%len(pnts)]
p3 = pnts[(i+2)%len(pnts)]
qp = p1 * .5 + p2 * .5
rp = p1 * .125 + p2 * .75 + p3 * .125 #(Catmull-Clark subdivision = degree 3)
newPnts.append(qp)
newPnts.append(rp)

pnts = newPnts
``````

edit: You could also offset the contour of a polygon along its vertices normals. The contour and its offsetted self would compose the inner and outer edges of the PShape.

The contour of a polygon offsetted 20 times

They are a dozen of SO threads on the subject (inward/outward offset polygon) so feel free to check there if you’re interested, you’ll probably find different approaches to your problem.

Meanwhile, here’s one them implemented in Processing Python mode:

``````### Based on @MBo's solution suggested here -> https://stackoverflow.com/questions/54033808/how-to-offset-polygon-edges

SW = -25.0 #Stroke width of path/PShape (-/+ for inner/outer offset)

def setup():
size(1000, 600, P2D)
background('#FFFFFF')
fill(230)
smooth(8)

#List of vertices (polygon)
points = [PVector(250, 320), PVector(450, 150), PVector(610, 200), PVector(850, 280), PVector(500, 400), PVector(540, 480), PVector(260, 500)]

for i in xrange(len(points)+1):
pp = points[(i-1)%len(points)] #previous vertex
pc = points[i%len(points)] #current vertex
pn = points[(i+1)%len(points)] #next vertex

thetaA = atan2(pc.y - pp.y, pc.x - pp.x) + HALF_PI #right angle with the edge pp-pc
thetaB = atan2(pn.y - pc.y, pn.x - pc.x) + HALF_PI #right angle with the edge pc-pn

a = PVector(cos(thetaA), sin(thetaA)) #vector pointing perpendicularly to edge pp-pc
b = PVector(cos(thetaB), sin(thetaB)) #vector pointing perpendicularly to edge pc-pn

nsum = (a + b).normalize() #normalized sum

l = SW / sqrt(1 + PVector.dot(a,b)) #desired length
po = pc + (l * nsum) #offsetted vertex

vertex(pc.x, pc.y)
vertex(po.x, po.y)
endShape(CLOSE)
``````
5 Likes

Thank you for the comprehensive answer
I didn’t have the chance to implement it just yet, once I will I’ll update with the results

1 Like