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>