let graph;

const pps = -1.5;

​

function setup() {

  createCanvas(400, 400);

  grid = new Grid();

  graph = new Graph();

​

}

​

function draw() {

  background(255);

  grid.draw();

  graph.draw();

  graph.update();

  grid.update();

    graph.onMouse(mouseY);

​

}

​

class Graph { 

  constructor() {

    this.points = [];

  }

  update() {

    for(let i = this.points.length - 1; i >= 0; i-- ) {

      let newVal = this.points[i].mx + pps;

      if (newVal < 0) {

        this.points.splice(i, 1);

      }

      else {

        this.points[i].mx = newVal;

      }

    }

  }

  onMouse(my) {

    let y;

    let lastPoint = this.points[this.points.length - 1];

    if (my > height - 20) y = height - 20;

    else if (my < 20) y = 20;

    else y = my;

​

    this.points.push({mx: width, my: y})

  }

  draw() {

    stroke('#0066ff')

    strokeWeight(4);

    for (let i = 0; i < this.points.length - 1; i++) {

      line(this.points[i].mx, this.points[i].my, this.points[i+1].mx, this.points[i+ 1].my);

    }

  }

}

​

class Grid {

​

  constructor() {

    this.numRows = 5;

    this.numCols = 10;

    this.rowOverflow = 2;

​

    this.rows = [];

    for (let i = 0; i < this.numRows; i++) {

      this.rows.push(i * height / this.numRows);

    }

    this.cols = []

    for (let i = 0; i < this.numCols; i++) {

      this.cols.push(i * width / this.numCols);

    }

​

  }

​

  update() {

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

      let newVal = this.cols[i] + pps;

      if (newVal < 0) {

        newVal = width;

      }

      this.cols[i] = newVal;

    }

  }

​

  draw() {

    stroke(153);

    strokeWeight(0.5);

    this.rows.forEach(lin => {

      line(0, lin, width, lin);

    })

​

    this.cols.forEach(lin => {

      line(lin, 0, lin, height);

    })

​

  }

​

​

​

​

}