JSFiddle - React, Tailwind, and code Playground

by asemahle

HTML

<canvas id="canvas" width="700px" height="700px"></canvas>

JavaScript

/** Prepare the canvas **/
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.translate(canvas.width/2,canvas.height/2);
ctx.scale(1, -1);
const canvasMinX = -350;
const canvasMinY = -350;

/** Settings for the grid **/
const gridSize = 500;
const gridSpacing = 5;

/** List of matrix generating functions
   *  Functions take in 2 params "v" and "t"
   *  "v" is the vector on which the matrix will be applied
   *  "t" is time passed in the simulation in seconds
   *  Function should return a 2 by 2 matrix. An optional 3rd row can be included to redefine the origin
   */
const identity = (v, t) => {
  return [[1, 0], [0, 1]];
};

const rotation = () => {
  const a = Math.PI/4;
  return [[Math.cos(a), -Math.sin(a)], [Math.sin(a), Math.cos(a)]];
};

const s = () => {
  return [[1.5, 2], [0.4, 2.3]];
};

const swirl = (v, t) => {
  t -= Math.PI;
  if (t<0) t = 0;

  const dist = Math.sqrt(v[0]*v[0] + v[1]*v[1]);
  const a = dist * (Math.sin(t/10)) / 100;
  return [[Math.cos(a), -Math.sin(a)], [Math.sin(a), Math.cos(a)]];
};

const breath = (v, t) => {
  const scale = (Math.cos(t) + 1.5) / 1.5;
  return [
    [scale,0],
    [0,scale]
  ]
};

const bubble = (offset) => {
  return (v, t) => {
    t += offset;
    const center = [
      200 * Math.sin(t),
      200 * Math.sin(t) * Math.cos(t)
    ];
    const dx = v[0] - center[0];
    const dy = v[1] - center[1];
    const dist = Math.sqrt(dx * dx + dy * dy);
    const scale = Math.max(1, 10/(1+Math.sqrt(dist)));
    return [
      [scale,0],
      [0,scale],
      center
    ];
  };
} ;

const scale = (v) => {
  const centerX = 100.;
  const centerY = 100.;
  const deltaX = (v[0] - centerX);
  const deltaY = (v[1] - centerY);
  const dist = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
  const f = 1 + 0.01 * dist;
  return [[f, 0],[0, f]];
};

/**
   * Returns a 2d array representing a cartesian grid
   */
function getGrid(size, spacing) {
  const max = Math.floor(size / 2);
 ...