let canvas;

let saveKinegramButton, takePicBtn, resetBtn, specificModeBtns, cameraModeBtns;

let overlayToggleCheckbox, cameraViewToggleCheckbox;

​

let submitImgTxt;

​

let marioImages = [];

let marioKinegram;

​

let uploadImages = [];

let uploadKinegram;

​

let cameraImages = [];

let cameraKinegram;

​

let currentKinegram;

​

let camera;

​

function preload() {

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

    marioImages[i] = loadImage('images/mario/mario' + i + '.png');

  }

}

​

function setup() {

​

  canvas = createCanvas(720, 600);

​

  imageMode(CENTER);

  textAlign(CENTER);

​

  // set up first kinegram to be displayed on load i.e. mario

  marioKinegram = new Kinegram(marioImages, 2, "Mario Kinegram");

  marioKinegram.generateKinegram();

  marioKinegram.generateOverlay();

  currentKinegram = marioKinegram;

​

  cameraKinegram = new Kinegram();

  uploadKinegram = new Kinegram();

  gifKinegram = new Kinegram();

​

​

  // DOM Stuff starts here

  saveKinegramButton = select('#saveBtn');

  saveKinegramButton.mouseClicked(saveToDisk);

​

  canvas.drop(gotFile);

​

  var constraints = {

    video: {

      mandatory: {

        minWidth: 640,

        minHeight: 360

      },

      optional: [{

        maxFrameRate: 10

      }]

    },

    audio: false

  };

  camera = createCapture(constraints);

  camera.hide();

​

  checklistSelection = select('#mode');

  checklistSelection.changed(changeMode);

​

  // Didn't find a straightforward way to do this. :( with just p5

  uploadImagesBtn = select('#uploadPicBtn');

  uploadImagesBtnDOM = document.getElementById('uploadPicBtn');

​

  submitImgTxt = select('#submitImageTxt');

​

  takePicBtn = select('#takePicBtn');

  takePicBtn.mouseClicked(takePicture);

​

  resetBtn = select('#resetBtn');

  resetBtn.mouseClicked(resetKinegram);

​

  overlayToggleCheckbox = select('#overlayToggle');

​

  cameraViewToggleCheckbox = select('#liveImageToggle');

​

  specificModeBtns = selectAll('.specificModeButtons');

  cameraModeBtns = selectAll('.cameraModeButtons');

​

  changeMode();

}

​

function draw() {

  background(240);

  if (currentKinegram.frames.length > 1) {

    saveKinegramButton.removeAttribute('disabled');

    overlayToggleCheckbox.removeAttribute('disabled');

  } else {

    saveKinegramButton.attribute('disabled', '');

    overlayToggleCheckbox.attribute('disabled', '');

    overlayToggleCheckbox.removeAttribute('checked');

    cameraViewToggleCheckbox.attribute('checked', '');

    text("Waiting for pictures to generate a Kinegram", width / 2, height / 2);

  }

​

  // just showing kinegram / overlay

  currentKinegram.showKinegram();

  if (overlayToggleCheckbox.checked()) {

    currentKinegram.showOverlay(mouseX);

  }

​

  // camera mode stuff

  if (cameraViewToggleCheckbox.checked()) {

    if (checklistSelection.value() == 'camera') {

      overlayToggleCheckbox.removeAttribute('checked');

      tint(255, 255);

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

    }

    tint(255, 50);

    for (var j = 0; j < currentKinegram.frames.length; j++) {

      image(currentKinegram.frames[j], width / 2, height / 2);

    }

    noTint();

  } else {

    overlayToggleCheckbox.attribute('checked', '');

  }

}