​

drawing order?

- paint background

- paint canyon

- paint pillars

- paint a set of lines to the overlay graphics object lineOverlay

- image(lineOverlay);

- paint HUD

- clear lineOverlay?

​

​

*/

​

const level1={N:11,M:3,W:13,pillars:[[1,9],[4,2],[4,6],[8,7],[11,4],[15,4],[15,10],[19,4],[19,5],[19,10],[26,1]],disks:[[2,1],[3,100],[4,1e4]],answer:206};

const level2={N:4,M:4,W:100,pillars:[[0,10],[0,30],[0,55],[0,80]],disks:[[5,4],[10,4],[15,6],[20,10]],answer:24};

​

const MIN_WIDTH = 2;

const MIN_RADIUS = 1;

const MY = 50;

const MX = 50;

var lineOverlay;

​

function setup() {

  createCanvas(400, 400);

  lineOverlay = createGraphics(400,400);

  lineOverlay.clear();

}

​

function addLevelMetaData(level){

  level.max_x = 0;

  for (const p of level.pillars){

    if (p[0] > level.max_x) {level.max_x = p[0];}

  }

  return level;

}

​

function mapCircle(r,x,y, l) {

  var cw = 2*map(r, 1, l.max_x, MIN_WIDTH, width-(2*MX));

  var ch = 2*map(r, 1, l.W, 0, height-(2*MY));

  ellipse(mapX(x,l), mapY(y,l), cw, ch);

}

​

function debugLevel(l){

  for (const prop of Object.entries(l)){

    console.log(prop);

  }

}

​

function mapX(x, level) {

  return map(x, 0, level.max_x+1, MX, width-MX+1);

}

​

function mapY(y, level) {

  return map(y, 0, level.W+1, height-MY-1, MY );

}

​

​

// hacky thing from some SO post

function sleep(millisecondsDuration) {

  return new Promise((resolve) => {

    setTimeout(resolve, millisecondsDuration);

  })

}

​

function paintLevel(level){

  strokeWeight(1);

  stroke(0,0,100,30);

  // draw grid

  for (var i = 0; i < level.max_x+1; i+=(level.max_x/10)){

    console.log(i);

    line(mapX(i, level),MY,mapX(i,level),height-MY);

  }

  for (i = 0; i < level.W+1; i+=(level.W/10)){

    console.log(i);

    line(MX,mapY(i, level),width-MX,mapY(i,level));

  }

  // draw edges

  stroke(0,20,0,100);

  line(MX, MY, width-MX, MY);

  line(MX, height-MY, width-MX, height-MY);

  line(width-MX, MY, width-MX, height-MY);

  line(MX, MY, MX, height-MY);

  // draw points with ext

  strokeWeight(3);

  for (const p of level.pillars){

    let px = mapX(p[0], level)

    let py = mapY(p[1], level)

    point(px, py);

    text(`${p[0]} ${p[1]}`, px, py);

  }

  noFill();

  mapCircle(3,19,10,level);

}

​

function randomCanvasThingsExperiment(level){

  var had = new Set();

  var timeOffset = 1;

  for (const p of level.pillars){

    for (const l of level.pillars){

      if ((p == l) || had.has([l,p]) ) {continue;}

      timeOffset++;

      let px = mapX(p[0], level);

      let py = mapY(p[1], level);

      let lx = mapX(l[0], level);

      let ly = mapY(l[1], level);

      sleep(timeOffset*5).then(function drawLines(){

        lineOverlay.line(px, py, lx, ly);

      });  

    }

    sleep(timeOffset*10).then(function drawLines2(){

        image(lineOverlay, 0, 0);

      }); 

  }

}

​

function draw() {

  background(220);

  addLevelMetaData(level1);

  randomCanvasThingsExperiment(level1);

  paintLevel(level1);

  noLoop();

}