728 | * var div0 = createDiv('this is the parent');
729 | * var div1 = createDiv('this is the child');
730 | * div0.child(div1); // use p5.Element
731 | *
732 | *
733 | * var div0 = createDiv('this is the parent');
734 | * var div1 = createDiv('this is the child');
735 | * div1.id('apples');
736 | * div0.child('apples'); // use id
737 | *
738 | *
739 | * var div0 = createDiv('this is the parent');
740 | * var elt = document.getElementById('myChildDiv');
741 | * div0.child(elt); // use element from page
742 | *
743 | */
744 | p5.Element.prototype.child = function(c) {
745 | if (typeof c === 'string') {
746 | c = document.getElementById(c);
747 | } else if (c instanceof p5.Element) {
748 | c = c.elt;
749 | }
750 | this.elt.appendChild(c);
751 | return this;
752 | };
753 |
754 |
755 | /**
756 | *
757 | * If an argument is given, sets the inner HTML of the element,
758 | * replacing any existing html. If no arguments are given, returns
759 | * the inner HTML of the element.
760 | *
761 | * @for p5.Element
762 | * @method html
763 | * @param {String} [html] the HTML to be placed inside the element
764 | * @return {Object/p5.Element|String}
765 | */
766 | p5.Element.prototype.html = function(html) {
767 | if (typeof html !== 'undefined') {
768 | this.elt.innerHTML = html;
769 | return this;
770 | } else {
771 | return this.elt.innerHTML;
772 | }
773 | };
774 |
775 | /**
776 | *
777 | * Sets the position of the element relative to (0, 0) of the
778 | * window. Essentially, sets position:absolute and left and top
779 | * properties of style. If no arguments given returns the x and y position
780 | * of the element in an object.
781 | *
782 | * @method position
783 | * @param {Number} [x] x-position relative to upper left of window
784 | * @param {Number} [y] y-position relative to upper left of window
785 | * @return {Object/p5.Element}
786 | * @example
787 | *
788 | * function setup() {
789 | * var cnv = createCanvas(100, 100);
790 | * // positions canvas 50px to the right and 100px
791 | * // below upper left corner of the window
792 | * cnv.position(50, 100);
793 | * }
794 | *
795 | */
796 | p5.Element.prototype.position = function() {
797 | if (arguments.length === 0){
798 | return { 'x' : this.elt.offsetLeft , 'y' : this.elt.offsetTop };
799 | }else{
800 | this.elt.style.position = 'absolute';
801 | this.elt.style.left = arguments[0]+'px';
802 | this.elt.style.top = arguments[1]+'px';
803 | this.x = arguments[0];
804 | this.y = arguments[1];
805 | return this;
806 | }
807 | };
808 |
809 | /**
810 | * Translates an element with css transforms in either 2d (if 2 arguments given)
811 | * or 3d (if 3 arguments given) space.
812 | * @method translate
813 | * @param {Number} x x-position in px
814 | * @param {Number} y y-position in px
815 | * @param {Number} [z] z-position in px
816 | * @param {Number} [perspective] sets the perspective of the parent element in px,
817 | * default value set to 1000px
818 | * @return {Object/p5.Element}
819 | * @example
820 | *
821 | * function setup() {
822 | * createCanvas(100,100);
823 | * //translates canvas 50px down
824 | * select('canvas').translate(0,50);
825 | * }
826 | *
827 | */
828 | p5.Element.prototype.translate = function(){
829 | this.elt.style.position = 'absolute';
830 | if (arguments.length === 2){
831 | var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
832 | style = style.replace(/translate[X-Z]?\(.*\)/g, '');
833 | this.elt.style.transform = 'translate('+arguments[0]+'px, '+arguments[1]+'px)';
834 | this.elt.style.transform += style;
835 | }else if (arguments.length === 3){
836 | var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
837 | style = style.replace(/translate[X-Z]?\(.*\)/g, '');
838 | this.elt.style.transform = 'translate3d('+arguments[0]+'px,'+arguments[1]+'px,'+arguments[2]+'px)';
839 | this.elt.style.transform += style;
840 | this.elt.parentElement.style.perspective = '1000px';
841 | }else if (arguments.length === 4){
842 | var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
843 | style = style.replace(/translate[X-Z]?\(.*\)/g, '');
844 | this.elt.style.transform = 'translate3d('+arguments[0]+'px,'+arguments[1]+'px,'+arguments[2]+'px)';
845 | this.elt.style.transform += style;
846 | this.elt.parentElement.style.perspective = arguments[3]+'px';
847 | }
848 | return this;
849 | };
850 |
851 | /**
852 | * Rotates an element with css transforms in either 2d (if 2 arguments given)
853 | * or 3d (if 3 arguments given) space.
854 | * @method rotate
855 | * @param {Number} x amount of degrees to rotate the element along the x-axis in deg
856 | * @param {Number} [y] amount of degrees to rotate the element along the y-axis in deg
857 | * @param {Number} [z] amount of degrees to rotate the element along the z-axis in deg
858 | * @return {Object/p5.Element}
859 | * @example
860 | *
861 | * var x = 0,
862 | * y = 0,
863 | * z = 0;
864 | * function setup(){
865 | * createCanvas(100,100);
866 | * }
867 | * function draw(){
868 | * x+=.5 % 360;
869 | * y+=.5 % 360;
870 | * z+=.5 % 360;
871 | * //rotates the canvas .5deg (degrees) on every axis each frame.
872 | * select('canvas').rotate(x,y,z);
873 | * }
874 | *
875 | */
876 | p5.Element.prototype.rotate = function(){
877 | if (arguments.length === 1){
878 | var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
879 | style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
880 | this.elt.style.transform = 'rotate('+arguments[0]+'deg)';
881 | this.elt.style.transform += style;
882 | }else if (arguments.length === 2){
883 | var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
884 | style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
885 | this.elt.style.transform = 'rotate('+arguments[0]+'deg, '+arguments[1]+'deg)';
886 | this.elt.style.transform += style;
887 | }else if (arguments.length === 3){
888 | var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
889 | style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
890 | this.elt.style.transform = 'rotateX('+arguments[0]+'deg)';
891 | this.elt.style.transform += 'rotateY('+arguments[1]+'deg)';
892 | this.elt.style.transform += 'rotateZ('+arguments[2]+'deg)';
893 | this.elt.style.transform += style;
894 | }
895 | return this;
896 | };
897 |
898 | /**
899 | * Sets the given style (css) property of the element with the given value.
900 | * If no value is specified, returns the value of the given property,
901 | * or undefined if the property is not.
902 | *
903 | * @method style
904 | * @param {String} property property to be set
905 | * @param {String} [value] value to assign to property
906 | * @return {String|Object/p5.Element} value of property, if no value is specified
907 | * or p5.Element
908 | * @example
909 | *
910 | * var myDiv = createDiv("I like pandas.");
911 | * myDiv.style("color", "#ff0000");
912 | * myDiv.style("font-size", "18px");
913 | *
914 | */
915 | p5.Element.prototype.style = function(prop, val) {
916 | if (typeof val === 'undefined') {
917 | var attrs = prop.split(';');
918 | for (var i=0; i
948 | * var myDiv = createDiv("I like pandas.");
949 | *myDiv.attribute("align", "center");
950 | *
951 | */
952 | p5.Element.prototype.attribute = function(attr, value) {
953 | if (typeof value === 'undefined') {
954 | return this.elt.getAttribute(attr);
955 | } else {
956 | this.elt.setAttribute(attr, value);
957 | return this;
958 | }
959 | };
960 |
961 |
962 | /**
963 | * Either returns the value of the element if no arguments
964 | * given, or sets the value of the element.
965 | *
966 | * @method value
967 | * @param {String|Number} [value]
968 | * @return {String|Object/p5.Element} value of element if no value is specified or p5.Element
969 | */
970 | p5.Element.prototype.value = function() {
971 | if (arguments.length > 0) {
972 | this.elt.value = arguments[0];
973 | return this;
974 | } else {
975 | if (this.elt.type === 'range') {
976 | return parseFloat(this.elt.value);
977 | }
978 | else return this.elt.value;
979 | }
980 | };
981 |
982 | /**
983 | *
984 | * Shows the current element. Essentially, setting display:block for the style.
985 | *
986 | * @method show
987 | * @return {Object/p5.Element}
988 | */
989 | p5.Element.prototype.show = function() {
990 | this.elt.style.display = 'block';
991 | return this;
992 | };
993 |
994 | /**
995 | * Hides the current element. Essentially, setting display:none for the style.
996 | *
997 | * @method hide
998 | * @return {Object/p5.Element}
999 | */
1000 | p5.Element.prototype.hide = function() {
1001 | this.elt.style.display = 'none';
1002 | return this;
1003 | };
1004 |
1005 | /**
1006 | *
1007 | * Sets the width and height of the element. AUTO can be used to
1008 | * only adjust one dimension. If no arguments given returns the width and height
1009 | * of the element in an object.
1010 | *
1011 | * @method size
1012 | * @param {Number} [w] width of the element
1013 | * @param {Number} [h] height of the element
1014 | * @return {Object/p5.Element}
1015 | */
1016 | p5.Element.prototype.size = function(w, h) {
1017 | if (arguments.length === 0){
1018 | return { 'width' : this.elt.offsetWidth , 'height' : this.elt.offsetHeight };
1019 | }else{
1020 | var aW = w;
1021 | var aH = h;
1022 | var AUTO = p5.prototype.AUTO;
1023 | if (aW !== AUTO || aH !== AUTO) {
1024 | if (aW === AUTO) {
1025 | aW = h * this.width / this.height;
1026 | } else if (aH === AUTO) {
1027 | aH = w * this.height / this.width;
1028 | }
1029 | // set diff for cnv vs normal div
1030 | if (this.elt instanceof HTMLCanvasElement) {
1031 | var j = {};
1032 | var k = this.elt.getContext('2d');
1033 | for (var prop in k) {
1034 | j[prop] = k[prop];
1035 | }
1036 | this.elt.setAttribute('width', aW * this._pInst._pixelDensity);
1037 | this.elt.setAttribute('height', aH * this._pInst._pixelDensity);
1038 | this.elt.setAttribute('style', 'width:' + aW + 'px; height:' + aH + 'px');
1039 | this._pInst.scale(this._pInst._pixelDensity, this._pInst._pixelDensity);
1040 | for (var prop in j) {
1041 | this.elt.getContext('2d')[prop] = j[prop];
1042 | }
1043 | } else {
1044 | this.elt.style.width = aW+'px';
1045 | this.elt.style.height = aH+'px';
1046 | this.elt.width = aW;
1047 | this.elt.height = aH;
1048 | this.width = aW;
1049 | this.height = aH;
1050 | }
1051 | this.elt.style.overflow = 'hidden';
1052 | this.width = this.elt.offsetWidth;
1053 | this.height = this.elt.offsetHeight;
1054 |
1055 | if (this._pInst) { // main canvas associated with p5 instance
1056 | if (this._pInst._curElement.elt === this.elt) {
1057 | this._pInst._setProperty('width', this.elt.offsetWidth);
1058 | this._pInst._setProperty('height', this.elt.offsetHeight);
1059 | }
1060 | }
1061 | }
1062 | return this;
1063 | }
1064 | };
1065 |
1066 | /**
1067 | * Removes the element and deregisters all listeners.
1068 | * @method remove
1069 | * @example
1070 | *
1071 | * var myDiv = createDiv('this is some text');
1072 | * myDiv.remove();
1073 | *
1074 | */
1075 | p5.Element.prototype.remove = function() {
1076 | // deregister events
1077 | for (var ev in this._events) {
1078 | this.elt.removeEventListener(ev, this._events[ev]);
1079 | }
1080 | if (this.elt.parentNode) {
1081 | this.elt.parentNode.removeChild(this.elt);
1082 | }
1083 | delete(this);
1084 | };
1085 |
1086 |
1087 |
1088 | // =============================================================================
1089 | // p5.MediaElement additions
1090 | // =============================================================================
1091 |
1092 |
1093 | /**
1094 | * Extends p5.Element to handle audio and video. In addition to the methods
1095 | * of p5.Element, it also contains methods for controlling media. It is not
1096 | * called directly, but p5.MediaElements are created by calling createVideo,
1097 | * createAudio, and createCapture.
1098 | *
1099 | * @class p5.MediaElement
1100 | * @constructor
1101 | * @param {String} elt DOM node that is wrapped
1102 | * @param {Object} [pInst] pointer to p5 instance
1103 | */
1104 | p5.MediaElement = function(elt, pInst) {
1105 | p5.Element.call(this, elt, pInst);
1106 |
1107 |
1108 | this._prevTime = 0;
1109 | this._cueIDCounter = 0;
1110 | this._cues = [];
1111 | this.pixelDensity = 1;
1112 |
1113 | };
1114 | p5.MediaElement.prototype = Object.create(p5.Element.prototype);
1115 |
1116 |
1117 |
1118 |
1119 | /**
1120 | * Play an HTML5 media element.
1121 | *
1122 | * @method play
1123 | * @return {Object/p5.Element}
1124 | */
1125 | p5.MediaElement.prototype.play = function() {
1126 | if (this.elt.currentTime === this.elt.duration) {
1127 | this.elt.currentTime = 0;
1128 | }
1129 |
1130 | if (this.elt.readyState > 1) {
1131 | this.elt.play();
1132 | } else {
1133 | // in Chrome, playback cannot resume after being stopped and must reload
1134 | this.elt.load();
1135 | this.elt.play();
1136 | }
1137 | return this;
1138 | };
1139 |
1140 | /**
1141 | * Stops an HTML5 media element (sets current time to zero).
1142 | *
1143 | * @method stop
1144 | * @return {Object/p5.Element}
1145 | */
1146 | p5.MediaElement.prototype.stop = function() {
1147 | this.elt.pause();
1148 | this.elt.currentTime = 0;
1149 | return this;
1150 | };
1151 |
1152 | /**
1153 | * Pauses an HTML5 media element.
1154 | *
1155 | * @method pause
1156 | * @return {Object/p5.Element}
1157 | */
1158 | p5.MediaElement.prototype.pause = function() {
1159 | this.elt.pause();
1160 | return this;
1161 | };
1162 |
1163 | /**
1164 | * Set 'loop' to true for an HTML5 media element, and starts playing.
1165 | *
1166 | * @method loop
1167 | * @return {Object/p5.Element}
1168 | */
1169 | p5.MediaElement.prototype.loop = function() {
1170 | this.elt.setAttribute('loop', true);
1171 | this.play();
1172 | return this;
1173 | };
1174 | /**
1175 | * Set 'loop' to false for an HTML5 media element. Element will stop
1176 | * when it reaches the end.
1177 | *
1178 | * @method noLoop
1179 | * @return {Object/p5.Element}
1180 | */
1181 | p5.MediaElement.prototype.noLoop = function() {
1182 | this.elt.setAttribute('loop', false);
1183 | return this;
1184 | };
1185 |
1186 |
1187 | /**
1188 | * Set HTML5 media element to autoplay or not.
1189 | *
1190 | * @method autoplay
1191 | * @param {Boolean} autoplay whether the element should autoplay
1192 | * @return {Object/p5.Element}
1193 | */
1194 | p5.MediaElement.prototype.autoplay = function(val) {
1195 | this.elt.setAttribute('autoplay', val);
1196 | return this;
1197 | };
1198 |
1199 | /**
1200 | * Sets volume for this HTML5 media element. If no argument is given,
1201 | * returns the current volume.
1202 | *
1203 | * @param {Number} [val] volume between 0.0 and 1.0
1204 | * @return {Number|p5.MediaElement} current volume or p5.MediaElement
1205 | * @method volume
1206 | */
1207 | p5.MediaElement.prototype.volume = function(val) {
1208 | if (typeof val === 'undefined') {
1209 | return this.elt.volume;
1210 | } else {
1211 | this.elt.volume = val;
1212 | }
1213 | };
1214 |
1215 | /**
1216 | * If no arguments are given, returns the current time of the elmeent.
1217 | * If an argument is given the current time of the element is set to it.
1218 | *
1219 | * @method time
1220 | * @param {Number} [time] time to jump to (in seconds)
1221 | * @return {Number|Object/p5.MediaElement} current time (in seconds)
1222 | * or p5.MediaElement
1223 | */
1224 | p5.MediaElement.prototype.time = function(val) {
1225 | if (typeof val === 'undefined') {
1226 | return this.elt.currentTime;
1227 | } else {
1228 | this.elt.currentTime = val;
1229 | }
1230 | };
1231 |
1232 | /**
1233 | * Returns the duration of the HTML5 media element.
1234 | *
1235 | * @method duration
1236 | * @return {Number} duration
1237 | */
1238 | p5.MediaElement.prototype.duration = function() {
1239 | return this.elt.duration;
1240 | };
1241 | p5.MediaElement.prototype.pixels = [];
1242 | p5.MediaElement.prototype.loadPixels = function() {
1243 | if (this.loadedmetadata) { // wait for metadata for w/h
1244 | if (!this.canvas) {
1245 | this.canvas = document.createElement('canvas');
1246 | this.canvas.width = this.width;
1247 | this.canvas.height = this.height;
1248 | this.drawingContext = this.canvas.getContext('2d');
1249 | }
1250 | this.drawingContext.drawImage(this.elt, 0, 0, this.width, this.height);
1251 | p5.Renderer2D.prototype.loadPixels.call(this);
1252 | }
1253 | return this;
1254 | }
1255 | p5.MediaElement.prototype.updatePixels = function(x, y, w, h){
1256 | if (this.loadedmetadata) { // wait for metadata
1257 | p5.Renderer2D.prototype.updatePixels.call(this, x, y, w, h);
1258 | }
1259 | return this;
1260 | }
1261 | p5.MediaElement.prototype.get = function(x, y, w, h){
1262 | if (this.loadedmetadata) { // wait for metadata
1263 | return p5.Renderer2D.prototype.get.call(this, x, y, w, h);
1264 | } else return [0, 0, 0, 255];
1265 | };
1266 | p5.MediaElement.prototype.set = function(x, y, imgOrCol){
1267 | if (this.loadedmetadata) { // wait for metadata
1268 | p5.Renderer2D.prototype.set.call(this, x, y, imgOrCol);
1269 | }
1270 | };
1271 |
1272 | /*** CONNECT TO WEB AUDIO API / p5.sound.js ***/
1273 |
1274 | /**
1275 | * Send the audio output of this element to a specified audioNode or
1276 | * p5.sound object. If no element is provided, connects to p5's master
1277 | * output. That connection is established when this method is first called.
1278 | * All connections are removed by the .disconnect() method.
1279 | *
1280 | * This method is meant to be used with the p5.sound.js addon library.
1281 | *
1282 | * @method connect
1283 | * @param {AudioNode|p5.sound object} audioNode AudioNode from the Web Audio API,
1284 | * or an object from the p5.sound library
1285 | */
1286 | p5.MediaElement.prototype.connect = function(obj) {
1287 | var audioContext, masterOutput;
1288 |
1289 | // if p5.sound exists, same audio context
1290 | if (typeof p5.prototype.getAudioContext === 'function') {
1291 | audioContext = p5.prototype.getAudioContext();
1292 | masterOutput = p5.soundOut.input;
1293 | } else {
1294 | try {
1295 | audioContext = obj.context;
1296 | masterOutput = audioContext.destination
1297 | } catch(e) {
1298 | throw 'connect() is meant to be used with Web Audio API or p5.sound.js'
1299 | }
1300 | }
1301 |
1302 | // create a Web Audio MediaElementAudioSourceNode if none already exists
1303 | if (!this.audioSourceNode) {
1304 | this.audioSourceNode = audioContext.createMediaElementSource(this.elt);
1305 |
1306 | // connect to master output when this method is first called
1307 | this.audioSourceNode.connect(masterOutput);
1308 | }
1309 |
1310 | // connect to object if provided
1311 | if (obj) {
1312 | if (obj.input) {
1313 | this.audioSourceNode.connect(obj.input);
1314 | } else {
1315 | this.audioSourceNode.connect(obj);
1316 | }
1317 | }
1318 |
1319 | // otherwise connect to master output of p5.sound / AudioContext
1320 | else {
1321 | this.audioSourceNode.connect(masterOutput);
1322 | }
1323 |
1324 | };
1325 |
1326 | /**
1327 | * Disconnect all Web Audio routing, including to master output.
1328 | * This is useful if you want to re-route the output through
1329 | * audio effects, for example.
1330 | *
1331 | * @method disconnect
1332 | */
1333 | p5.MediaElement.prototype.disconnect = function() {
1334 | if (this.audioSourceNode) {
1335 | this.audioSourceNode.disconnect();
1336 | } else {
1337 | throw 'nothing to disconnect';
1338 | }
1339 | };
1340 |
1341 |
1342 | /*** SHOW / HIDE CONTROLS ***/
1343 |
1344 | /**
1345 | * Show the default MediaElement controls, as determined by the web browser.
1346 | *
1347 | * @method showControls
1348 | */
1349 | p5.MediaElement.prototype.showControls = function() {
1350 | // must set style for the element to show on the page
1351 | this.elt.style['text-align'] = 'inherit';
1352 | this.elt.controls = true;
1353 | };
1354 |
1355 | /**
1356 | * Hide the default mediaElement controls.
1357 | *
1358 | * @method hideControls
1359 | */
1360 | p5.MediaElement.prototype.hideControls = function() {
1361 | this.elt.controls = false;
1362 | };
1363 |
1364 |
1365 | /*** SCHEDULE EVENTS ***/
1366 |
1367 | /**
1368 | * Schedule events to trigger every time a MediaElement
1369 | * (audio/video) reaches a playback cue point.
1370 | *
1371 | * Accepts a callback function, a time (in seconds) at which to trigger
1372 | * the callback, and an optional parameter for the callback.
1373 | *
1374 | * Time will be passed as the first parameter to the callback function,
1375 | * and param will be the second parameter.
1376 | *
1377 | *
1378 | * @method addCue
1379 | * @param {Number} time Time in seconds, relative to this media
1380 | * element's playback. For example, to trigger
1381 | * an event every time playback reaches two
1382 | * seconds, pass in the number 2. This will be
1383 | * passed as the first parameter to
1384 | * the callback function.
1385 | * @param {Function} callback Name of a function that will be
1386 | * called at the given time. The callback will
1387 | * receive time and (optionally) param as its
1388 | * two parameters.
1389 | * @param {Object} [value] An object to be passed as the
1390 | * second parameter to the
1391 | * callback function.
1392 | * @return {Number} id ID of this cue,
1393 | * useful for removeCue(id)
1394 | * @example
1395 | *
1396 | * function setup() {
1397 | * background(255,255,255);
1398 | *
1399 | * audioEl = createAudio('assets/beat.mp3');
1400 | * audioEl.showControls();
1401 | *
1402 | * // schedule three calls to changeBackground
1403 | * audioEl.addCue(0.5, changeBackground, color(255,0,0) );
1404 | * audioEl.addCue(1.0, changeBackground, color(0,255,0) );
1405 | * audioEl.addCue(2.5, changeBackground, color(0,0,255) );
1406 | * audioEl.addCue(3.0, changeBackground, color(0,255,255) );
1407 | * audioEl.addCue(4.2, changeBackground, color(255,255,0) );
1408 | * audioEl.addCue(5.0, changeBackground, color(255,255,0) );
1409 | * }
1410 | *
1411 | * function changeBackground(val) {
1412 | * background(val);
1413 | * }
1414 | *
1415 | */
1416 | p5.MediaElement.prototype.addCue = function(time, callback, val) {
1417 | var id = this._cueIDCounter++;
1418 |
1419 | var cue = new Cue(callback, time, id, val);
1420 | this._cues.push(cue);
1421 |
1422 | if (!this.elt.ontimeupdate) {
1423 | this.elt.ontimeupdate = this._onTimeUpdate.bind(this);
1424 | }
1425 |
1426 | return id;
1427 | };
1428 |
1429 | /**
1430 | * Remove a callback based on its ID. The ID is returned by the
1431 | * addCue method.
1432 | *
1433 | * @method removeCue
1434 | * @param {Number} id ID of the cue, as returned by addCue
1435 | */
1436 | p5.MediaElement.prototype.removeCue = function(id) {
1437 | for (var i = 0; i < this._cues.length; i++) {
1438 | var cue = this._cues[i];
1439 | if (cue.id === id) {
1440 | this.cues.splice(i, 1);
1441 | }
1442 | }
1443 |
1444 | if (this._cues.length === 0) {
1445 | this.elt.ontimeupdate = null
1446 | }
1447 | };
1448 |
1449 | /**
1450 | * Remove all of the callbacks that had originally been scheduled
1451 | * via the addCue method.
1452 | *
1453 | * @method clearCues
1454 | */
1455 | p5.MediaElement.prototype.clearCues = function() {
1456 | this._cues = [];
1457 | this.elt.ontimeupdate = null;
1458 | };
1459 |
1460 | // private method that checks for cues to be fired if events
1461 | // have been scheduled using addCue(callback, time).
1462 | p5.MediaElement.prototype._onTimeUpdate = function() {
1463 | var playbackTime = this.time();
1464 |
1465 | for (var i = 0 ; i < this._cues.length; i++) {
1466 | var callbackTime = this._cues[i].time;
1467 | var val = this._cues[i].val;
1468 |
1469 |
1470 | if (this._prevTime < callbackTime && callbackTime <= playbackTime) {
1471 |
1472 | // pass the scheduled callbackTime as parameter to the callback
1473 | this._cues[i].callback(val);
1474 | }
1475 |
1476 | }
1477 |
1478 | this._prevTime = playbackTime;
1479 | };
1480 |
1481 |
1482 | // Cue inspired by JavaScript setTimeout, and the
1483 | // Tone.js Transport Timeline Event, MIT License Yotam Mann 2015 tonejs.org
1484 | var Cue = function(callback, time, id, val) {
1485 | this.callback = callback;
1486 | this.time = time;
1487 | this.id = id;
1488 | this.val = val;
1489 | };
1490 |
1491 | // =============================================================================
1492 | // p5.File
1493 | // =============================================================================
1494 |
1495 |
1496 | /**
1497 | * Base class for a file
1498 | * Using this for createFileInput
1499 | *
1500 | * @class p5.File
1501 | * @constructor
1502 | * @param {File} file File that is wrapped
1503 | * @param {Object} [pInst] pointer to p5 instance
1504 | */
1505 | p5.File = function(file, pInst) {
1506 | /**
1507 | * Underlying File object. All normal File methods can be called on this.
1508 | *
1509 | * @property file
1510 | */
1511 | this.file = file;
1512 |
1513 | this._pInst = pInst;
1514 |
1515 | // Splitting out the file type into two components
1516 | // This makes determining if image or text etc simpler
1517 | var typeList = file.type.split('/');
1518 | /**
1519 | * File type (image, text, etc.)
1520 | *
1521 | * @property type
1522 | */
1523 | this.type = typeList[0];
1524 | /**
1525 | * File subtype (usually the file extension jpg, png, xml, etc.)
1526 | *
1527 | * @property subtype
1528 | */
1529 | this.subtype = typeList[1];
1530 | /**
1531 | * File name
1532 | *
1533 | * @property name
1534 | */
1535 | this.name = file.name;
1536 | /**
1537 | * File size
1538 | *
1539 | * @property size
1540 | */
1541 | this.size = file.size;
1542 |
1543 | // Data not loaded yet
1544 | this.data = undefined;
1545 | };
1546 |
1547 | }));
1548 |
--------------------------------------------------------------------------------