Rough library for visualizing 2D vectors (linear algebra), inspired by Vector.js.

Goal: simple diagrams of interactive 2D vectors on a Cartesian grid

Current abilities:

• Graph and style 2D vectors
• Resize vectors via mouse or touch
• Vector labels auto-update
• Easily add sum and difference vectors (which also auto-update)
• "Mirror" vectors across grids

See demo. Example usage:

let grid = new Grid(`container`, {
  maxX: 200, maxY: 200,
  minX: -200, minY: -200,
  defaultStyles: {
    line: {
      strokeWidth: `2px`,
      stroke: `red`,
    }
  }
});

let vecA = grid.vector('a', { to: {x: 20, y: 100} });

let vecB = grid.vector('b', { to: {x: 150, y: 150} });

let vecAMinusB = grid.vectorDifference(vecA, vecB,
  {
    styles: {stroke: `blue`},
    labelPosition: Vector.LABEL_POSITIONS.midPoint,
    labelContent: vector => `|${vector.name}| ≈ ${Math.round(vector.length)}`
  }
);
let vecAPlusB = grid.vectorSum(vecA, vecB,
  {
    styles: {stroke: `green`},
    labelPosition: Vector.LABEL_POSITIONS.midPoint,
    labelContent: vector => `|${vector.name}| ≈ ${Math.round(vector.length)}`
  }
);

Motivation:

• Demonstrating vectors for articles (eg https://blog.shalvah.me/posts/learn-svg-by-drawing-an-arrow)
• Schoolwork

Inspirations:

• https://vectorjs.org/
• https://www.petercollingridge.co.uk/tools/interactivesvgjs/
• https://github.com/ksassnowski/vueclid (to which I'll probably switch)