Merge pull request #1 from edeetee/master

Fixed images, backgrounds, added niceties

package.json

@@ -1,6 +1,6 @@
 {
   "name": "phenakistoscopeJS",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A small framework built on top of p5js for automating the process of making phenakistoscopes with javascript. This framework is a part of the \"Creative Coding projects\" youtube channel.",
   "homepage": "https://www.youtube.com/channel/UCQJBw4IgWV9Tp3CNgT5YtwA",
   "repository": {

sample_code/my_phenakistoscope.js

@@ -8,21 +8,19 @@ function setup_pScope(pScope){
 }
 
 function setup_layers(pScope){
-  var layer1 = new PLayer(animate1, background1);
+  //lets us draw the whole circle background, ignoring the boundaries
+  new PLayer(null, 220);
+
+  var layer1 = new PLayer(flowers);
   layer1.mode( SWIRL(5) );
-  layer1.set_boundary( 400, 1000 );
+  layer1.set_boundary( 200, 1000 );
 
-  var layer2 = new PLayer(animate2, background2);
+  var layer2 = new PLayer(squares, radarBackground);
   layer2.mode( RING );
   layer2.set_boundary( 0, 400 );
 }
 
-
-
-function background1(animation, pScope){
-}
-
-function animate1(x, y, animation, pScope){
+function flowers(x, y, animation, pScope){
   translate(0, 0);
   scale(animation.frame*2);
   for (var i = 0; i < 12; i++) {
@@ -31,11 +29,11 @@ function animate1(x, y, animation, pScope){
   ellipse(0,0,5,5);
 }
 
-
-function background2(animation, pScope){
+function radarBackground(animation, pScope){
+  pScope.fill_background(200, 0, 0, 50*animation.frame)
 }
 
-function animate2(x, y, animation, pScope){
+function squares(x, y, animation, pScope){
   translate(0, 0);
   rect(-10,-300-animation.wave()*50,20,20);
 }

src/PImageLoader.js

@@ -16,7 +16,8 @@ export default class PImageLoader{
 
   load_image_sequence(name, file_type, sequence_length){
     this._total_images_to_load += sequence_length;
-    for(var i = 0; i < image_count; ++i){
+    this._image_sequences[name] = []
+    for(var i = 0; i < sequence_length; ++i){
       this._image_sequences[name][i] = loadImage("assets/"+name+"/"+name+"_"+i+"."+file_type, this.image_loaded.bind(this));
     }
   }
@@ -26,7 +27,8 @@ export default class PImageLoader{
   }
 
   draw_image_from_sequence(name, frame_lerp, ctx, x, y){
-    let frame = math.floor(frame_lerp*this._image_sequences[name].length);
+    let imgs = this._image_sequences[name].length
+    let frame = Math.floor(frame_lerp*imgs)%imgs
     ctx.image(this._image_sequences[name][frame], x, y);
   }
 

src/PLayer.js

@@ -1,11 +1,24 @@
 import globals from "./PGlobals.js"
 import {animate_ring} from "./PAnimationFunctions.js"
 
+function blank (){}
+
 export default class PLayer{
 
-  constructor(i_draw_function, i_background_function){
-    this._draw_function       = i_draw_function.bind(this);
-    this._background_function = i_background_function.bind(this);
+  constructor(i_draw_function, ...background){
+    i_draw_function = i_draw_function || blank
+    this._draw_function = i_draw_function.bind(this);
+
+    let background_t = typeof background[0]
+
+    if(background_t === "function")
+      this._background_function = background[0].bind(this);
+    else if(background_t !== "undefined"){
+      this._background_function = () => this.fill_background.call(this,...background)
+    } else
+      this._background_function = () => {}
+
+
     this._animation_function = animate_ring(globals.phenakistoscope).bind(this);
     this._do_draw_boundaries = true;
     this.set_boundary(0,1000);
@@ -59,10 +72,12 @@ export default class PLayer{
     return this._animation_variables;
   }
 
-  fill_background(fill_color){
-      fill(fill_color);
-      stroke(fill_color);
+  fill_background(...args){
+      push()
+      fill(...args);
+      stroke(...args);
       this.draw_wedge();
+      pop()
   }
 
   draw_boundry(){

src/POutputFunctions.js

@@ -123,12 +123,10 @@ function set_initial_transforms(pScope){
 }
 
 function draw_wedge(pScope, layer, wedge_number){
-
   push();
     layer.animation_function(wedge_number, layer.boundary.low, layer.boundary.high);
   pop();
   layer.draw_boundry();
-
 }
 
 function draw_disk(pScope, layer){

src/PScope.js

@@ -134,8 +134,8 @@ export default class PScope{
     this._draw_slits = do_draw;
   }
 
-  fill_background(fill_color){
-    this._layers[this._current_layer].fill_background(fill_color);
+  fill_background(...color){
+    this._layers[this._current_layer].fill_background(...color);
   }
 
   set print(do_print){
@@ -197,11 +197,12 @@ export default class PScope{
   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, globals.p5js_default_gfx, x, y);
+    this._image_loader.draw_image(name, globals.p5, x, y);
   }
-  draw_image_from_sequence(name, ctx, x, y){
-    this._image_loader.draw_image_from_sequence(name, this.frame, globals.p5js_default_gfx, x, y);
+  draw_image_from_sequence(name, x, y, lerp){
+    this._image_loader.draw_image_from_sequence(name, lerp, globals.p5, x, y);
   }
   //-----------------------------------------------------------