# teaching machines

## Cutting Corners

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]

var twovilleDiv = jQuery('#twoville_rounding');
twovilleDiv.closest('pre').replaceWith(twovilleDiv);
document.getElementById('twoville_form_rounding').submit();

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 = [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()

var twovilleDiv = jQuery('#twoville_star');
twovilleDiv.closest('pre').replaceWith(twovilleDiv);
document.getElementById('twoville_form_star').submit();

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()





n = 30
delta = 360 / n

with viewport
center = :zero2
size = [22, ~]

with ungon()
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()

var twovilleDiv = jQuery('#twoville_splat');
twovilleDiv.closest('pre').replaceWith(twovilleDiv);
document.getElementById('twoville_form_splat').submit();

n = 30
delta = 360 / n

with viewport
center = :zero2
size = [22, ~]

with ungon()
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()



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