# teaching machines

## Starfish

June 10, 2019 by . Filed under public, twoville.

Twoville got support for arcs a couple of months ago. Full SVG supports elliptical arcs, but I don’t think they’re very intuitive and their parameters should not face the user. I restricted Twoville to circular arcs and exposed friendlier parameters.

In my original draft, the programmer specified an arc via its starting point (which is implied by the previous vertex on the path), the ending point, and the center of the circle. I was proud of the simplicity. But I realized recently that these three coordinates don’t necessarily form a circular arc. One of the points might be closer to the center than the other.

In my second draft, the programmer specifies an arc via its starting point (again implied), its degrees, and either its center point or its destination point. I think this solution eliminates the chance for degenerate arcs and it still has a simpler interface than SVG.

Helping me think through this new interface is this random starfish generator, which uses both the center and destination forms to trace out the arms.



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

to randomNear(target, fuzz)
random(target - fuzz, target + fuzz)

// A starfish is comprised of 10
// vertices, 5 inner and 5 outer.
// We generate the inner vertices
// first.

// The first inner vertex can be
// anywhere around the inner circle.
angle = random(0, 360)

// The remaining four vertices must
// be spaced apart.
repeat 4
angle = angle + randomNear(72, 12)

innerMin = -100
innerMax = -40
outerMin = 100
outerMax = 120

with path()
closed = true
color = :blue
opacity = 1

// Start at one of the inner vertices.
with jump()
position = vertices

for i in 1..5
// Make clockwise arm.
if random(0, 2) == 0
with arc()
center = vertices[i % 5]
degrees = random(outerMin, outerMax)
with arc()
position = vertices[i % 5]
degrees = random(innerMin, innerMax)

// Make counter-clockwise arm.
else
with arc()
position = vertices[i % 5].rotateAround(vertices[i - 1], random(-outerMax, -outerMin))
degrees = random(innerMin, innerMax)
with arc()
position = vertices[i % 5]
degrees = random(outerMin, outerMax)

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

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

to randomNear(target, fuzz)
random(target - fuzz, target + fuzz)

// A starfish is comprised of 10
// vertices, 5 inner and 5 outer.
// We generate the inner vertices
// first.

// The first inner vertex can be
// anywhere around the inner circle.
angle = random(0, 360)

// The remaining four vertices must
// be spaced apart.
repeat 4
angle = angle + randomNear(72, 12)

innerMin = -100
innerMax = -40
outerMin = 100
outerMax = 120

with path()
closed = true
color = :blue
opacity = 1

// Start at one of the inner vertices.
with jump()
position = vertices

for i in 1..5
// Make clockwise arm.
if random(0, 2) == 0
with arc()
center = vertices[i % 5]
degrees = random(outerMin, outerMax)
with arc()
position = vertices[i % 5]
degrees = random(innerMin, innerMax)

// Make counter-clockwise arm.
else
with arc()
position = vertices[i % 5].rotateAround(vertices[i - 1], random(-outerMax, -outerMin))
degrees = random(innerMin, innerMax)
with arc()
position = vertices[i % 5]
degrees = random(outerMin, outerMax)



Keep clicking Evaluate to generate new starfish.