Houdini Node Shape Converter

Have you seen Bastian J. Schiffer’s Tutorial on Creating Custom Node Shapes for Houdini 16?

Using different Node Shapes in large Houdini networks gives you the ability to identify certain components of the complex structure when viewing them as a whole or from a far zoom position. I was intrigued by the idea of custom Node Shapes and was thinking that the workflow could be enhanced by actually going outside of Houdini and using a Vector design program like Illustrator or Affinity Designer and some Python!

Houdini NodeShape Converter

This form allows you to upload an SVG file that you can export from your Vector design program and convert it to a Houdini Node Shape JSON file. Note that JavaScript must be enabled. The source code of this Python application can be found on GitHub.

Examples


Parameters

  • SVG File: Select the SVG File you exported from your Vector design program.
  • Name (optional): The name of the Node Shape. This name will be placed in the output JSON file. All Node Shapes loaded in Houdini must have a unique name. If there are two with the same name, one of them will not be loaded.
  • Input Resolution (optional): Usually the converter will figure out the size of your Node Shape automatically and scale it to fit Houdini’s Node Shape size. If you get strange results, try to enter the size of your SVG canvas in pixels here.

It is important that the SVG export preserves layer names (Illustrator and Affinity Designer do) and the layers must follow a strict naming scheme. For example, this is the output of the Affinity Designer “for web” SVG Export of the Beer shape.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 534 534" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
  <path id="outline" d="M344.498,393.703l0,58.22c0,10.109 -2.472,10.585 -10.586,10.585c-8.114,0 -170.809,0 -179.953,0c-9.143,0 -10.585,0.062 -10.585,-10.585c0,-10.648 0,-227.588 0,-227.588c0,0 -37.975,-13.752 -26.464,-52.927c5.997,-20.409 21.171,-21.171 21.171,-21.171c0,0 -2.169,-27.663 21.171,-42.342c23.34,-14.679 52.927,0 52.927,0c0,0 7.47,-36.04 52.928,-37.049c49.904,-1.108 58.22,42.342 58.22,42.342c0,0 8.632,-3.172 31.756,10.585c23.124,13.758 23.423,47.528 21.171,63.513c-4.25,30.165 -31.756,42.342 -31.756,42.342l0,10.585l58.22,0l15.878,15.879l0,121.732l-15.878,15.879l-58.22,0Zm32.659,-37.049l0,-79.391l-32.659,0l0,79.394l32.659,-0.003Z" style="fill:#bebebe;"/>
  <path id="flag0" d="M254.521,71.786l0,154.667c-3.992,1.765 -8.454,2.94 -13.304,3.003c-18.962,0.247 -29.038,-10.414 -29.038,-10.414l0,127.026c0,0 -0.797,10.811 -21.171,10.586c-12.326,-0.137 -15.878,-10.586 -15.878,-10.586l0,-121.733l-30.28,0l-0.06,0.037l-1.416,-0.037c0,0 -37.975,-13.752 -26.464,-52.927c5.997,-20.409 21.171,-21.171 21.171,-21.171c0,0 -2.169,-27.663 21.171,-42.342c23.34,-14.679 52.927,0 52.927,0c0,0 6.278,-30.287 42.342,-36.109Z" style="fill:#a0f38b;"/>
  <path id="flag3" d="M254.521,71.786c3.277,-0.529 6.8,-0.856 10.586,-0.94c49.904,-1.108 58.22,42.342 58.22,42.342c0,0 8.632,-3.172 31.756,10.585c23.124,13.758 23.423,47.528 21.171,63.513c-4.117,29.221 -30.057,41.562 -31.677,42.306l-0.035,-0.042l-0.044,0.078c0,0 -8.458,4.023 -31.757,0c-26.135,-4.513 -37.049,-21.171 -37.049,-21.171c0,0 -8.038,12.191 -21.171,17.996l0,-154.667Z" style="fill:#0039a2;"/>
  <path id="flag2" d="M344.498,240.213l58.22,0l15.878,15.879l0,121.732l-15.878,15.879l-58.22,0l0,-37.046l32.659,-0.003l0,-79.391l-32.659,0l0,-37.05" style="fill:#e67b2c;"/>
  <path id="flag1" d="M344.498,393.703l0,58.22c0,10.109 -2.472,10.585 -10.586,10.585c-8.114,0 -170.809,0 -179.953,0c-9.143,0 -10.585,0.062 -10.585,-10.585l0,-58.22l201.124,0Z" style="fill:#d00c0c;"/>
  <path id="inputs" d="M58.333,125c0,0 27.505,-104.167 196.188,-104.167c168.684,0 203.812,104.167 203.812,104.167" style="fill:none;stroke:#000;stroke-width:4.17px;"/>
  <path id="outputs" d="M54.167,508.333l408.333,0" style="fill:none;stroke:#000;stroke-width:4.17px;"/>
  <rect id="icon" x="225.813" y="263.605" width="106.706" height="106.706" style="fill:#aed00c;fill-opacity:0.572464;"/>
</svg>

Note that “icon” needs to be a <rect/> element and all other components must be <path/> elements in the exported SVG file.

Affinity Designer layers:

To install the Node Shape after converting it, put the JSON file in your Houdini application folder under houdini/config/NodeShapes and restart Houdini. If you don’t see the shape in the node editor, please Report an Issue and attach your input SVG and output JSON file.

Discussion

Please share any useful or interesting Node Shapes with us in the comments below. You can also comment if you have any questions regarding this post.


Update 16:50 CEST – Fixed an issue with Microsoft Edge that prevented you from downloading the resulting JSON file.

comments powered by Disqus