Gradient from 17 colors to 255 colors

Dear friends I have this code and the result in the following image. It's a simple gradient from black to white.

 //linear gradient
 void setup() {
  size(766, 200);
}

void draw() {
long k=0;
  for (int i = 0; i <= 256; i++) {

k=(long)Math.pow(i,2);
if(k<=256){
    fill(k);
    rect(i*23, 10, 23, 180);
   noStroke();
}
  }
}

Screenshot from

I want to add the missing colors betwen every column. The result is only 17 colors. The result I want is from 0 to 255 colors.

Tagged:

Answers

  • edited November 2013

    Hmm... This reminds me of some old posts of yours: =:)

    // forum.processing.org/one/topic/array-for-0-to-255-colors
    // forum.processing.org/one/topic/greyscale-problem
    
    size(650, 200);
    noLoop();
    background(#FF0000);
    
    final short MARGIN = 15, WIDE = 20, HUES = 0400;
    
    final int cond = width  - MARGIN*2;
    final int high = height - MARGIN*2;
    
    final int rects = (cond + MARGIN) / WIDE;
    println(rects);
    
    final int gradient = HUES/rects;
    println(gradient);
    
    for (int grey = HUES, pos = MARGIN; pos < cond; pos += WIDE) {
      fill(grey -= gradient);
      rect(pos, MARGIN, WIDE, high);
      print(grey + " - ");
    }
    
  • Answer ✓

    Maybe like this? Not sure if rect()s are important to you:

    void setup() {
      size(766, 200);
    }
    
    void draw() {
      for (int i = 0 ; i < width; i++) {
        stroke(map(i, 0, width, 0, 255));
        line(i, 0, i, height);
      }
    }
    
  • edited November 2013 Answer ✓

    A different approach still using rect() too: :ar!

    // forum.processing.org/one/topic/array-for-0-to-255-colors
    // forum.processing.org/one/topic/greyscale-problem
    
    // forum.processing.org/two/discussion/1487/
    // gradient-from-17-colors-to-255-colors
    
    final int NUM = 20, HUES = 0400 - 1;
    
    size(766, 200);
    noLoop();
    //noStroke();
    rectMode(CORNER);
    clear();
    
    final float wide = (float) width/NUM;
    
    for (int bar = 0; bar != NUM; ++bar) {
      fill(map(bar, 0, NUM, 0, HUES));
      rect(bar*wide, 0, wide, height);
    }
    
  • Yes I am the same person ... :D The codes you both sent me are much better than mine with better results. However my professor asked me to add the missing colors in the existing code. >-)

  • _vk_vk
    edited November 2013 Answer ✓

    I think this would be the smaller change to existing code... But looks stupid to me...

    line 10 k=(long)Math.pow(i,1); : P

    line 13 rect(i*3, 10, 3, 180);

Sign In or Register to comment.