Drawing - Playback JSON Example

mySketch
xxxxxxxxxx
 
// Drawing - Playback JSON Example
// @clayheaton
// Example of how to display data exported from
// https://openprocessing.org/sketch/1450829
​
let designs;
let d1, d2, d3, d4;
​
function preload() {
  // This test file contains 4 designs
  designs = loadJSON("designs_3833.json");
  // Structure:
  // 
  //  designs = {"payload":[
  //    design1,
  //    design2,
  //    [           A design consists of strokes
  //      stroke1,  
  //      stroke2,
  //      [
  //        point1, A stroke is an array of points
  //        point2
  //        {
  //          "x":-0.4, x value between -1, 1
  //          "y": 1.2, y value between -1, 1
  //          "t": 345  milliseconds since stroke started
  //        }
  //        ]
  //    ]}
}
​
let minDim, maxMillis;
let a = 0;
​
function setup() {
  createCanvas(windowWidth, windowWidth);
  background(255);
  minDim = min(width, height);
  d1 = designs.payload[0];
  d2 = designs.payload[1];
  d3 = designs.payload[2];
  d4 = designs.payload[3];
​
  maxMillis = getMaxMillisecond(designs);
​
}
​
function draw() {
  background(255);
  a += 0.001;
  textSize(50);
  fill(255, 0, 0);
  text("This is not at all what I recorded!", 250, 610);
  let milli = millis() % maxMillis;
  let scaleMod = map(sin(a), -1, 1, 0.1, 0.25);
​
  drawDesign(d1, width * 0.25, height * 0.25, minDim * scaleMod, milli, false, false);
  drawDesign(d2, width * 0.75, height * 0.25, minDim * scaleMod, milli, false, false);
  drawDesign(d3, width * 0.25, height * 0.75, minDim * scaleMod, milli, true, color(255, 0, 0));
  drawDesign(d4, width * 0.75, height * 0.75, minDim * scaleMod, milli, false, false);
}
​
function getMaxMillisecond(data) {
  maxM = -999;
  data.payload.forEach(d => {
    d.forEach(s => {
      s.forEach(p => {
        maxM = max(p.t, maxM);
      });
    });
  });
  return maxM;
}
​
function drawDesign(design, x, y, scale_, milli, doClose, fillColor) {
  push();
  translate(x, y);
  scale(scale_);
  strokeWeight(2 / (scale_));
  if (!fillColor){
    noFill();
  } else {
    fill(fillColor);
  }
  design.forEach(s => {
    beginShape();
    s.forEach(p => {
      if (milli > p.t) {
        vertex(p.x, p.y);
      }
    })
    if (doClose){
      endShape(CLOSE);
    } else {
      endShape();
    }
    
  });
  pop();
}