Tutorial
There is one layer created by default. It is in the list of layers on the left-hand side — the list of layers takes up the lower half of the left-hand side. Click on the layer to select it. It will turn light yellow.
If you have found it and clicked it, two lines and some circles will appear on the canvas surface on the right-hand side. (I'm assuming that nothing happened to the applet after it has been initialised — refresh the page if that's not the case.)
Now, the white line (with black dots) is the path line: this is the path that will be followed when the layer is rendered. The black line (with white dots) is the profile curve: it represents the opacity profile that will be rendered along the normal as we follow the path. That is going to require some more explanation.
Both the white and the black curves are in the image space, but only the path (white) curve maps directly to the image space as it appears. The profile (black) curve could have been put into another viewport, but we have put it over the image to make things more compact. The width (horizontal size) of the image and the profile curve are similar, but the height of the profile curve in the image will map to the opacity: wherever the black curve touches the bottom of the image, the layer will be transparent, wherever it touches the top of the image, it will be fully opaque.
Example time. Hold down Control and drag on the inner circle of the middle vertex of the black curve. The curves are Bézier curves. They all behave in similar ways. The middle vertex of the profile curve is shown in light blue, because it will map directly over the path. Hence it is also constrained such that it can only move vertically. Now (don't hold down Control) drag on the middle vertex itself and lift it about half-way.
Now right-click somewhere on the image. You should see a rendered view of the layer appear.
You should now see something like this:
Right-clicking on the image renders the current layer only, for preview.
Now click on the duplicate button (right-most button at the lower end of the control panel). The layer will be duplicated. Drag the control points of the white curve to shape a nice curve path. Change the profile to be very narrow by dragging on the inner circles of each of the black vertices in the corners. Right-click to see the preview.
Now click the Render button. The whole stack of layers will be rendered. You should see something like this:
From here, we will briefly describe the meaning of the controls.
The colour selection tool: click on the hue, the saturation and the brightness (value) bars to adjust the selected colour, which is displayed in the large rectangle. Click on any of the colour fields in the program to transfer the colour there. One field is the background colour field, at the top-left: this background colour will show through any translucent areas in the image. Each layer also has its own colour.t
The Render button renders the whole stack of layers.
The Cache button works when there is a layer selected. It creates a new layer, above the selected layer, and renders the stack, up to that layer, into the cache layer. If there are many layers, the whole stack could take quite a while to render, hence we can use cache layers, which are just static images, to speed things up when we are working at the top of a large stack. Note that cache layers do not update automatically if any layer underneath them changes. Use the Update button on the layer to manually update it.
The width and height can be set using the text boxes. It may be faster to work with a smaller image, and increase the size when rendering the final image. The curves will scale with the dimensions (but the aspect ratio is important).
The Up, Down, Minus, Plus and Duplicate buttons are all for manipulating layers.
On each layer, there is an Orthogonality button, which modifies how the profile will be rendered relative to the path. This can be switched by clicking on it. When set to orthogonal (the default), the profile will be rendered as the normal of the path. When set to parallel (the other option), the profile will change along the path and will be constant along the normals to it.
Also on each layer, there is a Composition mode button, which is either a plus or a multiplication sign. This controls how the layer is combined with the layers underneath. When combined additively (the default), basic alpha-composition is used. When combined multiplicatively, the alpha (transparency) values are multiplied, while the colours are adjusted by taking the luminocity from the lower layer and the chroma from the layer above. It is best to experiment to get a feel for how to use this.
Finally, on the canvas. Dragging moves it around, while clicking the middle mouse button centers it in the viewport. Right-clicking renders a preview of the current layer only.
Dragging a control point with Control down causes the points to be adjusted symmetrically. Using Shift while dragging a control point releases the smoothness constraint on the vertex.
Control-dragging a vertex creates a new vertex at the same place, so that a longer, more elaborate, path, could be constructed.
Most importantly, the Clipboard button copies the image currently in view onto the system clipboard, so you could paste it in a graphics application, such as Paint. (Note: on some systems, this only works with the WebStart version.)
From here, ShiningEtherFX is best learnt by experimentation.
