main: {

    points: [],

    yoff: 100,

    xsub: 40,

    max: 80,

  },

  second: {

    points: [],

    yoff: 200,

    xsub: 20,

    max: 40,

  },

  third: {

    points: [],

    yoff: 300,

    xsub: 10,

    max: 20,

  },

  fourth: {

    points: [],

    yoff: 400,

    xsub: 5,

    max: 10,

  },

};

​

const pointsArr = [];

​

function setup() {

  createCanvas(600, 800);

  floor(random(0, 80))

  Object.keys(pointGroups).forEach(name => {

    const pointGroup = pointGroups[name];

    pointGroup.points.push(floor(random(0, pointGroup.max)));

  });

  pointsArr.push(floor(random(0, 80) + random(0, 40) + random(0, 20) + random(0, 10)));

}

​

function draw() {

  background(220);

  Object.keys(pointGroups).forEach(name => {

    const pointGroup = pointGroups[name];

    if (frameCount <= 400) {

      if (frameCount % pointGroup.xsub === 0) {

        pointGroup.points.push(floor(random(0, pointGroup.max)));

      }

    }

  });

  if (frameCount <= 400) {

    if (frameCount % 5 === 0) {

      pointsArr.push(floor(random(0, 80) + random(0, 40) + random(0, 20) + random(0, 10)));

    }

  }

  line(10, 100, 410, 100);

  line(10, 200, 410, 200);

  line(10, 300, 410, 300);

  line(10, 400, 410, 400);

  line(10, 550, 410, 550);

  line(10, 700, 410, 700);

​

  Object.keys(pointGroups).forEach(name => drawPoints(name));

  drawSum();

  if (pointsArr.length > 1) {

    // text(`${pointsArr[0]}`, 10, 700 - pointsArr[0]);

  }

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

    line(10 + 5 * i, 700 - pointsArr[i], 10 + 5 * (i + 1), 700 - pointsArr[i + 1]);

    // text(`${pointsArr[i +1]}`, 10 + 5 * (i + 1), 700 - pointsArr[i + 1]);

  }

}

​

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]);

  }

}

​

function drawSum() {

  const {

    points,

    xsub

  } = pointGroups.fourth;

  const allPoints = points.map((point, index) => {

    let sum = point;

    const step = index * xsub;

    if (step % pointGroups.main.xsub === 0) {

      const mIndex = step / pointGroups.main.xsub;

      sum += pointGroups.main.points[mIndex];

    } else {

      const mIndex = floor(step / pointGroups.main.xsub);

      if (mIndex + 1 < pointGroups.main.points.length) {

        const diff = pointGroups.main.points[mIndex + 1] - pointGroups.main.points[mIndex];

        const change = diff / (pointGroups.main.xsub / xsub);

        sum += pointGroups.main.points[mIndex] + change;

      }

    }

    if (step % pointGroups.second.xsub === 0) {

      const mIndex = step / pointGroups.second.xsub;

      sum += pointGroups.second.points[mIndex];

    } else {

      const mIndex = floor(step / pointGroups.second.xsub);

      if (mIndex + 1 < pointGroups.second.points.length) {

        const diff = pointGroups.second.points[mIndex + 1] - pointGroups.second.points[mIndex];

        const change = diff / (pointGroups.second.xsub / xsub);

        sum += pointGroups.second.points[mIndex] + change;

      }

    }

    if (step % pointGroups.third.xsub === 0) {

      const mIndex = step / pointGroups.third.xsub;

      sum += pointGroups.third.points[mIndex];

    } else {

      const mIndex = floor(step / pointGroups.third.xsub);

      if (mIndex + 1 < pointGroups.third.points.length) {

        const diff = pointGroups.third.points[mIndex + 1] - pointGroups.third.points[mIndex];

        const change = diff / (pointGroups.third.xsub / xsub);

        sum += pointGroups.third.points[mIndex] + change;

      }

    }

    return sum;

  });

  if (allPoints.length > 1) {

    // text(`${allPoints[0]}`, 10, 550 - allPoints[0]);

  }

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

    line(10 + xsub * i, 550 - allPoints[i], 10 + xsub * (i + 1), 550 - allPoints[i + 1]);

    // text(`${allPoints[i +1]}`, 10 + xsub * (i + 1), 550 - allPoints[i + 1]);

  }

}