​

function setup() {

  createCanvas(600, 600);

  graph = new Graph(100, 200);

}

​

function draw() {

  background(220);

  graph.update();

  graph.draw();

  if (frameCount <= 400) {

    if (frameCount % 5 === 0) {}

  }

  line(width * 0.1, 200, width * 0.9, 200);

}

​

function drawPoints(name) {

  const {

    points,

    xsub,

    yoff

  } = pointGroups[name];

  if (points.length > 1) {

    text(`${points[0]}`, 10, yoff - points[0]);

  }

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

    line(10 + xsub * i, yoff - points[i], 10 + xsub * (i + 1), yoff - points[i + 1]);

    text(`${points[i +1]}`, 10 + xsub * (i + 1), yoff - points[i + 1]);

  }

}

​

class Graph {

  constructor(max, yoff) {

    this.max = max;

    this.yoff = yoff;

    this.points = [floor(random(0, max))];

    this.subA = 40;

    this.subB = 20;

    this.subC = 10;

    this.subD = 5;

    this.next = floor(random(0, max));

  }

​

  update() {

    if (frameCount > width * 0.8) return;

      console.log(frameCount, floor(frameCount / this.subD), frameCount % this.subD);

    if (frameCount % this.subD === 0) {

      const index = floor(frameCount / this.subA);

      const diff = this.next - this.points[index];

      const change = diff / (this.subA / this.subD);

      this.points.push(this.points[floor(frameCount / this.subD)] + change);

    }

    if (frameCount % this.subA === 0) {

      this.next = floor(random(0, this.max));

    }

  }

​

  draw() {

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

      line(

        width * 0.1 + this.subD * i,

        this.yoff - this.points[i],

        width * 0.1 + this.subD * (i + 1),

        this.yoff - this.points[i + 1]

      );

    }

  }

}