Help/GUI/GUI-Tools/Gradient.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   5 <meta http-equiv="Content-Style-Type" content="text/css">
   6 <title></title>
   7 <meta name="Generator" content="Cocoa HTML Writer">
   8 <meta name="CocoaVersion" content="824.48">
   9 <style type="text/css">
  10 p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
  11 p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}
  12 p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #0011ed}
  13 p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Helvetica}
  14 p.p5 {margin: 0.0px 0.0px 0.0px 57.0px; text-indent: -57.0px; font: 9.0px Monaco; min-height: 12.0px}
  15 p.p6 {margin: 0.0px 0.0px 0.0px 57.0px; text-indent: -57.0px; font: 12.0px Helvetica}
  16 p.p7 {margin: 0.0px 0.0px 0.0px 57.0px; text-indent: -57.0px; font: 12.0px Helvetica; min-height: 14.0px}
  17 p.p8 {margin: 0.0px 0.0px 0.0px 85.0px; text-indent: -85.0px; font: 12.0px Helvetica}
  18 p.p9 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Helvetica; min-height: 17.0px}
  19 p.p10 {margin: 0.0px 0.0px 0.0px 57.0px; text-indent: -57.0px; font: 14.0px Helvetica}
  20 p.p11 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; min-height: 12.0px}
  21 p.p12 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; color: #aa190e}
  22 p.p13 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco}
  23 p.p14 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; color: #bb0e03}
  24 p.p15 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; color: #bf0000}
  25 p.p16 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; color: #0000bf}
  26 span.s1 {font: 18.0px Helvetica}
  27 span.s2 {color: #0043df}
  28 span.s3 {color: #000000}
  29 span.s4 {text-decoration: underline}
  30 span.s5 {color: #001fb8}
  31 span.s6 {color: #316f16}
  32 span.s7 {color: #000ebe}
  33 span.s8 {color: #167209}
  34 span.s9 {color: #0000bf}
  35 span.Apple-tab-span {white-space:pre}
  36 </style>
  37 </head>
  38 <body>
  39 <p class="p1"><span class="s1"><b>Gradient<span class="Apple-tab-span"> </span><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span></b></span><b>a linear color fade between two colors</b></p>
  40 <p class="p2"><br></p>
  41 <p class="p1"><b>Inherits from: </b><a href="../../Core/Object.html"><span class="s2"><b>Object</b></span></a></p>
  42 <p class="p2"><br></p>
  43 <p class="p3"><span class="s3"><b>See also:</b> <a href="Color.html"><span class="s4">Color</span></a>, <a href="HiliteGradient.html"><span class="s4">HiliteGradient</span></a></span></p>
  44 <p class="p2"><br></p>
  45 <p class="p4"><b>Creation / Class Methods</b></p>
  46 <p class="p5"><br></p>
  47 <p class="p6"><b><span class="Apple-tab-span">  </span>*new (color1, color2, direction, steps)</b></p>
  48 <p class="p7"><b><span class="Apple-tab-span">  </span></b></p>
  49 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span><b>color1 </b>- An instance of Color.</p>
  50 <p class="p8"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span><b>color2 </b>- An instance of Color.</p>
  51 <p class="p8"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span><b>direction </b>- \h or \v for horizontal and vertical respectively. Default value is \h.</p>
  52 <p class="p8"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span><b>steps </b>- The resolution of the gradient. Default value is 64.</p>
  53 <p class="p9"><b></b><br></p>
  54 <p class="p4"><b>Instance Methods</b></p>
  55 <p class="p5"><br></p>
  56 <p class="p6"><b><span class="Apple-tab-span">  </span>at(pos)</b></p>
  57 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>Retrieve the colour at position <b>pos</b>, typically a value between zero and one.</p>
  58 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>at(0) is color1, and at(1) is color2.</p>
  59 <p class="p7"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span></p>
  60 <p class="p7"><br></p>
  61 <p class="p10"><b>Examples</b></p>
  62 <p class="p11"><br></p>
  63 <p class="p12">// basic usage</p>
  64 <p class="p13">(</p>
  65 <p class="p13">w = <span class="s5">Window</span>.new.front;</p>
  66 <p class="p13">w.view.background = <span class="s5">Gradient</span>(<span class="s5">Color</span>.yellow,<span class="s5">Color</span>.white);</p>
  67 <p class="p13">)</p>
  68 <p class="p11"><br></p>
  69 <p class="p12">// change direction and resolution</p>
  70 <p class="p13">(</p>
  71 <p class="p13">w = <span class="s5">Window</span>.new.front;</p>
  72 <p class="p13">w.view.background = <span class="s5">Gradient</span>(<span class="s5">Color</span>.red,<span class="s5">Color</span>.white,<span class="s6">\v</span>, 5);</p>
  73 <p class="p13">)</p>
  74 <p class="p11"><br></p>
  75 <p class="p14">// almost unnoticeable variations can be pleasant</p>
  76 <p class="p13">(</p>
  77 <p class="p13">w = <span class="s7">Window</span>.new.front;</p>
  78 <p class="p13">v = <span class="s7">CompositeView</span>(w, <span class="s7">Rect</span>(50,50,300,300));</p>
  79 <p class="p13">c = <span class="s7">Color</span>.rand;</p>
  80 <p class="p13">d = c.vary(0.15);</p>
  81 <p class="p13">v.background = <span class="s7">Gradient</span>(c, d, <span class="s8">\v</span>);</p>
  82 <p class="p13">[c, d].postln</p>
  83 <p class="p13">)</p>
  84 <p class="p11"><br></p>
  85 <p class="p13">(</p>
  86 <p class="p13"><span class="s7">var</span> w, k, c, d, e, c1, c2, f, g;</p>
  87 <p class="p13">w = <span class="s7">Window</span>.new.front;</p>
  88 <p class="p13">k = <span class="s7">Slider2D</span>(w, <span class="s7">Rect</span>(50,50,300,300));</p>
  89 <p class="p13">f = {</p>
  90 <p class="p13"><span class="Apple-tab-span">    </span>c = <span class="s7">Color</span>.rand;</p>
  91 <p class="p13"><span class="Apple-tab-span">    </span>d = c.vary(0.5);</p>
  92 <p class="p13"><span class="Apple-tab-span">    </span>e = d.vary(0.5);</p>
  93 <p class="p13">};</p>
  94 <p class="p13">g = {<span class="Apple-converted-space"> </span></p>
  95 <p class="p13"><span class="Apple-tab-span">    </span>c1 = d.hueBlend(e, k.y).round(0.01);<span class="Apple-converted-space"> </span></p>
  96 <p class="p13"><span class="Apple-tab-span">    </span>c2 = c.hueBlend(e, k.x).round(0.01);<span class="Apple-converted-space"> </span></p>
  97 <p class="p13"><span class="Apple-tab-span">    </span>k.background = <span class="s7">Gradient</span>(c1, c2, <span class="s8">\v</span>)<span class="Apple-converted-space"> </span></p>
  98 <p class="p13">};</p>
  99 <p class="p13">f.value; g.value;</p>
 100 <p class="p13">k.action = g;</p>
 101 <p class="p13">k.mouseUpAction = { [c1, c2].postln };</p>
 102 <p class="p14"><span class="s3">k.keyDownAction = f; // hit any key for new color</p>
 103 <p class="p13">)</p>
 104 <p class="p11"><br></p>
 105 <p class="p15">// an example using gradient indirectly to update window colour</p>
 106 <p class="p13">(</p>
 107 <p class="p13">w=<span class="s9">Window</span>.new.front;</p>
 108 <p class="p13">g = <span class="s9">Gradient</span>(<span class="s9">Color</span>.red,<span class="s9">Color</span>.green);</p>
 109 <p class="p16">Task{</span></p>
 110 <p class="p13"><span class="Apple-tab-span">    </span>(0, 0.01 .. 1).do{<span class="s9">|pos|</span></p>
 111 <p class="p13"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span>w.view.background = g.at(pos);</p>
 112 <p class="p13"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span>0.01.wait;</p>
 113 <p class="p13"><span class="Apple-tab-span">    </span>};</p>
 114 <p class="p13">}.play(<span class="s9">AppClock</span>)</p>
 115 <p class="p13">)</p>
 116 <p class="p11"><br></p>
 117 </body>
 118 </html>