CCode for Artists - Miles DeCoster

Support for Java is waning on the Web so here we redo the modified colorwheel example using Processing JS. It is the same Processing source file used in the Java applet version, but rendered to the page via JavaScript and an HTML canvas element.


Here is the Processing sketch:


 /**
 * Subtractive Color Wheel 
 * by Ira Greenberg. 
 * Tint routine modified by Miles DeCoster
 * 
 * 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.
 *
 * Updated 10 January 2013.
 */

int segs = 12;
int steps = 6;
float rotAdjust = TWO_PI / segs / 2;
float radius;
float segWidth;
float interval = TWO_PI / segs;


void setup() {
  size(200, 200);
  background(127);
  smooth();
  ellipseMode(RADIUS);
  noStroke();
  // make the diameter 90% of the sketch area
  radius = min(width, height) * 0.45;
  segWidth = radius / steps;
  
  drawTintWheel();
}


void drawTintWheel() {
  for (int j = 0; j < steps; j++) {
    color[] cols = { 
      color(255, 255, ((255/(steps-1))*j)), 
      color(255, ((170)+(170/steps)*j), 255/steps*j), 
      color(255, ((127)+(127/steps)*j), (255/steps)*j), 
      color(255, ((102)+(102/(steps-2))*j), (255/steps)*j), 
      
      color(255, (255/steps)*j, ((255)/steps)*j), 
      color(255, (255/steps)*j, ((127)+(127/steps)*j)), 
      color(255, (255/steps)*j, 255),
      color(((127)+(127/steps)*j), (255/steps)*j, 255), 
      
      color(((255)/steps)*j, (255/steps)*j, 255), 
      color((255/steps)*j, 255, ((102)+(102/steps)*j)), 
       color((255/(steps))*j, 255, (255/(steps))*j),
      color(((127)+(127/steps)*j),  255, (255/steps)*j)
    };
    for (int i = 0; i < segs; i++) {
      fill(cols[i]);
      arc(width/2, height/2, radius, radius, 
          interval*i+rotAdjust, interval*(i+1)+rotAdjust);
    }
    radius -= segWidth;
  }
}