
const SKETCH_CONFIG = {
  spacing:      1.1,
  yPadding:     60,
}


class AnimationWrapper {
  constructor(settings) {
    this.containerId = settings.containerId;
    this.columns     = settings.columns;
    this.sorted      = settings.sorted;

    this.shufflin    = !this.sorted;

    this.spacing     = SKETCH_CONFIG.spacing;
    this.yPadding    = SKETCH_CONFIG.yPadding;

    this.sequence    = _.range(1, this.columns+1);
  }

  // Switches to alter the state of the returned p5 instance

  /** Stop shuffling columns but don't stop looping. */
  stopShuffling() {
    this.shufflin = false;
  }

  /** Resume shuffling. */
  startShuffling() {
    this.shufflin = true;
  }

  /** Clear canvas, sort columns and stop looping. */
  setSorted() {
    this.sorted = true;
  }

  /** Return a p5 instance with access to the state of AnimationWrapper. */
  p5sketch() {
    const sketch = this;

    const s = function(p) {

      let sketchWidth = sketch.width;
      let sketchHeight = sketch.height;

      const getColumnWidth = function() {
        return sketchWidth/sketch.columns/sketch.spacing;
      }

      const getColumnHeightStep = function() {
        return sketch.spacing*(sketchHeight - sketch.yPadding)/sketch.columns;
      }

      let columnWidth = getColumnWidth();
      let columnHeightStep = getColumnHeightStep();

      let sequence = sketch.sequence;

      let canvas = null;

      const shuffle = function() {
        sequence = _.shuffle(sequence);
      }

      const sort = function() {
        sequence = _.sortBy(sequence);
      }

      const drawSequence = function() {
        p.noStroke();
        p.fill(150);

        for (let i = 0; i < sequence.length; i++) {
          const x = sketch.spacing*i*columnWidth;
          const height = sequence[i]*columnHeightStep;
          const y = sketchHeight - height;
          p.rect(x, y, columnWidth, height);
        }
      }

      const resizeSketch = function(newWidth, newHeight) {
        sketchHeight = newHeight;
        sketchWidth = newWidth;
        columnWidth = getColumnWidth();
        columnHeightStep = getColumnHeightStep();
      }

      p.setup = function() {
        canvas = p.createCanvas(sketchWidth, sketchHeight);
        canvas.parent(sketch.containerId);
        p.loop();
      }

      p.draw = function() {
        p.background(255, 40);

        if (sketch.shufflin) {
          shuffle();
        }
        else {
          p.clear(); // Background is opaque
          sort();
          p.noLoop();
        }

        drawSequence();
      }

      p.windowResized = function() {
        const canvasParent = $(canvas.parent());
        resizeSketch(canvasParent.width(), canvasParent.height());

        p.resizeCanvas(sketchWidth, sketchHeight);

        if (!sketch.shufflin)
          p.draw();
      }
    }
    return s;
  }
};



@@ -878,22 +878,23 @@
   const 
-sketch
+wrapper
  = this;
@@ -948,22 +948,23 @@
 Width = 
-sketch
+wrapper
 .width;%0A
@@ -988,22 +988,23 @@
 eight = 
-sketch
+wrapper
 .height;
@@ -1074,22 +1074,23 @@
 chWidth/
-sketch
+wrapper
 .columns
@@ -1090,22 +1090,23 @@
 columns/
-sketch
+wrapper
 .spacing
@@ -1178,22 +1178,23 @@
  return 
-sketch
+wrapper
 .spacing
@@ -1210,22 +1210,23 @@
 eight - 
-sketch
+wrapper
 .yPaddin
@@ -1228,22 +1228,23 @@
 adding)/
-sketch
+wrapper
 .columns
@@ -1370,22 +1370,23 @@
 uence = 
-sketch
+wrapper
 .sequenc
@@ -1735,22 +1735,23 @@
 nst x = 
-sketch
+wrapper
 .spacing
@@ -2263,22 +2263,23 @@
 .parent(
-sketch
+wrapper
 .contain
@@ -2285,16 +2285,35 @@
 nerId);%0A
+        shuffle();%0A
         
@@ -2403,22 +2403,23 @@
     if (
-sketch
+wrapper
 .shuffli
@@ -2466,14 +2466,51 @@
     
-else %7B
+if (wrapper.sorted) %7B%0A          p.noLoop();
 %0A   
@@ -2569,38 +2569,16 @@
 sort();%0A
-          p.noLoop();%0A
         
@@ -2832,22 +2832,23 @@
    if (!
-sketch
+wrapper
 .shuffli

rename variable with more descriptive name