A 2D perlin noise SVG generator using XSLT 2.0 and self loathing.
Its ugly, slow, and I'm sorry for bringing it into existence.
- This was actually a huge pain to figure out which XSLT processor to use (xalan, saxon, xsltproc, etc)
- I ended up doing something gross. I used Apache Ant and Saxon9.
- To build with Saxon9 (XSLT 2.0) use
ant
Recommended - Can also be built with XALAN (XSLT 1.0) use
groovy build-xalan.groovy
but its runs terribly at greater than 128x128 size
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="perlin.xslt" type="text/xsl"?>
<perlin-noise>
<settings>
<sizeX>256</sizeX>
<sizeY>256</sizeY>
<seed>1234</seed>
<frequency>6</frequency>
<octaves>4</octaves>
</settings>
</perlin-noise>
Sample of perlin noise data that is generated before transforming to SVG.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
<rect x="1" y="1" width="1" height="1" fill="rgb(66,66,66)"/>
<rect x="2" y="1" width="1" height="1" fill="rgb(61,61,61)"/>
<rect x="3" y="1" width="1" height="1" fill="rgb(180,180,180)"/>
<rect x="4" y="1" width="1" height="1" fill="rgb(160,160,160)"/>
<!-- ... -->
</svg>
File Name | Description |
---|---|
hash.xslt | Pre-computed hashes for generating perlin noise |
map.xslt | Create map data structure of pixels |
noise.xslt | Generate 2D Perlin noise |
perlin-svg.xslt | Driver |
svg-utils.xslt | Utils for SVG generation and color value conversion |
utils.xslt | General utils |