let showPoints = true;

let scaleFactor = 10;

let viewSize;

let pictograms = [];

let pictoCounter = 0;

​

function preload() {

  let whatNow = (data) => {

    let lines = [];

    let points = data.points;

    let currentLine = [];

    points.forEach(p => {

      // adjust scale

      let dot = {

        x: p[0] * scaleFactor,

        y: p[1] * scaleFactor

      }

      currentLine.push(createVector(dot.x, dot.y));

      if (p[2] !== 0) {

        const lineCopy = JSON.parse(JSON.stringify(currentLine));

        lines.push(lineCopy);

        currentLine = [];

      }

    });

    pictograms.push(lines);

  };

  for (let i = 1; i <= 100; i++) {

    loadJSON("media/" + i + ".json", whatNow);  

  }

}

​

let drawLines = (lines) => {

  lines.forEach(l => {

    beginShape();

    const pStart = l[0];

    const pEnd = l[l.length - 1];

    curveVertex(pStart.x, pStart.y);

    l.forEach(p => {

      curveVertex(p.x, p.y);

      drawPoint(p.x, p.y);

    });

    curveVertex(pEnd.x, pEnd.y);

    endShape();

  });

}

​

function drawPoint(x, y) {

  if (showPoints) {

    strokeWeight(4);

    point(x, y);

    strokeWeight(2);

  }

}

​

function setup() {

  viewSize = {x: 17 * scaleFactor, y: 35 * scaleFactor};

  createCanvas(viewSize.x, viewSize.y);

  frameRate(10);

}

​

function draw() {

  background(220);

  noFill();

  stroke(0);

  strokeWeight(2);

  let lines = pictograms[pictoCounter++];

  drawLines(lines);

  strokeWeight(1);

  textSize(12);

  text(pictoCounter, 10, 20);

  strokeWeight(2);

  if (pictoCounter === pictograms.length) {

    pictoCounter = 0;

  }

}