teaching machines

Starfish

June 10, 2019 by Chris Johnson. 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)

targetRadius = 10
radiusFuzz = 3

// 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.
radius = randomNear(targetRadius, radiusFuzz)
angle = random(0, 360)
vertices = [[radius, angle].toCartesian()]

// The remaining four vertices must
// be spaced apart.
repeat 4
  radius = randomNear(targetRadius, radiusFuzz)
  angle = angle + randomNear(72, 12)
  vertices.add([radius, angle].toCartesian())
  
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[0]
  
  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)

    
    
    
  
  
    

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

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

targetRadius = 10
radiusFuzz = 3

// 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.
radius = randomNear(targetRadius, radiusFuzz)
angle = random(0, 360)
vertices = [[radius, angle].toCartesian()]

// The remaining four vertices must
// be spaced apart.
repeat 4
  radius = randomNear(targetRadius, radiusFuzz)
  angle = angle + randomNear(72, 12)
  vertices.add([radius, angle].toCartesian())
  
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[0]
  
  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)

  
  expand

Keep clicking Evaluate to generate new starfish.