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

  (i, j) => !isPrime(i) ? '' : (j === 1 || j === i - 1) ? 'blue' : (j > 1 && j < i - 1) ? 'teal' : '',  // primes
  (i, j) => colours[i % 8] + ((j > i / 2) ? ' plus visible' : ' light') // fibonacci

export function riemann($section) {
  let dx = 23.5;
  let dy = 27;
  let y0 = 280;

  let y = y0;
  let points = [{ x: 0, y }];
  for (let i = 1; i <= 1000; ++i) {
    if (isPrime(i)) {
      points.push({ x: (i-1) * dx, y });
      y -= dy;
      points.push({ x: (i-1) * dx, y });
    }
  }
  $section.$('.pi').points = points;

  let $smallPrimes = $section.$('.small-primes');
  [3, 5, 7, 11, 13, 17, 19, 23, 29].forEach(function(p, i) {
    $N('line', { x1: (p-1) * dx, y1: y0, x2: (p-1) * dx,
      y2: y0 - dy * (i+1) }, $smallPrimes);
  });

  let $numbers = $section.$('.numbers');
  for (let i = 2; i < 30; ++i) {
    $N('text', { html: i, x: (i-1)*dx, y: y0+18, 'class': isPrime(i) ? 'prime' : '' }, $numbers);

points.push({ x: (i-1) * dx, y });
      y -= dy;
      points.push({ x: (i-1) * dx, y });
    }
  }
  $section.$('.pi').points = points;

  let $smallPrimes = $section.$('.small-primes');
  [3, 5, 7, 11, 13, 17, 19, 23, 29].forEach(function(p, i) {
    $N('line', { x1: (p-1) * dx, y1: y0, x2: (p-1) * dx,
      y2: y0 - dy * (i+1) }, $smallPrimes);
  });

  let $numbers = $section.$('.numbers');
  for (let i = 2; i < 30; ++i) {
    $N('text', { html: i, x: (i-1)*dx, y: y0+18, 'class': isPrime(i) ? 'prime' : '' }, $numbers);
  }

  points = list(3, 1000).map(i => ({ x: (i-1) * dx, y: y0 - dy * i / Math.log(i) }));
  $section.$('.log').points = points;

  let $svg = $section.$('svg');
  let $zoom = $section.$('.zoom-icon');

  $zoom.on('click', () => {
    $section.score('zoom');
    $svg.toggleClass('zoom');
  });
}

export function primes2($step: Step) {
  const $numbers = $step.$$('.eratosthenes *');
  const $gesture = $step.$('x-gesture') as Gesture;
  eratosthenes($step, $numbers, $gesture, [7, 5, 3, 2],
      ['l-yellow', 'l-green', 'l-blue', 'l-red']);

  const $plot = $step.$('x-coordinate-system') as CoordinateSystem;
  const primes = [new Point(2, 1)];
  let n = 1;
  for (let i = 3; i < 247; ++i) {
    primes.push(new Point(i, n));
    if (isPrime(i)) {
      n += 1;
      primes.push(new Point(i, n));
    }
  }
  $plot.setSeries(primes);
}

export function riemann($section: Step) {
  let dx = 23.5;
  let dy = 27;
  let y0 = 280;

  let y = y0;
  const points = [{x: 0, y}];
  for (let i = 1; i <= 1000; ++i) {
    if (isPrime(i)) {
      points.push({x: (i - 1) * dx, y});
      y -= dy;
      points.push({x: (i - 1) * dx, y});
    }
  }

  const $pi = $section.$('.pi') as SVGView;
  $pi.points = points;

  let $smallPrimes = $section.$('.small-primes');
  [3, 5, 7, 11, 13, 17, 19, 23, 29].forEach(function (p, i) {
    $N('line', {
      x1: (p - 1) * dx, y1: y0, x2: (p - 1) * dx,
      y2: y0 - dy * (i + 1)
    }, $smallPrimes);
  });

$cells.forEach($c => {
      if (!isPrime(+$c.text)) return;
      setTimeout(() => $c.addClass('red'), delay * 80);
      delay += 1;
    });
  }, 3000);

$cells.forEach($c => {
      if (!isPrime(+$c.text)) return;
      setTimeout(() => $c.addClass('red'), delay * 80);
      delay += 1;
    });
  }, 3000);

const $pi = $section.$('.pi') as SVGView;
  $pi.points = points;

  let $smallPrimes = $section.$('.small-primes');
  [3, 5, 7, 11, 13, 17, 19, 23, 29].forEach(function (p, i) {
    $N('line', {
      x1: (p - 1) * dx, y1: y0, x2: (p - 1) * dx,
      y2: y0 - dy * (i + 1)
    }, $smallPrimes);
  });

  let $numbers = $section.$('.numbers');
  for (let i = 2; i < 30; ++i) {
    $N('text', {
      html: i, x: (i - 1) * dx, y: y0 + 18, 'class': isPrime(i) ? 'prime' : ''
    }, $numbers);
  }

  const $log = $section.$('.log') as SVGView;
  $log.points =
      list(3, 1000).map(i => ({x: (i - 1) * dx, y: y0 - dy * i / Math.log(i)}));

  let $svg = $section.$('svg')!;
  let $zoom = $section.$('.zoom-icon')!;

  $zoom.on('click', () => {
    $section.score('zoom');
    $svg.toggleClass('zoom');
  });
}