topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

#javascript-processing-example-basic-color-hue.htm / htm


  <!DOCTYPE html>
  <html><head>
  <script src="javascript-processing-example-processing.js"></script>
  <script src="javascript-processing-example-init.js"></script>
  <link rel="stylesheet" href="javascript-processing-example-style.css">
  </head><body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
  <h2>Hue</h2>
  
  <p>Hue is the color reflected from or transmitted through an object 
  and is typically referred to as the name of the color (red, blue, yellow, etc.) 
  Move the cursor vertically over each bar to alter its hue.</p>
  
  <p><a href="http://processing.org/learning/basics/hue.html"><b>Original Processing.org Example:</b> Hue</a><br>
  <script type="application/processing">
  int barWidth = 5;
  int[] hue;
  
  void setup() 
  {
    size(400, 400);
    colorMode(HSB, 360, height, height);  
    hue = new int[width/barWidth];
    noStroke();
  }
  
  void draw() 
  {
    int j = 0;
    for (int i=0; i<=(width-barWidth); i+=barWidth) {  
      if ((mouseX > i) && (mouseX < i+barWidth)) {
        hue[j] = mouseY;
      }
      fill(hue[j], height/1.2, height/1.2);
      rect(i, 0, barWidth, height);  
      j++;
    }
  }
  </script><canvas width="400" height="400"></canvas></p>
  <div style="overflow: hidden; height: 0px; width: 0px;"></div>
  
  <pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
  // unless otherwise stated.</b>
  int barWidth = 5;
  int[] hue;
  
  void setup() 
  {
    size(400, 400);
    colorMode(HSB, 360, height, height);  
    hue = new int[width/barWidth];
    noStroke();
  }
  
  void draw() 
  {
    int j = 0;
    for (int i=0; i&lt;=(width-barWidth); i+=barWidth) {  
      if ((mouseX &gt; i) &amp;&amp; (mouseX &lt; i+barWidth)) {
        hue[j] = mouseY;
      }
      fill(hue[j], height/1.2, height/1.2);
      rect(i, 0, barWidth, height);  
      j++;
    }
  }</pre>
  </body></html>

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.