Adventures in Data Science

Programming a Skutterer

On this page you can see the various images one of our data science creations can make. My Skutterer moves around a Html5

element drawing a picture by changing the data where it likes. Here's some examples:

The code is fairly simple. First we declare the configuration variables.

  
  var __cfg =
  {
    width     : 128,
    height    : 128,
    container : "skut4",
    nest      : "skut4c",
    caoi      : __skut4__caoi,
    pixels    : { x: 2, y: 2 }
  };

The width and height size the canvas. container and nest are the id of the html and canvas elements. We need to create them to hold our skutterer on the page.


  <div id="skut4">
    <canvas id="skut4c"></canvas>
  </div>

We need a different one of these containers every time we make a skutterer. Because, the skutterer uses the canvas to move around, and the canvas is unique to the area on the page it gets to live in!

Next, we need some functions. I've made some here which allow the skutterer to move around. See:

  
  var skut4 = new neodna__Skutterer( __cfg, 4 );
  skut4.fn( 0, __skut4__fn__move      );
  skut4.fn( 1, __skut4__fn__write     );
  skut4.fn( 2, __skut4__fn__direction );
  skut4.fn( 3, __skut4__fn__maiden    );

Here we have 4 functions: move, write, direction and maiden.

1) Move: go forward in the direction set by __d.
2) Write: write the data to 1, at the current block.
3) Direction: Rotate the direction __d by 1 or -1 of 4 possible directions. 1 or -1 is set by the maiden.
4) Maiden: Flip a value from -1 to 1 and back again.

And that's it! Now we have programmed a skutterer with 4 basic functions which allow it to create amazing shapes.

The functions

Move

A simple move function containing 4 possible changes to position. In layman's terms, this is left, up, right, down.

  
    function __skut4__fn__move( o )
    {
      var d = [
        [ -1,  0 ],
        [  0, -1 ],
        [  1,  0 ],
        [  0,  1 ]
      ];

      o.__x += d[ o.__d ][ 0 ];
      o.__y += d[ o.__d ][ 1 ];
    }

Our object ( the skutterer ) is passed in as a variable. All we have to do is change the x and y variables and we're set. Notice we're using o.__d, which is the direction variable. That's the one that gets set in __skut4__fn__direction