Parametric Model Applet: An experiment with interactive parametric modelling. This is an interactive applet so you can adjust sliders by clicking and dragging them with the left mouse button or using the middle and right buttons to pan or rotate the 3D view.


This applet is actually the first part of an article on Manipulation or Iteration (coming soon) that I am working on. It was also inspired by some of the examples in the newly added anar+ library for Processing. It is a fusion of object-oriented geometry and a parametric modelling engine which builds slider interfaces on the fly. I still can’t seem to get external libraries to work with my web applets and there is no source code to look at, so I wrote my own. My main aim in doing this was to experiment with dynamic slider generation and a parameter management system. Lots of work still to do though, but no more time left this weekend.

User Interface Improvements

This is the first version of my applets where I think the overall user interface is really coming together. This one finally handles keyboard focus pretty well, managing control groups within panels and reacting to a range of keyboard shortcuts (including the arrow and +/- keys to manipulate the view and to activate controls). Tooltips were included in most of my earlier applets, but here they work much better. I tweaked the look and feel a bit and have now got that looking a lot more consistent.

I have also worked a bit on panel transparency in order to better overlay 2D information on a 3D model. The obvious bit is the fading in and out as the mouse moves over it, but you may also notice that the panels are not just transparent. Using a little dynamic image manipulation, the non-hover transparency actually varies with the relatively brightness level of the model view beneath each panel. Thus, they are more defined where they do not obscure model detail and less so when they do. This isn’t too clear here, but can be seen much better in my Earth-Sun Relationship example.

On another note, I have always disliked how menus disappear when you select an item using the Arrow and Enter keys. With the mouse that’s fine, but a menu typically provides a lot of information about what options and keyboard shortcuts are available. Thus, you will notice in my recent applets that, when using the keyboard to navigate and invoke actions, the menu will stay up. With the mouse it will react as normal. Also, if the menu is active and you use one of the keyboards shortcuts, this will highlight the appropriate item to show you what just happened. This probably goes against a lot of style guides, but this approach works for me so I’m interested in any comments or feedback.

Display Options

You can use the OPTIONS button menu (F4) to change the main display settings. This menu lets you toggle overlay panels, manipulate model parameters and display simple instructions. You can also use it to generate random parameter values or select different views of the model.

When the Model Parameters panel is displayed, you can drag the sliders to update individual parameters and see the model update dynamically. The FACADE and TAPER tabs allow you to edit different groups of parameters and achieve different effects. You can also use the Random and Reset buttons located on the right of this panel to generate random parameter values or reset them to their original states.

The only real way to understand the an applet such as this and what each parameter does is to experiment, so please feel free to simply play about with it.



1 January, 2013 - 21:45yanouk-design

Hi, good, good work. I’m experimenting grasshopper since 3 months and i would like to know if you plan to work on a gate between GH and a plugin like this one (but with more general purpose).

4 February, 2011 - 16:40Jon G

This is really cool. To me this helps demonstrate the great disconnect between designers and reality, where the “random” button produces just as interesting a shape as your typical twisty tower from any of cooperate design world’s finest.

It will be nice when the Rhino/Grasshopper fad passes, or finds a useful application on the fabrication side of the industry. As an interesting Art or Economics study, one could compare the number of random twisty buildings designed professionally(including design fees) against the number built. Hey Chicago, you’ve been Punk’d.

30 November, 2010 - 06:42Taylor Zhang

Hi Andrew,

I am really interested by your prototypes. They are so amazing. I really love it.


Hi Andrew,

Your work looks fantastic! I really love your look and feel. If you want to look at the source of ANAR+, it’s here: You also have the javadoc:

For sliders, if you want to integrate this to your system, you may look at A Parameter is the place where you define boundaries of your slider (Max|Min). You may also have a look at I think you could extends that class and override draw().

12 April, 2010 - 13:10Dr. Andrew Marsh

Hi Guillaume,

Thanks for your kind words, and for pointing out the source code. I saw all the anar+ documentation but must have missed the websvn link (duh!). Your libraries look incredibly powerful and are a wonderful body of work - I will be looking through them with great relish.


7 July, 2010 - 17:52Arpan


This is excellent. In the design firm context, Rhino Grasshopper has been instrumental to this type of parametric form finding. An ideal next step would be an Ecotect plug-in that simulates and provides comparative results of design iterations.

Thoughts? Is this something already on its way?

13 September, 2010 - 06:21Dr. Andrew Marsh

Hi Arpan,

Unfortunately I don’t get to work on Ecotect much anymore. However, watch out for something interesting in this regard to appear on Autodesk labs in the near future. It probably won’t be exactly what you describe, but it might fill some of the gaps.


Click here to comment on this page.