/Resources/help/graph.html
HTML | 125 lines | 125 code | 0 blank | 0 comment | 0 complexity | cf358a4cce631b41a7a10edc165dcddf MD5 | raw file
Possible License(s): GPL-3.0
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta http-equiv="Content-Style-Type" content="text/css">
- <title></title>
- <meta name="Generator" content="Cocoa HTML Writer">
- <meta name="CocoaVersion" content="949.54">
- <style type="text/css">
- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 26.0px Helvetica}
- p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}
- p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
- p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Helvetica}
- span.s1 {text-decoration: underline}
- span.Apple-tab-span {white-space:pre}
- </style>
- </head>
- <body>
- <p class="p1">Graph</p>
- <p class="p2"><br></p>
- <p class="p3">The graph area is in the center of Cecilia's interface. It presents a serie of lines that can be modified with the graph tools. Those lines are linked to parameters of the Cecilia modules.</p>
- <p class="p2"><br></p>
- <center><img src="./images/graph.png" alt="Cecilia's Graph"></center>
- <p class="p2"><br></p><br>
- <p class="p3">The graph's horizontal axis is always the performance time. Vertical axis automatically reajusts to the selected line.</p>
- <p class="p2"><br></p>
- <p class="p3">Note that the Undo action is always available for graph manipulations using Command+Z or the through the Edition Menu</p>
- <p class="p2"><br></p><br>
- <p class="p4"><b><span class="s1">Line selector</span></b></p>
- <p class="p3">To work on a line, you must first select it. To do so, use the <b>line selector</b> in the upper left corner of the graph:</p>
- <p class="p2"><br></p>
- <img src="./images/graphMenu.png" alt="Cecilia's Graph Line Selectors">
- <p class="p2"><br></p>
- <p class="p3">By selecting a line in this popup menu, you can subsequently work with it in the graph. A graph line can also be selected by clicking on its associated slider label, if it exists.</p>
- <p class="p2"><br></p><br>
- <p class="p4"><b><span class="s1">Line Save/Load</span></b></p>
- <p class="p3">A selected line can be imported or exported using the following tools:</p>
- <p class="p2"><br></p>
- <center><img src="./images/graphSaveLoad.png" alt="Cecilia's Graph - Line Save/Load"></center>
- <p class="p2"><br></p>
- <p class="p3">- 1st icon (floppy disk) allows to save the line currently being worked on.</p>
- <p class="p3">- By clicking the 2nd icon (a folder), a previously saved* graph line can be loaded.</p>
- <p class="p3">- The 3rd icon reinitializes the line to it's default value.</p>
- <p class="p3">- The 4th icon (an eye) hides/shows the line in the graph region. Please note, hiding a line does not disable its functionality.</p>
- <p class="p2"><br></p>
- <p class="p3">* A line is saved with absolute values. This allows you to replace a line that has a different range of values.</p>
- <p class="p2"><span class="s1"></span><br></p>
- <p class="p4"><b><span class="s1">Line</span></b></p>
- <p class="p3">A graph line is a two dimensional representation of a time variant value. It shows the value of the widget (Y-axis) in function of the performance time (X-axis). In other words, the line shows the evolution of a parameter through performance duration.</p>
- <p class="p2"><br></p>
- <center><img src="./images/graphLine.png" alt="Cecilia's Graph Line"></center>
- <p class="p2"><br></p>
- <p class="p3">A line is scaled to the total duration of a performance. If you modify the performance duration, the lines will be<span class="Apple-converted-space"> </span>compressed or expanded to match it.<span class="Apple-converted-space"> </span></p>
- <p class="p2"><br></p>
- <p class="p3">A graph line is made out of two elements: points and line segments. Points are the element that the user can control. Line segments are automatically reajusted to connect points. Line segments can be straight of curved using the <b>arrow tool</b>.</p>
- <p class="p2"><span class="s1"></span><br></p>
- <p class="p2"><span class="s1"></span><br></p>
- <p class="p4"><b><span class="s1">Graph Tools</span></b></p>
- <p class="p3">A selected line can be modified with the mouse using one of the four graph tools:</p>
- <p class="p2"><br></p>
- <center><img src="./images/graphTools.png" alt="Cecilia's Graph Tools"></center>
- <p class="p2"><br></p>
- <p class="p3">The <b>arrow tool</b> allows the manipulation of line points:</p>
- <p class="p3">1) A point can be moved by clicking and dragging it.</p>
- <p class="p3">2) A new point can be created by double-clicking anywhere in the graph region</p>
- <p class="p3">3) To delete a point, CTRL + click OR right click on it. One or many points can be selected and erased with the DELETE key.</p>
- <p class="p3">4) To select a single point (for further manipulation), click on it once</p>
- <p class="p3">5) To select multiple points, SHIFT + click on any points. You can also click in an empty region and drag to create a selection region (marquis). All points in this region will be selected.</p>
- <p class="p3">6) To move a selection, click and drag any of the points selected</p>
- <p class="p2"><br></p>
- <p class="p3">When the <b>arrow tool </b>is over the selected line, this line turns black. Double-clicking on it will alternate between two types of point connections. First type is line segments, second type is smooth curves. Click and dragging a blackened line allows you to vertically move the whole line</p>
- <p class="p2"><br></p>
- <p class="p3">The <b>pen tool</b> allows you to draw line points:</p>
- <p class="p3">1) To draw a single point, click in the graph area where a point is desired.</p>
- <p class="p3">2) To draw multiple points, click and drag the <b>pen tool</b>. Please note, the pen tool overwrites points. Also, the number of points drawn depends on the speed of the movement.</p>
- <p class="p2"><br></p>
- <p class="p3">The <b>magnifier tool</b> allows to zoom on line points (and thus have more precision):</p>
- <p class="p3">1) To zoom in with the <b>magnifier tool</b>, click and drag over the desired region. The region created by the click-drag action defines the new view of that that area.</p>
- <p class="p3">2) To reset the zoom level, hit the ESCAPE key.</p>
- <p class="p2"><br></p>
- <p class="p3">The <b>hand tool</b> allows moving around in a zoomed-in graph:</p>
- <p class="p3">In a zoomed-in graph,<span class="Apple-converted-space"> </span></p>
- <p class="p3">1) click and drag to move around.</p>
- <p class="p3">2) click on a point to set it at the origin of the graph view.</p>
- <p class="p2"><br></p>
- <p class="p4"><b><span class="s1">Line generators</span></b></p>
- <p class="p3">Cecilia's graph also include a series of generators to create, modify and randomize a selected line. When choosing one of the generators, a frame opens to set the generator values. If <i>Apply</i> is pushed, the selected line will be modified. When hitting the <i>Close</i> button, the frame closes without modifying the selected line.</p>
- <p class="p2"><br></p>
- <center><img src="./images/graphGenerators.png" alt="Cecilia's Graph Line Generators"></center>
- <p class="p2"><br></p>
- <img src="./images/graphStochGeneratorsIcon.png" alt="Cecilia's Graph Line - Stochastic Generator Icon">
- <p class="p3"> The <b>stochastic generator</b> creates lines using various random distributions:</p>
- <p class="p3">1) Select the random distribution (browse the web to see the characteristics for each distribution)</p>
- <p class="p3">2) Select the interpolation. Linear will connect random points with line segments. Sample hold will create instant transitions between random values.</p>
- <p class="p3">3) Determine how many points are desired using the <i>Points</i> slider</p>
- <p class="p3">4) Determine the minimum and maximum values of the random distribution using the <i>Min</i> and <i>Max</i> sliders. Note that min and max values will be rescaled to match the Y-axis scale of the graph.</p>
- <p class="p3">5) Some random distributions need additions variables. When available, specify them with the <i>x1</i> and <i>x2</i> sliders.</p>
- <p class="p2"><br></p>
- <center><img src="./images/graphStochGenerator.png" alt="Cecilia's Graph Line - Stochastic Generator"></center>
- <p class="p2"><br></p>
- <img src="./images/graphWaveformGeneratorIcon.png" alt="Cecilia's Graph Line - Waveform Generator Icon">
- <p class="p3">The <b>waveform generator</b> creates lines with predefined shapes:</p>
- <p class="p3">1) Select the shape between <i>Sine</i>, <i>Square</i> and <i>Sawtooth</i></p>
- <p class="p3">2) The <i>Points</i> slider determines the number of points that will shape the line</p>
- <p class="p3">3) The <i>Amp</i> slider determines the amplitude of the shape, 1 being the full range of the Y-axis.</p>
- <p class="p3">4) The <i>Freq</i> slider sets the number of time a shape is repeated over the X-axis of the graph.</p>
- <p class="p3">5) The <i>Phase</i> slider sets the the starting point in the shape.</p>
- <p class="p3">6) When the shape is set to <i>Square</i>, the <i>Width</i> slider sets the time ratio of each alternating values. For example, when the <i>Width</i> slider is set to 0.25, the first state occupies 25% of the whole wave form.</p>
- <p class="p2"><br></p>
- <center><img src="./images/graphWaveformGenerator.png" alt="Cecilia's Graph Line - Waveform Generator"></center>
- <p class="p2"><br></p>
- <img src="./images/graphFunctionProcessorIcon.png" alt="Cecilia's Graph Line - Function Processor Icon">
- <p class="p3">The <b>function processor</b> modifies the selected line in various ways:</p>
- <p class="p3">1) Select the processor to apply to the selected line. <br>
- <p class="p3">2) <i>Scatter</i> moves the points around randomly within an independant X (<i>Scatt X</i> slider) and Y (<i>Scatt Y</i> slider) range. <br></p>
- <p class="p3">3) <i>Jitter</i> creates a new line approximated from your original line. Number of points in that line is set with the <i>Points</i> slider. Jitter in X is set using the <i>Jitt X</i> slider and in Y using the <i>Jitt Y</i> slider.<br></p>
- <p class="p3">4) <i>Comp/Expand</i> function is used to compress or expand the range of an existing line. <i>Comp X</i> slider changes the ratio of time between each points. The range of values can the modified using the ratio of the <i>Comp Y</i> slider. A line can also be moved horizontally with the <i>Offset X</i> slider and vertically with the <i>Offset Y</i> slider.</p>
- <p class="p2"><br></p>
- <center><img src="./images/graphFunctionProcessor.png" alt="Cecilia's Graph Line - Function Processor"></center>
- <p class="p2"><br></p>
- <p class="p3"><br></p>
- <p class="p3"><br></p>
- <center><p class="p3">Return to <a href="./usingCecilia.html">Using Cecilia</a> section</p></center>
- </body>
- </html>