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, discardb1, retain1;

var discards = 0;

var discardsMin = 1;

var shuffles = 0;

var shufflesMax = 5;

var resultMsg = "";

var splitString;

var resultMsg = "";

var splitString;

​

var resultMsg = "";

var splitString;

​

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 drawScenez(){

  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);

​

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

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

  discardb1 = createButton ("Discard");

  discardb1.mousePressed(discard);

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

  retainb1 = createButton ("Retain");

  retainb1.mousePressed(retain);

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

}

​

function discard (){

  discardb1.hide();

  retainb1.hide();

  shuffles ++;

  discards ++;

  if (shuffles < shufflesMax){

    drawScene4();

  } else {

    resultPage();

  }

}

​

function retain (){

  discardb1.hide();

  retainb1.hide();

  shuffles ++;

  if (shuffles < shufflesMax){

    drawScene4();

  } else {

    resultPage();

  }

}

function resultPage(){

  background(0); 

  if (discards > discardsMin) { 

​

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

    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);

  } else {  

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

    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);

  }

}

​

​

​