bare-bones scene manager

Author: Ben Jack

src/imageLoader.js

@@ -1,6 +1,6 @@
 export default class PImageLoader{
 
-  constructor(p5){
+  constructor(){
     this._total_images_to_load = 0;
     this._loaded_images = 0;
     this._images = {};
@@ -19,13 +19,12 @@ export default class PImageLoader{
     }
   }
 
-  draw_image(name, ctx, x, y){
-    ctx.image(this._images[name], x, y);
+  draw_image(name, x, y){
+    image(this._images[name], x, y);
   }
 
-  draw_image_from_sequence(name, frame_lerp, ctx, x, y){
-    let frame = math.floor(frame_lerp*this._image_sequences[name].length);
-    ctx.image(this._image_sequences[name][frame], x, y);
+  draw_image_from_sequence(name, frame, x, y){
+    image(this._image_sequences[name][frame], x, y);
   }
 
   all_images_loaded(){

src/index.js

@@ -1,7 +1,7 @@
 import Vignettes from './vignettes.js'
 import {setup_window_variables} from "./windowVariables.js"
 
-let p = new p5();
+//let p = new p5();
 
 window.setup = function() {
   angleMode(DEGREES);
@@ -10,16 +10,16 @@ window.setup = function() {
   let vignettes = new Vignettes();
   setup_window_variables(vignettes);
   setup_vignettes(vignettes);
-  setup_new_canvas(100, 100);
+  setup_new_canvas(1280, 720);
 }
 
 window.draw = function() {
   background(255);
-//  vignettes.draw();
+  vignettes.draw();
 }
 
 window.setup_new_canvas = function(width, height){
-    createCanvas(width, height);
+    window.p5Canvas = createCanvas(width, height).canvas;
     setup_scenes(vignettes);
 }
 
@@ -35,10 +35,20 @@ window.mouseMoved = function(){
   vignettes.mouse_moved();
 }
 
-window.keyPressed = function(){
-  console.log(keyCode);
+//p5js' default keyPressed function only seems to trigger once for certian keys in chrome.
+//I am overriding this event with one that seems more reliable.
+document.onkeydown = function(e) {
+  if (!e.metaKey) {
+    e.preventDefault();
+  }
+
+  keyCode = e.keyCode;
+  key     = e.key;
+
+  vignettes.key_pressed();
+
 }
 
-window.keyReleased = function(){
+window.onkeyrelease = function(oPEvt){
   vignettes.key_released();
 }

src/scene.js

@@ -0,0 +1,77 @@
+export default class Scene{
+
+  constructor(draw_function){
+      this._draw_function          = draw_function;
+      this._click_function         = function(){};
+      this._mouse_moved_function   = function(){};
+      this._mouse_dragged_function = function(){};
+      this._key_pressed_function   = function(){};
+      this._key_released_function  = function(){};
+      vignettes.add_scene(this);
+  }
+
+  draw(){
+      this._draw_function();
+  }
+
+  click(){
+      this._click_function();
+  }
+
+  mouse_moved(){
+      this._mouse_moved_function();
+  }
+
+  mouse_dragged(){
+      this._mouse_dragged_function();
+  }
+
+  key_pressed(){
+      this._key_pressed_function();
+  }
+
+  key_released(keyboard_event){
+      this._key_released_function();
+  }
+
+  get click(){
+    return this._click_function;
+  }
+
+  get mouse_moved(){
+    return this._mouse_moved_function;
+  }
+
+  get mouse_dragged(){
+    return this._mouse_dragged_function;
+  }
+
+  get key_pressed(){
+    return this._key_pressed_function;
+  }
+
+  get key_released(){
+    return this._key_released_function;
+  }
+
+  set click(func){
+    this._click_function = func;
+  }
+
+  set mouse_moved(func){
+    this._mouse_moved_function = func;
+  }
+
+  set mouse_dragged(func){
+    this._mouse_dragged_function = func;
+  }
+
+  set key_pressed(func){
+    this._key_pressed_function = func;
+  }
+
+  set key_released(func){
+    this._key_released_function = func;
+  }
+
+}

src/vignettes.js

@@ -1,8 +1,12 @@
+import ImageLoader from "./imageLoader.js"
+
 export default class Vignettes{
 
   constructor(){
     this._scenes = [];
+    this._image_loader = new ImageLoader();
     this._current_scene = 0;
+    this._recording = false;
   }
 
   add_scene(scene){
@@ -13,6 +17,10 @@ export default class Vignettes{
       if(this._scenes.length > 0){
         this._scenes[this._current_scene].draw();
       }
+
+      if(this._recording){
+        this.capture_frame();
+      }
   }
 
   click(){
@@ -33,24 +41,68 @@ export default class Vignettes{
     }
   }
 
-  key_pressed(keyboard_event){
+  key_pressed(){
 
-    console.log(keyCode);
-    if(keyCode == 39){
-        this._current_scene = this._current_scene - 1;
-        this._current_scene = this._current_scene < 0 ? this._scenes.length - 1 : this._current_scene;
-    }else if(keyCode == 37){
-        this.current_scene = (this.current_scene + 1)%this._scenes.length;
+    console.log(keyCode, key);
+
+    if(key == "ArrowRight"){// 'rightArrow'
+        this.increment_current_scene();
+    }else if(key == "ArrowLeft"){// 'leftArrow'
+        this.decrement_current_scene();
+    }else if(key == "r" && !this._recording){// 'r'
+        this.begin_recording();
+    }else if(key == "r" && this._recording){
+        this.end_recording();
     }else if(this._scenes.length > 0){
         this._scenes[this._current_scene].key_pressed();
     }
 
-    console.log(this._current_scene);
+  }
 
+  increment_current_scene(){
+    this._current_scene = (this._current_scene + 1)%this._scenes.length;
+  }
+
+  decrement_current_scene(){
+    this._current_scene = this._current_scene - 1;
+    this._current_scene = this._current_scene < 0 ? this._scenes.length - 1 : this._current_scene;
   }
 
   key_released(keyboard_event){
     this._scenes[this._current_scene].key_released();
   }
 
+  begin_recording(){
+    console.log("started recording");
+    ccapturer.start();
+    this.capture_frame();
+    this._recording = true;
+  }
+
+  capture_frame(){
+    ccapturer.capture(p5Canvas);
+  }
+
+  end_recording(){
+    console.log("finished recording");
+    ccapturer.stop();
+    ccapturer.save();
+    this._recording = false;
+  }
+
+  //-------------image loading and displaying------------------
+    load_image(name, file_type){
+      this._image_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);
+    }
+    draw_image(name, x, y){
+      this._image_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);
+    }
+  //-----------------------------------------------------------
+
 }

src/windowVariables.js

@@ -3,5 +3,5 @@ import Scene from "./scene.js"
 export const setup_window_variables = function(vignettes){
   window.vignettes = vignettes;
   window.Scene     = Scene;
-  window.ccapturer = new CCapture( { format: 'webm' } );
+  window.ccapturer = new CCapture( { format: 'webm', framerate: 24 } );
 }