index.rhtml

<%

require './helpers.rb'

size = 500
thickness = 15
thicknessDia = thickness * Math.sqrt(2)
n = 8
m = 2
angles = symmetry(n)
angle = angles[1]
circle_ratio = 0.25
minus_plus = [-1, 1]
right_angle = Math::PI/2

radius1 = 160

ring1 = angles.map{ |r| p(0, radius1).rotate2d(r) }

ring1A, ring1B = minus_plus.map do |sign|
  ring1.zip(angles).map do |(p, r)|
    p.translate2d(p(sign*thicknessDia/2, 0).rotate2d(r + sign*angle/2))
  end
end

ring1B.rotate!

outer_square_edges = ring1A.zip(ring1B).map do |pair|
  pair.first.rotate2d(right_angle, avg(pair))
end

square_triplets = ring1A.zip(outer_square_edges, ring1B).map(&:reverse)

square_paths = (0...m).map do |k|
  square_triplets.select.with_index{ |_, i| (i+k) % m == 0 }.flatten
end

ciricle_ring = ring1.map { |p| p.scale2d(1.1) }

in_square_points = ring1A.zip(ring1B).map{ |pair| avg(pair) }

circle_touchpoints = [ciricle_ring, ciricle_ring.rotate].map do |ring|
  ring.zip(in_square_points).map do |ps|
    ps.first*circle_ratio + ps.last*(1 - circle_ratio)
  end
end

ring1D = circle_touchpoints.first.zip(circle_touchpoints.last).flatten

circle_radii_points = [ciricle_ring.first, circle_touchpoints.first.first, in_square_points.first]
circle_radii = circle_radii_points.each_cons(2).map do |(a, b)|
  a.distance2d(b).round(3)
end

radius2 = 35
radius2_distance = circle_radii.min

ring2A = minus_plus.repeated_permutation(2).to_a.values_at(0, 1, 3, 2).map do |(x, y)|
  p(x*radius2, y*radius2_distance).rotate2d(angle/2)
end

ring2B = ring2A.map{ |p| p.rotate2d(right_angle) }

stroke_ab = StrokeDash.new(-20,40,110,40,35,55,55,30,83)
stroke_c = StrokeDash.new(-29,64,126,34.55,43)
stroke_d = StrokeDash.new(0,25,133)
stroke_e = StrokeDash.new(-56,29,94)

page_intro("Nazareth Knot")

%>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:lang="en" viewBox="<%= -size/2 %> <%= -size/2 %> <%= size %> <%= size %>" id="knot">
  <defs>
    <style>
      /* .bottom { opacity: 0.6; } */
      .top, .bottom { stroke-width: <%= thickness %>px; fill: none; }
      .a { stroke: #999; }
      .b { stroke: #f90; }
      .d, .e { stroke: #408; }
      .c, .f { stroke: #090; }
      .white { stroke-width: <%= thickness+5 %>px; fill: none; stroke: #fff; }
      .a.top, .b.top { <%= stroke_ab.css %> }
      .c.top { <%= stroke_c.css %> }
      .a.top.white, .b.top.white { <%= stroke_ab.css(2) %> }
      .c.top.white { <%= stroke_c.css(2) %> }
      .d.top { <%= stroke_d.css %> }
      .d.top.white { <%= stroke_d.css(2) %> }
      .e.top { <%= stroke_e.css %> }
      .e.top.white { <%= stroke_e.css(2) %> }
    </style>
    <% square_paths.zip('a'...'z').each do |(points, letter)| %>
      <path id="path-<%= letter %>" d="M <%= points.map(&:to2d_s).join(' L ') %> Z" />
    <% end %>
    <% [1, 0].zip('c'...'z').each do |(offset, letter)| %>
      <path id="path-<%= letter %>" d="M <%= ring1D.first.to2d_s %><%=
        ring1D.rotate.map.with_index do |p, i|
          radius = circle_radii[(i+1) % 2]
          " A #{radius} #{radius} 0 #{offset} #{(offset + i + 1)%2} #{p.to2d_s}"
        end.join
      %> Z" />
    <% end %>
    <% [ring2A, ring2B].zip('e'...'z').each do |(points, letter)| %>
      <% ps = points.map(&:to2d_s); r = radius2_distance %>
      <path id="path-<%= letter %>" d="M <%=
        ps.each_slice(2).map{ |o| o.join(" A #{r} #{r} 0 0 0 ") }.join(' L ')
      %> Z" />
    <% end %>
  </defs>
  <use xlink:href="#path-a" class="a bottom" />
  <use xlink:href="#path-b" class="b bottom" />
  <use xlink:href="#path-c" class="c bottom white" />
  <use xlink:href="#path-c" class="c bottom" />
  <use xlink:href="#path-d" class="d bottom white" />
  <use xlink:href="#path-d" class="d bottom" />
  <use xlink:href="#path-c" class="c top white" />
  <use xlink:href="#path-c" class="c top" />
  <use xlink:href="#path-a" class="a top white" />
  <use xlink:href="#path-b" class="b top white" />
  <use xlink:href="#path-a" class="a top" />
  <use xlink:href="#path-b" class="b top" />
  <use xlink:href="#path-d" class="d top white" />
  <use xlink:href="#path-d" class="d top" />
  <use xlink:href="#path-e" class="e bottom" />
  <use xlink:href="#path-f" class="f bottom white" />
  <use xlink:href="#path-f" class="f bottom" />
  <use xlink:href="#path-e" class="e top white" />
  <use xlink:href="#path-e" class="e top" />
</svg>