Reuleaux Polygons

Я всегда был очарован треугольником Reuleaux. Это форма, образованная пересечением трех кругов. Это похоже на равносторонний треугольник.

Многоугольники Reuleaux являются обобщением треугольника Reuleaux. Они представляют собой криволинейные многоугольники, т. Е. Состоящие из круговых дуг и имеют нечетное число сторон.

Конструкция

Треугольник Reuleaux построен путем рисования кругов из каждой вершины равностороннего треугольника. Где радиус этих окружностей равен боковой длине треугольника.

См. «Многоугольная конструкция пера Реуле» Варуна Ваххара (@winkerVSbecks) на CodePen.

Полигоны Reuleaux построены с использованием аналогичного процесса. Группируйте три последовательные вершины, чтобы сформировать треугольник. Затем нарисуйте круг из каждой вершины. Радиус этого круга — это расстояние между первой и третьей вершинами. Затем переместитесь на следующие три вершины и так далее. Попробуйте изменить слайдер в демонстрационном примере выше, чтобы увидеть это визуализированное.

SVG Arc Command

Чтобы нарисовать эти круговые дуги в SVG, мы можем использовать команду дуги.

  Флаг развертки с большой осью поворота x xy xy x y x y
 

Где rx — х-радиус эллипса, а ry — у-радиус. Держите rx равным ry для создания круговых дуг.

Учитывая эти радиусы, есть два эллипса, которые могут соединять любые две точки. На этих эллипсах есть два возможных пути для соединения точек. В общей сложности существует четыре возможных дуги, соединяющих любые две точки.

большой дуги-флаг позволяет вам выбрать дугу больше или меньше 180 градусов. Флаг развертки управляет, если дуга должна двигаться по часовой стрелке или против часовой стрелки.

См. Команду Arc SVG дуги Варуна Ваххара (@winkerVSbecks) на CodePen.

Полигоны Реуле с SVG

Первым шагом является получение местоположения каждой вершины многоугольника. В предыдущем сообщении в блоге я объяснил, как вы можете использовать полярные координаты для генерации вершин правильного многоугольника. Вы можете выполнить один и тот же процесс, чтобы получить вершины многоугольника Reuleaux. Единственное отличие состоит в том, что вместо соединения этих вершин с линией вам нужно соединить их с дугами.

1. Вычислить вершины многоугольника с использованием многоугольного генератора.

     const pts = polygon ([cx, cy]sideCount, radius);  

2. радиус дуг будет расстоянием между первой и третьей вершинами.

     const r = dist (pts [0]pts [2]),  

3. Нарисуйте путь. Для полигонов Reuleaux требуется, чтобы дуга была меньше 180 градусов, а направление sweep-flag должно соответствовать направлению, в котором вы определяете свои точки (по часовой стрелке или против часовой стрелки).

      функция   reuleauxPolygonConstruction   ([  cx    cy  ]  радиус    sideCount  )   {
      const   pts   =   многоугольник   ([  cx    cy  ]  sideCount    радиус  ); 
      const   r   =   dist   (  pts   [  0  ]  pts   [  2  ]) 
      const   [     ...   хвост  ]   =   pts  ; 
   
      возвращение   [
        // перейдите к первой вершине 
        'M'    head   [  0  ]  head   [  1  ]
        // Соединяем смежные вершины с дугой 
        ...   хвост  .   карта   (  p   =>     A   $   {  r  }   $   {  r  }   0   0   1   $   {  p   [  0  ]}   $   {  р   [  1  ]}   ` ), 
        // Подключите последнюю и первую вершины с дугой 
        `  A   $   {  r  }   $   {  r  }   0   0   1   $   [  глава   [  0  ]}   $   {  голова   [  1  ]}   ` 
        // Закройте форму 
        'Z'  
     ]        ), 
   } 
    

Кривая постоянной ширины

Хотя возможно построить криволинейные многоугольники с четным числом сторон. Многоугольники Reuleaux всегда имеют нечетное число сторон, поскольку они являются формами постоянной ширины. Поэтому каждая вершина должна иметь возможность сопоставить противоположную дугу. Это возможно, только если у нас есть нечетное число дуг.

Кривая постоянной ширины представляет собой выпуклую плоскую форму, ширина которой (определяемая как перпендикулярное расстояние между двумя отдельными параллельными линиями, каждая из которых имеет по меньшей мере одну общую точку с границей формы, но не с внутренней частью формы) независимо от ориентации кривой.

— wikipedia

Любая кривая постоянной ширины может вращаться внутри квадрата, оставаясь в нем всегда. Обратите внимание, как он вращается, его ось не остается фиксированной в одной точке. Это следует за кривой вокруг центра квадрата.

См. Треугольник Pen Reuleaux, вращающийся на площади Варуном Ваххаром (@winkerVSbecks) на CodePen.

Это свойство, позволяющее вращаться внутри квадрата, используется для создания битов, которые сверлят почти квадратное отверстие. Сам сверло представляет собой треугольник Reuleaux и устанавливается в патрон, который позволяет вращать бит без фиксированного центра вращения.

Морфинг

Наконец, просто для удовольствия, вот некоторые полигоны, морфирующие между их правильной формой и формой Реуло, используя флббер.

См. Полигоны Руно Морфинга Реуло Варуна Ваххара (@winkerVSbecks) на CodePen.