dancers.js is a small JavaScript library for drawing square dance formaqtions in a web browser. Each dancer is represented by a Dancer object. A dancer is located by an X and a Y coordinate expressed in the dancer coordinate system. The dancer coordinate system is scaled such that dancers who are either next to or facing each other have distance 1. X coordinates ascend to the right. Y coordinates ascend downwards. Each dancer also has a facing direction. A facing direction of 0 has the dancer's back towards the caller (like couple #1 in a squared set). Each increase by 1 in facing direction rotates the dancer by one wall to their left, so a facing direction of 1 would have the dancer facing the same wall as couple #2 in a squared set. Fractional coordinates and directions are allowed.

The dancers are arranged on a dance floor by placing them in a Floor object. Each Floor object is associated with an initially empty SVG element on the web page. Graphical representations of the dancers will be added to that SVG element when the web page is finished loading.

Squared Set
new Floor([
    new Dancer(3, 1, 0, "1", Dancer.gender.GUY),
    new Dancer(2, 1, 0, "1", Dancer.gender.GAL),
    new Dancer(1, 2, 1, "2", Dancer.gender.GUY),
    new Dancer(1, 3, 1, "2", Dancer.gender.GAL),
    new Dancer(2, 4, 2, "3", Dancer.gender.GUY),
    new Dancer(3, 4, 2, "3", Dancer.gender.GAL),
    new Dancer(4, 3, 3, "4", Dancer.gender.GUY),
    new Dancer(4, 2, 3, "4", Dancer.gender.GAL)
  ]).draw("squared-set");
Normal Couple
new Floor([
      new Dancer(1, 1, 2, "1", Dancer.gender.GUY),
      new Dancer(2, 1, 2, "1", Dancer.gender.GAL)
  ]).draw("normal-couple");
Halfsasheyed Couple
  new Floor([
      new Dancer(2, 1, 2, "1", Dancer.gender.GUY),
      new Dancer(1, 1, 2, "1", Dancer.gender.GAL)
    ]).draw("halfsasheyed-couple");

For formations like diamonds, it might be cumbersome to deal with fractional coordinates. The rotate method of Floor can be used to rotate any collection of dancers around their collective center. This might provide a more convenient way to describe diamonds or hourglasses.

Right Hand Diamond
new Floor([
  new Dancer(1, 1, 2, "1", Dancer.gender.NEU),
  new Dancer(2, 1, 2, "2", Dancer.gender.NEU),
  new Dancer(3, 1, 0, "3", Dancer.gender.NEU),
  new Dancer(4, 1, 0, "4", Dancer.gender.NEU),
]).rotate(-1, ["2", "3"])
  .draw("rh-diamond");
Right Hand Hourglass
new Floor([
  new Dancer(1, 1, 2, "1", Dancer.gender.NEU),
  new Dancer(2, 1, 2, "2", Dancer.gender.NEU),
  new Dancer(3, 1, 0, "3", Dancer.gender.NEU),
  new Dancer(4, 1, 0, "4", Dancer.gender.NEU),
  new Dancer(1, 3, 2, "5", Dancer.gender.NEU),
  new Dancer(2, 3, 2, "6", Dancer.gender.NEU),
  new Dancer(3, 3, 0, "7", Dancer.gender.NEU),
  new Dancer(4, 3, 0, "8", Dancer.gender.NEU),
  ]).rotate(-1, ["2", "3"])
    .rotate(-1, ["6", "7"])
    .rotate(1, ["3", "6"])
    .rotate(2, ["3"])
    .rotate(2, ["6"])
    .draw("rh-hourglass");