Implementing loadBytes() processing#2674

This commit adds the loadBytes() function to p5.js as demonstrated
during a livestream on The Coding Train. There are some remaining issues
here. For example, there are no tests. I am also not using httpDo()
which would be more of the convention here for p5 as discussed
in processing#2674. I am also handling errors like 404 or CORS in perhaps
an odd way and would be happy to any feedback.

Author: shiffman

src/core/core.js

@@ -590,6 +590,7 @@ p5.prototype._preloadMethods = {
   loadImage: p5.prototype,
   loadStrings: p5.prototype,
   loadXML: p5.prototype,
+  loadBytes: p5.prototype,
   loadShape: p5.prototype,
   loadTable: p5.prototype,
   loadFont: p5.prototype,

src/io/files.js

@@ -683,6 +683,68 @@ p5.prototype.loadXML = function() {
   return ret;
 };
 
+/**
+ * Loads a binary file from a file or a URL, and returns an Object
+ * with a bytes property containing a Uint8Array.
+ *
+ * This method is asynchronous, meaning it may not finish before the next
+ * line in your sketch is executed.
+ *
+ * @method loadBytes
+ * @param  {String}        path       name of the file or url to load
+ * @param  {function}      [callback] function to be executed after
+ *                                    loadBytes() completes, data is passed
+ *                                    in as first argument
+ * @param  {function}      [errorCallback] function to be executed if
+ *                                    there is an error, response is passed
+ *                                    in as first argument
+ * @return {Object}             contains a Uint8Array bytes property
+ * @example
+ *
+ * <p>Calling loadBytes() inside preload() guarantees to complete the
+ * operation before setup() and draw() are called.</p>
+ *
+ * <div><code>
+ * // TODO: Add Example with preload
+ * </code></div>
+ *
+ * <p>Outside of preload(), you may supply a callback function to handle the
+ * data:</p>
+ * <div><code>
+ * // TODO: Add Example with callback
+ * </code></div>
+ *
+ * @alt
+ * 50x50 ellipse that changes from black to white depending on the current humidity
+ * 50x50 ellipse that changes from black to white depending on the current humidity
+ *
+ */
+p5.prototype.loadBytes = function(path, callback, errorCallback) {
+  var self = this;
+  var ret = {};
+  var oReq = new XMLHttpRequest();
+  oReq.open('GET', path, true);
+  oReq.responseType = 'arraybuffer';
+  oReq.onload = function(oEvent) {
+    if (oReq.status >= 400) {
+      return;
+    }
+    var arrayBuffer = oReq.response;
+    if (arrayBuffer) {
+      ret.bytes = new Uint8Array(arrayBuffer);
+      if (callback) {
+        callback(ret);
+      }
+      self._decrementPreload();
+    }
+  };
+  if (errorCallback) {
+    oReq.onerror = errorCallback;
+  }
+  oReq.send(null);
+  return ret;
+};
+
 /**
  * Method for executing an HTTP GET request. If data type is not specified,
  * p5 will try to guess based on the URL, defaulting to text. This is equivalent to