Work in progress. 

Put together quickly to satisfy current needs.

Not completely general yet. Eventually, I can

adapt the more general library I made on Khan Academy:

​

https://www.khanacademy.org/computer-programming/visualode-demo/6127327220629504

*/

​

let cnv; //canvas

let win; //graph window

let p, v; //point of application, tangent vector

let m = 10; //number of horizontal grid points on each semi-axis

let n = 10; //number of vertical grid points on each semi-axis

let hSpace, vSpace; //pixels between horizontal, vertical grid points

let arrows = [];

​

//CUSTOM FUNCTIONS

function xPrime(v) {

  return v.y;

}

​

function yPrime(v) {

  let m = 1;

  let d = 0.5;

  let k = 2;

  return -(d / m) * v.y - (k / m) * v.x;

}

​

//SETUP AND DRAW

function setup() {

  cnv = createCanvas(400, 400);

  win = createGraphWindow(width / 2, height / 2, 1, 1);

  hSpace = (width / 2) / m;

  vSpace = (height / 2) / n;

  //create arrows

  for (let i = -m; i <= m; i++) {

    for (let j = -n; j <= n; j++) {

      p = createVector(i * hSpace, j * vSpace);

      v = createVector(xPrime(p), yPrime(p));

      arrows.push(createArrow(win, p, v));

    }

  }

}

​

function draw() {

  //draw window

  background(51);

  stroke(255);

  strokeWeight(1);

  win.axis('horizontal', cnv);

  win.axis('vertical', cnv);

  //draw arrows

  strokeWeight(1.2);

  for (let i = 0; i < arrows.length; i++) {

    arrows[i].draw(12); //draw arrows with given length

  }

}