imageLoader changed to assetLoader, sound loading/playing, manual scene changing

Author: Ben Jack

package.json

@@ -29,13 +29,16 @@
   },
   "scripts": {
     "dev": "webpack-dev-server --config webpack.config.dev.js --mode=development -d",
-    "build": "run-p prepare copy_p5 copy_ccapture copy_sample_code create_assets_folder copy_atom_live_server_script",
+    "build": "run-p prepare copy_p5 copy_p5_sound copy_ccapture copy_sample_code create_assets_folder copy_atom_live_server_script create_images_folder create_sounds_folder",
     "prepare": "webpack --mode=production",
     "copy_p5": "cpx ./node_modules/p5/lib/p5.min.js ./build/libraries/",
+    "copy_p5_sound": "cpx ./node_modules/p5/lib/addons/p5.sound.min.js ./build/libraries/",
     "copy_ccapture": "cpx ./node_modules/ccapture.js/build/CCapture.all.min.js ./build/libraries/ && cpx ./node_modules/ccapture.js/src/gif.worker.js ./build/libraries/",
     "copy_atom_live_server_script": "cpx ./sample_code/.atom-live-server.json ./build/",
     "copy_sample_code": "cpx ./sample_code/index.html ./build/ && cpx ./sample_code/my_vignettes.js ./build/",
-    "create_assets_folder": "mkdirp ./build/assets"
+    "create_assets_folder": "mkdirp ./build/assets",
+    "create_images_folder": "mkdirp ./build/assets/images",
+    "create_sounds_folder": "mkdirp ./build/assets/sounds"
   },
   "dependencies": {
     "@babel/polyfill": "^7.0.0",

sample_code/index.html

@@ -6,6 +6,7 @@
 
     <script src="./libraries/CCapture.all.min.js"></script>
     <script src="./libraries/p5.min.js"></script>
+    <script src="./libraries/p5.sound.min.js"></script>
 
     <script src="./my_vignettes.js"></script>
     <script src="./libraries/interactive-vignettes.bundle.js"></script>

sample_code/my_vignettes.js

@@ -25,6 +25,8 @@ function scene1_click(){
 
 function scene1_keypress(){
   console.log("scene1 key pressed!");
+  vignettes.go_to_scene(2);
+
 }
 
 

src/assetLoader.js

@@ -0,0 +1,54 @@
+export default class AssetLoader{
+
+  constructor(){
+    this._total_assets_to_load = 0;
+    this._loaded_images = 0;
+    this._images = {};
+    this._image_sequences = {};
+    this._sounds = {};
+  }
+
+  load_image(name, file_type){
+    this._total_assets_to_load++;
+    this._images[name] = loadImage("./assets/images/"+name+"."+file_type, this.asset_loaded.bind(this));
+  }
+
+  load_image_sequence(name, file_type, sequence_length){
+    this._total_assets_to_load += sequence_length;
+    for(var i = 0; i < image_count; ++i){
+      this._image_sequences[name][i] = loadImage("assets/images/"+name+"/"+name+"_"+i+"."+file_type, this.asset_loaded.bind(this));
+    }
+  }
+
+  load_sound(name, file_type){
+    this._total_assets_to_load++;
+    this._sounds[name] = loadSound("./assets/sounds/"+name+"."+file_type, this.asset_loaded.bind(this));
+  }
+
+  draw_image(name, x, y){
+    image(this._images[name], x, y);
+  }
+
+  draw_image_from_sequence(name, frame, x, y){
+    image(this._image_sequences[name][frame], x, y);
+  }
+
+  play_sound(name){
+    this._sounds[name].play();
+  }
+
+  stop_sound(name){
+    if ( this._sounds[name].isPlaying() ) { 
+      this._sounds[name].stop();
+    }
+  }
+
+  all_assets_loaded(){
+    return this._loaded_images >= this._total_assets_to_load;
+  }
+
+  asset_loaded(){
+    this._loaded_images++;
+  }
+
+}

src/imageLoader.js

@@ -1,10 +1,10 @@
-import ImageLoader from "./imageLoader.js"
+import AssetLoader from "./assetLoader.js"
 
 export default class Vignettes{
 
   constructor(){
     this._scenes = [];
-    this._image_loader = new ImageLoader();
+    this._asset_loader = new AssetLoader();
     this._current_scene = 0;
     this._recording = false;
   }
@@ -14,7 +14,7 @@ export default class Vignettes{
   }
 
   draw(){
-      if(this._scenes.length > 0){
+      if(this._scenes.length > 0 && this._asset_loader.all_assets_loaded()){
         this._scenes[this._current_scene].draw();
       }
 
@@ -41,13 +41,21 @@ export default class Vignettes{
     }
   }
 
+  manually_change_scenes(manually_change){
+    this._manually_change_scenes = manually_change;
+  }
+
+  go_to_scene(scene_number){
+    this._current_scene = scene_number-1;
+  }
+
   key_pressed(){
 
     console.log(keyCode, key);
 
-    if(key == "ArrowRight"){// 'rightArrow'
+    if(key == "ArrowRight" && !this._manually_change_scenes){// 'rightArrow'
         this.increment_current_scene();
-    }else if(key == "ArrowLeft"){// 'leftArrow'
+    }else if(key == "ArrowLeft"  && !this._manually_change_scenes){// 'leftArrow'
         this.decrement_current_scene();
     }else if(key == "r" && !this._recording){// 'r'
         this.begin_recording();
@@ -90,18 +98,27 @@ export default class Vignettes{
     this._recording = false;
   }
 
-  //-------------image loading and displaying------------------
+  //-------------asset loading and displaying------------------
     load_image(name, file_type){
-      this._image_loader.load_image(name, file_type);
+      this._asset_loader.load_image(name, file_type);
     }
     load_image_sequence(name, file_type, sequence_length){
-      this._image_loader.load_image_sequence(name, file_type, sequence_length);
+      this._asset_loader.load_image_sequence(name, file_type, sequence_length);
+    }
+    load_sound(name, file_type){
+      this._asset_loader.load_sound(name, file_type);
     }
     draw_image(name, x, y){
-      this._image_loader.draw_image(name, x, y);
+      this._asset_loader.draw_image(name, x, y);
     }
     draw_image_from_sequence(name, x, y, frame){
-      this._image_loader.draw_image_from_sequence(name, frame, x, y);
+      this._asset_loader.draw_image_from_sequence(name, frame, x, y);
+    }
+    play_sound(name){
+      this._asset_loader.play_sound(name);
+    }
+    stop_sound(name){
+      this._asset_loader.stop_sound(name);
     }
   //-----------------------------------------------------------