let data,d;

​

let index = 0, running = true;

​

let block_length = 600 / 24;

​

let stroke_weight = 40;

​

let layer, layer_y = 600 - stroke_weight;

​

function preload() {

  background_image = loadImage("background.png");

  // data = loadJSON('data.json', drawData);

  data = loadJSON('data.json');

​

  layer = createGraphics(600, 600);

}

​

function setup() {

  createCanvas(600, 600);

​

  d = data.sheet;

}

​

function draw() {

  noLoop();

  image(background_image,0,0);

​

  drawData();

​

  moveY();

​

  // masking();

  // image(background_image,0,0);

}

​

function drawData() {

  if(running) {

    layer.strokeWeight(stroke_weight);

    layer.stroke(255);

​

    let thisDate = d[index];

    let start = thisDate.Start.split('.');

    let end = thisDate.End.split('.');

​

    if(thisDate.Drinking == 1) {

      layer.stroke('yellow');

    }

​

    layer.line(6*block_length + int(start[0])*block_length + int(start[1])*block_length/60, 

      (index%7)*stroke_weight*1.4 + stroke_weight, 

      6*block_length + int(end[0])*block_length + int(end[1])*block_length/60, 

      (index%7)*stroke_weight*1.4 + stroke_weight);

​

    index +=1; 

​

    if(index % 7 == 0 || index == d.length) {

      running = false;

    }

​

    setTimeout(drawData, 300);

  } else {

    // index = 0;

    running = true;

    setTimeout(()=> {

      image(background_image,0,0);

      layer = createGraphics(600, 600);

      layer_y = 600 - stroke_weight;

​

      if(index == d.length) {index = 0}

      drawData();

    }, 3000);

  }

}

​

function moveY() {

  layer_y -= 6;

​

  image(background_image,0,0);

  image(layer, 0, layer_y);

  setTimeout(moveY, 1);

}

​

function masking() {

  background_image.mask(layer);

}