* How to use:

 * Follow the prompts on the screen to watch this interactive stop motion story! There are three possible endings. To choose an option press the alphabet corresponding with the option you want on the keyboard.

 *

 * Vidya Kannappan N10887016

 *

 * Code adapted from:

 *https://editor.p5js.org/Vidyk/full/uu77AV2Rw

 *This code was typed by myself but I did reference another piece of work I did durong tutorials to get me started on it.

 */

​

let frames = [];

let counter = 0;

​

function preload() {

  // Load the frames into the array

  frames[0] = loadImage("data/frame0.png");

  frames[1] = loadImage("data/frame1.png");

  frames[2] = loadImage("data/frame2.png");

  frames[3] = loadImage("data/frame3.png");

  frames[4] = loadImage("data/frame4.png");

  frames[5] = loadImage("data/frame5.png");

  frames[6] = loadImage("data/frame6.png");

  frames[7] = loadImage("data/frame7.png");

  frames[8] = loadImage("data/frame8.png");

  frames[9] = loadImage("data/frame9.png");

  frames[10] = loadImage("data/frame10.png");

  frames[11] = loadImage("data/frame11.png");

  frames[12] = loadImage("data/frame12.png");

  //yes sequence of images

  frames[13] = loadImage("data/yes1.png");

  frames[14] = loadImage("data/yes2.png");

  frames[15] = loadImage("data/yes3.png");

  frames[16] = loadImage("data/yes4.png");

  frames[17] = loadImage("data/yes5.png");

  frames[18] = loadImage("data/yes6.png");

  frames[19] = loadImage("data/yes7.png");

  frames[20] = loadImage("data/yes8.png");

  frames[21] = loadImage("data/yes9.png");

  frames[22] = loadImage("data/yes10.png");

  frames[23] = loadImage("data/yes11.png");

  frames[24] = loadImage("data/yes12.png");

  frames[25] = loadImage("data/yes13.png");

  //no sequence of images

  frames[26] = loadImage("data/no1.png");

  frames[27] = loadImage("data/no2.png");

  frames[28] = loadImage("data/no3.png");

  frames[29] = loadImage("data/no4.png");

  frames[30] = loadImage("data/no5.png");

  frames[31] = loadImage("data/no6.png");

  frames[32] = loadImage("data/no7.png");

  frames[33] = loadImage("data/no8.png");

  frames[34] = loadImage("data/no9.png");

  frames[35] = loadImage("data/no10.png");

  frames[36] = loadImage("data/no11.png");

  frames[37] = loadImage("data/no12.png");

  frames[38] = loadImage("data/no13.png");

  frames[39] = loadImage("data/no14.png");

  //catch sequence of images

  frames[40] = loadImage("data/catch1.png");

  frames[41] = loadImage("data/catch2.png");

  frames[42] = loadImage("data/catch3.png");

  frames[43] = loadImage("data/catch4.png");

  frames[44] = loadImage("data/catch5.png");

  frames[45] = loadImage("data/catch6.png");

  frames[46] = loadImage("data/catch7.png");

  frames[47] = loadImage("data/catch8.png");

  frames[48] = loadImage("data/catch9.png");

  frames[49] = loadImage("data/catch10.png");

  frames[50] = loadImage("data/catch11.png");

  frames[51] = loadImage("data/catch12.png");

  //pop sequence of images

  frames[52] = loadImage("data/pop1.png");

  frames[53] = loadImage("data/pop2.png");

  frames[54] = loadImage("data/pop3.png");

  frames[55] = loadImage("data/pop4.png");

  frames[56] = loadImage("data/pop5.png");

  frames[57] = loadImage("data/pop6.png");

  frames[58] = loadImage("data/pop7.png");

  frames[59] = loadImage("data/pop8.png");

  frames[60] = loadImage("data/pop9.png");

  frames[61] = loadImage("data/pop10.png");

  frames[62] = loadImage("data/pop11.png");

  frames[63] = loadImage("data/pop12.png");

  frames[64] = loadImage("data/pop13.png");

  frames[65] = loadImage("data/pop14.png");

  frames[66] = loadImage("data/pop15.png");

}

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  // background("powderblue");

  //call and change image based on counter

  image(frames[floor(counter)], 0, 0, 600, 600);

​

  //press space to start animation

  if (key == " " && counter < 12) {

    counter += 0.1;

  }

  // press y for 'yes'. This can only be clicked on frame 12

  if (key == "y" && counter > 12 && counter < 25) {

    counter += 0.1;

  }

  // when pressing 'a' counter skips 15 frames and starts counting from frame 40.

  if (key == "a" && counter > 25 && counter < 40) {

    counter += 15;

  }

  if (counter > 40 && counter < 51) {

    counter += 0.08;

  }

  // when pressing 'a' counter skips 27 frames and starts counting from frame 52

  if (key == "b" && counter > 25 && counter < 52) {

    counter += 27;

  }

  if (counter > 52 && counter < 66) {

    counter += 0.08;

  }

  // when pressing 'n' counter skips 14 frames and starts counting from frame 26

  if (key == "n" && counter > 12 && counter < 25) {

    counter += 14;

  }

  if (counter > 26 && counter < 39) {

    counter += 0.05;

  }

}

​