//Assets

var myFontBook;

var BG, BGSky, Title, Version, Intro, Instruction, SelectReg, SelDiscard, Planet, DataPad, RegionsBDis, RegionAll, RegionAH, RegionBH, RegionCH, backdis, nextdis;

var render = [];

var info = [];

var i = 0;

​

//Color palette

var color1 = '#220118';

var color2 = '#df5d4a';

var color3 = '#c23545';

var color4 = '#b7b7b7';

var color5 = '#f5f5f5';

var color6 = '#490f25';

​

//Page titles

var line2A, line2, line3, line4;

​

//Buttons

var homeb, introb, instructionsb, regionbA, regionbB, regionbC, regionbD, regionbE, regionsb, overlayb, discardb, retainb, resetb, exitb, backb, nextb;

​

//Counters

var selectedImg = 0;

var currentImg;

var discards = 0;

var discardsMin = 2;

var discardsMax = 3;

var shufflesMin = 0;

var shufflesMax = 10;

var randColour;

​

//Result page

var resultMsg = "";

var splitString;

​

var infoMsg;

var link;

​

function preload() {

  //Preload font

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

  //Preload images

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

  BGSky = loadImage('Assets/Images/BG-sky.png');

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

  Version = loadImage('Assets/Images/01-Version-1.png');

  Badge = loadImage('Assets/Images/BG-badge.png');

  Intro  = loadImage('Assets/Images/02A-Text-1.png');

  Instruction = loadImage('Assets/Images/02B-Text-1.png');

  SelectReg = loadImage('Assets/Images/03-Text-1.png');

  SelDiscard  = loadImage('Assets/Images/04-Text-1.png');

  Planet = loadImage('Assets/Images/03-Planet.png');

  RegionAll = loadImage('Assets/Images/03-Region-All.png');

  RegionsBDis = loadImage('Assets/Images/03-Button-1-Dis.png');

  RegionAH = loadImage('Assets/Images/03-Region-A-H.png');

  RegionBH = loadImage('Assets/Images/03-Region-B-H.png');

  RegionCH = loadImage('Assets/Images/03-Region-C-H.png');

  DataPad = loadImage('Assets/Images/06-datapad.png');

  /*

  for (i=1; i<=10; i++) {

  render[i] = loadImage('Assets/Renders/04-Pic-'+i+'.png');

  }

  */

  render[1] = loadImage('Assets/Renders/04-Pic-1.png');

  render[2] = loadImage('Assets/Renders/04-Pic-2.png'); 

  render[3] = loadImage('Assets/Renders/04-Pic-3.png');

  render[4] = loadImage('Assets/Renders/04-Pic-4.png'); 

  render[5] = loadImage('Assets/Renders/04-Pic-5.png');

  render[6] = loadImage('Assets/Renders/04-Pic-6.png');

  render[7] = loadImage('Assets/Renders/04-Pic-7.png'); 

  render[8] = loadImage('Assets/Renders/04-Pic-8.png');

  render[9] = loadImage('Assets/Renders/04-Pic-9.png'); 

  render[10] = loadImage('Assets/Renders/04-Pic-10.png');

  info[1] = loadImage('Assets/Info/06-Info-1.png');

  info[2] = loadImage('Assets/Info/06-Info-2.png');

  info[3] = loadImage('Assets/Info/06-Info-3.png');

  info[4] = loadImage('Assets/Info/06-Info-4.png');

  info[5] = loadImage('Assets/Info/06-Info-5.png');

  info[6] = loadImage('Assets/Info/06-Info-6.png');

  info[7] = loadImage('Assets/Info/06-Info-7.png');

  info[8] = loadImage('Assets/Info/06-Info-8.png');

  info[9] = loadImage('Assets/Info/06-Info-9.png');

  info[10] = loadImage('Assets/Info/06-Info-10.png');

  backdis = loadImage('Assets/Images/06-Back-Dis.png');

  nextdis = loadImage('Assets/Images/06-Next-Dis.png');

}

​

​

function setup() {

​

  createCanvas(windowWidth, windowHeight);

  background(color1);

  imageMode(CENTER);

  textAlign(CENTER);

  textFont(myFontBook);

  textSize(18);

  noStroke();

  frameRate(10);

  fill(color5);

  drawScene1();

​

}

​

function draw() {

//NA

}

​

function drawScene1(){

  background(color1);

  image(BG,width/2,height/2);

  image(Badge,width/2,height/2-200);

  homeb = createImg('Assets/Images/01-Button-1.png'); 

  homeb.mousePressed(drawScene2A);

  homeb.position(width/2-99.5,height/2+190);

  image(Title,width/2,height/2-10);

  //image(Version,width/2,height/2+280);

}

​

function drawScene2A(){

  background(color1);

  image(BG,width/2,height/2);

  homeb.hide();

  introb = createImg('Assets/Images/02A-Button-1.png'); 

  introb.mousePressed(drawScene2);

  introb.position(width/2-65,height/2+170);

  image(Intro,width/2,height/2-270);

​

  line2A = "A bountiful, untouched planet awaits!//As you build a glorious new space colony/from the barbarous waste that it was/before you arrived, be careful of the/types of aliens you allow to stay!/The community you build now/ will shape the planet/for all time!"

  splitString = split(line2A, '/');

      text(splitString[0], width / 2, height / 2-100-10);

      text(splitString[1], width / 2, height / 2-75-10);

      text(splitString[2], width / 2, height / 2-50-10);

      text(splitString[3], width / 2, height / 2-25-10);

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

      text(splitString[5], width / 2, height / 2+25-10);

      text(splitString[6], width / 2, height / 2+50-10);

      text(splitString[7], width / 2, height / 2+75-10);

      text(splitString[8], width / 2, height / 2+100-10);

}

​

function drawScene2(){

  background(color1);

  image(BG,width/2,height/2);

  introb.hide();

  instructionsb = createImg('Assets/Images/02B-Button-1.png');

  instructionsb.mousePressed(drawScene3);

  instructionsb.position(width/2-69,height/2+170);

  image(Instruction,width/2,height/2-270);

  line2 = "1) First, select a region you plan/to improve from the several available.//2) Next, looking at photos of/ten randomly-picked aliens/of this region, decide which of/them are undesirable./Tap “Retain” to keep the desirables or/“Discard” to remove the undesirables.//3) You must remove 20% to 30%/ of the population, so your/new empire can thrive./Choose wisely!"

  splitString = split(line2, '/');

      text(splitString[0], width / 2, height / 2-175-10);

      text(splitString[1], width / 2, height / 2-150-10);

      text(splitString[2], width / 2, height / 2-125-10);

      text(splitString[3], width / 2, height / 2-100-10);

      text(splitString[4], width / 2, height / 2-75-10);

      text(splitString[5], width / 2, height / 2-50-10);

      text(splitString[6], width / 2, height / 2-25-10);

      text(splitString[7], width / 2, height / 2-10);

      text(splitString[8], width / 2, height / 2+25-10);

      text(splitString[9], width / 2, height / 2+50-10);

      text(splitString[10], width / 2, height / 2+75-10);

      text(splitString[11], width / 2, height / 2+100-10);

      text(splitString[12], width / 2, height / 2+125-10);

      text(splitString[13], width / 2, height / 2+150-10);

}

​

function drawScene3(){

  background(color1);

  image(BGSky,width/2,height/2);

​

  instructionsb.hide();

  image(SelectReg,width/2,height/2-270);

  imageMode(CORNER);

  image(RegionsBDis,width/2-125.5,height/2+220);

  imageMode(CENTER);

  image(Planet,width/2-9,height/2-5);

  image(RegionAll,width/2+46.2,height/2-.2);

  regionbA = createImg('Assets/Images/03-Region-A.png');

  regionbA.mousePressed(highlightA);

  regionbA.position(width/2-79.2,height/2-184);

  regionbB = createImg('Assets/Images/03-Region-B.png');

  regionbB.mousePressed(highlightB);

  regionbB.position(width/2+58,height/2-25);

  regionbC = createImg('Assets/Images/03-Region-C.png');

  regionbC.mousePressed(highlightC);

  regionbC.position(width/2-32,height/2+66);

}

​

function highlightA() {

  regionsb = createImg('Assets/Images/03-Button-1.png'); 

  regionsb.mousePressed(drawScene4);

  regionsb.position(width/2-125.5,height/2+220);

  regionbA.hide();

  regionbB.hide();

  regionbC.hide();

​

  image(RegionAH,width/2+46.2,height/2-.2);

  }

​

function highlightB() {

  regionsb = createImg('Assets/Images/03-Button-1.png'); 

  regionsb.mousePressed(drawScene4);

  regionsb.position(width/2-125.5,height/2+220);

  regionbA.hide();

  regionbB.hide();

  regionbC.hide();

  image(RegionBH,width/2+46.2,height/2-.2);

  }

​

function highlightC() {

  regionsb = createImg('Assets/Images/03-Button-1.png'); 

  regionsb.mousePressed(drawScene4);

  regionsb.position(width/2-125.5,height/2+220);

  regionbA.hide();

  regionbB.hide();

  regionbC.hide();

  image(RegionCH,width/2+46.2,height/2-.2);

  }

​

function drawScene4() {

  frameRate(1);

  imageMode(CENTER);

  background(color1);

  image(BG,width/2,height/2);

  regionsb.hide();

  image(SelDiscard,width/2,height/2-270);

  discardb = createImg('Assets/Images/04-Button-1.png');

  discardb.mousePressed(discard);

  discardb.position(width/2-67.5+50,height/2+244);

  retainb = createImg('Assets/Images/04-Button-2.png');

  retainb.mousePressed(retain);

  retainb.position(width/2-67.5-110,height/2+244);

  selectedImg = int(1, 10);

  print(selectedImg);

  currentImg = render[selectedImg];

  image(currentImg, width/2+8, height/2);

} 

function drawScene5() {

  frameRate(1);

  background(color1);

  image(BG,width/2,height/2);

  discardb = createImg('Assets/Images/04-Button-1.png');

  discardb.mousePressed(discard);

  discardb.position(width/2-67.5+50,height/2+244);

  retainb = createImg('Assets/Images/04-Button-2.png');

  retainb.mousePressed(retain);

  retainb.position(width/2-67.5-110,height/2+244);

  image(SelDiscard,width/2,height/2-270);

  print(selectedImg);

  currentImg = render[selectedImg];  

  image(currentImg, width / 2+8, height / 2);

}

​

function discard (){

  discardb.hide();

  retainb.hide();

  /*

  if (selectedImg == 1){

    print("Forest Mogun is discarded.");

    background(color1);

    infoMsg = 1;

  } 

    if (selectedImg == 2){

    print("Zeyeax-Un is discarded.");

    background(color1);

    infoMsg = 2;

  }

    if (selectedImg == 3){

    print("Primordial Ka'pod is discarded.");

    infoMsg = 3;

  }

    if (selectedImg == 4){

    print("Bloaveola is discarded.");

    infoMsg = 4;

  } 

    if (selectedImg == 5){

    print("Metaeax is discarded.");

    infoMsg = 5;

  } 

    if (selectedImg == 6){

    print("Desert Vulon is discarded.");

    infoMsg = 6;

  } 

    if (selectedImg == 7){

    print("Land Mogun is discarded.");

    infoMsg = 7;

  } 

    if (selectedImg == 8){

    print("Zeyeax-Ikayi is discarded.");

    infoMsg = 8;

  } 

    if (selectedImg == 9){

    print("Odoreg is discarded.");

    infoMsg = 9;

  } 

    if (selectedImg == 10){

    print("Klaro is discarded.");

    infoMsg = 10;

  }

  */

  selectedImg++;

  discards++;

  if (selectedImg <= shufflesMax){ 

    drawScene5();

  } else {

    resultPage();

  }

}

​

function retain (){

  discardb.hide();

  retainb.hide();

  selectedImg++;

  if (selectedImg <= shufflesMax){

    drawScene5();

  } else {

    resultPage();

  }

}

function resultPage(){

  background(color1);

  image(BG,width/2,height/2);

  knowb = createImg('Assets/Images/05-Button-2.png');

  knowb.mousePressed(knowResults);

  knowb.position(width/2-101,height-200);

  resetb = createImg('Assets/Images/05-Button-1.png');

  resetb.mousePressed(resetAll);

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

  exitb = createImg('Assets/Images/05-Button-3.png');

  exitb.mousePressed(blogLink);

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

  //Result ranges: 20% to 30%, less than 20% and more than 30%

  if (discards >= discardsMin && discards <= discardsMax) { 

​

    resultMsg = "Well done! You have removed/undesirables from your new/colony. It is now generating/wealth for you, and the/population is easily managed!";

      splitString = split(resultMsg, '/');

      text(splitString[0], width / 2, height / 2-75-10);

      text(splitString[1], width / 2, height / 2-50-10);

      text(splitString[2], width / 2, height / 2-25-10);

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

      text(splitString[4], width / 2, height / 2+25-10);

      //text(splitString[5], width / 2, height / 2+50-10);

  } else if (discards < discardsMin && discards > shufflesMin) {  

    resultMsg = "Uh oh! You only/discarded " + round(discards/11*100) + "% of the/populace! Your colony is/too overpopulated to be/manageable and profitable./Try again!";

      splitString = split(resultMsg, '/');

      text(splitString[0], width / 2, height / 2-75-10);

      text(splitString[1], width / 2, height / 2-50-10);

      text(splitString[2], width / 2, height / 2-25-10);

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

      text(splitString[4], width / 2, height / 2+25-10);

      text(splitString[5], width / 2, height / 2+50-10);

  } else if (discards > discardsMax && discards < shufflesMax) {  

    resultMsg = "Uh oh! You have/discarded " + round(discards/10*100) + "% of the/populace! Your colony does not/ have enough population/to turn a profit./Try again!";

      splitString = split(resultMsg, '/');

      text(splitString[0], width / 2, height / 2-75-10);

      text(splitString[1], width / 2, height / 2-50-10);

      text(splitString[2], width / 2, height / 2-25-10);

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

      text(splitString[4], width / 2, height / 2+25-10);

      text(splitString[5], width / 2, height / 2+50-10);

  } else if (discards == shufflesMin) {  

    resultMsg = "Uh oh! You have/discarded none of the/populace! Your colony is/too overpopulated to be/manageable and profitable./Try again!";

      splitString = split(resultMsg, '/');

      text(splitString[0], width / 2, height / 2-75-10);

      text(splitString[1], width / 2, height / 2-50-10);

      text(splitString[2], width / 2, height / 2-25-10);

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

      text(splitString[4], width / 2, height / 2+25-10);

      text(splitString[5], width / 2, height / 2+50-10);

  } else if (discards == shufflesMax) {  

    resultMsg = "Uh oh! You have/discarded all of the/populace! Your colony/does not have any/population to turn a profit./Try again!";

      splitString = split(resultMsg, '/');

      text(splitString[0], width / 2, height / 2-75-10);

      text(splitString[1], width / 2, height / 2-50-10);

      text(splitString[2], width / 2, height / 2-25-10);

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

      text(splitString[4], width / 2, height / 2+25-10);

      text(splitString[5], width / 2, height / 2+50-10);

  }

​

}

​

function knowResults (){

  frameRate(1);

  knowb.hide();

  resetb.hide();

  exitb.hide();

  background(color1);

  image(BGSky,width/2,height/2);

  image(DataPad,width/2,height/2);

  alienOne();

​

}

​

function alienOne (){

  frameRate(1);

  image(info[1], width / 2, height / 2);

  image(backdis,width/2-136,height/2-50);

  nextb1 = createImg('Assets/Images/06-Next.png');

  nextb1.mousePressed(alienTwo);

  nextb1.position(width/2+136-17,height/2-50-17);

​

}

​

function alienTwo (){

  frameRate(1);

  nextb1.hide();

  image(info[2], width / 2, height / 2);

  backb2 = createImg('Assets/Images/06-Back.png');

  backb2.mousePressed(alienOne);

  backb2.position(width/2-136-17,height/2-50-17);

  nextb2 = createImg('Assets/Images/06-Next.png');

  nextb2.mousePressed(alienThree);

  nextb2.position(width/2+136-17,height/2-50-17);

}

​

function alienThree (){

  frameRate(1);

  backb2.hide();

  nextb2.hide();

  image(info[3], width / 2, height / 2);

  backb3 = createImg('Assets/Images/06-Back.png');

  backb3.mousePressed(alienTwo);

  backb3.position(width/2-136-17,height/2-50-17);

  nextb3 = createImg('Assets/Images/06-Next.png');

  nextb3.mousePressed(alienFour);

  nextb3.position(width/2+136-17,height/2-50-17);

}

​

function alienFour (){

  frameRate(1);

  backb3.hide();

  nextb3.hide();

  image(info[4], width / 2, height / 2);

  backb4 = createImg('Assets/Images/06-Back.png');

  backb4.mousePressed(alienThree);

  backb4.position(width/2-136-17,height/2-50-17);

  nextb4 = createImg('Assets/Images/06-Next.png');

  nextb4.mousePressed(alienFive);

  nextb4.position(width/2+136-17,height/2-50-17);

}

​

function alienFive (){

  frameRate(1);

  backb4.hide();

  nextb4.hide();

​

  image(info[5], width / 2, height / 2);

  backb5 = createImg('Assets/Images/06-Back.png');

  backb5.mousePressed(alienFour);

  backb5.position(width/2-136-17,height/2-50-17);

  nextb5 = createImg('Assets/Images/06-Next.png');

  nextb5.mousePressed(alienSix);

  nextb5.position(width/2+136-17,height/2-50-17);

}

​

​

function alienSix (){

  frameRate(1);

  backb5.hide();

  nextb5.hide();

  image(info[6], width / 2, height / 2);

  backb6 = createImg('Assets/Images/06-Back.png');

  backb6.mousePressed(alienFive);

  backb6.position(width/2-136-17,height/2-50-17);

  nextb6 = createImg('Assets/Images/06-Next.png');

  nextb6.mousePressed(alienSeven);

  nextb6.position(width/2+136-17,height/2-50-17);

}

​

function alienSeven (){

  frameRate(1);

  backb6.hide();

  nextb6.hide();

  image(info[7], width / 2, height / 2);

  backb7 = createImg('Assets/Images/06-Back.png');

  backb7.mousePressed(alienSix);

  backb7.position(width/2-136-17,height/2-50-17);

  nextb7 = createImg('Assets/Images/06-Next.png');

  nextb7.mousePressed(alienEight);

  nextb7.position(width/2+136-17,height/2-50-17);

}

​

function alienEight (){

  frameRate(1);

  backb7.hide();

  nextb7.hide();

  image(info[8], width / 2, height / 2);

  backb8 = createImg('Assets/Images/06-Back.png');

  backb8.mousePressed(alienSeven);

  backb8.position(width/2-136-17,height/2-50-17);

  nextb8 = createImg('Assets/Images/06-Next.png');

  nextb8.mousePressed(alienNine);

  nextb8.position(width/2+136-17,height/2-50-17);

}

​

function alienNine (){

  frameRate(1);

  backb8.hide();

  nextb8.hide();

  resetb.hide();

  exitb.hide();

  image(info[9], width / 2, height / 2);

  backb9 = createImg('Assets/Images/06-Back.png');

  backb9.mousePressed(alienEight);

  backb9.position(width/2-136-17,height/2-50-17);

  nextb9 = createImg('Assets/Images/06-Next.png');

  nextb9.mousePressed(alienTen);

  nextb9.position(width/2+136-17,height/2-50-17);

}

​

function alienTen (){

  frameRate(1);

  backb9.hide();

  nextb9.hide();

​

  image(info[10], width / 2, height / 2);

  //backb10 = createImg('Assets/Images/06-Back.png');

  //backb10.mousePressed(alienNine);

  //backb10.position(width/2-136-17,height/2-50-17);

  image(backdis,width/2-136,height/2-50);

  image(nextdis,width/2+136,height/2-50);

  resetb = createImg('Assets/Images/05-Button-1.png');

  resetb.mousePressed(resetAll);

  resetb.position(width/2-100-90,height-75);

  exitb = createImg('Assets/Images/05-Button-3.png');

  exitb.mousePressed(blogLink);

  exitb.position(width/2+100-90,height-75);

  //setTimeout (blogLink,4000);

}

​

function blogLink (){

  frameRate(1);

  knowb.hide();

  resetb.hide();

  exitb.hide();

  background(color1);

  link = createA("https://indofuturism.wordpress.com/2021/02/11/colonizr-learn-more/", "Learn more on Blog", "_blank");

  link.position(width/2-120, height/2); 

  //link.style("text-align", "center");

  link.style("color", "#F5F5F5");

  link.style("font-size", 30+"px");

  link.style("font", "MyFontBook");

}

​

function resetAll (){

  knowb.hide();

  resetb.hide();

  exitb.hide();

  drawScene1();

}