teaching machines

Cutting Corners

December 14, 2019 by Chris Johnson. Filed under public, twoville.

I learned recently of Chaikin’s Algorithm, a method for rounding off the corners of a polygon. The algorithm works like this:

1. Find the midpoints of each line segment in the polygon’s perimeter.
2. Connect each consecutive pair of midpoints using a quadratic Bezier curve. The midpoints are the curve’s endpoints. The vertex between them is the control point.

Twoville has given me a playground to experiment with algorithms like this. I added a new shape environment called ungon for generating these rounded polygons. Following are a couple of my first tests.

  

    with viewport
  center = :zero2
  size = [20, ~]
  color = :white

with time
  stop = 200

with ungon()
  color = :magenta
  stroke.color = :magenta * 0.75
  stroke.size = 0.2
  0 -> t
    rounding = 0
  t -> 100 -> t
    rounding = 0.99
  t -> 200
    rounding = 0
  vertex().position = [9.888, -9.922]
  vertex().position = [-0.209, 7.948]
  vertex().position = [-7.111, -1.935]

    
    
    
  
  
    

    with viewport
  center = :zero2
  size = [20, ~]
  color = :white

with time
  stop = 200

with ungon()
  color = :magenta
  stroke.color = :magenta * 0.75
  stroke.size = 0.2
  0 -> t
    rounding = 0
  t -> 100 -> t
    rounding = 0.99
  t -> 200
    rounding = 0
  vertex().position = [9.888, -9.922]
  vertex().position = [-0.209, 7.948]
  vertex().position = [-7.111, -1.935]

  
  expand

  

    with viewport
  center = :zero2
  size = [12, ~]
  color = [0, 0, 0.5]

with ungon()
  color = [1, 1, 0]
  rounding = 0.15
  for i to 5
    d = 360 * i / 5.0 + 18
    with vertex()
      position = [6, d].toCartesian()
    with vertex()
      position = [3, d + 36].toCartesian()

    
    
    
  
  
    

    with viewport
  center = :zero2
  size = [12, ~]
  color = [0, 0, 0.5]

with ungon()
  color = [1, 1, 0]
  rounding = 0.15
  for i to 5
    d = 360 * i / 5.0 + 18
    with vertex()
      position = [6, d].toCartesian()
    with vertex()
      position = [3, d + 36].toCartesian()

  
  expand

  

    n = 30
delta = 360 / n

with viewport
  center = :zero2
  size = [22, ~]
  
with ungon()
  rounding = 0.5
  color = [0.8, 0.6, 0.0]
  for d to 360 by delta
    r1 = random(0, 100) / 100.0 * 2 + 3
    r2 = random(0, 100) / 100.0 * 5 + 7
    p = [r1, d].toCartesian()
    with vertex()
      0 -> t
        position = [r1, d].toCartesian()
      t -> 50 -> t
        position = [r2, d].toCartesian()
      t -> 100
        position = [r1, d].toCartesian()

    
    
    
  
  
    

    n = 30
delta = 360 / n

with viewport
  center = :zero2
  size = [22, ~]
  
with ungon()
  rounding = 0.5
  color = [0.8, 0.6, 0.0]
  for d to 360 by delta
    r1 = random(0, 100) / 100.0 * 2 + 3
    r2 = random(0, 100) / 100.0 * 5 + 7
    p = [r1, d].toCartesian()
    with vertex()
      0 -> t
        position = [r1, d].toCartesian()
      t -> 50 -> t
        position = [r2, d].toCartesian()
      t -> 100
        position = [r1, d].toCartesian()

  
  expand

A couple of years ago I experimented with making blobby circuitous random walks with turtle geometry. Chaikin’s algorithm is far simpler.