Following along with: https://www.youtube.com/watch?v=JrHT1iqSrAQ

 */

​

​

​

//database variables

let database;

let imageRef;

let config = {

    apiKey: "AIzaSyCNXWvMxraT7PTKKCLk4uzaQD-XNhzqw84",

    authDomain: "windemere-44.firebaseapp.com",

    databaseURL: "https://windemere-44.firebaseio.com",

    projectId: "windemere-44",

    storageBucket: "",

    messagingSenderId: "115375595951"

};

​

let submitButton;

let saveButton;

​

let img;

​

let cnv;

​

function preload(){

    img = loadImage('pic.png', loadThem);

}

​

function loadThem(){

    img.loadPixels();

    console.log('done');

}

​

​

function setup(){

    createCanvas(400, 400);

​

    image(img,0,0);

    submitButton = createButton('submit');

    submitButton.mousePressed(sendData);

​

    saveButton = createButton('save');

    saveButton.mousePressed(trySaving);

    // Initialize Firebase

    firebase.initializeApp(config);

    database = firebase.database();

    imageRef = database.ref('imageRef');

    imageRef.on('value', gotData, gotErr);

}

​

​

function trySaving(){

    p5.prototype.saveCanvas(cnv);

}

​

​

​

​

​

​

​

​

​

​

​

function gotData(data) {

    console.log("got data");

//  if (data) {

//      let imageData = data.val();

//      let imageKeys = Object.keys(imageData);

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

//          let k=imageKeys[i];

//          let pic = imageData[k];

//          image(pic,50,50);

//          console.log('got image');

//  }

}

​

function gotErr(err) {

    console.log('Error!');

    console.log(err);

}

​

function sendData() {

    imageRef.push(img, finished);

    console.log('sending');

}

​

function finished(error) {

    if (error) {

        console.log('ooops');

    } else {

        console.log('data saved!');

    }

}

​

​

function upScore() {

    score++;

}

​

function draw() {

}

​

​

​

​

​

​

​

// /**

//  *  Save the current canvas as an image. In Safari, this will open the

//  *  image in the window and the user must provide their own

//  *  filename on save-as. Other browsers will either save the

//  *  file immediately, or prompt the user with a dialogue window.

//  *

//  *  @method saveCanvas

//  *  @param  {p5.Element|HTMLCanvasElement} selectedCanvas   a variable

//  *                                  representing a specific html5 canvas (optional)

//  *  @param  {String} [filename]

//  *  @param  {String} [extension]      'jpg' or 'png'

// */

// /**

//  *  @method saveCanvas

//  *  @param  {String} [filename]

//  *  @param  {String} [extension]

//  *

//  *  @example

//  *  <div class='norender'><code>

//  *  function setup() {

//  *    var c = createCanvas(100, 100);

//  *    background(255, 0, 0);

//  *    saveCanvas(c, 'myCanvas', 'jpg');

//  *  }

//  *  </code></div>

//  *  <div class='norender'><code>

//  *  // note that this example has the same result as above

//  *  // if no canvas is specified, defaults to main canvas

//  *  function setup() {

//  *    createCanvas(100, 100);

//  *    background(255, 0, 0);

//  *    saveCanvas('myCanvas', 'jpg');

//  *  }

//  *  </code></div>

//  *  <div class='norender'><code>

//  *  // all of the following are valid

//  *  saveCanvas(c, 'myCanvas', 'jpg');

//  *  saveCanvas(c, 'myCanvas');

//  *  saveCanvas(c);

//  *  saveCanvas('myCanvas', 'png');

//  *  saveCanvas('myCanvas');

//  *  saveCanvas();

//  *  </code></div>

//  *

//  * @alt

//  * no image displayed

//  * no image displayed

//  * no image displayed

//  *

//  */

// p5.prototype.saveCanvas = function() {

​

//   var cnv, filename, extension;

//   if (arguments.length === 3) {

//     cnv = arguments[0];

//     filename = arguments[1];

//     extension = arguments[2];

//   } else if (arguments.length === 2) {

//     if (typeof arguments[0] === 'object') {

//       cnv = arguments[0];

//       filename = arguments[1];

//     } else {

//       filename = arguments[0];

//       extension = arguments[1];

//     }

//   } else if (arguments.length === 1) {

//     if (typeof arguments[0] === 'object') {

//       cnv = arguments[0];

//     } else {

//       filename = arguments[0];

//     }

//   }

​

//   if (cnv instanceof p5.Element) {

//     cnv = cnv.elt;

//   }

//   if (!(cnv instanceof HTMLCanvasElement)) {

//     cnv = null;

//   }

​

//   if (!extension) {

//     extension = p5.prototype._checkFileExtension(filename, extension)[1];

//     if (extension === '') {

//       extension = 'png';

//     }

//   }

​

//   if (!cnv) {

//     if (this._curElement && this._curElement.elt) {

//       cnv = this._curElement.elt;

//     }

//   }

​

//   if ( p5.prototype._isSafari() ) {

//     var aText = 'Hello, Safari user!\n';

//     aText += 'Now capturing a screenshot...\n';

//     aText += 'To save this image,\n';

//     aText += 'go to File --> Save As.\n';

//     alert(aText);

//     window.location.href = cnv.toDataURL();

//   } else {

//     var mimeType;

//     if (typeof(extension) === 'undefined') {

//       extension = 'png';

//       mimeType = 'image/png';

//     }

//     else {

//       switch(extension){

//         case 'png':

//           mimeType = 'image/png';

//           break;

//         case 'jpeg':

//           mimeType = 'image/jpeg';

//           break;

//         case 'jpg':

//           mimeType = 'image/jpeg';

//           break;

//         default:

//           mimeType = 'image/png';

//           break;

//       }

//     }

//     var downloadMime = 'image/octet-stream';

//     var imageData = cnv.toDataURL(mimeType);

//     imageData = imageData.replace(mimeType, downloadMime);

            // return imageData;    

//     p5.prototype.downloadFile(imageData, filename, extension);

//   }

// };