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) _

talk show tell print

#javascript-processing-example-basic-color-colorwheel.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>ColorWheel</h2>
  
  <p>by Ira Greenberg. 
  
  The primaries are red, yellow, and blue. The
  secondaries are green, purple, and orange. The 
  tertiaries are  yellow-orange, red-orange, red-purple, 
  blue-purple, blue-green, and yellow-green.
  
  Create a shade or tint of the 
  subtractive color wheel using
  SHADE or TINT parameters.</p>
  
  <p><a href="http://processing.org/learning/basics/colorwheel.html"><b>Original Processing.org Example:</b> ColorWheel</a><br>
  <script type="application/processing">
  int segs = 12;
  int steps = 6;
  float rotAdjust = radians(360.0/segs/2.0);
  float radius = 95.0;
  float segWidth = radius/steps;
  float interval = TWO_PI/segs;
  int SHADE = 0;
  int TINT = 1;
  
  void setup(){
    size(200, 200);
    background(127);
    smooth();
    ellipseMode(CENTER_RADIUS);
    noStroke();
   // you can substitue TINT for SHADE argument
   createWheel(width/2, height/2, SHADE);
  }
  
  void createWheel(int x, int y, int valueShift){
    if (valueShift == SHADE){
      for (int j=0; j<steps; j++){
        color[]cols = { 
          color(255-(255/steps)*j, 255-(255/steps)*j, 0), 
          color(255-(255/steps)*j, (255/1.5)-((255/1.5)/steps)*j, 0), 
          color(255-(255/steps)*j, (255/2)-((255/2)/steps)*j, 0), 
          color(255-(255/steps)*j, (255/2.5)-((255/2.5)/steps)*j, 0), 
          color(255-(255/steps)*j, 0, 0), 
          color(255-(255/steps)*j, 0, (255/2)-((255/2)/steps)*j), 
          color(255-(255/steps)*j, 0, 255-(255/steps)*j), 
          color((255/2)-((255/2)/steps)*j, 0, 255-(255/steps)*j), 
          color(0, 0, 255-(255/steps)*j),
          color(0, 255-(255/steps)*j, (255/2.5)-((255/2.5)/steps)*j), 
          color(0, 255-(255/steps)*j, 0), 
          color((255/2)-((255/2)/steps)*j, 255-(255/steps)*j, 0) };
        for (int i=0; i< segs; i++){
          fill(cols[i]);
          arc(x, y, radius, radius, interval*i+rotAdjust, interval*(i+1)+rotAdjust);
        }
        radius -= segWidth;
      }
    } else  if (valueShift == TINT){
      for (int j=0; j<steps; j++){
        color[]cols = { 
          color((255/steps)*j, (255/steps)*j, 0), 
          color((255/steps)*j, ((255/1.5)/steps)*j, 0), 
          color((255/steps)*j, ((255/2)/steps)*j, 0), 
          color((255/steps)*j, ((255/2.5)/steps)*j, 0), 
          color((255/steps)*j, 0, 0), 
          color((255/steps)*j, 0, ((255/2)/steps)*j), 
          color((255/steps)*j, 0, (255/steps)*j), 
          color(((255/2)/steps)*j, 0, (255/steps)*j), 
          color(0, 0, (255/steps)*j),
          color(0, (255/steps)*j, ((255/2.5)/steps)*j), 
          color(0, (255/steps)*j, 0), 
          color(((255/2)/steps)*j, (255/steps)*j, 0) };
        for (int i=0; i< segs; i++){
          fill(cols[i]);
          arc(x, y, radius, radius, interval*i+rotAdjust, interval*(i+1)+rotAdjust);
        }
        radius -= segWidth;
      }
    } 
  }
  </script><canvas width="200" height="200"></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 segs = 12;
  int steps = 6;
  float rotAdjust = radians(360.0/segs/2.0);
  float radius = 95.0;
  float segWidth = radius/steps;
  float interval = TWO_PI/segs;
  int SHADE = 0;
  int TINT = 1;
  
  void setup(){
    size(200, 200);
    background(127);
    smooth();
    ellipseMode(CENTER_RADIUS);
    noStroke();
   // you can substitue TINT for SHADE argument
   createWheel(width/2, height/2, SHADE);
  }
  
  void createWheel(int x, int y, int valueShift){
    if (valueShift == SHADE){
      for (int j=0; j&lt;steps; j++){
        color[]cols = { 
          color(255-(255/steps)*j, 255-(255/steps)*j, 0), 
          color(255-(255/steps)*j, (255/1.5)-((255/1.5)/steps)*j, 0), 
          color(255-(255/steps)*j, (255/2)-((255/2)/steps)*j, 0), 
          color(255-(255/steps)*j, (255/2.5)-((255/2.5)/steps)*j, 0), 
          color(255-(255/steps)*j, 0, 0), 
          color(255-(255/steps)*j, 0, (255/2)-((255/2)/steps)*j), 
          color(255-(255/steps)*j, 0, 255-(255/steps)*j), 
          color((255/2)-((255/2)/steps)*j, 0, 255-(255/steps)*j), 
          color(0, 0, 255-(255/steps)*j),
          color(0, 255-(255/steps)*j, (255/2.5)-((255/2.5)/steps)*j), 
          color(0, 255-(255/steps)*j, 0), 
          color((255/2)-((255/2)/steps)*j, 255-(255/steps)*j, 0) };
        for (int i=0; i&lt; segs; i++){
          fill(cols[i]);
          arc(x, y, radius, radius, interval*i+rotAdjust, interval*(i+1)+rotAdjust);
        }
        radius -= segWidth;
      }
    } else  if (valueShift == TINT){
      for (int j=0; j&lt;steps; j++){
        color[]cols = { 
          color((255/steps)*j, (255/steps)*j, 0), 
          color((255/steps)*j, ((255/1.5)/steps)*j, 0), 
          color((255/steps)*j, ((255/2)/steps)*j, 0), 
          color((255/steps)*j, ((255/2.5)/steps)*j, 0), 
          color((255/steps)*j, 0, 0), 
          color((255/steps)*j, 0, ((255/2)/steps)*j), 
          color((255/steps)*j, 0, (255/steps)*j), 
          color(((255/2)/steps)*j, 0, (255/steps)*j), 
          color(0, 0, (255/steps)*j),
          color(0, (255/steps)*j, ((255/2.5)/steps)*j), 
          color(0, (255/steps)*j, 0), 
          color(((255/2)/steps)*j, (255/steps)*j, 0) };
        for (int i=0; i&lt; segs; i++){
          fill(cols[i]);
          arc(x, y, radius, radius, interval*i+rotAdjust, interval*(i+1)+rotAdjust);
        }
        radius -= segWidth;
      }
    } 
  }</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) _

(C) Æliens 20/2/2008

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.