Adj Framework – Contributions – Random Tilt

For more about Adj, see the user guide.

A first example of extending Adj with commands, command randomTilt.

Source code listing, from adj-random.js:

Adj.defineCommandForAlgorithm({
  algorithmName: "randomTilt",
  phaseHandlerName: "adjPhase7Up",
  parameters: ["maxAngle"],
  method: function randomTilt (element, parametersObject) {
    var usedHow = "used in a parameter for a randomTilt command";
    var variableSubstitutionsByName = {};
    var maxAngle = Adj.doVarsArithmetic(element, parametersObject.maxAngle, 15, null, usedHow, variableSubstitutionsByName); // default maxAngle = 15
    var minAngle = Adj.doVarsArithmetic(element, parametersObject.minAngle, 0, null, usedHow, variableSubstitutionsByName); // default minAngle = 0
    //
    var angle = (maxAngle - minAngle) * (2 * Math.random() - 1);
    if (angle >= 0) {
      angle += minAngle;
    }
    if (angle <= 0) {
      angle -= minAngle;
    }
    var boundingBox = element.getBBox();
    var cx = boundingBox.x + boundingBox.width / 2;
    var cy = boundingBox.y + boundingBox.height / 2;
    angle = angle / 180 * Math.PI;
    var a = Math.cos(angle);
    var b = Math.sin(angle);
    var c = -b;
    var d = a;
    var e = cx - a * cx - c * cy;
    var f = cy - b * cx - d * cy;
    element.setAttribute("transform", "matrix(" + Adj.decimal(a) + "," + Adj.decimal(b) + "," + Adj.decimal(c) + "," + Adj.decimal(d) + "," + Adj.decimal(e) + "," + Adj.decimal(f) + ")");
  }
}

How to use, from an example image:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:adj="http://www.nrvr.com/2012/adj" xmlns:xlink="http://www.w3.org/1999/xlink" onload="Adj.doSvg();" width="200" height="70">
  <script type="text/javascript" xlink:href="../../js/adj.js"/>
  <script type="text/javascript" xlink:href="adj-random.js"/>
  <rect width="200" height="70" fill="linen"/>
  <g adj:command="horizontalList" adj:gap="5">
    <g transform="translate(5,5)">
      <rect width="45" height="30" fill="#000" adj:command="randomTilt"/>
    </g>
    <g transform="translate(55,5)">
      <rect width="40" height="25" fill="#444" adj:command="randomTilt"/>
    </g>
    <g transform="translate(100,5)">
      <rect width="35" height="20" fill="#888" adj:command="randomTilt"/>
    </g>
  </g>
</svg>