Naiad theme for H16 (Circular nodes - one shape to rule them all)

   24138   35   5
User Avatar
Member
4703 posts
Joined: Feb. 2012
Offline
Hey,

I have created an all round shape style for all nodes inside the new network editor and have been using it since the H16 Alpha. Along with me some other Houdini TDs at work quickly embraced this way of working in H16 exclusively.

Due to a few people asking about it, I decided to release it for all to use.








Pros:
  • Consistent Houdini theme for all nodes regardless of node type
  • Easier on the eyes
  • Removes the node clutter, noise when working with the new network editor
  • Naiad-like if you are used to that before

Cons:
  • None so far


Installation:
To use it simply put the attached file OPcustomize under your Houdini user folder (Win: CUsers/username/My Documents\houdini16.0) and restart Houdini.



Enjoy,
- The circle guy

Attachments:
OPcustomize (184 bytes)

Senior FX TD @ Industrial Light & Magic
Get to the NEXT level in Houdini & VEX with Pragmatic VEX! [www.pragmatic-vfx.com]

youtube.com/@pragmaticvfx | patreon.com/animatrix | pragmaticvfx.gumroad.com
User Avatar
Member
83 posts
Joined: Feb. 2016
Offline
Looks really nice.

Where do I install this on a Mac ? Also, any suggestions for creating custom shapes for nodes ?
User Avatar
Member
640 posts
Joined: July 2013
Offline
I dont get it…

You trade visual indicator of node purpose for a 30-40 character text string?
Houdini Indie
Karma/Redshift 3D
User Avatar
Member
1535 posts
Joined: March 2020
Offline
ahh soo much better , thanks again!
HOD fx and lighting @ blackginger
https://vimeo.com/jasonslabber [vimeo.com]
User Avatar
Member
4703 posts
Joined: Feb. 2012
Offline
Daryl Dunlap
I dont get it…

You trade visual indicator of node purpose for a 30-40 character text string?

That's a strange comparison. Having a different shape for certain nodes doesn't help any more than the default node type name which i always keep as part of the node name.

I use long node names for HDAs, to be more descriptive. So not sure how the default node shapes will alleviate this.
Senior FX TD @ Industrial Light & Magic
Get to the NEXT level in Houdini & VEX with Pragmatic VEX! [www.pragmatic-vfx.com]

youtube.com/@pragmaticvfx | patreon.com/animatrix | pragmaticvfx.gumroad.com
User Avatar
Staff
4199 posts
Joined: Sept. 2007
Offline
nisachar
Looks really nice.

Where do I install this on a Mac ? Also, any suggestions for creating custom shapes for nodes ?

Copy into ~/Library/Preferences/houdini/16.0/
I'm o.d.d.
User Avatar
Member
2127 posts
Joined: Sept. 2015
Offline
That's a strange comparison. Having a different shape for certain nodes doesn't help any more than the default node type name which i always keep as part of the node name.

Actually it's not strange, we all have different preferences because we have different ‘personalities’ that respond differently to different cues.

For myself having different shapes for different nodes helps immensely in looking at my Network to remind myself of what's going on, better hold the concept of what I am doing, think about what else I want to do, and more quickly be able to make changes.

I even organize the shapes(nodes) into visual patterns, which reflects what I am doing in my scene, and the new feature Wire Dots helps me now make more easily.

Actually for me using descriptive names like you have is very disorienting and slow to work with.

I simply do not respond to words as good as I do with visual symbols like shapes.

The only time I like to use descriptive words is when I am coding, and in that case I have no choice but to use words. In that case descriptive use of words can help in reading the code when I re-visit it down the line to remind myself of what I was doing.

Actually if anything, although I like the new palette for preset node shapes, for myself, it would be even better if I could design custom shapes.

Then my Network would really “fly”.

But again, it's really personal preference in how we all like to work in our own individual way.
User Avatar
Member
4703 posts
Joined: Feb. 2012
Offline
Yes this style is not for everyone. If people prefer the default shapes more power to them.
Senior FX TD @ Industrial Light & Magic
Get to the NEXT level in Houdini & VEX with Pragmatic VEX! [www.pragmatic-vfx.com]

youtube.com/@pragmaticvfx | patreon.com/animatrix | pragmaticvfx.gumroad.com
User Avatar
Member
459 posts
Joined: Oct. 2011
Offline
Cool. Reminds me of Flame, kind of.

-b
http://www.racecar.no [www.racecar.no]
User Avatar
Member
682 posts
Joined: Sept. 2013
Offline
Hey, that's useful! Also if you replace every “circle” in the file by “rectangle” you almost get the old rectangular look back.
https://procegen.konstantinmagnus.de/ [procegen.konstantinmagnus.de]
User Avatar
Member
8041 posts
Joined: Sept. 2011
Offline
Thanks for the script, great way to troll people!
User Avatar
Member
2 posts
Joined: Nov. 2010
Offline
Great! I hate the default shape palette
User Avatar
Staff
4523 posts
Joined: July 2005
Offline
Konstantin Magnus
Hey, that's useful! Also if you replace every “circle” in the file by “rectangle” you almost get the old rectangular look back.

In the network editor under the “View” menu you can turn off “Show Custom Node Shapes” if you want the old look back. And if that still doesn't cut it, turn off the check box at “Edit->Preferences->Network Editor->Use Simplified Shape When Node Shapes Off”. And if that still doesn't cut it, you'll have to create your own node shape, and use it in the OPcustomize file provided in this thread.

See my next post about creating custom node shapes.
User Avatar
Staff
4523 posts
Joined: July 2005
Offline
We decided not to spend the time making a user friendly toolset for creating custom node shapes with H16. We knew there would be a lot of excitement about doing this, but for a variety of reasons we are not claiming to “officially” support custom node shapes (in other words if you read the rest of this thread, try it, and have trouble, don't contact support… it will have to be a “community effort” on this forum). So with those caveats, here's a description of the node shape file format I posted to the Houdini 16 alpha forum…

I'm sure you'll all figure it out eventually anyway, so I might as well save you some time. Here is the unofficial annotated guide to the Houdini node shape file format. The contents are the “squared.json” file from $HFS/houdini/config/NodeShapes. Any .json file you put in config/NodeShapes in your HOUDINI_PATH will be loaded as a shape. You may want to keep the “center” of your shape around (0.5, 0.15). It might be okay if you don't, but no promises. Similarly, you're on your own if you make really big or really small shapes.

{
  # The "name" is the value that you must set in the "NodeShape" user data
  # on a node to make it use this shape. Generally we match this "name" to
  # the JSON file name, but this is not required. If a duplicate name is found,
  # the one found last in the HOUDINI_PATH will "win".
  "name": "squared",
  # The outline of the actual node body.
  # Note that there is nothing that requires the flags to line up in any
  # way with the node body.
  # Anywhere you see "outline", there should be an array of two-value
  # arrays representing point positions.
  "outline": [
    [
      0,
      0.3
    ],
    [
      1,
      0.3
    ],
    [
      1,
      0
    ],
    [
      0,
      0
    ]
  ],
  # Simply polygon definitions for the flag indicators. The assignment of
  # specific flags (display, render, etc) to the generic "0", "1", "2" flag
  # slots is done by the files in $HH/config/NodeShapeFlags. This separation
  # allows the same node shape to be used in any node context.
  "flags": {
    "0": {
      # Note that there is nothing requiring these flag outlines to line up
      # with the node body outline (though in our default set of shapes we
      # have chosen to make them line up).
      "outline": [
        [
          0.1108,
          0
        ],
        [
          0,
          0
        ],
        [
          0,
          0.3
        ],
        [
          0.1492,
          0.3
        ]
      ]
    },
    "1": {
      "outline": [
        [
          0.2519,
          0
        ],
        [
          0.1108,
          0
        ],
        [
          0.1492,
          0.3
        ],
        [
          0.2894,
          0.3
        ]
      ]
    },
    "2": {
      "outline": [
        [
          0.8508,
          0
        ],
        [
          0.7108,
          0
        ],
        [
          0.7492,
          0.3
        ],
        [
          0.8892,
          0.3
        ]
      ]
    },
    "3": {
      "outline": [
        [
          1,
          0
        ],
        [
          0.8508,
          0
        ],
        [
          0.8892,
          0.3
        ],
        [
          1,
          0.3
        ]
      ]
    }
  },
  # The "inputs" and "outputs" arrays define paths. The connectors in and
  # out of the node are spaced even along this path (or the path itself is
  # drawn in the case of nodes like Merge).
  # Each entry in the path has three values. The first two values are the
  # position, the third value indicates the tangent direction for wires
  # (expressed as degrees counter-clockwise from 3 o'clock).
  # Points on this path shouldn't be placed too close together. There is
  # code to guard against this when loading the shape, but our default
  # shapes are all "well behaved" in this regard so the code to guard
  # against tightly packed points may not work perfectly. YMMV.
  "inputs": [
    [
      0.095,
      0.385,
      90
    ],
    [
      0.365,
      0.385,
      90
    ],
    [
      0.635,
      0.385,
      90
    ],
    [
      0.9051,
      0.385,
      90
    ]
  ],
  "outputs": [
    [
      0.095,
      -0.085,
      270
    ],
    [
      0.365,
      -0.085,
      270
    ],
    [
      0.635,
      -0.085,
      270
    ],
    [
      0.9051,
      -0.085,
      270
    ]
  ],
  # Two points for the lower left and upper right corners of where the node
  # icon should appear.
  "icon": [
    [
      0.38,
      0.03
    ],
    [
      0.62,
      0.27
    ]
  ]
}
User Avatar
Member
303 posts
Joined: Jan. 2013
Online
mtucker, can you tell me how to make the border have not selected nodes more visible? Now the color of the node can blend into the background, especially noticeable on the background other than the default color, because there is no border that would separate it. I learned a lot of options, but has not been able to achieve this result.
User Avatar
Staff
4523 posts
Joined: July 2005
Offline
I'm afraid there is no way to configure the drawing this way. The outline of an un-selected node is drawn using the node color.
User Avatar
Member
1755 posts
Joined: March 2014
Offline
Hey Marc,
I personally have no problem with the new node icons and the old one were also OK for me. I don't value UI esthetics a lot, I value its usability and clarity a lot more and on that note I have a quick question:
was there a particular reason to have the last selected node keep a yellow-ish border even though it's no longer selected? It sometimes misleads me into believing I have something selected in the scene.

edit: figured the answer to my question - the border shows the node for which the param. window is displayed.
Not the best visual cue IMO, but there are bigger fish…
Edited by anon_user_89151269 - Feb. 26, 2017 09:50:56
User Avatar
Member
4703 posts
Joined: Feb. 2012
Offline
mtucker
We decided not to spend the time making a user friendly toolset for creating custom node shapes with H16. We knew there would be a lot of excitement about doing this, but for a variety of reasons we are not claiming to “officially” support custom node shapes (in other words if you read the rest of this thread, try it, and have trouble, don't contact support… it will have to be a “community effort” on this forum). So with those caveats, here's a description of the node shape file format I posted to the Houdini 16 alpha forum…

I'm sure you'll all figure it out eventually anyway, so I might as well save you some time. Here is the unofficial annotated guide to the Houdini node shape file format. The contents are the “squared.json” file from $HFS/houdini/config/NodeShapes. Any .json file you put in config/NodeShapes in your HOUDINI_PATH will be loaded as a shape. You may want to keep the “center” of your shape around (0.5, 0.15). It might be okay if you don't, but no promises. Similarly, you're on your own if you make really big or really small shapes.

{
  # The "name" is the value that you must set in the "NodeShape" user data
  # on a node to make it use this shape. Generally we match this "name" to
  # the JSON file name, but this is not required. If a duplicate name is found,
  # the one found last in the HOUDINI_PATH will "win".
  "name": "squared",
  # The outline of the actual node body.
  # Note that there is nothing that requires the flags to line up in any
  # way with the node body.
  # Anywhere you see "outline", there should be an array of two-value
  # arrays representing point positions.
  "outline": [
    [
      0,
      0.3
    ],
    [
      1,
      0.3
    ],
    [
      1,
      0
    ],
    [
      0,
      0
    ]
  ],
  # Simply polygon definitions for the flag indicators. The assignment of
  # specific flags (display, render, etc) to the generic "0", "1", "2" flag
  # slots is done by the files in $HH/config/NodeShapeFlags. This separation
  # allows the same node shape to be used in any node context.
  "flags": {
    "0": {
      # Note that there is nothing requiring these flag outlines to line up
      # with the node body outline (though in our default set of shapes we
      # have chosen to make them line up).
      "outline": [
        [
          0.1108,
          0
        ],
        [
          0,
          0
        ],
        [
          0,
          0.3
        ],
        [
          0.1492,
          0.3
        ]
      ]
    },
    "1": {
      "outline": [
        [
          0.2519,
          0
        ],
        [
          0.1108,
          0
        ],
        [
          0.1492,
          0.3
        ],
        [
          0.2894,
          0.3
        ]
      ]
    },
    "2": {
      "outline": [
        [
          0.8508,
          0
        ],
        [
          0.7108,
          0
        ],
        [
          0.7492,
          0.3
        ],
        [
          0.8892,
          0.3
        ]
      ]
    },
    "3": {
      "outline": [
        [
          1,
          0
        ],
        [
          0.8508,
          0
        ],
        [
          0.8892,
          0.3
        ],
        [
          1,
          0.3
        ]
      ]
    }
  },
  # The "inputs" and "outputs" arrays define paths. The connectors in and
  # out of the node are spaced even along this path (or the path itself is
  # drawn in the case of nodes like Merge).
  # Each entry in the path has three values. The first two values are the
  # position, the third value indicates the tangent direction for wires
  # (expressed as degrees counter-clockwise from 3 o'clock).
  # Points on this path shouldn't be placed too close together. There is
  # code to guard against this when loading the shape, but our default
  # shapes are all "well behaved" in this regard so the code to guard
  # against tightly packed points may not work perfectly. YMMV.
  "inputs": [
    [
      0.095,
      0.385,
      90
    ],
    [
      0.365,
      0.385,
      90
    ],
    [
      0.635,
      0.385,
      90
    ],
    [
      0.9051,
      0.385,
      90
    ]
  ],
  "outputs": [
    [
      0.095,
      -0.085,
      270
    ],
    [
      0.365,
      -0.085,
      270
    ],
    [
      0.635,
      -0.085,
      270
    ],
    [
      0.9051,
      -0.085,
      270
    ]
  ],
  # Two points for the lower left and upper right corners of where the node
  # icon should appear.
  "icon": [
    [
      0.38,
      0.03
    ],
    [
      0.62,
      0.27
    ]
  ]
}

Would be nice to have a Python tool to automate this perhaps using a series of polylines in the viewport with specific names
Senior FX TD @ Industrial Light & Magic
Get to the NEXT level in Houdini & VEX with Pragmatic VEX! [www.pragmatic-vfx.com]

youtube.com/@pragmaticvfx | patreon.com/animatrix | pragmaticvfx.gumroad.com
User Avatar
Member
12652 posts
Joined: July 2005
Offline
This appeared elsewhere - I cannot take credit for it, except for lifting it shamelessly without the author's permission.

import json
def drawOutline( outline, vex_func_name ):
    vexcode = "void {}() {}\n".format(vex_func_name,'{')
    vexcode += '  int pr,pt;\n'
    vexcode += '  pr = addprim(0,"poly");\n'
    for p in outline:
        vt = " set( {}, {}, 0 )".format(*p)
        vexcode += "  pt = addpoint(0,{});\n".format(vt)
        vexcode += "  addvertex(0,pr,pt);\n"
    vexcode += "}\n"
    vexcode += "{}();\n\n".format(vex_func_name)
    return vexcode
import math
def drawLine( line, vex_func_name ):
    vexcode = "addattrib(0,\"point\",\"tangent\",{0,0,0});\n"
    vexcode += "void {}() {}\n".format(vex_func_name,'{')
    vexcode += '  int pr,pt;\n'
    vexcode += '  pr = addprim(0,"polyline");\n'
    for p in line:
        x,y,theta = p
        theta = hou.hmath.degToRad(theta)
        vt = " set( {}, {}, 0 )".format(x,y)
        vexcode += "  pt = addpoint(0,{});\n".format(vt)
        vexcode += "  setattrib(0,\"point\",\"tangent\",pt,-1, set( {},{},0 ) );\n".format(math.cos(theta),math.sin(theta))
        vexcode += "  addvertex(0,pr,pt);\n"
    vexcode += "}\n"
    vexcode += "{}();\n\n".format(vex_func_name)
    return vexcode
shapecode = hou.pwd().inputs()[0].parm('shape_json').eval()
shape = json.loads( shapecode )
outline = shape['outline']
code = drawOutline( outline, "outline" )
flags = shape['flags']
flagcode = ''
for flag in flags.keys():
    flagoutline = flags[flag]['outline']
    funcname = 'flag_{}'.format(flag)
    flagcode += drawOutline( flagoutline, funcname )
code += flagcode
code += drawLine(shape['inputs'],'inputs')
code += drawLine(shape['outputs'],'outputs')
return code
Jason Iversen, Technology Supervisor & FX Pipeline/R+D Lead @ Weta FX
also, http://www.odforce.net [www.odforce.net]
User Avatar
Staff
4523 posts
Joined: July 2005
Offline
McNistor
Hey Marc,
I personally have no problem with the new node icons and the old one were also OK for me. I don't value UI esthetics a lot, I value its usability and clarity a lot more and on that note I have a quick question:
was there a particular reason to have the last selected node keep a yellow-ish border even though it's no longer selected? It sometimes misleads me into believing I have something selected in the scene.

edit: figured the answer to my question - the border shows the node for which the param. window is displayed.
Not the best visual cue IMO, but there are bigger fish…

Yeah, that's the “current” node, which may or may not also be “selected”. Maybe just making the color more different from the “selected” color would be enough. In the old network editor I think “current” was white?
  • Quick Links