var options, hammer;

var startMsg = "SWIPE LEFT:DISCARD, RIGHT:RETAIN";

var instructMsg;

var discards = 0;

var discardsMin = 1;

var shuffles = 0;

var shufflesMax = 5;

var resultMsg = "";

var splitString;

​

var myFontBook, myFontBold;

var Title, Logo, Button01;  

var pic = [];

var randImage = 0;

var randomImage = false;

var randColour;

var line1, line2, line3, line4;

var button1, button2, region1, region2, region3, region4, region5;

var countDiscard = 0;

var countRetain = 0;

​

function preload() {

  myFontBook = loadFont('Assets/Font/GothamRounded-Book.otf');

  myFontBold = loadFont('Assets/Font/GothamRounded-Bold.otf');

  Title = loadImage('Assets/Images/Title.png');

  Logo = loadImage('Assets/Images/Logo.png');

  pic[0] = loadImage('Assets/Images/Pic00.png');

  pic[1] = loadImage('Assets/Images/Pic01.png');

  pic[2] = loadImage('Assets/Images/Pic02.png');

  pic[3] = loadImage('Assets/Images/Pic03.png');

  pic[4] = loadImage('Assets/Images/Pic04.png');

  pic[5] = loadImage('Assets/Images/Pic05.png');

  pic[6] = loadImage('Assets/Images/Pic06.png');

  pic[7] = loadImage('Assets/Images/Pic07.png');

  pic[8] = loadImage('Assets/Images/Pic08.png');

​

}

​

​

function setup() {

​

  createCanvas(windowWidth, windowHeight);

  background(0);

  imageMode(CENTER);

  textAlign(CENTER);

  textFont(myFontBook);

  textSize(24);

  noStroke();

  fill(255);

  drawScene1();

​

}

​

function draw() {

}

​

function drawScene1(){

  background(0);

  button1 = createImg('Assets/Images/Button001.png'); 

  //button1 = createButton ("button1");

  button1.mousePressed(drawScene2);

  button1.position(width/2-100,height/1.5);

  image(Title,width/2,height/2.2);

}

​

function drawScene2(){

  background(0);

  // do some stuff

  button1.hide();

  button2 = createButton ("Proceed");

  button2.mousePressed(drawScene3);

  button2.position(width/2-30,height/2+50);

  line2=text("INSTRUCTIONS PAGE",width/2,30);

}

​

function drawScene3(){

  background(0);

  // do some stuff

  button2.hide();

  region1 = createButton ("Region1");

  region1.mousePressed(drawScene4);

  region1.position(width/2-30,height/2-200);

  region2 = createButton ("Region2");

  region2.mousePressed(drawScene4);

  region2.position(width/2-30,height/2-100);

  region3 = createButton ("Region3");

  region3.mousePressed(drawScene4);

  region3.position(width/2-30,height/2);

  region4 = createButton ("Region4");

  region4.mousePressed(drawScene4);

  region4.position(width/2-30,height/2+100);

  region5 = createButton ("Region5");

  region5.mousePressed(drawScene4);

  region5.position(width/2-30,height/2+200);

  line3=text("USER TO SELECT A REGION",width/2,30);

}

​

/*

function drawScene4(){

  background(80);

  button3.hide();

​

  let colours = ['#e9af28', '#101627', '#fb5444', '#ab987d'];

  let colour = random(colours);

  background(colour);

  randImage = int(random(1, 9));

  image(pic[randImage], width / 2, height / 2);  

}

*/

function drawScene4() {

  background(0);

  region1.hide();

  region2.hide();

  region3.hide();

  region4.hide();

  region5.hide();

  line4=text("OVERLAY OF SWIPE INDICATORS",width/2,height/2);

    // set options to prevent default behaviors for swipe, pinch, etc

  options = {

    preventDefault: true

  };

​

  // document.body registers gestures anywhere on the page

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

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

    direction: Hammer.DIRECTION_ALL

  });

​

    hammer.on("swipe", swipePage);

}

​

function swipePage(event) {

  background(0);

  textAlign(CENTER);

  text(startMsg, width / 2, height / 2);

  text("total number of left swipes " + discards, width / 2, height / 4);

  text("total number of images " + shuffles, width / 2, height / 6);

  console.log(startMsg);

  if (event.direction == 4) {

    startMsg = "you swiped right";

    shuffles ++;

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

    startMsg = "you swiped left";

    shuffles ++;

    discards ++;

  } 

​

  else if (event.direction == 8) {

    startMsg = "you swiped up";

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

    startMsg = "you swiped down";

  }

​

  resultPage();

}

​

function resultPage(){

  if (shuffles > shufflesMax && discards > discardsMin) {

    hammer.off("swipe", swipePage);

    background(255, 221, 0);  

    resultMsg = "Well done! You have/successfully discarded/" + discards + " out of " + shufflesMax + " people./This equates to " + discards*20 + "% of/the selected population.";

    fill(0, 0, 0);

    textFont(myFontBold); 

    textAlign(CENTER);

  splitString = split(resultMsg, '/');

  text(splitString[0], width / 2, height / 2.65);

  text(splitString[1], width / 2, height / 2.35);

  text(splitString[2], width / 2, height / 2.1);

  text(splitString[3], width / 2, height / 1.9);

  text(splitString[4], width / 2, height / 1.75);

  //text(splitString[5], width / 2, height / 1.25);

  }

    if (shuffles > shufflesMax && discards <= discardsMin) {

    hammer.off("swipe", swipePage);

    background(255, 221, 0); 

    resultMsg = "Too bad! You were/only able to discard/" + discards + " out of " + shufflesMax + " people./This equates to " + discards*20 + "% of/the selected population.";;

    fill(0, 0, 0);

    textFont(myFontBold);

      textAlign(CENTER);

    //text(finalmsg, width / 2, height / 2);

  splitString = split(resultMsg, '/');

  text(splitString[0], width / 2, height / 2.65);

  text(splitString[1], width / 2, height / 2.35);

  text(splitString[2], width / 2, height / 2.1);

  text(splitString[3], width / 2, height / 1.9);

  text(splitString[4], width / 2, height / 1.75);

  text(splitString[5], width / 2, height / 1.25);

  }

}

​

​

​