​

let screen = 1;

​

let planeNum = 32;

​

let plane = [];

​

let showText = [];

​

let message = [];

​

let howTo = "Click a paper plane to see text trail behind it.\nClick it again for the text to disappear.\nTo overwrite a question or answer, click the REWRITE button.\n";

​

//rewriting page vars

let newQuestion = "";

​

let newAnswer = "";

​

let rewritingQuestion = false;

let rewritingAnswer = false;

​

let whichOne;

​

let scaleValX;

let scaleValY;

let scaleAv; //average

​

let howToButtonPressed = false;

let rewriteButtonPressed = false;

​

var myCanvas;

​

var buttonBack = document.getElementById("buttonBack");

var buttonRewrite = document.getElementById("buttonRewrite");

var buttonHowTo = document.getElementById("buttonHowTo");

​

var extraCanvas;

var graphic = [];

​

function setup() {

  textFont('Calibri Light', 48);

  myCanvas = createCanvas(windowWidth, windowHeight - 80);

​

  scaleValX = windowWidth / 1100;

  scaleValY = (windowHeight - 80) / 900;

  scaleAv = (scaleValX + scaleValY) / 2;

​

  for (let i = 0; i < planeNum; i++) {

    plane.push(new PaperPlane());

    showText[i] = false;

​

  }

  for (let i = 0; i < (planeNum / 2); i++) {

    message.push(new Message(i));

  }

}

​

function draw() {

  background(220);

​

  if (screen == 1) {

    mainPage();

  }

​

  if (howToButtonPressed == true) {

    stroke(0);

    fill(255);

    textAlign(LEFT);

    rect(5 * scaleValX, 46, 562 - 100, 83, 5);

    fill(0);

    strokeWeight(1);

    textSize(26 * scaleAv);

    text(howTo, 15, 72);

  }

​

  if (rewriteButtonPressed == true) {

    myCanvas.hide();

​

    buttonBack.style.display = "block";

    buttonRewrite.style.display = "none";

    buttonHowTo.style.display = "none";

  } else {

    myCanvas.show();

​

    buttonBack.style.display = "none";

    buttonRewrite.style.display = "block";

    buttonHowTo.style.display = "block";

​

    document.getElementById("secondPage").style.display = "none";

  }

}

​

function mainPage() {

  //background is white 

  background(255);

​

  //goes through all of the planes to do various things

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

    //displays and moves the planes 

    plane[i].display();

    plane[i].move();

​

    //if a plane is off screen,

    //a new one is spawned to replace it.

    //the extra space after the plane is off screen is to 

    //compensate for the text trail that may be showing 

    if (plane[i].tipX > width + 800 || plane[i].tipX < -800) {

      plane[i] = new PaperPlane();

    }

​

    //show the text trail

    if (showText[i] == true) {

      //make the text the same transparency as the paper plane it's paired with

      stroke(0);

      strokeWeight(1);

      fill(0, plane[i].transparency);

      textSize(26 * scaleAv);

​

      //adjustments for if the paper plane is going right

      if (plane[i].goingRight == 1) {

        textAlign(RIGHT);

        stroke(0);

        strokeWeight(1);

​

        //this bit of code makes sure only a question OR answer is shown 

        //as a text trail behind one plane. 

        //(two planes are matched up with one Message object which has a question AND an answer).

        //this code does this by checking if there is a remainder when the 

        //plane's number is divided by 2:

        // - if the remainder is 0, the question shows

        // - if not, the answer shows

        if ((i % 2) == 0) {

          text(message[int(i / 2)].question, plane[i].tipX - 125, plane[i].tipY);

        } else {

          text(message[int(i / 2)].answer, plane[i].tipX - 125, plane[i].tipY);

        }

      } else {

        //adjustments for if the paper plane is going left

        textAlign(LEFT);

​

        //this bit of code makes sure only a question OR answer is shown 

        //as a text trail behind one plane. 

        //(two planes are matched up with one Message object which has a question AND an answer).

        //this code does this by checking if there is a remainder when the 

        //plane's number is divided by 2:

        // - if the remainder is 0, the question shows

        // - if not, the answer shows

        if ((i % 2) == 0) {

          text(message[int(i / 2)].question, plane[i].tipX + 125, plane[i].tipY);

        } else {

          text(message[int(i / 2)].answer, plane[i].tipX + 125, plane[i].tipY);

        }

      }

    }

  }

​

  textSize(26 * scaleAv);

  stroke(0);

}

​

function mousePressed() {

​

  if (screen == 1) {

​

    //going through all the planes -

    //when the mouse click is released and the mouse coords are on a paper plane, 

    //it will show the text trail OR make the text trail disappear;

    //it will do the opposite of what was happening before the plane was clicked 

    for (let i = 0; i < planeNum; i++) {

      if (plane[i].goingRight == 1) {

        //  coords for paper plane going right

        if (mouseX < plane[i].tipX && mouseX > (plane[i].tipX - 115) && mouseY > (plane[i].tipY - 32) && mouseY < (plane[i].tipY + 10)) {

          //changes the boolean value of the showText element 

          //that is paired with the plane that was clicked 

          showText[i] = !(showText[i]);

        }

      } else {

        //  coords for paper plane going left

        if (mouseX > plane[i].tipX && mouseX < (plane[i].tipX + 115) && mouseY > (plane[i].tipY - 32) && mouseY < (plane[i].tipY + 10)) {

          //changes the boolean value of the showText element 

          //that is paired with the plane that was clicked 

          showText[i] = !(showText[i]);

        }

      }

    }

​

  }

}

​

function howToInfo() {

  howToButtonPressed = !howToButtonPressed;

}

​

function hideShow() {

  rewriteButtonPressed = !rewriteButtonPressed;

​

  document.getElementById("secondPage").style.display = "block";

​

  if (rewriteButtonPressed == false) {

    screen = 1;

  } else if (rewriteButtonPressed == true) {

    screen = 2;

    whichOne = int(random(message.length));

    document.getElementById("question").innerHTML = message[whichOne].question;

    document.getElementById("answer").innerHTML = message[whichOne].answer;

  }

}

​

function submitPressed() {

  //SUBMIT button

​

  newQuestion = document.getElementById("inputQ").value;

  newAnswer = document.getElementById("inputA").value;

​

  //if a new question has been typed,

  if (newQuestion != "") {

    //make the new question the actual question

    message[whichOne].question = newQuestion;

    //resets newQuestion so it's blank 

    document.getElementById('inputQ').value = '';

  }

  //if a new answer has been typed,

  if (newAnswer != "") {

    //make the new answer the actual answer

    message[whichOne].answer = newAnswer;

    //resets newAnswer so it's blank 

    document.getElementById('inputA').value = '';

  }

  //changes the question & answer that are displayed on the screen and available to rewrite

  whichOne = int(random(message.length));

​

  document.getElementById("question").innerHTML = message[whichOne].question;

  document.getElementById("answer").innerHTML = message[whichOne].answer;

​

}

​

function nextPressed() {

  //NEXT BUTTON

​

  //randomly changes the question & answer that are displayed on the screen and available to rewrite

  whichOne = int(random(message.length));

​

  document.getElementById("question").innerHTML = message[whichOne].question;

  document.getElementById("answer").innerHTML = message[whichOne].answer;

​

  //resets newQuestion to blank

  document.getElementById('inputQ').value = '';

  //resets newAnswer to blank

  document.getElementById('inputA').value = '';

}