Deterministic system

by Dustin Pfister

HTML

<div>
  <canvas id="ds_canvas"></canvas>
  <br>
  <div id="ds_control">
    <span>time: <input id="ds_slide_time" type="range" value="0"></span>
    <br>
    <span>size: <input id="ds_slide_delta_size" type="range" value="0"></span>
    <br>
  </div>
</div>

JavaScript

// the box module that will contain the system state,
// and some methods to work with it
let box = {

  // frame, and maxFrames
  frame: 0,
  maxFrame: 50,

  // for now just deltaSize will be a value that can 
  // be played with other than time
  deltaSize: 0,

  // what to find an a for frame basis
  forFrame: function() {

    // percent done (0 to 1)
    this.per = this.frame / this.maxFrame;

    // what I have been calling bias (0 to 1 back to 0)
    this.bias = 1 - Math.abs(.5 - this.per) / .5;

    // apply delta size
    let size = 16 + this.deltaSize * this.bias;
    this.w = size;
    this.h = size;

    // what will change for each frame
    this.x = (320 - this.w) * this.bias;
    this.y = 20;

  },

  // set state by value of 0 to 1
  set: function(per) {

    this.frame = Math.floor(per * this.maxFrame);
    this.forFrame();

  },

  // draw the state of the box to the canvas
  draw: function(ctx) {

    ctx.fillStyle = '#ffffff';
    ctx.fillRect(this.x, this.y, this.w, this.h);

  },

  // controls
  change: {

    // change time
    time: function(e) {

      box.set(e.target.value / 100);

    },

    // change start size
    delta_size: function(e) {

      box.deltaSize = e.target.value / 100 * 64 + 32;

      box.forFrame();

    }

  }

};

box.set(0);

(function() {

    // create and inject a canvas
    let get = function(id) {

        return document.getElementById(id);

      },

      canvas = get('ds_canvas'),
      ctx = canvas.getContext('2d'),

      setup = function() {

        // set actual matrix size of the canvas
        canvas.width = 320;
        canvas.height = 150;

        draw();

      },

      // the single draw function
      draw = function() {

        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        box.draw(ctx);

      },

      change = function(e) {

        let key = e.target.id.replace(/ds_slide_/, '');

        box.change[key](e);

        draw();

      };

   ...