Create a Tiling Preset

You may also have a look at:

• Tile and Tiling Objects
• Debug tips

1. Create a file mytilingscript.js in TilingPresets/

This file must, at the end, have a function returning a new Tiling Object. It may be convenient to have a function to create a new Tile Object at some position, and then call it many times to create your Tiling Object.

This is the idea explained below, and if you are interested in creating a tiling obtained by substitution, see our Substitution API. We also implement some tilings by Cut and project.

Making the Tiles

The Tile Objects are best constructed via a function, taking as inputs useful arguments to place it (such as the positions x,y of the tile). This function should build the tile's id, neighbors, bounds, and lim, based on its parameters, and return a new Tile Object.

Example for a square tiling:

function mytile(x, y){
  var id = [x, y];
  var neighbors = [];
  neighbors.push([x-1, y]);
  neighbors.push([x+1, y]);
  neighbors.push([x, y-1]);
  neighbors.push([x, y+1]);
  var bounds = [];
  bounds.push(x, y);
  bounds.push(x+1, y);
  bounds.push(x+1, y+1);
  bounds.push(x, y+1);	
  return new Tile(id, neighbors, bounds, 4);
}

Making the Tiling

Once the code is done for one tile, the Tiling is just made from an Array of Tile. By passing the desired parameters to mytile, we are able to build the tiles in any way we like, and return a new Tiling Object.

The function creating your tiling should follow a special declaration pattern:

Tiling.mytiling = function({<parameter_1>,...,<parameter_k>}={}){
  var tiles = [];
  // your code to create the desired Tile Object
  // by making calls to tiles.push(mytile(...));
  return new Tiling(tiles);
}

where <parameter_i> is one of height, width, size, iterations. The app will then automatically prompt the user for the parameters required to construct your tiling. The parameters are optional.

Example for a square tiling:

Tiling.mytiling = function({width, height}={}){
  var tiles = [];
  for(let i = 0; i < width; i++){
    for(let j = 0; j < height; j++){
      tiles.push(mytile(i, j));
    }	
  }
  return new Tiling(tiles);

2. Edit JS-Sandpile.html

Once the tiling generation JS file is done, you need to add an item to the Tiling selection menu:

<option value="mytiling">Name of my tiling</option>

caution: the value of this option and the name of the tiling function must match exactly.

And of course, include mytilingscript.js at the end of JS-Sandpile.html:

<script src="./js/TilingPresets/mytilingscript.js"></script>

caution: method names must be unique (otherwise javascipt understands it as a redefinition).

You are done!

Extra: how-to add new GUI Parameters to Tiling selection

1. in JS-Sandpile.html: add a control in section Tiling-specific controls, with id="p_yourid" in span, and id="yourid" in input;
2. in js/app.js: add a few lines in [4.5] drawTiling (copy+adapt);
3. in js/Features/ChangeDiscplay.js: add your param to params in [3.0] hideParams;
4. in your function called to generate the tiling (presumably in js/TilingPresets/yourtiling.js): add the id of your new parameter to the list of arguments in curly brakets.