Stained glass

A stained glass window designer. Each window is a random three-level hierarchy: panels, the pieces of glass in each panel, and some pieces cut further. FoamTree's gaps between the groups are the lead that holds the glass together, thicker between the panels.

Move the pointer over the window to light it up. Click a piece of glass to change its color, Shift+click to repaint its whole panel. The mouse wheel zooms in, Esc zooms out.

What's in the code?

• A groupContentDecorator that draws each piece instead of the default polygon: the glass color, a radial gradient for its thickness and a blurred noise pattern for its texture, all clipped to the polygon. The decorator doesn't draw the panels, so their background shows as the lead.
• groupBorderWidth and groupInsetWidth set the widths of the lead.
• The window shape is a polygon in the dataObject's boundary, so the pieces of glass at the edge follow it. The same polygon is a CSS clip-path for the lead and the light, and an SVG frame; onModelChanging switches them to a new shape once the previous window has faded out. On resize, the polygon follows the new aspect ratio and resizeTransform: "morph" moves the glass into it.
• A CSS radial gradient over the visualization with mix-blend-mode: soft-light for the light.
• onGroupClick repaints the piece and calls redraw(false, groups), with groupContentDecoratorTriggering set to onSurfaceDirty so that the decorator runs for the repainted pieces.
• A random number generator with a seed, stored in the link, so that each window can be recreated. get("imageData") with the light and the frame composed on a canvas for the PNG image.