PageRenderTime 52ms CodeModel.GetById 13ms RepoModel.GetById 1ms app.codeStats 0ms

/Resources/help/graph.html

http://cecilia4.googlecode.com/
HTML | 125 lines | 125 code | 0 blank | 0 comment | 0 complexity | cf358a4cce631b41a7a10edc165dcddf MD5 | raw file
Possible License(s): GPL-3.0 
    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5. 

  5.   <meta http-equiv="Content-Style-Type" content="text/css">
    6. 

  6.   <title></title>
    7. 

  7.   <meta name="Generator" content="Cocoa HTML Writer">
    8. 

  8.   <meta name="CocoaVersion" content="949.54">
    9. 

  9.   <style type="text/css">
    10. 

  10.     p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 26.0px Helvetica}
    11. 

  11.     p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}
    12. 

  12.     p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
    13. 

  13. 	p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Helvetica}
    14. 

  14.     span.s1 {text-decoration: underline}
    15. 

  15. 	span.Apple-tab-span {white-space:pre}
    16. 

  16.   </style>
    17. 

  17. </head>
    18. 

  18. <body>
    19. 

  19. <p class="p1">Graph</p>
    20. 

  20. <p class="p2"><br></p>
    21. 

  21. <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>
    22. 

  22. <p class="p2"><br></p>
    23. 

  23. <center><img src="./images/graph.png" alt="Cecilia's Graph"></center>
    24. 

  24. <p class="p2"><br></p><br>
    25. 

  25. <p class="p3">The graph's horizontal axis is always the performance time. Vertical axis automatically reajusts to the selected line.</p>
    26. 

  26. <p class="p2"><br></p>
    27. 

  27. <p class="p3">Note that the Undo action is always available for graph manipulations using Command+Z or the through the Edition Menu</p>
    28. 

  28. <p class="p2"><br></p><br>
    29. 

  29. <p class="p4"><b><span class="s1">Line selector</span></b></p>
    30. 

  30. <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>
    31. 

  31. <p class="p2"><br></p>
    32. 

  32. <img src="./images/graphMenu.png" alt="Cecilia's Graph Line Selectors">
    33. 

  33. <p class="p2"><br></p>
    34. 

  34. <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>
    35. 

  35. <p class="p2"><br></p><br>
    36. 

  36. <p class="p4"><b><span class="s1">Line Save/Load</span></b></p>
    37. 

  37. <p class="p3">A selected line can be imported or exported using the following tools:</p>
    38. 

  38. <p class="p2"><br></p>
    39. 

  39. <center><img src="./images/graphSaveLoad.png" alt="Cecilia's Graph - Line Save/Load"></center>
    40. 

  40. <p class="p2"><br></p>
    41. 

  41. <p class="p3">- 1st icon (floppy disk) allows to save the line currently being worked on.</p>
    42. 

  42. <p class="p3">- By clicking the 2nd icon (a folder), a previously saved* graph line can be loaded.</p>
    43. 

  43. <p class="p3">- The 3rd icon reinitializes the line to it's default value.</p>
    44. 

  44. <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>
    45. 

  45. <p class="p2"><br></p>
    46. 

  46. <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>
    47. 

  47. <p class="p2"><span class="s1"></span><br></p>
    48. 

  48. <p class="p4"><b><span class="s1">Line</span></b></p>
    49. 

  49. <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>
    50. 

  50. <p class="p2"><br></p>
    51. 

  51. <center><img src="./images/graphLine.png" alt="Cecilia's Graph Line"></center>
    52. 

  52. <p class="p2"><br></p>
    53. 

  53. <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>
    54. 

  54. <p class="p2"><br></p>
    55. 

  55. <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>
    56. 

  56. <p class="p2"><span class="s1"></span><br></p>
    57. 

  57. <p class="p2"><span class="s1"></span><br></p>
    58. 

  58. <p class="p4"><b><span class="s1">Graph Tools</span></b></p>
    59. 

  59. <p class="p3">A selected line can be modified with the mouse using one of the four graph tools:</p>
    60. 

  60. <p class="p2"><br></p>
    61. 

  61. <center><img src="./images/graphTools.png" alt="Cecilia's Graph Tools"></center>
    62. 

  62. <p class="p2"><br></p>
    63. 

  63. <p class="p3">The <b>arrow tool</b> allows the manipulation of line points:</p>
    64. 

  64. <p class="p3">1) A point can be moved by clicking and dragging it.</p>
    65. 

  65. <p class="p3">2) A new point can be created by double-clicking anywhere in the graph region</p>
    66. 

  66. <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>
    67. 

  67. <p class="p3">4) To select a single point (for further manipulation), click on it once</p>
    68. 

  68. <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>
    69. 

  69. <p class="p3">6) To move a selection, click and drag any of the points selected</p>
    70. 

  70. <p class="p2"><br></p>
    71. 

  71. <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>
    72. 

  72. <p class="p2"><br></p>
    73. 

  73. <p class="p3">The <b>pen tool</b> allows you to draw line points:</p>
    74. 

  74. <p class="p3">1) To draw a single point, click in the graph area where a point is desired.</p>
    75. 

  75. <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>
    76. 

  76. <p class="p2"><br></p>
    77. 

  77. <p class="p3">The <b>magnifier tool</b> allows to zoom on line points (and thus have more precision):</p>
    78. 

  78. <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>
    79. 

  79. <p class="p3">2) To reset the zoom level, hit the ESCAPE key.</p>
    80. 

  80. <p class="p2"><br></p>
    81. 

  81. <p class="p3">The <b>hand tool</b> allows moving around in a zoomed-in graph:</p>
    82. 

  82. <p class="p3">In a zoomed-in graph,<span class="Apple-converted-space"> </span></p>
    83. 

  83. <p class="p3">1) click and drag to move around.</p>
    84. 

  84. <p class="p3">2) click on a point to set it at the origin of the graph view.</p>
    85. 

  85. <p class="p2"><br></p>
    86. 

  86. <p class="p4"><b><span class="s1">Line generators</span></b></p>
    87. 

  87. <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>
    88. 

  88. <p class="p2"><br></p>
    89. 

  89. <center><img src="./images/graphGenerators.png" alt="Cecilia's Graph Line Generators"></center>
    90. 

  90. <p class="p2"><br></p>
    91. 

  91. <img src="./images/graphStochGeneratorsIcon.png" alt="Cecilia's Graph Line - Stochastic Generator Icon">
    92. 

  92. <p class="p3">  The <b>stochastic generator</b> creates lines using various random distributions:</p>
    93. 

  93. <p class="p3">1) Select the random distribution (browse the web to see the characteristics for each distribution)</p>
    94. 

  94. <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>
    95. 

  95. <p class="p3">3) Determine how many points are desired using the <i>Points</i> slider</p>
    96. 

  96. <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>
    97. 

  97. <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>
    98. 

  98. <p class="p2"><br></p>
    99. 

  99. <center><img src="./images/graphStochGenerator.png" alt="Cecilia's Graph Line - Stochastic Generator"></center>
    100. 

  100. <p class="p2"><br></p>
    101. 

  101. <img src="./images/graphWaveformGeneratorIcon.png" alt="Cecilia's Graph Line - Waveform Generator Icon">
    102. 

  102. <p class="p3">The <b>waveform generator</b> creates lines with predefined shapes:</p>
    103. 

  103. <p class="p3">1) Select the shape between <i>Sine</i>, <i>Square</i> and <i>Sawtooth</i></p>
    104. 

  104. <p class="p3">2) The <i>Points</i> slider determines the number of points that will shape the line</p>
    105. 

  105. <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>
    106. 

  106. <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>
    107. 

  107. <p class="p3">5) The <i>Phase</i> slider sets the the starting point in the shape.</p>
    108. 

  108. <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>
    109. 

  109. <p class="p2"><br></p>
    110. 

  110. <center><img src="./images/graphWaveformGenerator.png" alt="Cecilia's Graph Line - Waveform Generator"></center>
    111. 

  111. <p class="p2"><br></p>
    112. 

  112. <img src="./images/graphFunctionProcessorIcon.png" alt="Cecilia's Graph Line - Function Processor Icon">
    113. 

  113. <p class="p3">The <b>function processor</b> modifies the selected line in various ways:</p>
    114. 

  114. <p class="p3">1) Select the processor to apply to the selected line. <br>
    115. 

  115. <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>
    116. 

  116. <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>
    117. 

  117. <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>
    118. 

  118. <p class="p2"><br></p>
    119. 

  119. <center><img src="./images/graphFunctionProcessor.png" alt="Cecilia's Graph Line - Function Processor"></center>
    120. 

  120. <p class="p2"><br></p>
    121. 

  121. <p class="p3"><br></p>
    122. 

  122. <p class="p3"><br></p>
    123. 

  123. <center><p class="p3">Return to <a href="./usingCecilia.html">Using Cecilia</a> section</p></center>
    124. 

  124. </body>
    125. 

  125. </html>
    126. 

  126.