let maps = [];

let val = 0;

let s = "Clique para avançar a linha de tempo"

function preload() {

  // maps[0] = loadImage('maps/1700s_Map_Portuguese_FINAL.png');

  maps[0] = loadImage('maps/1800s_Map_Portuguese_FINAL.png');

  maps[1] = loadImage('maps/Current_Map_Portuguese_FINAL.png');

}

​

​

function setup() {

  createCanvas(innerWidth, innerWidth*1.01);

  console.log(innerWidth);

  console.log(windowWidth);

  slider = createSlider(0, 1, 0);

  let val = slider.value();

  image(maps[val], 0, 0, windowWidth, windowWidth*1.01);

  slider.position((windowHeight * 1.01 *.2)/2, windowHeight - windowHeight * .1);

  var options = {

    preventDefault: true

  };

  var hammer = new Hammer(document.body, options);

  hammer.get('swipe').set({

    direction: Hammer.DIRECTION_ALL

  });

​

  hammer.on("swipe", swiped);

}

​

function draw() {

  val = slider.value();

  let imgWidth = windowHeight * 1.01;

  background(255);

  image(maps[val], 0, 0, innerWidth, innerWidth*1.01);

  let sliderWidth = innerWidth *.8;

  slider.position((innerWidth - sliderWidth)/2, innerWidth * .95 );

  slider.style('width', sliderWidth + "px");

  fill('#2F422C');

  textSize(20);

  if (textWidth(s) > imgWidth){

    textSize(14);

  }

  text(s, (innerWidth - textWidth(s))/2, innerWidth * .90);

  fill(255);

}

​

function swiped(event) {

  if (event.direction == 4) {

    val-=1;

    if (val < 0){

      val = 0;

    }

  } else if (event.direction == 2) {

    val+=1;

    if (val > 1){

      val = 1;

    }

  }

  slider.value(val);

}

​

function windowResized() {

  resizeCanvas(innerWidth, innerWidth*1.01);

  // for (let i = 0; i < maps.length; i++){

  //   maps[i].resize(windowWidth,0);

  // }

}

​

​

​