How to use @mathigon/fermat - 10 common examples

function drawDigit(i: number, r: number, a: number) {
    if (i < 5) a += shift[i];  // Fix spacing for = and . symbols
    const point = Point.fromPolar(a, r);

    context.save();
    context.translate(400 + 2 * point.x, 400 + 2 * point.y);
    context.rotate(a + Math.PI / 2);
    context.fillStyle = colours[Math.floor(r)].toString();
    context.font = `${2 * 0.3 * r}px Source Sans Pro, sans-serif`;
    context.textAlign = 'center';
    context.fillText(piString[i], 0, 0);
    context.restore();

    if (i >= piString.length - 1) return;
    setTimeout(() => drawDigit(i + 1, r * 0.992, a + 0.175), 20);
  }

let n2 = Random.smart(9, 'divisibility-game-number') + 2;

    let x, y;
    switch (answer) {
      case 0:
        x = n1;
        y = n1 * n2;
        break;  // factor
      case 1:
        x = n1 * n2;
        y = n1;
        break;  // multiple
      case 2:
        x = n1;
        y = (n1 * n2) + [1, -1][Random.integer(1)];  // neither
        if (Random.integer(1)) [x, y] = [y, x];
    }

    $el.bindObservable(observable({x, y}));

    let $buttons = $el.$$('.factor-bubble');
    $buttons[0].on('click', answer === 0 ? success : error);
    $buttons[1].on('click', answer === 1 ? success : error);
    $buttons[2].on('click', answer > 1 ? success : error);

    $el.on('success', function () {
      for (const [i, $b] of $buttons.entries()) {
        if (answer === i) {
          $b.addClass('success');
          $b.css('transform', 'none');
        } else {
          $b.children[0].exit('pop');

import {Point, Line} from '@mathigon/fermat';
import {CanvasView, CustomElementView, register, slide} from '@mathigon/boost';
import {Select} from '../../shared/types';


// -------------------------------------------------------------------------
// 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))) {

// -------------------------------------------------------------------------
// 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);
    }
  }

import { tabulate, flatten } from '@mathigon/core';
import { Point, Line } from '@mathigon/fermat';
import { CustomElement, registerElement, slide } from '@mathigon/boost';


// -------------------------------------------------------------------------
// 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, x, y) {
  return flatten(tabulate((i, j) => points.map(p => p.shift(i * x, j * y)),
    width/x, height/y));
}

function applyTransforms(point, [x, y], transforms) {
  let points = [point.mod(x, y)];

  for (let t of transforms) {
    for (let p of points.map(p => t(p))) {

// -------------------------------------------------------------------------
// 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, x, y) {
  return flatten(tabulate((i, j) => points.map(p => p.shift(i * x, j * y)),
    width/x, height/y));
}

function applyTransforms(point, [x, y], transforms) {
  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);
    }
  }

arrange(positions: SimplePoint[] = []) {
    let center: Point|undefined = undefined;

    for (const [i, v] of this.vertices.entries()) {
      v.posn = positions[i] || v.posn;

      if (this.options.bound) {
        let distance = this.options.r || 5;
        v.posn.x = clamp(v.posn.x, distance, this.width - distance);
        v.posn.y = clamp(v.posn.y, distance, this.height - distance);
      }

      if (this.options.icon) {
        v.$el.translate(v.posn.x, v.posn.y);
      } else {
        v.$el.setCenter(v.posn);
      }
    }

    for (const e of this.edges) {
      if (e.vertices[0] === e.vertices[1]) {
        // Connected to self
        if (!center) center = Point.average(...this.vertices.map(v => v.posn));

        const v = new Vector(e.vertices[0].posn.x - center.x, e.vertices[0].posn.y - center.y).unitVector;

updateWater() {
    let noChange = true;

    for (let x = 0; x < this.sx; x++) {
      for (let y = 0; y < this.sy; y++) {

        const left = (x === 0) ? 0 : this.depthMap1[x - 1][y];
        const right = (x === this.sx - 1) ? 0 : this.depthMap1[x + 1][y];
        const top = (y === 0) ? 0 : this.depthMap1[x][y - 1];
        const bottom = (y === this.sy - 1) ? 0 : this.depthMap1[x][y + 1];

        let val = left + right + bottom + top;
        val = (val / 2 - this.depthMap2[x][y]) * this.damping;  // Damping
        val = clamp(val, -this.clipping, this.clipping);  // Clipping

        this.depthMap2[x][y] = val;
        if (Math.abs(val) > THRESHOLD) noChange = false;
      }
    }

    // Swap buffer references
    [this.depthMap1, this.depthMap2] = [this.depthMap2, this.depthMap1];

    return noChange;
  }

arrange(positions: SimplePoint[] = []) {
    let center: Point|undefined = undefined;

    for (const [i, v] of this.vertices.entries()) {
      v.posn = positions[i] || v.posn;

      if (this.options.bound) {
        let distance = this.options.r || 5;
        v.posn.x = clamp(v.posn.x, distance, this.width - distance);
        v.posn.y = clamp(v.posn.y, distance, this.height - distance);
      }

      if (this.options.icon) {
        v.$el.translate(v.posn.x, v.posn.y);
      } else {
        v.$el.setCenter(v.posn);
      }
    }

    for (const e of this.edges) {
      if (e.vertices[0] === e.vertices[1]) {
        // Connected to self
        if (!center) center = Point.average(...this.vertices.map(v => v.posn));

        const v = new Vector(e.vertices[0].posn.x - center.x, e.vertices[0].posn.y - center.y).unitVector;
        const v0 = new Vector(v[0] + v[1], v[1] - v[0]).scale(40);

function redraw() {
    const a = p * Math.PI;
    const dx = 60 + a * 100;
    const end = Point.fromPolar(2 * a + Math.PI / 2, 50).shift(dx, 55);

    // Note: .setTransform() breaks in Safari because of transform-origin.
    $wheel.css('transform', `translate(${a * 100}px,0) rotate(${2 * a}rad)`);
    $line.setAttr('d', `M ${60} ${105} L ${dx} ${105}` +
                       `A 50 50 0 ${p < 0.5 ? 1 : 0} 0 ${end.x} ${end.y}`);
  }