How to use the @mathigon/fermat.Point function in @mathigon/fermat

// -------------------------------------------------------------------------
// Symmetry Functions

const width = 1920;
const height = 1280;

const pointX1M = new Point(240, 320);
const pointX1Y1 = new Point(480, 320);
const lineX1 = new Line(new Point(0, 320), new Point(480, 320));
const lineY1 = new Line(new Point(480, 0), new Point(480, 320));
const lineY2 = new Line(new Point(640, 0), new Point(640, 320));

const pointS = new Point(360, 360);
const lineS = new Line(new Point(0, 0), new Point(360, 360));
const lineSI = new Line(new Point(0, 720), new Point(720, 0));

function grid(points: Point[], x: number, y: number) {
  return flatten(tabulate2D((i, j) =>
      points.map((p: Point) => p.shift(i * x, j * y)), width / x, height / y));
}

function applyTransforms(point: Point, [x, y]: [number, number],
                         transforms: ((p: Point) => Point)[]) {
  let points = [point.mod(x, y)];

  for (let t of transforms) {
    for (let p of points.map(p => t(p))) {
      if (!points.some(q => q.equals(p))) points.push(p);
    }
  }

function line(a1: number, a2: number, b1: number, b2: number) {
  return new Line(new Point(a1, a2), new Point(b1, b2));
}

explode(recursive = false): Promise {
    const n = this.$dotMachine.base;
    if (this.$fullDots.length < n) return Promise.resolve();

    const $remove = this.$dots.slice(0, n);
    this.$dots = this.$dots.slice(n);

    for (let $r of $remove) $r.addClass('glowing');

    const nextIndex = this.$dotMachine.cells.indexOf(this) - 1;
    const next = this.$dotMachine.cells[nextIndex];

    const target = next ? next.getDotPosition(next.$dots.length) : undefined;
    const transform = next ? target!.add(next.$el.topLeftPosition)
        .subtract(this.$el.topLeftPosition) : new Point(-54, 50);

    for (let $r of $remove) {
      $r.animate({transform: `translate(${transform.x}px,${transform.y}px) scale(2)`}, 400, 400)
          .promise.then(() => $r.remove());
    }

    setTimeout(() => explodeAudio.play(), 100);
    setTimeout(() => this.rearrange(), 400);

    setTimeout(() => {
      if (next) next.addDot(target);
      this.value -= n;
      this.$value.textStr = this.value;
    }, 800);

    const deferred = defer();

function lineX(y: number) {
  return new Line(new Point(0, y), new Point(1, y));
}

    $plot.drawPoints(list(0, 18000, m.hl).map(p => new Point(p, fn(p))));
  });

$action.on('click', () => {
    $geopad.animatePoint('b', new Point(240, 140));
    $geopad.animatePoint('b', new Point(140, 40));
  });
}

      p => p.rotate(Math.PI, new Point(w/2, h))
    ]);